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

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

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

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

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

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

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

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

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

りこ 直ることもある。でも、AIは文脈を持っていない。あなたのプロジェクト全体を知らない。パッチを当て続けると、誰も読めないコードが積み上がる。

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

バイブコーディングの話

2025年2月、AI研究者のAndrej Karpathyが「バイブコーディング（Vibe Coding）」という言葉をX（旧Twitter）に投稿した。「コードを理解しようとせず、AIの出力をそのまま受け入れてノリで進める」スタイルのことだ。

Karpathy自身は個人プロジェクトやPoCでの話として書いた。しかし、この言葉が一人歩きして「コードを学ばなくていい時代が来た」という受け取られ方が広まった。

現場での実態はシンプルだ。

バイブコーディングは**「動けばいい」段階までは速い。でも、「誰かに引き継ぐ」「本番に出す」「半年後に自分が読む」**という段階で止まる。エラーが出たとき、コードを読めない開発者には打つ手がなくなる。

りこ 「なぜ動くか」を説明できない人は、「なぜ壊れたか」も説明できない。それはずっと変わらない。

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

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

理由は3つ。

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

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

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

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

りこ そう。AIはスキルの乗数。掛ける数がゼロなら、結果もゼロ。

このシリーズで作るもの

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

作るのは2ページ。

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

バックエンドなし、データベースなし。TypeScriptで書いたデータを直接使う。このサイト自体がほぼ完成形なので、「自分が作ったものが正しいかどうか」は画面を見れば判断できる。

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

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

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

このシリーズの前提

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

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