初級一：AI 時代、話せるならプログラミングできる
これはプロジェクトベースの学習チュートリアルです。ステップに沿って操作し、結果を再現してみましょう。 間違えても気にしないでください。私たちはあなたができると信じています。常に覚えておいてください：
本章のガイド
1. 一般人の課題と機会
多くの人は頭の中にたくさんのプロダクトアイデアを持っています：家計簿ツール、子供の成長を記録するウェブページ、あるいは小さなゲームなど。しかし、コードを書いたりプログラマーを探したりすることを考えると、すぐに諦めてしまいます。
AI の登場により、初めて一般人に全く新しい可能性がもたらされました。コードを書く必要はなく、AI に自分が欲しいものを明確に伝えるだけでいいのです。GitHub Copilot からのデータによると、1500万人以上の開発者が AI 補助プログラミングを使用しており、平均46%のコードが AI によって生成されています。Java プロジェクトではこの割合は61%に達します。
一般人にとって、このトレンドはさらに意義があります：プロのプログラマーでさえ大量に AI に依存してコードを書いているなら、プログラミングのできない私たちが、なぜ AI と対話して自分のアイデアを実現できないのでしょうか？
このコースの目標は、あなたに新しいスキルを習得させることです：自然言語の対話でアプリケーションを作れるようになります。コンピュータの言葉で AI とコミュニケーションする方法、AI に頭の中のアイデアを実用的なプロダクトにする方法を教えます。
2. AI はどこまでできるか
このセクションでは、一つの問題だけを議論します：プログラミングが全くできない場合、現在の AI はどこまでできるのでしょうか？
大まかに言えば、現在の大規模モデルの能力は次のように理解できます：シンプルな社内ツール、データ可視化ダッシュボード、および一部の軽量ミニゲームの開発に対応できます。これらの能力は、個人用ツールの作成や、プロダクトマネージャーの視点からのニーズ検証には基本的に十分です。ただし、ワンクリックで商用レベルの完成品を生成したい場合、通常はプロセス設計やディテールの仕上げにおいて人手による継続的な最適化が必要です。
次に、スネークゲームを例に、AI プログラミングが現在どこまでできるかを具体的に見てみましょう。
2.1 60秒でスネークゲームを作る
まず、コースで使用する実験用ウェブページ z.ai を開いてください。z.ai は智譜 AI（中国を代表する大規模言語モデル企業の一つ）が開発した AI プラットフォームで、その中核能力は智譜が自社開発した GLM シリーズの大規模モデルによって支えられています。このプラットフォームはスライド生成、ポスターデザイン、フルスタック開発など、複数の AI 機能を統合しています。このチュートリアルでは、そのフルスタック開発モジュールの使用に焦点を当てます。
💡 「Web ページでプログラミングできる」とは？
過去、Web アプリケーションを開発するには：
- プログラミング環境のインストール（Python、Node.js など）
- コードエディタの設定
- HTML/CSS/JavaScript などの言語の学習
- 各種依存関係やエラーの処理
しかし今は、AI プログラミングプラットフォームを使えば、次のことだけが必要です：
- ブラウザを開き、Web ページにアクセスする
- 自然言語で欲しい機能を説明する
- AI が自動的にコードを生成し、リアルタイムでプレビューする
この「対話即プログラミング」のモードにより、プログラミングは「コードを書く」ことから「要件を説明する」ことになりました。あなたは技術的な詳細を気にする必要がなく、AI に欲しいものを明確に伝えるだけで、アイデアを実行可能なプログラムに変えてくれます。これが AI 時代のプログラミングの新しいパラダイム——Vibe Coding（バイブコーディング）です。
シンプルな要件を入力してフルスタック開発ボタンをクリックすると、Web ページの完全な作成プロセスをリアルタイムで見ることができます。通常、コーヒーを淹れる時間で Web ページが自動的に生成されます！
スネークゲームを作ってください：
1. 方向キーで蛇の移動を制御
2. 食べ物を食べると蛇が長くなり、スコアが増加
3. 壁や自分の体にぶつかるとゲームオーバー
4. スタートとリスタートボタンを付ける
5. シンプルで美しいインターフェース
生成が完了すると、右側にブラウズ可能な Web ページのインターフェースが表示されます。ページのコンテンツを上下にスクロールしたり、ページ上部の 🧭 ボタンをクリックしてフルスクリーンモードに切り替えて効果を確認したりできます。
上部の左から右へのボタンの役割はそれぞれ：矢印ボタンはサイドバーの対話履歴を展開、鉛筆ボタンは新しい対話を作成、ループ矢印ボタンはページをリロード、コンパスボタンはフルスクリーンモードに切り替え、Download ボタンはプロジェクトをダウンロード、<> ボタンはコードビューに切り替え、Publish ボタンはプロジェクトを公開。
この Web ページのソースコードを表示したい場合は、右上隅のコードアイコンをクリックして完全なコードを確認できます。
🌐 他の AI プログラミングツールを探索
z.ai のほかに、以下の優れた AI プログラミングプラットフォームもおすすめです：
| ツール | URL | 特徴 |
|---|---|---|
| Google AI Studio（おすすめ） | aistudio.google.com/apps | Google 公式、Gemini モデル対応、高速プロトタイプ開発に最適 |
| Figma Make | figma.com/make | デザインツールとの深い統合、デザイナー向けのインタラクティブプロトタイプに最適 |
| Coze | coze.com | ByteDance の AI Bot 開発プラットフォーム、ノーコードのビジュアル構築機能。豆包、Kimi などの中国産大規模モデルと深く統合、プラグインマーケットプレイス、スケジュールタスク、マルチチャネル配信（Feishu、WeChat など）をサポート |
| v0.dev | v0.dev | Vercel の AI UI 生成ツール、説明を入力するだけで実行可能な React コンポーネントを生成 |
| Bolt.new | bolt.new | StackBlitz の AI フルスタック開発プラットフォーム、完全な Web アプリケーションを直接生成・デプロイ可能 |
| Lovable | lovable.dev | 高品質な React アプリの生成に特化、GitHub 統合とワンクリックデプロイをサポート |
| Replit Agent | replit.com | AI プログラミングアシスタントを統合したオンライン IDE、複数言語とリアルタイムコラボレーションをサポート |
他の Web プログラミングツールの詳細な比較と使用チュートリアルについては、拡張読み物を参照してください：7 つの主流 Vibe Coding オンラインプラットフォーム実測比較
2.2 対話型プログラミングでできること・できないこと
このセクションでは、一つの具体的な問題に焦点を当てます：対話型 AI のみに依存し、コードを一切書かない場合、一体どこまで進めることができるのか。 経験則として、比較的安定した結論は次のとおりです：「小さくて完成度の高い」ものを作ることはできますが、「どこまでやれば十分か」は、あなたが各ステップの詳細を自分で判断する必要があります。
「小さくて明確な」アプリに適している
前のスネークゲームの例からわかるように、典型的なパターンがあります： インターフェースとインタラクションを明確に説明できれば、AI は通常、数回の対話で、開ける、クリックできる、遊べる完全な Web ページを組み立てることができます。
この種のタスクにはいくつかの共通特徴があります：
- 範囲が明確：1ページの Web ページ、シンプルな社内ツール、小さなゲーム
- 結果が見える：ブラウザで期待通りに動作するかすぐに確認できる
- 修正が直接的：問題を見つけた後、後続の対話で具体的な現象を指摘し修正を求めることができる（エラーをコピーして貼り付けたり、スクリーンショットを貼り付けたりして AI に修正させる）
この範囲内では、対話型 AI を実行力のある「アシスタント開発者」と見なすことができます。各ラウンドで自然言語を使って要件を細分化・修正するだけで、素早く使えるプロトタイプを得ることができます。
AI が単独で小規模プロジェクトを完了する成功率：
大規模プロジェクトには「プロセスの視点」が必要
小さくて明確な範囲を超えると、数回の対話だけで AI に複雑なシステムをエンドツーエンドで完成させることは、すぐに限界に達します。大規模プロジェクトは多くの場合、バックエンド、データベース、サードパーティサービスの統合が必要で、権限、セキュリティ、同時実行、大量のビジネスルールも関係し、1ページの Web ページではなく、既存のビジネスと深く統合されたシステム全体の構築が目標です。
この場合、より合理的なアプローチは、すべての要件を一度に AI に投げるのではなく、まず明確な全体プロセスを整理することです：重要なステップは何か、各ステップの入力・出力と状態変化は何か、どのノードがパフォーマンスとセキュリティに最も敏感か。このフローチャートに基づいて、比較的独立した部分を分割し、対話型 AI にインターフェース、モジュール、スクリプト、テストの生成を任せます。
現在の能力では、AI は一つ一つの小さなステップを加速するのに適しており、あなた（またはチーム）がステップの分割方法、連携方法を決定し、最終的なアーキテクチャ設計、システム統合、運用保守を担当します。
「書ける」ことと「使える」ことの違い
一見すると、AI は何でも書けるように見えますが、これらが本当に使えるのか、どこまで使えるのか、どのように区分すべきでしょうか？
一つの参考となる経験則は次のとおりです：
⚠️ 適用シナリオガイド
- プロトタイプ / デモ / 社内ツール：まず AI に初版を作らせ、その後あなたがディテールを反復するのに非常に適しています。
- 実際のユーザー向けの大規模プロダクト：通常、エンジニアがアーキテクチャ、抽象化、パフォーマンス、保守に長期的に取り組む必要があります。
- 高セキュリティ / 高コンプライアンスシステム（決済、リスク管理、医療など）：現段階では「生成してそのまま本番稼働」は推奨されず、厳格なレビューとテストプロセスを導入する必要があります。
現在、AI を効率的なデモと個人用ツールのパートナーとして比較的安心して見なすことができます： 十分にテストし、反復し、「ここが違う、修正して理由を説明して」と何度も聞けば、プロトタイプと社内ツールのレベルでは、全体的な品質は通常十分であり、実践的な価値があります。
3. 実践：あなた初の AI ネイティブアプリケーション
実践パートに戻りましょう。前半では、AI を使って遊べるスネークゲームのプロトタイプを素早く作成し、AI が何ができて何ができないかを大まかに理解しました。次に、最も基本的な vibe coding のテクニックを使って、現代版の AI スネークゲームを作成する方法を学びます。蛇が豆ではなく文字を食べるようにします。最後に、ゲームが食べた文字に基づいて詩を生成し、絵を描かせます。 この実際のケースを通じて、新しいプログラミング方法の核心理念を理解できます：自然言語で要件を明確に表現する方法を学びます。
3.1 AI ネイティブスネークゲーム
最初は、最もシンプルな方法で大規模モデルと対話します。これにより、迅速にプロダクトプロトタイプを得ることができます。チャットボックスに直接入力できます：
💡 プロンプト例： スネークゲームを作ってください
💡 プロンプト例： スネークゲームを作ってください。以下の機能をサポートしてください
- さまざまな単語を食べることができ、それらがボックスに収集されます
💡 プロンプト例： スネークゲームを作ってください。以下の機能をサポートしてください：
- さまざまな単語を食べることができ、それらがボックスに収集されます
- 蛇が8つの単語を食べると、LLM がそれらの単語に基づいて詩を作成し、必要に応じて詩を再ミックスできます
- 詩が完成したら、次のステップでその詩に基づいて画像が自動的に作成されます
注意：開発中に期待通りにいかない問題に遭遇する場合があります。ボタンをクリックしても反応がない、機能使用時にエラーが発生する、機能が期待通りに動作しない、またはフロントエンドページが期待したデザインと一致しないなどです。
この場合、モデルにさらに質問して、これらの予期せぬ問題を修正するよう助けてもらう必要があります。
3.2 ゲームに新機能を追加する
基本機能が完成したら、プログラムに新しい工夫を追加してみましょう。蛇が単語や文字を食べるプロセスが少し退屈だと思うなら、蛇に異なる色の単語を食べさせ、それに応じて蛇の色を変えることができます。
また、「食べる」プロセスにエフェクトを追加したり、エフェクトをトリガーするマジックワードを導入したりすることもできます。たとえば、蛇の速度やサイズを増やすなど。別のアイデアとして、蛇が単語を食べるたびにモデルに詩と画像を生成させることもできます。8つの単語を食べるまで待つ必要はありません。
これが難しいと思うなら、言語モデルに直接助けを求めることができます。創造的な提案を出して、ゲームをより面白くしてくれます。試してみてください！
1. "単語が世界をアンロック" メカニズム
蛇が単語を食べるたびに、LLM がその単語に対して詩的な連想を行い（例：「木」→「森」「緑陰」）、画像モデルがその単語の小さなアートワークを即座に生成します。これらの画像は徐々にユニークなパノラマを構成し、プレイヤーは毎回プレイするたびに「絵を描き、詩を書いている」ことになります。
2. "詩のパズル" プレイ
蛇が食べた各単語が LLM に短い詩の行を生成させ、画像モデルが挿絵を生成します。これらの詩と画像はパズルのように組み合わされ、ラウンド終了時に AI コラボレーションの詩と絵になります。
3. "マジックワード" & "ストーリー分岐"
特別な「マジックワード」（例：「風」「夜」「夢」）は、LLM に詩を生成させるだけでなく、シーンの雰囲気やテーマを変えます——画像生成のスタイルを夜、嵐、夢の雰囲気に切り替えます。
分岐ストーリー：LLM は開始時にテーマやなぞなぞ（例：「秋の思い出」）を提示します。プレイヤーの単語選択がストーリーと詩の進化に直接影響し、画像モデルはリアルタイムで背景とビジュアル効果を更新します。
4. "リアルタイムインタラクティブ生成"
各単語の後、LLM が一行の対話や説明を生成し、ゲーム内の NPC がプレイヤーに「話しかけ」たり、環境に応じて変化したりします。
蛇の外観やゲーム内の障害物は、食べた単語に基づいて視覚的に変化します。これは画像モデルのおかげです。
5. "創作 & シェア"
プレイヤーはセッション終了時に AI 創作の詩と画像を保存・シェアでき、ユニークな「AI コラボレーション」を自慢できます。
「最も美しい詩+アート」「最も創造的な単語の組み合わせ」などのランキングは、リプレイと創造性を促します。
6. "フレーズスネーク" チャレンジ
リバースモード：LLM が詩の一行またはなぞなぞを提示し、プレイヤーは蛇を操作して単語を順番に食べ、文を再構成する必要があります。間違った単語を食べると、画像生成モデルによって面白いまたは芸術的な結果がトリガーされます。
7. "テーマレベル" & "スタイル選択"
ゲーム開始時に、プレイヤーがテーマ（例：「童話」「SF」「唐詩」）を選択し、LLM と画像モデルの両方が単語選択、詩のスタイル、ビジュアル効果を調整し、毎回のプレイが新鮮に感じられるようにします。
8. "リアルタイムコラボレーション"
特別な単語を食べると、LLM はプレイヤーにフレーズやスタイルの入力を促し、AI が対応する詩と挿絵を生成し、真の人間-AI コラボレーションを実現します。
9. "AI イースターエッグ & 実績"
特定の単語の組み合わせが LLM によって特別なテーマや内部ジョーク（例：「月」「桂花」「川岸」）として認識され、レアな詩と挿絵がトリガーされ、探索を報酬します。
10. "成長の物語"
蛇が成長するにつれて、LLM が連続する物語詩を生成し、画像モデルがシームレスな長巻物またはパノラマを作成し、プレイヤーは「書き、描き、遊ぶ」ことを同時に楽しめます。また、LLM にプロジェクトレベルのプロンプトを直接生成させるよう依頼することもできます。前のセクションでは、スネークゲームのプロンプトを自分で書きました。今回は、大規模モデルに全体フレームワークと実装パスを含むプロンプトを生成させましょう（z.ai で直接生成できます）。
より良いプロンプトの書き方を学びたい場合は、プロンプトエンジニアリング付録を参照してください。
AI にウェブスネークゲームを生成させたいのですが、より完全なプロンプトが必要で、結果をより印象的で面白くしたいです。詩を生成する機能を実装するスネークゲームを生成してください。また、画像生成モジュールを含める必要があります。
z.ai の回答は次のようになります：
このプロンプトを使ってフルスタック開発モードでプロジェクトを再生成できます：
3.3 他のミニゲームを作ってみる
スネークゲーム以外にも、想像力を存分に発揮させましょう。
何でも創造できます。失敗しても最初からやり直すだけです！
1. AI アートギャラリープラットフォーム
説明：AI 生成アート作品を展示するオンラインギャラリー。ユーザーはアップロード、共有、コメントができます。
機能：ユーザーアカウントシステム、アート作品のアップロードと展示、評価システム、カテゴリブラウジング、AI 生成ツール統合。
技術的ハイライト：React/Vue フロントエンド、Node.js バックエンド、MongoDB データベース、AI API 統合。
2. レトロゲームアーカイブ
説明：クラシックゲームを称えるウェブサイト。ゲームの歴史、プレイガイド、オンラインで遊べるレトロゲームを含みます。
機能：ゲームデータベース、タイムライン展示、オンラインエミュレータ、ユーザーレビュー、ゲームコレクション機能。
技術的ハイライト：レスポンシブデザイン、WebGL/Canvas ゲーム実装、RESTful API、ユーザー認証システム。
3. サステナブルライフトラッカー
説明：エコフレンドリーなヒントとコミュニティチャレンジを通じて、ユーザーがカーボンフットプリントを追跡・削減するウェブサイト。
機能：個人カーボンフットプリント計算機、目標設定、進捗追跡、コミュニティチャレンジ、環境知識ベース。
技術的ハイライト：データ可視化、モバイル最適化、ソーシャル機能、プッシュ通知。
4. バーチャルキッチンアシスタント
説明：AI ベースの料理指導プラットフォーム。パーソナライズされたレシピ提案とステップバイステップの料理手順を提供します。
機能：レシピデータベース、食材認識、パーソナライズされた推薦、料理タイマー、栄養分析。
技術的ハイライト：画像認識 API、機械学習推薦システム、音声制御、リアルタイムビデオガイダンス。
5. インディーミュージック発見プラットフォーム
説明：インディーズアーティストや新進アーティストに特化した音楽ストリーミングプラットフォーム。
機能：音楽ストリーミング、アーティストプロフィール、パーソナライズされた推薦、プレイリスト作成、コミュニティレビュー。
技術的ハイライト：オーディオストリーミング処理、推薦アルゴリズム、ソーシャル機能、音楽可視化。
6. ミニマリストタスク管理システム
説明：禅の美学を持つタスク管理ツール。シンプルさと効率的なタスク整理に焦点を当てています。
機能：タスクの作成と分類、優先度設定、進捗追跡、チームコラボレーション、データ分析。
技術的ハイライト：ミニマリスト UI デザイン、ドラッグ＆ドロップ機能、リアルタイム同期、クロスプラットフォーム互換性。
7. SF ライティングワークショップ
説明：SF 作家のためのクリエイティブツールとインスピレーションプラットフォーム。ワールドビルディング補助とキャラクター開発ツールを含みます。
機能：ストーリー構造ツール、キャラクタープロフィール、ワールドビルディングテンプレート、ライティング統計、コミュニティフィードバック。
技術的ハイライト：リッチテキストエディタ、データ可視化、コラボレーティブ編集、AI 補助創作。
8. パーソナルナレッジグラフ
説明：ユーザーがパーソナルナレッジネットワークを構築し、さまざまなアイデアと情報を可視化・接続するツール。
機能：ノードの作成と接続、タグシステム、検索機能、インポート/エクスポートツール、可視化グラフ。
技術的ハイライト：グラフデータベース、データ可視化アルゴリズム、Markdown サポート、クロスデバイス同期。
9. バーチャル植物園
説明：インタラクティブな植物図鑑。ユーザーは植物の世界を探索し、バーチャルガーデンを作成できます。
機能：植物データベース、3D 植物モデル、成長シミュレーション、ガーデニングガイド、コミュニティ展示。
技術的ハイライト：3D レンダリング、季節変化シミュレーション、AR 統合、植物認識 API。
10. プログラミングチャレンジアリーナ
説明：プログラマー向けのオンラインコンペティションプラットフォーム。さまざまな難易度レベルのプログラミングチャレンジを提供します。
機能：チャレンジ問題、コードエディタ、自動評価、リーダーボード、学習パス。
技術的ハイライト：コードサンドボックス環境、リアルタイム評価システム、アルゴリズム可視化、ソーシャル学習機能。また...ゲームが好きなら、一緒にゲームを作ってみましょう！
1. 3D オープンワールド RPG
説明：広大なオープンワールド、クエスト、キャラクター成長を持つファンタジー RPG。
機能：昼夜サイクル、ダイナミック天気、スキルツリー、マルチプレイヤーコープ、クラフトシステム。
技術的ハイライト：Three.js または Babylon.js による 3D レンダリング、サーバーサイドゲームロジック、キャラクターカスタマイズ、セーブシステム。
2. FPS アリーナ
説明：高速ペースのマルチプレイヤー FPS。さまざまなゲームモードとマップを備えています。
機能：チームデスマッチ、キャプチャーザフラグ、武器カスタマイズ、ランクマッチ。
技術的ハイライト：WebGL/Three.js による 3D グラフィックス、マルチプレイヤーネットワークコード、ヒット検出、ボイスチャット。
3. AI チェス & マルチプレイヤー
説明：AI 対戦とオンライン対戦機能を備えた本格的なチェスプラットフォーム。
機能：AI 難易度レベル、エンドゲームチャレンジ、トーナメントモード、リプレイ分析。
技術的ハイライト：チェスロジックライブラリ、WebSocket によるリアルタイム対戦、ELO ランキングシステム、アンチチート。
4. マージャンオンラインマルチプレイヤー
説明：オンラインマルチプレイヤーとスコアリング機能を備えた伝統的な麻雀ゲーム。
機能：複数のルールセット、プライベートルーム、ランキングシステム、リプレイ機能。
技術的ハイライト：牌マッチングロジック、リアルタイムマルチプレイヤー、ロビーシステム、スコア追跡。
5. ターン制ストラテジーゲーム
説明：グリッドベースの戦闘とユニット管理を備えたタクティカルストラテジーゲーム。
機能：キャンペーンモード、スカーミッシュ、ユニットアップグレード、フォグオブウォー、マルチプレイヤー対戦。
技術的ハイライト：グリッド移動システム、AI 意思決定、ターン同期、セーブ/ロードシステム。
6. タイムアタックレーシングゲーム
説明：タイムアタックとコースレコードに焦点を当てた 3D レーシングゲーム。
機能：複数のコース、車のカスタマイズ、ゴーストリプレイ、リーダーボード。
技術的ハイライト：3D カーの物理、コースエディタ、リプレイシステム、オンラインリーダーボード。
7. カードバトルゲーム（デッキ構築）
説明：プレイヤーがデッキを構築し、対戦相手と戦うストラテジーカードゲーム。
機能：カード収集、デッキ構築、ランクマッチ、シーズンイベント。
技術的ハイライト：カードゲームロジック、マッチメイキングシステム、AI 対戦相手、カードアニメーション。
8. バトルロイヤル（俯瞰 2D）
説明：縮小するゲームエリアとルート機能を備えた俯瞰 2D バトルロイヤル。
機能：ソロおよびスクワッドモード、武器の多様性、インゲームイベント、リーダーボード。
技術的ハイライト：リアルタイムマルチプレイヤー、ゾーン縮小ロジック、ルート生成システム、マッチメイキング。
9. ホラーサバイバルゲーム（一人称）
説明：リソース管理と脱出メカニズムを備えた一人称ホラーゲーム。
機能：不気味な雰囲気、パズル、敵 AI、マルチエンディング。
技術的ハイライト：ダイナミックライティング、サウンドデザイン、敵の経路探索、セーブシステム。
10. リズムゲーム（3D）
説明：音楽のビートに合わせてノートを叩く 3D リズムゲーム。
機能：複数の難易度レベル、コースエディタ、カスタム楽曲サポート、リーダーボード。
技術的ハイライト：オーディオ分析、ビート同期、3D ノートトラック、入力タイミング検出。📚 Assignment
このセクションでは、「対話でスネークゲームを生成」から「AI ネイティブミニゲームの設計思考の理解」までの完全なプロセスを体験しました。以下の課題は、この理解を自分の能力にするのに役立ちます。
- AI ネイティブスネークゲームを完全に再現する
- 最低限の実装：蛇が移動できる、「食べ物」を食べると長さとスコアが変化する、壁や自分の体にぶつかるとゲームオーバー。
- 再現中、エラー現象 + エラーメッセージ + 重要なコードスニペットを一度に AI に投げ、「初心者モード」で修正してもらう練習をする。
- （オプション）自作の AI ネイティブミニゲームまたはデモを 1 つ作る
- 文字、画像、音楽、リズムなどを中心とした任意の軽量ゲームプレイで構いません。例：「単語を食べて詩を書く」「リズムタップ」「生成的ランニング」など。
- 重要なのはビジュアルの豪華さではなく、AI がここで具体的に何を助けたのか、人間には困難または面倒な部分を何を解決したのかを明確に説明できることです。
これが完全なチュートリアルです！すべての内容を完了し、自分のスネークゲームを構築するには 4 時間かかるかもしれません。急ぐ必要はありません——探索、実験、そしてプロセスを楽しんでください。途中で理解できない概念に遭遇した場合は、以下の付録の関連部分を参照してください。
付録
付録 1：フロントエンド開発の知識は必要？
💡 一言でまとめると
コードを書く必要はありませんが、基本概念を理解すると AI に要件をより良く説明できるようになります。
- ウェブページのタイトル、テキスト、画像
- ボタン、入力フィールド、ドロップダウンメニュー
- ゲームインターフェース、アニメーション効果
- ユーザースコアの保存
- ログイン認証
- レベルコンテンツの配信
フロントエンドの三種の神器
ブラウザは三つの「コード」を使ってページを構築します：
コードがページになる仕組み
Web ページを開くと、ブラウザは三つのコードを順番に処理します：
1. HTML —— ページ構造の定義 ブラウザはまず HTML を解析し、ページ上にどの要素（タイトル、段落、画像、ボタンなど）があるか、そしてそれらの階層関係を理解します。
2. CSS —— スタイルの適用 次にブラウザは CSS ルールに従って、これらの要素にスタイルを追加します：色、サイズ、位置、間隔など、ページを見やすくします。
3. JavaScript —— インタラクションの追加 最後に JavaScript コードを実行し、ページを「動かします」：クリックへの応答、フォームの送信、アニメーションの再生など。
4. ページの表示 三つの連携結果が、あなたが最終的に見る Web ページです。
モダンフロントエンドフレームワーク：HTML から React/Vue へ
前述の HTML、CSS、JavaScript はフロントエンド開発の「三種の神器」であり、すべての Web ページの基礎です。ただし、ページが複雑になると、これらだけでは課題に直面します：コードの保守が困難、反復作業が多い、データ同期が面倒など。
モダンフロントエンドフレームワーク（React、Vue、Angular など）は HTML/CSS/JS の上に構築され、開発をより効率的にします：
1. HTML/CSS/JS（基礎段階） ページ要素を直接操作し、シンプルなページに適しています。しかし、コード量が増えると、すべてのロジックが混ざり合い、保守が困難になります。
2. jQuery（過渡期） DOM 操作を簡素化し、コードをより簡潔にします。ただし、ページの状態を手動で管理する必要があり、データ変更時に対応する要素を自分で見つけて更新する必要があります。
3. React/Vue（モダン期） コンポーネント化と状態駆動の設計を採用：
- コンポーネント化：ページを独立した再利用可能なモジュール（ボタン、カード、ナビゲーションバーなど）に分割
- 状態駆動：データが変更されると、フレームワークが対応する UI を自動的に更新し、手動操作が不要
💡 簡単に理解すると
- HTML/CSS/JS = 基礎材料（レンガ、セメント、鉄筋）
- React/Vue = 建築フレームワーク（家を建てるための規範とツールを提供）
AI 補助プログラミング時代では、フレームワークのすべての詳細を深く理解する必要はありません。基本概念を理解するだけで、自然言語の説明で AI にコード生成を依頼できます。
Vibe Coding において
核となるポイント：コードを書く必要はなく、説明できれば十分です。
フロントエンドの概念を理解した後、次のように AI に要件を説明できます：
"React でリーダーボードページを作って。右側にスコアリストを表示し、行をクリックすると下にプレイヤー詳細を表示する。シンプルでモダンなスタイルに。"
HTML、CSS、JavaScript などのフロントエンド基礎知識をさらに深く理解したい場合は、Web 基礎付録を参照してください。フロントエンド技術の発展の歴史を知りたい場合は、フロントエンド進化史付録を参照してください。
付録 2：Vibe Coding とは何か
💡 Vibe Coding とは？コンピュータ科学者 Andrej Karpathy（OpenAI の共同創業者の一人、テスラ元 AI 責任者）が 2025 年 2 月に vibe coding という言葉を提案しました。この概念は、LLM に依存するコーディング方法を指し、プログラマーが自然言語の説明を提供することで、手動でコードを書くことなく動作するコードを生成できるようにします。
文字通り、Vibe Coding は「話すことで開発する」方法として理解できます。その核となる変化は：もう自分で一行一行コードを書いたり、構文を調べたり、バグを修正したりする必要はなく、自然言語で欲しいものを直接説明するだけです。例えば：
「ログインページが必要です。携帯番号の入力フィールドと認証コードの入力フィールドを付けてください。」 「ログイン成功後、トップページにリダイレクトし、右上隅にユーザー名を表示してください。」 「シンプルなスネークゲームを作ってください。キーボードの方向キーで操作できるように。」
大規模言語モデル（LLM）がこのような説明を自動的に実際に動作するコードに翻訳し、対応するページ、ロジック、データ構造を生成します。結果を見た後、自然言語で修正意見を伝えます。例えば「ボタンをもう少し大きく」「背景をダークカラーに」「スコアを記録してリーダーボードを表示」など。AI は引き続きあなたの要件に応じて実装を調整します。
このモードでは、プログラミング言語を先に学んでからコードを書く必要はありません。主な精力を次のことに注ぎます：何を作るかを明確にする、結果を見て「どこが違うか」を判断する、新しい修正を提案する。AI はこれらの上位のアイデアを具体的な実装に落とし込み、機械的で反復的なコーディング作業を大幅に削減します。
Vibe Coding の詳細についてはこちらを参照してください：https://www.ibm.com/think/topics/vibe-coding
Karpathy の共有内容の詳細についてはこちらを参照してください：https://karpathy.bearblog.dev/blog/
Vibe Coding の達人を装う方法
実際、本格的な vibe coding の過程では、複雑なプロンプトをあまり使いません。開始時にプログラム全体に対して具体的で適度に複雑なプロンプトを提供する必要があるかもしれませんが、その後の各ステップでは、次のような種類のプロンプトだけが必要です：
"コードにバグがあります、修正してください。"
"部分コードは不要です。修正後の完全なコードをください。"
"あなたのコードにはまだ問題があります。"
"もう一度修正して、修正後の完全なコードをください。"
"さっきまで動いていたのに、なぜ今動かないのですか？"
"私の意図を理解していないのですか？元のコードを変更しないでください。"
"デバッグ機能を追加しないでください。"
"私が依頼していないことはしないでください。"
"私が実装を依頼した機能はどこですか？"
"私の言葉がわからないのですか？"
"関数を一つだけください。"
"以前のコードを参照するように言ったはずです。"
"不要なコメントを追加しないでください。"
"元のコードの基本ロジックを変更しないでください。"
"コードを修正してください。"
"私のコードをベースに修正..."
"変数名を変更しないでください！！！"
"元の関数名を変更しないでください！"
"私の変数を勝手に変更しないでください。"
"追加機能を追加しないでください。"
"フレームワークだけを生成するのではなく、完全なコードを生成してください。"これは少し誇張されているように聞こえるかもしれませんが、実際には、これらが日常の作業で使用するプロンプトです。大規模言語モデルのコンテキスト長の制限のため、または命令追従能力があまり強くないため、モデルは対話の早い段階で議論された内容を忘れることがあります。vibe coding では、長いコンテキストのモデルを使用する傾向があり、命令追従能力の強いモデルを使用します。これら二つのランキングや指標で判断できます。
または、トレーニングデータセットのスタイルにより、大規模モデルはそのトレーニングデータのスタイルで回答する傾向があります。例えば、一部の人は真面目に話し、一部の人は多くの修飾を加え、一部の大規模モデルはコードに多くのコメントや不要なモジュールを追加するのが好きです。
付録 3：モデルコンテキスト
モデルコンテキストは、AI の短期記憶として理解できます。これは、現在の一回の対話またはタスクにおいて、モデルが「見て」および「覚えて」いるすべてのテキストコンテンツを指し、以前に入力した質問、システムが提供した説明、関連資料などを含みます。
コンテキストがあるからこそ、AI はあなたが前の内容に続いて質問していることを理解し、一ラウンド一ラウンド、途切れのない自然な対話を行うことができます。コンテキストがなければ、あなたの各文はモデルにとって全く新しい質問のように見え、以前に何を言ったかを知ることができず、対話を続けることはできません。
各モデルには独自の有効コンテキスト長（context window）があります。この長さは通常 token（大まかに「単語の断片」の単位と理解できます）で測定され、現在の主流モデルはほぼ 32k～128k token です。コンテキストが長いほど、モデルが一度に「読める」内容が増えます。例えば：
- 長めの論文やレポートを一度に読む
- 同じ対話ラウンドで複数の資料やケースを参照する
- モデルに以前の数ラウンドの複雑な議論の結論を覚えさせる
入力内容がモデルのコンテキスト制限に近づくまたは超えると、次のような一般的な現象がよく発生します：
- モデルが長いテキストの細部や重要情報を忘れ始める
- 対話が進むにつれて、話題が当初の目標から徐々に逸れる
- 同じ資料に対する異なる質問間で、参照内容に不一致が生じる
これらの現象は、モデルが突然「バカになった」わけではなく、コンテキスト容量が使い切られたり使い切れに近づいた後に生じる自然な結果です。
実際の使用では、コンテキストを可能な限り長くしたいと同時に、次の点も意識する必要があります：
- コンテキストが長いほど、消費する計算リソースが増える
- 対応する呼び出しコスト（費用）も増加する
したがって、AI アプリケーションを設計する際には、モデルに十分な量を読ませることと、コストの制御・効率の向上との間でバランスを取る必要があります。例えば：
- 本当に長期保存が必要な情報を要約してからモデルに渡す
- 不要な詳細情報を、一度にコンテキストにそのまま入れ続けない
- 外部ナレッジベースなどの方法を使い、「長期記憶」をシステムに任せ、モデルのコンテキストに無理に入れない
付録 4：命令追従能力
命令追従能力とは、モデルがあなたの命令を理解した後、正確かつ完全にあなたの要求通りに実行できるかどうかを指します。質問に答えるだけでなく、指定されたフォーマット、スタイル、手順でタスクを完了することも含みます。
例えば、以下はすべてモデルに明確な要求がある命令です：
- この記事を3つのポイントに要約する
- 正式で礼儀正しい口調で返信メールを書く
- この単語を英語に翻訳し、それぞれ例文を作る
- 記事から著者、日時、主要イベントを抽出する
命令追従能力の強いモデルは、通常次の特徴を備えています：
- 要求された数量通りに出力する
例えば3つのポイントに要約するよう依頼すれば、5つを出力することはありません。 - 指定されたすべての要素をカバーする
例えば著者、日時、イベントの抽出を依頼すれば、そのいずれも漏らしません。 - 指定されたフォーマットとトーンを遵守する
例えば正式なトーンを依頼すれば、あまり口語的な返信を出力しません。 - 不要な追加拡張を行わない
例えば翻訳と例文の作成だけを依頼すれば、無関係な説明を大量に出力しません。
実際の応用では、強い命令追従能力は非常に重要です。理由は次のとおりです：
- 安定性の向上：同じ命令を異なる時刻で複数回実行した場合、出力構造と動作パターンがより一貫し、ランダムな逸脱が起こりにくい
- 再現性の向上：プロンプトを製品やプロセスに設定する場合、モデルがおおよそどのように応答するかを予測でき、テストと反復が容易
- システム統合の容易さ：モデルの出力が期待されるフォーマットに合致すれば、バックエンドプログラム、ワークフロー、その他のツールとの自動接続が容易
したがって、大規模言語モデルを選択・評価する際には、賢いか、知識カバレッジが広いかだけでなく、命令追従能力にも特に注意する必要があります。産業級アプリケーションにとって、安定して正確に命令を実行できることは、たまに驚くような回答を出すことよりもはるかに重要です。