流暢なReact

第1章. エントリー・レベル・スタッフ

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

免責事項から始めよう：React はすべての人が使えるように作られている。実際、本書を一度も読み返すことなく、問題なくReactを使い続けることもできるだろう！本書は、Reactの基本的なメカニズムや高度なパターン、ベストプラクティスに興味がある人のために、Reactをより深く掘り下げている 。Reactの使い方を学ぶのではなく、Reactがどのように機能するかを知るのに適している。エンドユーザとしてReactの使い方を教えることを意図して書かれた本は他にもたくさんある。それに対して本書は、エンドユーザではなく、ライブラリやフレームワークの作者のレベルでReactを理解するのに役立つだろう。このテーマに沿って、Reactの基本から始めて、Reactがどのように機能するのか、その詳細を深く深く掘り下げていこう。

この章では、Reactがなぜ存在するのか、どのように機能するのか、どのような問題を解決するのかについて話す。Reactの初期化のインスピレーションとデザイン、そしてFacebookでの質素な始まりから今日のような一般的なソリューションになるまでを追っていく。この章は（ダジャレではなく）ちょっとしたメタ的な章であり、詳細に入る前にReactの背景を理解することが重要だからだ。

Reactはなぜ存在するのか？

その答えは 、一言で言えば「更新」だ。Webの初期には、静的なページが多かった。フォームに入力してSubmitを押すと、まったく新しいページが読み込まれる。しばらくの間はこれでよかったが、やがてウェブ体験は機能面で大きく進化した。機能が大きくなるにつれて、ウェブ上での優れたユーザ体験に対する欲求も大きくなった。私たちは、新しいページがレンダリングされロードされるのを待つことなく、物事が瞬時に更新されるのを見たかった。私たちは、Webとそのページがより機敏で、より "インスタント "に感じられることを望んでいた。問題は、このような即時更新を大規模に行うのはかなり難しいということだった：

パフォーマンス

Webページの更新は、ブラウザがページのレイアウトを再計算し（リフローと呼ばれる）、ページを再描画するきっかけとなるような作業を行いがちだったため、しばしばパフォーマンス（）のボトルネックの原因となっていた。

信頼性

リッチ・ウェブ・エクスペリエンス全体にわたって状態を追跡し、状態が一貫していることを確認するのは大変だった。同じコードベースで複数の人間が作業しているときは、特に大変だった。

セキュリティ

クロスサイトスクリプティング（XSS） やクロスサイトリクエストフォージェリ（CSRF） のような悪用を防ぐために、ページに注入するすべてのHTMLとJavaScriptをサニタイズする必要があった。

Reactがこれらの問題をどのように解決してくれるのかを十分に理解し、理解するためには、Reactが作成された背景や、Reactのない世界、あるいはReact以前の世界を理解する必要がある。今、そうしよう 。

リアクト以前の世界

これらは、React よりも前にウェブ・アプリを開発していた私たちにとって、大きな問題だった。私たちは、アプリをキビキビと即座に感じさせると同時に、何百万人ものユーザにスケールさせ、安全な方法で確実に動作させる方法を考えなければならなかった。例えば、ボタンをクリックすることを考えてみよう。ユーザがボタンをクリックしたら、ユーザ・インタフェースを更新して、ボタンがクリックされたことを反映させたい。ユーザ・インタフェースは少なくとも4つの異なる状態を考慮する必要がある： ...