React / Next.js の理解を深める演習問題
学習の最後に、あなた自身の言葉で理解を整理するための課題です。
ここでは、ただ答えを書くのではなく、「なぜそう言えるのか」までかみ砕いて説明します。
そのうえで、例として“こう書ける”というサンプルも示します。
必須課題①：Reactで何ができるかを自分の言葉で3行書く
Reactの本質を3行にまとめるコツ
Reactは「UI（画面）を作るためのライブラリ」ですが、
単に「画面を作れる」だけでは説明として弱いです。
Reactの特徴を3行にまとめるときは、次の3つを意識すると伝わりやすくなります。
状態（state）によって画面が自動で更新される
コンポーネントという部品を組み合わせて画面を作れる
ユーザー操作に応じて動くインタラクティブなUIを簡単に作れる
例：3行で書くとこうなる
Reactを使うと、状態に応じて画面が自動で切り替わるUIを作れる。
画面を小さなコンポーネントに分けて、部品のように組み合わせられる。
ユーザー操作に反応する動的なWebアプリを効率よく作れる。
あなた自身の言葉で書くと、さらに理解が深まります。
必須課題②：WebサイトとWebアプリの違いを1つ挙げる
違いを説明するときのポイント
WebサイトとWebアプリの違いはたくさんありますが、
初心者が一番理解しやすいのは「ユーザーとの関わり方」です。
Webサイト
→ 情報を“読む”ことが中心（ブログ・企業サイトなど）
Webアプリ
→ ユーザーが“操作する”ことが中心（TODOアプリ・SNS・ECサイトなど）
例：1つ挙げるとこうなる
Webサイトは情報を読む場所で、Webアプリはユーザーが操作して動かす仕組みがある。
これだけで十分に本質を押さえています。
挑戦課題：Reactが向いていないケースを考える
Reactは万能ではない
Reactは強力ですが、すべてのケースに最適ではありません。
「Reactを使わないほうがいい場面」を考えることは、
“技術選定”という実務的な視点につながります。
Reactが向いていない代表的なケース
画面がほとんど変化しない静的ページ
Reactは「状態が変わるたびにUIを再描画する」仕組みが強みです。
逆に言えば、
会社概要ページ
アクセスマップ
1枚だけのランディングページ
のように「ほぼ動かないページ」では、Reactのメリットが薄くなります。
HTML＋CSSだけで十分に作れるため、
Reactを使うと逆にコード量が増えてしまいます。
超軽量で高速表示が最優先のページ
Reactは便利な分、JavaScriptの読み込みが必要です。
そのため、
とにかく最速で表示したい
JavaScriptをほぼ使わない
SEOだけが目的
というページでは、Reactはオーバースペックになりがちです。
例：こう書ける
Reactは、画面がほとんど変わらない静的ページには向いていない。
JavaScriptをほぼ使わないページでは、Reactを使うと逆に重くなるから。
まとめ：この課題の意図
この演習は、単に答えを書くためのものではありません。
あなたが学んだ内容を「自分の言葉で説明できるか」を確認するためのものです。
Reactで何ができるか
Webアプリとは何か
Reactを使うべき場面・使わないべき場面
これらを説明できるようになると、
「Reactを使う理由」を自分で判断できるようになります。
