生成AI時代に、なぜフレームワークを学ぶのか

たける りこさん、正直に聞いてもいいですか。今ってChatGPTにやらせたら大体のコードが書けますよね。それでもReactをちゃんと学ぶ必要、あるんですか？

りこ いい質問。正直に答えると─「書けるけど、それで終わりじゃないから」。

AIに任せたら動いた。それで終わり？

ChatGPTやGitHub Copilotはたしかにコードを書く。「Reactでカウンターを作って」と頼めば、コードの案が返ってくる。動作は自分の環境で確認する。

でも、次の瞬間に何かが起きる。

• エラーが出た。どこが問題かわからない
• 要件が少し変わった。どこを直せばいいかわからない
• コードレビューで「このコードの意図は？」と聞かれた。説明できない

AIが生成したコードは、読めなければ自分のコードではない。壊れたとき、変えたいとき、説明を求められたとき─手が止まる。

たける でも、エラーもAIに貼り付ければ直してくれませんか？

りこ 直ることもある。でも、AIに渡した情報だけで必要な文脈がそろっているとは限らない。パッチを当て続けると、誰も読めないコードが積み上がる。

たける あー、それ、やってました。直ったと思ったら別の場所が壊れて……

出力を確認する小さな練習

たとえばAIに「1回押すと2増えるボタン」を頼んだとします。setCount(count + 1) が2行あっても、このレンダーで読むcountは同じなので、期待どおり2増えるとは限りません。

まず 連続更新の実験室で結果を予測し、直接更新と関数型更新を比べてみてください。コードを読む基礎があれば、動いて見える出力にも具体的な確認条件を作れます。

AIを使いこなすために基礎が必要

逆説的に聞こえるかもしれないが、AIを上手く使うほど、基礎の重要性が増す。

理由は3つ。

1. 指示の質はスキルに比例する AIへのプロンプトは、何を作るかを正確に言語化できないと機能しない。「いい感じのUIを作って」では、いい感じのUIは返ってこない。設計の言葉を持っている人ほど、AIへの指示が具体的になる。

2. 生成されたコードは必ずレビューが必要 AI は自信を持って間違える。セキュリティ上の問題、パフォーマンス上の問題、プロジェクトのルールに合わない書き方─読めなければ見抜けない。

3. 微修正は直接触るほうが速い 「この部分のマージンを4pxにして」「このコンポーネントの名前を変えて」─こうした細かい変更は、コードを直接触るほうが圧倒的に速い。AIを経由するコストのほうが大きい。

たける つまり、AIはスキルがあると速くなるけど、スキルがないと詰まる、ってことですか。

りこ そう。出力のどこを確認するか決められると、AIも学習に役立てやすい。

このシリーズで作るもの

前置きはここまで。このシリーズでは実際に動くWebサイトを1本完成させる。

作るのは2ページ。

• トップページ：サイトの概要、特徴紹介、ナビゲーション
• 登場人物紹介ページ：キャラクター一覧、画像ギャラリー付きの詳細カード

バックエンドなし、データベースなし。TypeScriptで書いたデータを直接使う。このサイトの人物紹介を題材にした縮小版を作る。見た目に加え、選択・画像切り替え・URLの直接アクセスを確認する。

たける このサイト自体を作るんですか。それはわかりやすい。

りこ AIも使いながら進める。でも、AIが出したコードは自分で読む。意味がわからないまま貼り付けない。それだけ守って。

たける わかりました。やってみます。

このシリーズの前提

• HTMLとCSSの基礎がある（タグの意味、ボックスモデル程度）
• 何かしらのプログラミング言語を触ったことがある（変数・関数・条件分岐）
• JavaScriptの深い知識は不要。必要な部分はその都度説明する

次の第1回では、「なぜReactなのか」─jQuery や Vanilla JS との違いから始める。

確認してみる

実験室で「同じ更新を2回」の結果を予測し、期待と違う理由を説明する。

仕様・手順の参照先