【りあくと】

React とは?

最終更新:
💡 UIを「部品(コンポーネント)」の組み合わせで作る

コンポーネントという部品を組み合わせてユーザーインターフェースを作るJavaScriptライブラリ。部品に渡すデータや状態に応じて、画面の表示を更新する。

📌 このページのポイント
部品を組み合わせてページを作る App Header Main Logo Nav ArticleList Sidebar Article Article
線は「親の部品が子の部品を含む」関係。Articleのように同じ部品を繰り返し使える。
ひよこ ひよこ
Reactの何がすごいの?
ペンギン先生 ペンギン先生
ボタン、フォーム、カードなどをコンポーネントに分けて組み合わせられるのが特徴だよ。状態が変わると表示を計算し直し、必要な変更をDOMに反映する。日常的な画面更新を、部品とデータの関係で書けるんだ。
ひよこ ひよこ
ライブラリだけでアプリ全部を作れるの?
ペンギン先生 ペンギン先生
ReactはUIを作るためのライブラリだよ。useStateなどの状態管理は含むけれど、画面間の移動やデータ取得をどう組み立てるかは別に考える。必要に応じて他のライブラリやフレームワークを組み合わせるんだ。
ひよこ ひよこ
Next.jsとの関係は?
ペンギン先生 ペンギン先生
Next.jsはReactを使うフレームワークで、ルーティングやサーバでの処理なども組み立てられるよ。React公式は新しいアプリにフレームワークの利用を勧めていて、Next.jsだけでなくReact Routerなども紹介している。用途に合うものを選ぼう。
ひよこ ひよこ
React を始めるには?
ペンギン先生 ペンギン先生
公式のQuick Startで、部品を書く、propsで値を渡す、useStateで表示を変える、という流れを試せるよ。アプリを作るときは公式のCreating a React Appを見て環境を選ぼう。JSXはHTMLに似た構文でよく使うけれど、Reactを使うための必須条件ではないんだ。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「React」って出てきたら「コンポーネントベースのUI構築ライブラリ」と思えればだいたいOK!
📖 おまけ:英語の意味
「React」 = 英語のreactは「反応する」
💬 部品のデータや状態に応じて表示を計算し直す仕組みを、「変化に反応する」と捉えると理解しやすいよ。

参考資料

← 用語集にもどる