React | Translator

15 sec ver.

ホームページやアプリの画面づくりの土台になる技術です。ユーザーの操作でデータが変わると、変わった場所だけ自動で書き直されるので、画面をまるごと作り直す必要がありません。

Webの画面は、ボタンの色や入力欄の中身など、裏側の情報が変わるたびに見た目が更新されています。この更新のたびに、画面のどこをどう書き換えるべきか、本来は人間が細かく指示しなければなりません。

Reactは、ボタンや入力欄といった画面のパーツを部品として扱い、情報が変わった部品だけを自動で見つけて書き換えます。画面全体を作り直す必要がありません。

さらに、一度作った部品はそのまま別の画面でも使い回せます。ボタン1つ、入力欄1つを、必要になるたびゼロから書く必要がありません。

画面を作る・直すという作業そのものが、Reactがあるかどうかでかかる手間が変わってきます。

車と設計図の関係を想像してください。

昔ながらの車は、直したい場所があるたびに、メカニックが車体そのものを直接触って改良する必要がありました。

Reactは、車を直接触る代わりに、設計図のほうを書き換える仕組みです。設計図のタイヤの部分を直せば、車のタイヤの部分だけが自動的にそのとおりに組み変わります。車体を直接触る必要はありません。

しかも、一度描いたタイヤの設計図は、別の車を作るときにもそのまま使い回せます。毎回一から描き直す人はいません。

画面の改修や修正を頼むとき、直す範囲が狭いか広いかで、かかる時間も費用も変わってきます。Reactが土台にあるかどうかは、その時間や費用の出発点そのものに関わってきます。

✗「ReactとNext.jsは同じもの、あるいはReactの中にNext.jsが含まれる」 → 逆です。Reactは画面を書き換える土台の技術で、Next.jsはその土台の上に他の機能を組み合わせて完成させた枠組みです。