Gyazzみたいなエディタ作りでReact.jsを学ぶ: TypeScript/Deno化
vite化
ちょっと機能を足してしまったけどDeno向けに書かれたものをviteで動くようにしてみたinajob.icon
Reactの既存の資産を使うにはTypeScript/Nodeがいいかなと
ViteのはBunもサポートしているのかーinajob.icon
DenoとBunの位置づけが気になる
強引なDeno推し(感謝
takker.icon
今Denoで書き換えてます
強引なDeno推しを受けているwinajob.icon
気にはなるけど、採用するかは考えさせてください
大量の型エラーが発生している。おそらくバグってる
Ref.currentにRef[]をつっこむという見たことない手段使っている
あ、過去にも似たような質問してた
なるべくロジックには手を加えず、型エラー中心に直します
できた！
draft PRしておきます
JSからTSに変えただけなので、Nodeに戻すこともできます
その場合はimport ... from "....ts(x)"の.ts(x)を全て消し、deps.ts,deno.jsonc,deno.lock,.vscode/settings.jsonを消し、package.json,tsconfig.json,.eslintrc.json,prettier.jsonを入れる
あー,Nodeに切り替えると、TSとlinterとformatterの設定が必要になるのか……めんどくさい～takker.icon
react-scriptsでこの辺まるっとやってもらえてた印象inajob.icon
もう古いのか、、
次はvite試してみるかな、、
[" import ... from "....ts(x)"の.ts(x)を全て消し]はどうやらいらなそう
またDeno側でNodeのように拡張子なしで書けるようになoptionが入ったらしい
--unstable-sloppy-importsを渡して実行
わーい、勉強しますinajob.icon
聞きたいこと
popupHandlers[popup.index].handler()が動作しない可能性がある
しかし条件に当てはまらないときは、selectを渡さないと実行時エラーを引き起こす
手元だと動くけど、型に厳密にやろうとするとエラーになる感じですかね？inajob.icon
なります。ただ実行エラーはおきないようですtakker.icon
select.selection === "" && candidate !== ""のときはpopupHandlersが{ name: string; hadler: () => void }[]に、そうでないときは{ name: string; handler: (select: TextFragment) => void }[]になる
勘違いしてた。そうでないときは{ name: string; handler: (select: TextFragment) => { target: { value: string; } } }[]になるtakker.icon
返り値がvoidなので型エラーになる
ただし、コード上は返り値があるかどうかのチェックを入れているので、実行時エラーは起きない
https://code2svg.vercel.app/svg/L225-229/https://raw.githubusercontent.com/takker99/simple-inline-editor/38a019a5024744c36b7aea771c3dc86608077263/components/TextareaWithMenu.tsx#.svg https://github.com/takker99/simple-inline-editor/blob/38a019a5024744c36b7aea771c3dc86608077263/components/TextareaWithMenu.tsx#L225-L229
handler()は返り値がないはずだが、L178で返り値を使っている が、引数なし関数の方と一貫してないな・・
引数なしのほうは返してませんねtakker.icon
上の話もあるしselectを渡して返り値で行の書き換えを指示する方法に統一するほうが良さそうな気がしてます
勘違いしてました。{ name: string; handler: (select: TextFragment) => Event | void }[]という想定だったんですねtakker.icon
これなら問題ない
targetを指定してEventを作るのは無理があるので、ここの型定義を工夫する必要あり
React.ChangeEventも{ target: { value: string; } }も受け取れるように設計し直す
これ以上は、このあたりのロジックが何をしようとしているのか理解しないと修正できなさそう
ロジック見て修正してみましたinajob.icon
props.setLine()の引数は{ prefix: string; selection: string; suffix: string; }のはずだが、stringを渡している箇所がある setSelectのことかな？setLineだとしたら例をどこか示してもらえると理解できるかもinajob.icon
URL貼りましたtakker.icon
ごめんなさい、ここは自分のreadingミスですtakker.icon
LineProps.setLineとTextareaWithMenu.setLineの型定義を勘違いしていた
そういえば環境のこと書いてなかった気がするtakker.icon
これが主流かどうかは不明です
要はJSさえなんとか作れればいいので、手法が無数にあります
分類すると
自力でJSビルド
HTML/JS/CSSを生成する&hot reloadサポート
DenoがJSXをサポートしているのでReactと親和性が高いですが、基本はどんなフレームワークとも組み合わせられます
React+SSR特化
勉強してみる
inajob.icon
takker.iconさんからのPRについて、今後の作業
動作の確認
なんか動いてそう
❓SourceMapが生成されてないのでconsole.logの出力がどこの物かわからない
deno.jsoncにsourceMapの設定ができるようだが、設定しても有効になっている様子が無い
bundled codeを見ればだいたいわかりますtakker.icon
(packupの場合)型を搾り取ったコードを順番に羅列しているだけなので、minifyしたコードより素直です minified codeでもformatすれば元のコードの構造とほぼ同じなので見当づきます
まぁ確かに・・inajob.icon
じっくり差分を見て感想を書く
TypeScriptをちゃんと読むのは初めてだと思う
そうなんだtakker.icon
inajob.iconさんがよく書くのはGoとかC++だっけ
最近はGoが多いけど、、人のコードを直したり、機能を足したりが多いのでなかなか体系的には学べていませんinajob.icon
よくない
こんな仕事ばかりやっていると1からコーディンする能力がどんどん下がっていく
下がるとそういう仕事が来なくなる・・
悪循環
フロントエンドをやっていた頃はJavaScriptをよく書いていました（結構昔なのでもう色々違っていますが・・）inajob.icon
Deno
deps.ts
ここに依存を寄せるのがDenoの1つのやり方らしい
TypeScript
拡張子はtsx, tsを使い分ける必要あり
tsのファイルの中にJSXを書くとビルドが失敗する
React.FC？
Reactの型定義をいい感じにするものらしい
仕組みはよくわからんが、使い方は見たらだいたいわかる
useForwardRefがなにか込み入っている
被せないと型エラーを解決できませんでしたtakker.icon
型をチェックしているIF文、nullを想定したプロパティアクセス
ifの条件でinstanceOfとかをAnd条件でつなげると、型推論してくれる
nullの可能性があるときにそのままプロパティにアクセスするのはNG
?. でアクセスする(オプションチェーン演算子)
非nullアサーション!
あんまりやりたくないtakker.icon
バグの元
React.ClipboardEventHandler<HTMLTextAreaElement>
イベントハンドラはこういう型になる
要素の種類も関係してくる
JavaScriptでのサンプルを見つけてきたときに、そのまま真似して書くだけでは済まないのがやや面倒
TypeScriptに書き換える代わりに、JavaScriptに//@ts-checkとJSDocを付けるだけでも同じ恩恵を得られますtakker.icon そのままweb browserでもうごかせますし、まずはこっちのほうが楽かも
❓こういうのは人間が気を遣って書くもの？ or 何か検出する手段がある？
自動で警告が出るはずですがtakker.icon
うーん、でも警告に関わる設定は上のどこにもないか
上を設定しても変化なさそうですinajob.icon
他でもifで事前にundefinedをチェックしている箇所の多くは手元で警告が出ない
const result: React.ReactNode = []; で良さそう
本当だ。なんでエラーでなかったんだろうtakker.icon
https://gyazo.com/ad246a247f56891452eff5e95b1c46e3
あからさまなanyなのに警告が現れない
makeLineの戻り値は推論されているので、それでエラーがでてない？
ならinajob.iconさんの環境で検出されている理由がわからない……
もしかしてtypescriptの拡張機能が有効になっていたりしませんか？
あとでみますinajob.icon
右下のバーにTypeScriptと出ているのでそうっぽい
ファイルタイプ識別表示の可能性もありますtakker.icon
バーにDenoと出ていればDenoの拡張機能のほうが有効になっている
Denoを有効にできてませんでした。上のsetting.jsonでいい感じになった予感
props.isFocusを監視対象に入れてお茶を濁す
useForwardRef()を噛ませただけですが、発火タイミングかわっちゃったかtakker.icon
その他
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffectで依存オブジェクトが無い事を強行する
それ無視しちゃだめな警告のような……takker.icon
あとで精査しよう、起動時に一回走れば良さそうな処理に見えるinajob.icon
その場合はuseEffect(() => {/* ... */}, [])を使ってくださいtakker.icon
と思ったけどこのコメントを消してもdeno task fmtはエラーや警告が出たりしないな
あ、自分のコードですでにこれを書いていたのか、勘違い・・inajob.icon
他のプロジェクトからの取り込みがいい感じにできるか確認（もともとの目的）
雑に import { App } from "../simple-inline-editor/components/App.tsx" とかしたら読み込めた！
これでいいかな・・
CSSは何かモジュール化？した方が良さそう
これはDenoとかTypeScriptの範疇ではないので後で考えよう
自分が良いものと感じたらマージする
取り込みがいい感じ、とかも観点だが、普通にTypeScriptにしたほうがメンテしやすいだろうという気がする
型がないと、引数に一体何が入ってきているのかわからなくなりますからねtakker.icon
手元でpullして少し編集したが、勉強になりそうだし、型があったほうがべんりそうだinajob.icon
一方でReact周りの型については（DOM周りの型と比べて）詳しくないので、始めはいろいろ躓きそう
型を気にしなければ動くのに、型パズルが謎でうまくビルドできないのはややストレス
React周りの型は自分もほとんど知りませんtakker.icon
hoverすると型がでてくるので、それを真似て書いています
https://gyazo.com/7a4bd9d3877c1829bf51122e5346c137
なるほど！inajob.icon
だいたいわかってきたので自分のブランチを作って作業していく
おお～いいかんじtakker.icon
eslintが動いていないなinajob.icon
setting.jsをちゃんと読んだ方が良い？
今はdenoをenableしているだけ
別にeslintにこだわりはないのだが・・denoにもlintがある？
ありますtakker.icon
lintは通常は何も設定しなくていいはずですが……
fmtはdefault formatterをdenoに変えてください
なるほど、いままでReact.js独自のlintのルールみたいなのがあったのだけど、相当するものはあるかな、、inajob.icon
名前からこの辺かな？
eslint-plugin-react
eslint-plugin-react-hooks
eslintはそのへんですねtakker.icon
useCallbackとかで依存を書き忘れてる時とかに教えてくれたりしてた
残念ながらDenoにはありませんtakker.icon
lintにpluginシステムが存在しない
Denoのreact frameworkを使っている人はどうlintしているんだろう
react対応要望
pluginシステムを検討しているみたい
ぐぬぬinajob.icon
ここにこだわりがある場合はNodeとTypeScriptを使う感じになりそう
ちょっと表面を調べただけなので、地雷があるかは不明
自分は依存配列を手作業で入れてますtakker.icon
見逃しは……まああるかも
普通に知らないミスを教えてくれてたなぁという思い出があるinajob.icon
ループで作るHTML要素ににkeyをつけ忘れたり
やっぱりlintほしいですよねtakker.icon
めちゃいいですinajob.icon
設計面でいうと、useRef()を大量に使っている点が気になりますtakker.icon ほうメモる.iconSummer498.icon
ロジック追わないと必要な処理なのかは明言できませんが、そのあたりで直感センサーが警戒反応を示しています
使用箇所をメモしてみるinajob.icon
日本語入力中かを保持するフラグ(Boolean)
これをuseStateにすると、再レンダリングされてしまって都合が悪かった
これはDOM操作ではない
改善できそうtakker.icon
ポップアップ要素
行選択の状況が変わった時に、ポップアップの位置を調節する（DOM操作） 各行のTextarea
フォーカスが移動したときに、今フォーカスのあるTextareaにfocusを与える（DOM操作）
もともとuseStateを使っていたが、何か微妙だったので今の形にした
a. useStateを使う場合、自分の行にフォーカスが当たってるかを示すpropをLine以下に持たせることになる
1つの行だけがtrueになるようにロジックで保証する
b. 今のやり方だとEditorが選択されてる行にfocusを実行する
どっちが自然かなと思って悩んでいる
aならforwardRefの配列もなくなるように思う
配列になっていて一見不気味だと思う
不気味だったtakker.icon
各行のDIV
マウスドラッグを検知したときに、DIV全体を選択する（DOM操作）
ここうまいことDIVのreact要素に通知出して選択させられそうtakker.icon
ポップアップ要素
文字選択の状況が変わったときに、ポップアップの位置を調整する（DOM操作）