React

📖 もうちょい詳しく

何が新しいの？

React（リアクト）は、Webサイトやアプリの「見た目の部分」を作るための道具です。もともとFacebook（現Meta）社が開発し、いまは無料で公開されています。昔は画面を作るとき、表示を更新するたびに細かい書き換え命令を一つひとつ書く必要があり、規模が大きくなるほど混乱しがちでした。Reactは「画面を部品に分けて、データが変われば見た目も自動でついてくる」という考え方を広め、その負担を大きく減らしました。

どうやって動いてるの？

Reactでは、画面を「コンポーネント」と呼ぶ小さな部品の集まりとして書きます。各部品は「いまのデータ（状態）から、どう表示するか」だけを宣言します。データが変わると、Reactが「前の表示」と「新しい表示」を内部で見比べ、実際に変わった所だけを画面に反映します。この差分だけを更新するしくみのおかげで、開発者は書き換え手順を細かく指示しなくても済みます。

何ができるの？

ボタンや入力欄、一覧表示といった部品を一度作れば、別の画面でも使い回せます。たとえば「いいねボタン」を一つ部品にしておけば、投稿一覧でもプロフィール画面でも同じものを置けます。ページ全体を読み込み直さずに表示だけを切り替える、スムーズなWebアプリ（SPA）作りにもよく使われます。

🌱 身近なたとえ

ブロック玩具で例えると分かりやすいかもしれません。小さなブロック（部品）をいくつも用意し、それらを組み合わせて一つの作品（画面）を作るイメージです。一度作ったブロックは別の作品にもそのまま使えますし、一部だけ差し替えたいときはその箇所のブロックだけ取り替えれば済みます。React は、この「部品を組み合わせて画面を作る」やり方を支えてくれます。

✅ まず覚えるポイント

• 画面の「見た目」を作るためのJavaScriptライブラリです
• 画面を「コンポーネント」という部品に分けて作ります
• データ（状態）が変わると、見た目が自動で更新されます
• 変わった部分だけを反映するので、表示の更新がスムーズです
• 一度作った部品を、いろいろな場所で使い回せます

🧭 よくある勘違い

Reactを使えばアプリが全部作れるの？

Reactが受け持つのは、おもに画面の「見た目」の部分です。データの保存や利用者の管理といったサーバー側の処理は、別のしくみが担当することが多いです。Reactは「フレームワーク」と呼ばれることもありますが、開発元自身は「ライブラリ」と位置づけており、必要な機能は周辺の道具と組み合わせて補うのが一般的です。

React Nativeと同じもの？

名前は似ていますが、用途が違います。Reactは主にWebサイトやWebアプリの画面づくり向けです。一方のReact NativeはReactの考え方を使って、スマホアプリを作るための別の道具です。考え方は共通していますが、出来上がるものや動く場所が異なります。

🧩 関連して覚えると楽な言葉

• コンポーネント: 画面を組み立てる小さな部品。Reactの基本単位です
• JavaScript: Reactが書かれている言語。Webに動きをつけます
• SPA: ページを読み込み直さず表示を切り替えるWebアプリの作り方
• DOM: ブラウザが画面を表す内部の構造。Reactはここの更新を肩代わりします

🏁 ひとことでまとめ

Reactは、画面を部品の集まりとして作り、データが変われば見た目も自動でついてくる、Web開発でよく使われる道具です。