流暢なReact

第11章. 結論

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

ここまで来てくれたなら、Reactエコシステムの旅に付き合ってくれてありがとう。私同様、この冒険を楽しんでいただけたなら幸いだ。私たちは、Reactをより深く理解するために、そのコアとなる原理、内部構造、そしてより広範なエコシステムを探求した。Reactの使い方はすでに知っているという前提で、そのメカニズム、つまりReactが実際にどのように動作するのかを理解することに重点を置いた。

収穫

では、そのいくつかを紹介しよう：

ベストプラクティスを再考する。

時には、すべてを見直す必要がある。ReactがJSXと仮想DOMを導入したことは、現状からの急激な脱却だった。既成概念に挑戦し、インタフェースの構築方法を再考させたのだ。このように、現状に挑戦し、物事の進め方を再考する姿勢はReactの哲学の特徴であり、エンジニアとして、私たちは常に現状に挑戦し、物事の進め方を再考する姿勢を持つべきである。

JSX の仕組みを完全に理解する。

JavaScriptでHTMLスタイルの構文が使えないというように、プログラミング言語によって制限されているのであれば、私たちエンジニアは、新しい言語を作成することによってそれを変える力を持っている。それがJSXであり、JavaScriptにコンパイルダウンする新しい言語なのだ。JSXの仕組みとコンパイラの理論を完全に理解した今なら、私たちにもそれができる。

制約は悪いことではない。

制約は発明の母である。Reactは基本的にウェブの制約から生まれたイノベーションであり、要素の読み取り（innerWidth ）がリフローを引き起こし、ブラウザによってイベントのAPIが異なる。ここで重要なのは、制約は悪いものではないということだ。制約があるからこそ、私たちは既成概念にとらわれず、創造的な解決策を考え出すことができるのだ。

宣言的抽象化 強力な能力を解き放つ。

JSXの式をリコンシラから切り離すことで、ReactはUI開発における「一度書けばどこでも実行できる」アプローチの先駆者となり、同じコードを使ってDOM、サーバ、あるいはネイティブ・プラットフォームへのレンダリングを可能にした。これは、懸念事項を分離し、適切な抽象化レベルに着地することを検討する際に、私たち自身のプロジェクトで活用できる強力な機能である。

強力な機能を解き放つことで、より柔軟で保守性の高いアプリケーションを構築することができる。

私たちは、高階コンポーネントからレンダー・プロップ、コンテキストへのフックまで、多くのパターンを発見した。これらのパターンは、ロジックを抽象化し、コンポーネント間で振る舞いを共有し、ステートをより効果的に管理するために使える強力なツールだ。これらのパターンは複雑さをもたらす一方で、強力な機能を解放し、より柔軟で保守性の高いアプリケーションを構築できるようにする。さらに、HOCのように、これらのパターンはReactよりも前から存在している。次世代のUIフレームワークの基礎となる、今日私たちが使っているパターンは何だろうか？私たちの生活をより楽にしてくれるパターンは何だろうか？

強力な能力は自分たちのプロジェクトで活用できる。

我々は、ブラウザを越えてサーバまで行くと、新たな可能性が広がることを学んだ。サーバ上でReactコンポーネントをレンダリングしたり、ブラウザのネイティブなフェッチAPIを使ってデータをロードしたり、ユーザ入力にネイティブなHTMLフォームを使ったりできる。これらは、サーバ側レンダリング（ ...