最近仕事でReactでの機能開発をやることがあって格闘していたところに社の同僚氏が貸してくれた。ありがたい。 サーバーサイドマンがReactを使えるようになるために、という語り口なので今のいいねにとってめちゃくちゃタイムリーな内容だった。
ずっとサーバーサイドのMVCフレームワークと戯れていたから視点とか思想が全然違うことに驚いた。 Vue.jsを使うにせよSvelteを使うにせよReactを使うにせよ、それらが生まれたフロントエンドの文脈から紹介してくれるのでその辺が疎い人は一気に歴史を辿れてお得。 またReactを使う上で必要なコンポーネント志向のメンタルモデルが仕入れられてよかった。
読書中のメモ
- react-jsx知らなかったなあ
- え！！！！！JSXって文字列じゃなくていいのか！！！！！
- コード中のXMLをオブジェクトに変換してくれるのか。へ〜。知らなんだ
- でもそっか、Vue.jsもvueファイルに急に
<template>とか出てくるし一緒か - jsxの方が上から下に読んでいけばいいから目線上下しなくていい分Vue.jsのテンプレートより可読性がいいのかもなあ
- へー！JSXってHTMLっぽく見えるからブラウザに依存するのかな？って思うけど、結局jsのオブジェクトに変換されるからレンダリング先はなんでもいいんだ
- それでモバイルアプリとかでもできるんだなあ
- あー、じゃあJSXコンポーネントはレンダラーを意識せず書いちゃっていいのか コンポーネント呼び側でReact-DOMなりを使ってレンダリングする感じかな
- なるほど
const elems = (<><div>a</div><div>b</div></>) - gulpってタスクランナーだったのか
- CommonJSとES Modulesってなんだ
- あ、requireとimportってそういう違いがあったんだ
- あー、あくまで「コンポーネントが何を提供するか」という世界観なのでデータを起点に考えるのとは視点が違うんだな
- ViteとDenoがごっちゃになる
- PrettierってCSSとかも整形してくれるんだ
- jQueryってブラウザごとの互換性の為に使われてたのか
- 物心ついた頃にはES2015があったからよくわかってなかったな
- あ〜、確かにコンポーネントベースだとGraphQLのような柔軟なデータソースの方がいいよね〜
- そういえばVue.jsはViewModelがあったなあ
- SolidってReact派生だったのか
- 結構歴史的な文脈から追っていかないとわからないがち
- あー、確かに コンポーネントがReactElementを吐き出すのも仮想DOMがブラウザに表示されるのもどっちもレンダリングって言うなあ
- 前者と後者はタイミングが違うから「レンダリングのタイミングで〜」とか言うと混乱するから気をつけないといけないな
- あー、interfaceか型エイリアスかってそういうことか 前にあったなあ
- interfaceで定義すると拡張できちゃうから関数的じゃなくなるってことか
- あ〜〜propsとstateごっちゃにしてたなあ。 別のpropsを渡して仮想DOMを再描画するのと、仮想DOM中のコンポーネント内のstateが変わって再描画されるのはちょっと違うのか…
- レンダリングを待たずに複数回stateを更新したい時はちゃんと更新関数をセット関数に渡してあげないといけないのか
- わ〜〜〜出たuseEffect
- useEffectの第二引数に[]を渡すの、忘れそう〜
- へー！コンポーネントのライフサイクルごとに処理を書くやり方からuseEffectの依存配列を監視するやり方に変わったのか
