Gyazzみたいなエディタ作りでReact.jsを学ぶ
from 2022/11/05
Gyazzみたいなエディタ作りでReact.jsを学ぶ
reactの習作を作り始めた
Gyazzみたいなエディタになる予定
なるべくシンプルに作る
react-scripts でビルドなしでreactを使えようにした
gh-pages で簡単にGitHub pages用のブランチを作成
古い書き方やおかしなとところがあれば教えてください
「あとやることリスト」へのリンク→Gyazzみたいなエディタ作りでReact.jsを学ぶ#63662a436eb40600007877ae
そしてVite化した
実装中の機能
他のプロジェクトで組み込んでみる
他のReact.jsを使ったプログラムから、このプロジェクトで作成したAppとかEditorを利用したい
ここが分からなくて詰まっている
このプロジェクトはreact-scriptsで何やらうまいことやってReact.jsを動かしているが、これを他のリポジトリから扱う方法がよくわからない
例えば
npm run build (呼び出されるのは react-scripts build ) とかすると何やらJavaScriptのファイルが生成されるが、これをどうにかすれば良い？react-scriptsもこの流れで使うべきではないものになっているのかな・・
ここで紹介されているケースだったか？
> This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder.
まだ状況が整理できていない・・、うまくいったり行かなかったり、要因がわからない
時は流れて色々実装が出来てきた・・（裏でやってた）
引用記法
キーワード補完
日本語入力との相性問題修正
ポップアップメニューの機能をプラグインっぽくする
インターフェースを決めねば
ポップアップメニューから何をやりたい？
行選択
選択部分の文字列を変更する
選択部分を上下に移動させる
選択部分を切り出す
Editorの外で行の内容のstateを作成してEditorにそのstateと編集用の関数を渡せば、Editorの外から行を操作できる
これでいいのかな？
文字列選択
選択部分の文字列を変更する
編集後文字を返すような関数を用意する
選択部分から検索する
検索はEditorの内部を知らなくてもできそう
ブロック記法をプラグインっぽくする
インライン記法をプラグインっぽくする
まだインライン記法がないような・・？
URLを自動でリンクにする仕組みがある
あとやることリスト
https://github.com/inajob/simple-inline-editor/commit/bb44f88a7071b9acdafafc3ab353198b2d0173ba が汚いのでrevertする
行引用記法
ブラケットの入力補完
レスポンシブに対応する
他のプロジェクトで組み込んでみる
観客席
既存のエディタコンポーネントはいろいろあるのですが、コードリーディングしても全然わからんので、作ってみる方向で学習中です
textareaのすごいやつみたいなイメージ
テキストエディタの文字を打ち込んで表示する部分を指している（と思う）
テキストボックス的なやつか
ですね、単純なtextareaだと書式をつけたり文字列補完機能をつけたりできないので、そのあたりに独自で作るモチベーションがあります
実装方法がいろいろあります
よくCodeMirrorが使われていますね
scrapboxは1文字ごとに<span>で囲む方法で独自実装している
エディタづくりというと何か違う印象があるな、、
今やっているのはブラウザ上で動くエディタコンポーネントの実装
一般的にエディタづくりというとブラウザ上ではなく、普通のアプリとして作ることをさす事が多そう
どっちも固有の難しさがありそう
観客席ができてる。なんかワロタ
既存のエディタコンポーネントで、WYSIWYMをインラインで書式付きで編集できる物を知らないのだが、流石にどこかにある気がする、誰か知らない？
デモがないだけでカスタマイズすればできるのかな？
色をつけるのはよくあるけどフォントサイズを変えたりするのは仕組み上できないものが多いように見える
いきなり見つけた、これこれ
ここまで書いてあると意外とContentEditableの案もできそうに見える
SimpleMDEの派生
今使うならこれっぽい
Reactのファイルサイズでかいなー
bundleされたmain.jsをformatし直したら、9000行以上に膨れ上がった
Preactだとfmtして400行くらいにしかならないから、どれだけ大きいかがわかる
数千行も使って一体Reactは裏で何をしているんだ……
Svelteに書き換えるのって大変ですかね？ こっちの方が小さくなりそう
言語が変わるので大変そうに思います
reactはTS(X)だけど、vueやsvelteはtsではない
専用のcompilerを通す必要がある
jsxはtypescriptも大抵のcompilerも対応している
まあNodeで開発する場合は、どのframeworkを使うにしろいろいろ設定が必要だから大して違いがないかも
DenoだとJSXなら設定なしに実行できる
esbuild、あと確かrollupも設定なしにJSXをtranspileできたはず
履歴をScrapboxにメモしながら進めるのは少し時間を空けて作業を再開するときにとても便利
あとやることリスト も便利
皆さんはこういう作業は同じ感じでやってるのかな？ TIPSとかあれば知りたい
inlineで似たようなことをやってた
こっちと違って人に見せるつもりで書いてないのでより意味不明なメモになっている
こうなれるようがんばろう
これは実はリファクタリングなので、試行錯誤は終わってるというのが大きいですね
もっとぐちゃぐちゃの実装がすでにあって、そこからコードを流用しています
そうなんですね～
ぐちゃぐちゃの実装のログのリファクタリングも要るのかもしれない
振り返り活動
この時点の自分は何がわかってなくて、何が惜しかったのか
react のことはちょっとしか触れてないからよう知らんけど、
ありがたいです
他のリポジトリから扱う方法に関しては
まず、外部化したいライブラリだけ別プロジェクト扱いにする
つまり、今そのライブラリを使ってるプロジェクトからも後述する外部プロジェクトからの import をする
可能であればライブラリプロジェクトは CJS と ESM の両方でビルドする
片方のみしか無理なら ESM の方でビルドしたほうが安定する印象がある
自分が何使ってるかを意識していたらこんな心配は要らんかもしらんけど→→→
外部プロジェクトからの import 方法
npm link で外部プロジェクトからライブラリプロジェクトに対してシンボリックリンクを張れるdevDependencies に直接追加するという手もあるらしい
URLがあればなんでもimportできる
cjsのことを考えなくていい
ESMだけ使っていればここはそんなに差がないと思ふ
cjs onlyでesmで読み込めない地雷packageがあったりする
今回は大丈夫そう
（あとでこの辺の発言は別ページにまとめよう）
なにかの自分の知らない機能があるらしく、推論を妨げている
例えばlib側に別の試行錯誤でビルドしたjsが存在すると、これを勝手にロードしているっぽい
package.jsonの"main"に書いてあるのだけ見てるんじゃないのか
一度"main"に書いていないものを使い始めると、どこかで何かがキャッシュしているのか、その後色々変更しても、意図しないファイルを参照し続けている？
おせっかいをしているのはreact-scriptsの中のなにか？
リセット方法を知らないと試行錯誤できない
ライブラリ側のpackage.jsonを意図的に変更して、また戻すとリセットできてる気がする
アプリケーション側がライブラリ側のpackage.jsonの何かをキャッシュしている？
このキャッシュを直接消す方法がわからないので、ライブラリ側のpackage.jsonを変更することでこれがリセットできる（と思う）
React/Node.jsに詳しい人に応援頼みたい