---
title: 'AIプログラミングツールの学習'
description: 'WebのAIプログラミングからローカル開発へ。IDEとAI IDEの違いを理解し、Traeでスネークゲームを作りながら実践フローを学ぶ。'
---
# 初級二：AI プログラミングツールを学ぶ
## 本章のガイド
前の章では、z.ai で AI プログラミングを体験しましたが、ウェブ版には多くの制限があります——いつでも保存できない、ファイル管理がしにくい、複雑なプロジェクトが作れない。この章は、開発環境を自分のパソコンに移し、本当に独立してものを作れるようにします。
まず IDE と AI IDE の違いが何かを明確にし、なぜ後者が効率を倍増させるのかを理解します。その後、手取りでTrae を使ってローカルでスネークゲームを作り、インストールから実行までの完全なフローを体験します。最後に、AI との対話の実用的なテクニックを共有し、遠回りを避けられるようにします。
この章を終えると、プログラマーと似た開発フローをマスターできます。
::: tip 💡 上級者向けヒント
プログラミングの基礎があって、より強力なツールを早めに使いたい場合は、[現代 CLI Coding ツール](../../stage-2/backend/modern-cli/)を参考に、コマンドライン方式で開発することもできます。
:::
## 1. コードを書くために必要な環境とツール
### 1.1 思考の転換：問題があったら、まず AI に聞く
様々な環境やツールを紹介する前に、まず思考習慣を変える必要があります。
従来のプログラミング学習では、Python をインストールしたり、Conda を設定したり、npm のインストール失敗を解決したりするとき、通常は検索エンジンを開き、チュートリアルを見つけて、ステップに従って操作していました。途中でエラーが出たら、さらにエラー情報を検索し、何度も試行錯誤するという方法でした。
間違いです！❌
AI 時代、特に AI IDE を使用する場合、コア原則を覚えておいてください：どんな操作も、まず AI に聞いてみて、必要なら直接やらせることができます。
- **環境のインストール方法が分からない？** サイドバーで AI に直接聞く：「Python を書きたいから、Python がインストールされているか確認してくれて。なければインストールして。」
- **ネットワークが遅い？** 依存パッケージのインストール中に回り続けたりエラーが出たら、エラーをそのまま AI に投げる：「ダウンロードが失敗した。ネットワークの問題？国内のミラーサイトに切り替えてくれない？」
- **コマンドを覚えられない？** Git コマンドや Conda コマンドを暗記する必要はありません。AI に直接伝える：「新しい仮想環境を作って。名前は demo にして。」
### 1.2 なぜ環境とツールが必要なのか
「数行のコードを書いてみる」ことから「長期的にメンテナンスできるプロジェクトを作る」ことになると、環境とツールに対する要件は完全に異なります。
理論上、システム付属のメモ帳でもコードは書けますが、問題はすぐに起こります：
- **コードがすべて黒い文字**で、キーワード、文字列、コメントが混ざり合って、構造が一目で分からない
- **インテリセンスがない**、すべての単語を手入力する必要があり、1文字でも間違えると何度も確認し直す
- **ファイルが増えると混乱する**、十数個のファイルを行き来して切り替え、変更したい行がどこにあるか見つからない
- **エラーの原因が推測しかできない**、プログラムがクラッシュしてもどこが問題か分からず、1行ずつログを出力して試すしかない
したがって、IDE（統合開発環境）が必要です。IDE はコードを色分けして表示し、入力時に自動補完し、ファイルをプロジェクト単位で整理し、エラーをステップごとに追跡できるため、開発の効率と正確さが大幅に向上します。
## 2. IDE とは何か、なぜ IDE が必要なのか
::: info 予習ヒント
IDE が何か、各画面要素が何の役に立つかまだ馴染みがない場合は、事前に [IDE 入門](/ja-jp/appendix/2-development-tools/ide-basics) を読んで予習し、IDE の基本概念と一般的な機能を理解してください。
:::
プログラミングの初期時代は、シンプルなテキストエディタと言語プロセッサだけで十分でした。しかしプロジェクトの複雑さが増すと、開発者はファイル管理、シンタックスハイライト、デバッグを効率的に行うツールを切実に必要とするようになり、IDE（統合開発環境）が誕生しました。
IDE は「コードを編集、管理、実行、デバッグする」ための専用プログラムと理解できます。初期の IDE は非常に「原始的」で、ほぼ完全にキーボード操作でした。
ターミナル画面（Terminal） 画像出典：https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
`Vim` のような機能が成熟した「内蔵 IDE」は、サーバーのリモート操作によく使われます。
より効率的にするために、マウス操作をサポートするモダン IDE が必要です。通常、以下を含みます：
- **ソースコードエディタ**：シンタックスハイライト、自動補完
- **ビルド＆実行ツール**：内蔵のコンパイラ/インタプリタ
- **デバッガ**：ブレークポイントデバッグ、変数の確認
モダン IDE にはさらに Git などのツールが内蔵されていることも多いです。最も人気のあるのは Microsoft の **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** で、軽量で拡張性が高いです。JetBrains 全家桶などの専門 IDE もありますが、VS Code は初学者に最も親和的です。
VS Code のコア理念は「すべてがプラグイン」です。プラグインメカニズムを通じて各言語をサポートし、Python プラグインをインストールすれば Python IDE に、C++ プラグインをインストールすれば C++ IDE になります。プラグインをインストールしなければ、高度なテキストエディタに過ぎません。
Markdown ドキュメントを編集することもできます。
要するに、IDE は開発者が効率的にコードを書き、プログラムを実行するためのツールキットです。
より詳細な解説は、[付録の仮想 IDE 可視化 IDE 原理部分](/ja-jp/appendix/2-development-tools/ide-basics)を参照してください。
## 3. AI IDE と通常の IDE の違い
通常の IDE（例えばオリジナルの VS Code）は本質的に「ツールボックス」です：
プロジェクトを開き、コードを書き、実行・デバッグでき、プラグインもインストールできますが、自分が何をすべきか、どうやるべきかを知っていることが前提です：
- エラーが出たら、自分でメッセージを読み、どの行に問題があるか確認する
- 新しいページや新しい API を追加したいとき、対応するファイルを自分で探し、自分でコードを書く
- 環境設定やビルドを行うとき、自分でドキュメントを調べ、ステップに従って操作する
しかし AI IDE では、大規模言語モデルを使ってコーディングやファイルの修正を直接支援できます：
- 「ログインページを作って」と言うだけで、まずベースとなるコード構造を自動生成
- エラーメッセージと関連コードを投げると、原因を分析し修正案を提示
- 確認後、AI が自動的に新しいファイルを作成し、コードを一括修正し、複数ファイルにまたがる作業を処理
例えば、コードの一部を選択して「リファクタリングして」「コメントを付けて」と言ったり、サイドバーで「このプロジェクトはどう設計されているの？」と聞いたりすることもできます。`@ファイル名` や `@プロジェクト全体` で参照範囲を指定し、一文で新しいファイルの作成、コードの記述、実行までの面倒な操作を自動化できます。
最新版の VS Code には、大規模言語モデルアシスタントが内蔵されています。コードリポジトリ全体、特定のファイル、さらには特定の関数とモデルと対話できます。Web 版で自動コード生成ツールを使ったときと同様に、ニーズをプロンプトとしてコーディング Agent に送信し、機能の実装、ファイルの作成、コードの修正、環境設定などを自動的に行わせることができます。
VS Code をインストールして、右上のサイドバー入口をクリックし、AI 機能領域を開くと、これらの機能を体験できます。
しかし、VS Code は AI 能力が最強の IDE ではありません。大量の AI 補助コーディングが必要なシーンでは、「もっと賢く、効率の良い」ツールを使いたいと思うでしょう——良い AI IDE はコードの記述やバグ修正の時間を大幅に削減できます。以下では、現在比較的人気のある AI IDE をいくつ紹介します。個人の好みに応じてどれでも選んで使えます。
VS Code はオープンソース（誰でもソースコードをダウンロードして自分でコンパイル可能）のため、現在の市場の大多数の AI IDE は VS Code をベースに二次開発されています。したがって「いろいろな IDE を学び直す」心配はありません——VS Code の基本的な使い方に慣れていれば、これらの AI IDE に移行しても新しく学ぶ必要はありません。
一般的に、異なる AI IDE 間の違いは主に4つの側面にあります：価格；使用できるモデルの種類（一部の高級モデルは特定の地域で制限される場合がある）；Agent の能力（コーディング支援時の知性と実行力）；実行速度とパフォーマンス。実際のテスト結果に基づいて選んでください。自分に合うものが最高です。
> 典型的な AI IDE は以下のコア能力を備えています：
>
> - インテリジェントなコード生成と補完：従来の IDE では、数文字入力して変数名や関数名を補完するのが一般的でしたが、モダン AI IDE では数行の疑似コードや簡単な要件説明で、IDE が完全なロジックを自動補完し、指示に基づいて大段落のコードやモジュール全体を生成することも可能。
> - コード理解と Q&A：IDE が特定のコード、ファイル、プロジェクト全体のディレクトリ構造に関する質問に理解して回答する。
> - コードのリファクタリングと最適化：ユーザーの意図に基づいて、指定したコードフラグメントの実装を書き換えたり最適化したりする。
> - テストの自動生成：各関数やモジュールに対するテストコードを自動生成し、的を絞ったテストが可能。
> - Agent 式タスク実行：インテリジェント Agent がファイルの生成、パッケージのインストール、実行、コードの修正などを自動で行い、多くのタスクで初級ソフトウェアエンジニアの仕事を部分的に代替可能。
::: details Antigravity
### [Antigravity](https://antigravity.google/)
Antigravity は Google が2025年11月に Gemini 3 とともにリリースした全新の AI IDE で、「Agent-First」（エージェントファースト）開発モードを採用しています。従来の AI 補助コーディングとは異なり、Antigravity は AI エージェントを「能動的な実行者」として位置づけ、エディタ、ターミナル、ブラウザなどのツールを直接操作できるようにします。開発者は高位の意図を伝えるだけで、エージェントがタスクを自動的に分解、計画を策定し、コードを実行し、テストを実行し、成果物を生成します。Gemini 3 Pro、Claude Sonnet 4.5 などの複数のモデルをサポートし、現在パブリックプレビューとして提供され、Windows、macOS、Linux の全プラットフォームをサポートしています。
:::
::: details Trae
### [Trae](https://www.trae.ai/)
Trae は ByteDance がリリースした AI プログラミングアシスタントで、100種類以上のプログラミング言語をサポートし、主流 IDE に統合できます。機能には、自然言語によるコード生成、自動デバッグ、デザイン画を React/Vue コンポーネントに変換などがあります。2025年8月のアップデート以降、Trae はインテリジェントな依存関係のインポート、リネーム提案、タスクリスト管理などの機能を追加。SOLO モードでもバックエンドコード生成と技術アーキテクチャドキュメントの編集をサポートするようになりました。
:::
::: details Cursor
### [Cursor](https://cursor.com/)
Cursor は Anysphere が開発した AI コードエディタで、VS Code をベースにカスタマイズされ、大規模なコードリポジトリとマルチファイル連携のシーンに最適化されています。GPT-4o、Claude 3.7 などのモデルをサポート。2025年に導入された Claude Max モードでは数百万行レベルのプロジェクトを処理できます。プロフェッショナル版はリクエスト回数の制限が撤廃され、複雑なエンタープライズプロジェクトに非常に適しています。
現在、Cursor は「フロントエンドインターフェース付き AI IDE」の中で総合的な体験が最も良いものの一つで、ユーザー数も多く、機能のイテレーションも頻繁です。最大の欠点は価格が高いこと——プロフェッショナル版は月額約20ドルです。
:::
::: details Qoder
### [Qoder](https://qoder.com/)
Qoder は Alibaba がリリースした AI IDE で、「透明な協働」と「強化されたコンテキストエンジニアリング能力」を強調しています。Action Flow を使ってタスクを複数のステップに分解し、AI の実行プロセスをリアルタイムで追跡できます。また、マルチモデルの動的ルーティングとタスク状態機管理をサポートしており、中・大規模プロジェクトでのアーキテクチャガバナンスやレガシーシステムの「リバースエンジニアリング」分析に非常に適しています。
:::
::: details CodeBuddy
### [CodeBuddy](https://www.codebuddy.com/)
CodeBuddy は Tencent Cloud がリリースした AI プログラミングツールで、中国語の指示のサポートとエンタープライズ級のコンプライアンス能力を強調しています。コード補完、バッチコードレビュー、マルチモデル切り替えなどの機能を提供。Craft インテリジェントはマルチファイルのコード生成と API 統合を実現できます。エンタープライズ版はプライベート環境でのデプロイをサポートし、レベル3等保認証を通過しており、金融、医療などデータセキュリティ要件が高い業界に適しています。
:::
::: details VS Code + Cline
### VS Code + [Cline](https://cline.bot/)
Cline は VS Code（Visual Studio Code）の AI プログラミング Agent プラグインで、異なる API エンドポイントを設定することで使用する大規模言語モデルを柔軟に切り替えることができます。Cline はマルチモーダル入力、MCP ツール拡張、コストモニタリングをサポートし、すべての操作はユーザーの確認後に実行されます。アイデアの迅速な検証や、既存の開発フローへの統合に非常に適しています。基本機能は無料で、エンタープライズ版はプライベート環境でのモデルデプロイをサポートしています。
:::
::: details Kiro
### [Kiro](https://kiro.dev/)
Kiro は AWS（Amazon Web Services）がリリースした AI プログラミング IDE で、Amazon Bedrock と AWS クラウドサービスエコシステムに深く統合されています。Claude、Nova などの複数の大規模モデルをサポートし、AWS クラウドサービスと緊密に統合する開発シーンに特に適しています。Kiro はインテリジェントなコード生成、自動テスト、AWS リソース（Lambda、S3、DynamoDB など）とのシームレスな接続能力を提供し、クラウドネイティブアプリ開発に独自の強みがあります。
> **注意：** Anthropic Claude 関連のモデルを使用したい場合、Cursor、Kiro、または Antigravity を IDE として使用する必要があります。これらの IDE は Anthropic と公式提携または深い統合があり、より安定した完全な Claude モデル体験を提供できます。
:::
## 4. 実践：AI IDE を使ってローカルでスネークゲームを生成する
前のセクションでは主に「概念」と「違い」について説明しました。このセクションでは、完全な実践を通じて抽象的な概念を具体的な操作に落とし込みます：**空のフォルダを作成 → AI IDE で開く → サイドバーでチャットし、React でスネークゲームをゼロから生成。** ここでは上記で紹介した Trae を例にします。
::: tip 💡 ヒント：ウェブからローカルへのシームレスな移行
以前に z.ai や他のウェブ版 AI プログラミングプラットフォームでプロジェクトを開発したことがあれば、コードをダウンロードしてローカルに持ってきて、AI IDE で開き続けて開発できます。これにより以前の成果を保持しつつ、ローカル IDE のより強力な AI 補助機能を活用できます。
操作手順は非常にシンプル：
1. z.ai などのプラットフォームでダウンロードボタンをクリックし、プロジェクトをローカルに保存
2. 解凍後、Trae/Cursor などの AI IDE でそのフォルダを開く
3. サイドバーで AI と対話を続け、プロジェクトを反復・最適化
:::
### 4.1 準備：Trae のインストールと概要
#### 4.1.1 Trae とは
Trae の正式名称は "The Real AI Engineer" と理解でき、ByteDance が開発した適応型 AI IDE です。人気のある VS Code をベースに構築されているため、すでに VS Code に慣れているなら、Trae のインターフェースレイアウトや基本操作は非常に馴染みのあるものになるでしょう。
Trae のコア目標は開発者の「インテリジェントなプログラミングパートナー」になることです。AI 能力を深く統合することで、大量の反復作業を自動処理し、より直感的で効率的な開発体験を提供します。単なる「コード補完ツール」ではなく、プロジェクトの作成、コードの記述、デバッグ、テストからデプロイまでの開発ワークフロー全体をサポートします。
#### 4.1.2 Trae のインストール
Trae は国際版と中国版に分かれています。国際版は海外ネットワークへのアクセスが必要ですが、GPT-5 などの最新の海外モデルが使用可能。中国版は主に国内の最新の大規模モデルをサポートし、例えば GLM、Qwen、Kimi などを使用できます。
国際版ダウンロード：https://www.trae.ai/
中国版ダウンロード：https://www.trae.cn/
##### Trae の料金と使用方法
::: info 💡 バージョン選択のヒント（初心者は CN 版を推奨）
- **初心者は中国版（CN 版、trae.cn）を強く推奨。** 現在の使用体験がより良く、基本機能は無料で、海外ネットワーク不要
- GPT-5 などの海外モデルを使用したい場合、ネットワーク条件が許せば国際版を選択
- サードパーティの API Key を既に持っている場合、サードパーティモデルを統合することでコストを柔軟に制御可能
:::
> 💡 **現在 OpenRouter の無料モデルを使ったテストを推奨**
>
> チチュートリアル執筆時点（2026-02-12）の時点で、StepFun のモデルを無料で試用できます。詳細は以下の 4.2 セのモデル統合方法を参照し、`stepfun/step-3.5-flash:free` を統合してください。
>
Trae の料金と使用方法には以下のオプションがあります：
- **中国版 CN 版（強く推奨）**：基本使用は無料、現在の全体の使用体験が国際版より優れており、初心者に最適。ユーザー数が多いため一時的に順番待ちが発生する場合があります。
- **国際版**：月額約3ドルのサブスクリプションで利用可能。GPT-5 などの海外モデルにアクセスできるが、海外ネットワークへの接続が必要。
- **サードパーティモデル統合**：DeepSeek、通義千問（Qwen）、Kimi などの国内大規模モデルの Token API を既に持っている場合、Trae のサードパーティモデル設定機能でこれらの API を統合して使用可能。各クラウドサービスプロバイダ（Alibaba Cloud、Tencent Cloud、Baidu Cloud など）は通常 Coding Plan サブスクリプションを提供しており、購入するとそのクラウドベンダーの大規模モデル API をより安価に使用できます。自分の好きなモデルを自由に選びながらコストを制御できます。
初心者は中国 CN 版の無料版から始めることをお勧めします（ダウンロード：https://www.trae.cn/ ）。現在 CN 版の方が使用体験が良く完全に無料です。順番待ちの問題が発生したら、サードパーティモデルの統合やクラウドベンダーの Coding Plan プランの購入を検討してください。
#### 4.1.3 Trae の画面の概要
インターフェースの見た目は、Trae は日常的に使っている VS Code と非常に似ています：左側にエクスプローラー、中央にエディタ、右側に拡張パネルという古典的な3カラムレイアウトです。
右側のサイドバーが Copilot インタラクションウィンドウ、または Agent ウィンドウとしても機能します。表示されていない場合は、Trae 右上のサイドバーアイコンをクリックして開いてください。
サイドバーを開くと、`Builder` オプションが表示されます。これが Agent モードです。シンプルに理解すると、z.ai の「ローカル版」のようなもので、ローカル環境で操作を実行し、環境をインストールし、ウェブページを開いたりできます。
"Builder" をクリックすると、"Chat" モードと "Builder with MCP" モードが表示されます：
- **Chat モード**：主に現在のフォルダ内のコードと対話する、または通常のチャットモデルとして使用。（左上の "File" メニューからフォルダを開くことができます。この場合、Builder が作成・変更するファイルはすべてそのフォルダ内に限定されます。）
- **Builder with MCP モード**：Agent に更多のツールを提供（例えば、言語モデルを他のソフトウェアと接続したり、天気をクエリしたりなど）。簡単に言うと、MCP は言語モデルに様々な外部ツールを呼び出すことをより便利にします。
下のエリアにはモデル選択オプションがあり、クリックすると現在の大規模モデルを変更できます。中国版では Kimi k2 や GLM などの国内モデルを選択可能。国際版 Trae を使用している場合は ChatGPT や Claude などの海外モデルも選択可能。ただし、国内大規模モデルの発展は非常に速く、Kimi、Qwen、GLM などは多くのタスクで Claude 3.5 や 3.7 に近い実力を既に備えており、日常の開発には十分すぎるため、国際版か中国版のどちらを使用しても構いません。
**注意：Auto モード（モデルを自動選択）の使用は推奨しません。** 国際版の場合は Gemini または GPT モデルを、中国版の場合は Kimi k2、Minimax、GLM などの国内モデルを推奨します。** 異なるモデルには異なる使用シーンがあり、教条的にどれが優れているかを断定するものではありません。**異なるタスクで行き詰まったらモデルを切り替え、複数回テストして自分にとって最適な結果を得てください。
以上が Trae の簡単な紹介です。次に、以前 z.ai で行った操作を振り返り、Trae で同じことを試してみましょう。
### 4.2 ステップ1：空のフォルダを作成し AI IDE で開く
実際に作業を始める前に、まずクリーンなプロジェクトワークディレクトリを準備する必要があります。
このセクションの例では、ローカルに `snake-game-react` という名前の空フォルダを作成します。
その後、インストール済みの AI IDE を開き、起動画面で "Open Folder" を選択し、その空のフォルダをプロジェクトルートとしてインポートします。または、フォルダを IDE のウィンドウにドラッグ＆ドロップして開くこともできます。この時点で、左側のエクスプローラーにはコードファイルが何も表示されず、完全に空白のプロジェクト状態から始まることを示しています。
::: details 📚 オプション：クラウドサービスの API または Coding Plan の統合
このセクションでは、クラウドサービスの API または Coding Plan を統合する方法を紹介します。最後に Trae での統合のスクリーンショットを含みます。
**Coding Plan とは**
Coding Plan は各クラウドサービスプロバイダーが提供するサブスクリプションプランで、購入すると一定期間内に無制限または高頻度でそのクラウドベンダーの大規模モデル API を使用できます。Token 単位課金よりも Coding Plan の方が「月額固定料金」のようなもの——一定の固定料金を支払えば、気兼ねず何度でも呼び出せるため、毎回の呼び出し課金を気にする必要がありません。
**なぜ Coding Plan を購入するのか？**
「直接 API を呼び出せるのに、なぜわざわざ Coding Plan を購入する必要があるの？」と思うかもしれません。主な理由は：いつでも自由に使える。Coding Plan の最大のメリットは、いつでも頻繁に大規模モデルを呼び出せ、費用が爆発する心配や、頻繁に課金テーブルを確認する必要がないことです。
**推奨国内クラウドサービスの Coding Plan**
以下は国内主流クラウドサービスプロバイダーが提供する Coding Plan の推奨オプションです：
- 智譜 AI（BigModel Plan）：https://bigmodel.cn/glm-coding
- 火山引擎（ByteDance Cloud AI Plan）：https://www.volcengine.com/activity/codingplan
> 💡 **大規模モデル API を直接統合することも可能**
> Coding Plan 以外にも、Add Model で各モデルの API を直接統合できます。以下の OpenRouter StepFun 無料 API を統合する方法を参考に、Trae に API を統合して使用できます。テスト済みで基本的なプログラミングニーズを満たします。
> 充填する場合は、まず10元チャージしてどれくらい使えるか体験するのがおすすめです。例えば DeepSeek などのコストパフォーマンスの高いモデル
>
**Coding Plan の統合手順：**
Coding Plan の統合は数分で完了します：
1. 選択したクラウドサービスプロバイダーの公式サイトにアクセス（例：智譜 AI https://bigmodel.cn/glm-coding 、火山引擎 https://www.volcengine.com/activity/codingplan）
2. アカウントを登録してログイン
3. "料金" または "Coding Plan" ページを見つける
4. 適切なプランを選択して支払いを完了
5. 支払い成功後、API Key または Plan ID が得られます
::: tip 🎯 カスタムモデル推奨
Trae でカスタムモデルを統合する際、デフォルトで OpenRouter 方案を推奨します。OpenRouter は統一 API インターフェースを提供し、複数の大規模言語モデルを便利に統合できます。
**2026年2月12日時点で、無料の StepFun API も利用可能です：**
- **`stepfun/step-3.5-flash:free`**：StepFun（階跃星辰）が提供する無料モデル。Trae で直接統合して使用可能。
**その他の無料モデル：**
- **`openrouter/free`**：無料 LLM API をデフォルトで使用するモデルオプション。Trae の Custom Model 統合でそのまま使用可能（モデル ID を直接入力するだけ）。無料で AI プログラミング機能を体験できます。
これらの無料オプションは初心者に最適です。本格的な本番環境に導入する前に、無料方案で AI IDE のワークフローに慣れることができます。
**オプション：大規模モデル API の統合（DeepSeek の例）**
1. DeepSeek プラットフォームにアクセス：https://platform.deepseek.com/usage
2. アカウントを登録してログイン
3. チャージページで10元の Token パッケージを購入
4. 充電完了後、API Keys ページで API Key を作成してコピー
5. Trae で **"Add Model"** をクリックし、DeepSeek を選択、対応するモデルを入力、API Key を入力して使用可能
以下の画面で、カスタムモデルを追加できます。（注意：モデル選択のオプションの後【必ず最後までスクロール】し、下部に「自定义模型」があるのでクリックしてモデル ID を入力。上記の推奨モデル ID である `stepfun/step-3.5-flash:free` を直接入力。同時に下部の "Get Key" をクリックして公式サイトにアクセスし、対応する API Key を入力すれば正常に使用できます。）
:::
### 4.3 ステップ2：サイドバーでチャットし、AI に React でスネークゲームを設計させる
AI チャットサイドバーを開きます：通常は `Ctrl+L` または右側のチャットアイコンをクリックします。チャットに以下のように明確なプロンプトを入力します：
> React を使ってスネークゲームを実装してください。キーボード操作、食べると伸びてスコアが加算、壁や自分の体にぶつかると「ゲームオーバー」を表示し、リスタートをサポートする。実装後にプロジェクトを起動してください。インストールされていないプログラム環境があれば自動的にインストールしてください。
このプロセスでは、AI は単なるチャットモデルではなく、ローカル環境を操作できることに注意してください。自然言語で達成したい目標を記述し、AI に具体的な実行手順を決めさせます。
実行中に問題が発生した場合、AI は対話内にエラーと処理方法を表示します。対話を続けることで修正でき、すべてのコマンドの詳細を覚える必要はありません。
::: warning ⚠️ 注意
例えば下図のように、AI Agent が実行中に一時停止することがあります。これはユーザーの入力を待っているためです。例えば、作成する名前の入力、Enter でコマンドの実行確認、またはコマンドのクリックなど。通常はそのまま Enter を押せば問題ありません。このステップで何をすべきか分からない場合は、現在の画面のスクリーンショットを撮って AI に聞いてください。
:::
以下の図では、Run をクリックして確認する必要があります：
以下の図では、y を入力して確認するだけです：
以下の図では、テンプレートを作成中ですが操作方法が分からず、AI に質問する例です：
AI Agent が実行中に一時停止するもう一つの原因は、"サービス"が開始されたためです。スネークゲーム自体が一種の"サービス"であり、以下のような URL が表示されたら、Agent がローカルでサービスを起動したことを意味します。対応する URL にアクセスしてスネークゲームを遊ぶことができます。サービスを継続的に実行する必要があるため、ここで一時停止します。`Skip` ボタンをクリックしてください。
このプロセスで、聞き慣れない用語や理解できない内容に遭遇しても、心配ありません。付録の「コンピュータ用語解説」を参照するか、AI に直接質問したり、その場で質問してください。
期待通りの結果にならない現象に遭遇した場合、例えばスネークが壁にぶつかってもゲームオーバーにならない、クリックしてスタートしても動かないなどの場合は、サイドバー Agent に現象を記述してください。エラーが発生した場合は、スクリーンショットまたはエラーメッセージをコピーしてサイドバー Agent に投げます。複数回修正しても解決しない場合は、モデルを変更してみてください。
しばらくすると、z.ai と同様の結果が得られます：
右下のチェックマークをクリックしてコードの変更を確定することもできますし、`Cancel` ボタンで変更を取り消すこともできます。または `2 files need review` の箇所を展開して変更後のコードを確認することもできます。
ここで注意すべき点として、コードの修正が必ず正しいとは限らないことです。すべての IDE の Agent はコードのロールバックをサポートしています。例えば、誤って変更操作を行った場合や、今回の操作結果に不満な場合、修正完了後に戻って入力フィールドに移動し、`Revert` ボタンをクリックして操作前の状態に戻すことができます。入力するテキストを修正して再度実行できます：
### 4.4 ステップ3（オプション）：AI にコードの実装の詳細を聞く
スネークゲームが正常に動作するようになったら、フロントエンドや React にまだ不慣れている場合は、同じチャットウィンドウで AI にできるだけ口語的な表現でコードの解説を依頼できます。ツールを切り替える必要はなく、ドキュメントをあえて暗記する必要もありません。現在のプロジェクトを中心に質問し続けるだけで構いません。
実用的なアプローチは、AI にまず「ゲームがどう動くのか」を全体像で説明させ、その後、具体的な詳細に深掘りすることです。例えば以下のように質問できます：
> 「上から順に説明して。このスネークゲームが1ステップずつどう動くのか？専門用語はできるだけ使わないで。」
その後、回答に沿ってさらに核心的な点を質問します。例えば：
> 「画面上の蛇の体の各節は、どのようなデータ構造で記録されているの？例えで説明して。」
> 「"一定時間ごとに動く"というのをコードのどの部分で実現しているの？どこがその部分？」
> 「食べ物を食べたとき、具体的にどのような処理を行うか？どのロジックで食べたことを判断するのか？」
`SnakeGame.tsx` のようなファイルを見つけたものの、完全に内容が分からない場合も、直接 AI に分割して説明してもらうことができます：
> 「`SnakeGame.tsx` を機能ごとにいくつかのブロックに分けて説明して。各ブロックがだいたい何をしているか、分かりやすい言葉で。」
このラウンドの対話では、理解できない用語をすべて質問の入り口として使えます。例えば：
> 「さっき言った"状態"って具体的に何？生活の中の例で説明して。」
> 「さっき言った"タイマー"はここで主に何をするの？それを削除するとどうなる？」
このアプローチの目標は、すべての概念を一度に覚えることではなく、以下の3点を理解することです：このゲームにはどのようなコアデータがあるか（蛇、食べ物、スコア、ゲーム状態など）、これらのデータがいつ変化するのか（移動、食べ物、ゲームオーバーなど）、それぞれの変化にどのコード部分が対応しているのか。この3点が整理できれば、このコードの主要なロジックは理解できます。
### 4.5 ステップ4：AI に画面を見栄え良くする
ここで初心者にとって重要な注意点があります。「画面をもっと良くして」とAI に一言で言うのはやめましょう。この言い方は人間のデザイナーにとっても曖昧すぎます。ましてやモデルに——「見栄えが良い」とはどういうスタイルなのか、どこを修正すべきのか、レイアウトの問題なのか配色の問題なのか、AI にはこの一文から読み取れるものは何もありません。AI に本当に希望する効果に近づけるには、この曖昧な目標を具体的で実行可能な小さな要件に分解する必要があります。
例えば、多くの人が最初にこう言います：
> 「画面をもっと良くして。」
例えば、以下のように具体的な要件を先に出すことができます：
> 「ゲームエリアを中央に配置し、左上隅に貼り付かない。背景色は明るめにして、蛇と食べ物が目立つように。スコアを大きくして目立つ場所に配置。ブルーをメインカラーにし、全体の配色とボタンを美しくしてください。」
"ゲームオーバー"時にさらに明確なフィードバックが欲しい場合は、さらに追加できます：
> "ゲームオーバー時、画面中央に「ゲームオーバー」と表示し、その下に「リスタート」ボタンを配置してゲームをリセットできるようにしてください。"
AI は記述に基づいて React コンポーネントとスタイルを直接修正します。保存してブラウザをリフレッシュすると、新しい画面が表示されます。まだ希望通りの効果でなければ、小さなステップで調整を繰り返すことができます。例えば：
> 「スコアをもっと大きくして、色をもう少し目立つ色に。」
> 「ゲームエリアをもっとコンパクトにして、周囲に余白を確保。」
> "リスタートボタンをブルーの丸角スタイルにして、プロンプトの下に中央配置。"
この段階で、修正後にエラーが発生しても、自分で解決する必要はありません。エラー情報をそのままチャットウィンドウにコピーするか、簡単な説明を添えて AI に現在のプロジェクトコンテキストで修正してもらうことで解決できます。この「対話し、修正、リフレッシュ」のサイクルを通じて、動く Demo を段階的に磨き上げることができます。
### 4.6 （オプション）z.ai のアーキテクチャを参考にスネークゲームを改良する
Vibe coding 初心者にとって最も難しいのは、"ベストプラクティス"が何かわからず、"どんなアーキテクチャが最適か"がわからないことです。しかし、コンピュータの基礎がないため、AI をうまく誘導できないという問題があります。解決策は"直接参考する"ことです——以前に z.ai でコードを確認したことを覚えていますか？実は README（プロジェクトの機能と技術アーキテクチャを紹介する部分）にベストプラクティスの参考が記載されています：
README の全内容をコピーして Trae のサイドバーに貼り付け、README のアーキテクチャに基づいてローカルのコードを修正させます。
最終的に z.ai と非常に似たページデザインスタイルが得られます：
## 5. 画面上の各ボタンは何をするのか
上記の操作で、最小限のプログラム生成クローズドを迅速に完了しましたが、IDE にまだ慣れているとは言えません。今後長期に使うこのツールに完全に慣れるために、このセクションで IDE の各詳細を深く解説します。異なる AI IDE で画面は多少異なりますが、大部分は [VS Code のレイアウト](https://code.visualstudio.com/docs/getstarted/getting-started) を踏襲しています。
各部分の具体的な役割：
- **Title Bar（タイトルバー）**：ファイル名とウィンドウ制御ボタンを表示
- **Activity Bar（アクティビティバー）**：ファイル、検索、機能ビューなどの切り替え
- **Side Bar（サイドバー）**：ファイルリストなどの具体的な内容を表示
- **Editor Groups（エディタグループ）**：コードを記述するコアエリア
- **Breadcrumbs（パンくずナビ）**：ファイルパスを表示、ジャンプ可能
- **Minimap（コードミニマップ）**：コードの全体像を素早く確認
- **Panel（ボトムパネル）**：ターミナルと出力ウィンドウを含む
- **Status Bar（ステータスバー）**：現在の環境状態を表示
より詳細な解説は、[付録の仮想 IDE 可視化 IDE 原理部分](/ja-jp/appendix/2-development-tools/ide-basics)を参照してください。
## 6. AI とどう話せば効果的なのか
AI の能力がますます強くなり、私たちは多くの「プログラマーにコードを書かせる」仕事を AI に任せることができるようになりました。
しかし、実際に使用すると、同じ AI を使っても、数文で使える小さなプロジェクトを作れる人と、半日チャットしたのに全く意図と異なる結果になる人もいます。その違いは「誰がより賢い」からではなく——あなたが AI と話す方法が、十分に具体的で、十分にステップバイステップであるかどうかにあります。
このセクションでは、いくつかの一般的なシーンから、完全な初心者向けの質問方法を紹介し、AI に安定して使える結果を得る方法を学びます。
### 6.1 ニーズを明確にする：「曖昧なアイデア」から「具体的な説明」へ
多くの人が AI を初めて使うとき、非常に大雑把に一言だけ言う傾向があります。例えば：
> 「ウェブページを作って。」
> 「小さなアプリを作って。」
この場合、AI は「何を作ればいいか」を自分で推測するしかなく、適当に見た目は立派なものを作ってしまいますが、あなたが本当に作りたかったものとは大きく異なる可能性があります。
AI に伝えるべきことは、脳内のアイデアをいくつかの文に分解して、一つずつステップバイステップで伝えることです。
以下の側面から補足するとより効果的です：
1. **それに何を使いたいのかを伝える**
例えば「個人紹介ページ」だけではなく、「1ページだけのシンプルな個人紹介ページを作りたい。採用する人に見せるために使いたい」と言えばより具体的です。
- 「1ページだけのシンプルな個人紹介ページを作りたい。採用する人に見せるために使いたい」
2. **画面に何を置きたいかを伝える**
専門用語を使う必要はありません。表示したいものを描写するだけで構いません。
- 「ページに3つの部分を置きたい：上に名前と一言の自己紹介、真ん中に数条の仕事経験、下にメールアドレスとWeChat ID」
3. **自分のレベルと制約を伝える**
AI に初心者向けのシンプルな書き方をさせます。
- 「コードは全く書けない。ブラウザで開ける完全なコードを1つのファイルにまとめてほしい。」
4. **結果の受け取り方を伝える**
例：
- 「`index.html` という名前で保存し、ブラウザで開けるようにしてほしい」
これらの情報を整理すると、AI に以下のように伝えることができます：
> 「コードは全く書けない。ブラウザで開ける完全なコードを1つの `index.html` ファイルにまとめてほしい。1ページだけのシンプルな個人紹介ページを作りたい。採用する人に見せるために使いたい。ページに3つの部分を置きたい：上に名前と一言の自己紹介、真ん中に数条の仕事経験、下にメールアドレスとWeChat ID。」
このように情報を明確に伝えると、AI はあなたの真のニーズに近い結果を出力してくれます。
### 6.2 リズム：まず「動くもの」を作り、その後少しずつ複雑にする
完全な初心者によくあるよくある罠は、最初から「非常に完成度の高い」「機能が多い」ものを作ろうとすることです。
例えば：
> 「淘宝のようなサイトを作って。」
> 「登録、ログイン、注文システムを作って。」
結果として、AI は大量のコードを出力しますが、コピーしても開けない、またはあちこちエラーばかりです。コードを見てもどこが問題なのか分からず、最終的に諦めることになります。
より適切なアプローチは、意図的にリズムをコントロールし、AI に1ステップずつつ進ませることです：
1. **第1ステップ：まず「最小限の例」を作る**
ブラウザで何かが表示されるかを確認するだけ。
例：
> 「まず最もシンプルな例を作ってほしい。ブラウザで『これは私のホームページ』と表示されるだけでいい。ファイル名は何にすべきか、どう保存して、どう開くかまでステップバイステップで教えて。」
2. **第2ステップ：その上に徐々に内容を追加する**
「本当に表示された」と確認した後に追加します。
> 「確認できた。その上で、『仕事経験』のエリアを追加して。完全なコードを再度送ってほしい。変更部分だけではなく、全体を送ってほしい。」
3. **第3ステップ：構成がある程度になったら見栄えを改善する**
例：
> 「ページは正常に表示できるようになった。次に見栄えを少し良くしたい。全体を中央配置に、タイトルを大きくし、見やすいフォントを使ってほしい。更新後の完全なコードを送ってほしい。」
各ステップごとに実行して確認し、次に進むことで、どこかで問題が起きた場合でもすぐに「前の動いていたバージョン」に戻ることができます。すべてを一度にやろうとするのではなく、1ステップずつ進めることが重要です。
### 6.3 スクリーンショットとコピペースを活用：分からないことは「画面を AI に投げる」
完全な初心者が直面する難しさの多くは、「コードが分からない」ことではなく、「問題をどう表現すればよいか分からない」ことです。
例えば：
- ブラウザに突然大量の英語のエラーが表示され、全く理解できない
- ウェブページのレイアウトが思った通りにならないが、どう表現すればよいか分からない
これらの場合、専門用語を使って説明する必要はありません。最もシンプルな方法は——見ているものをそのまま AI に投げることです。
具体的には以下のようにできます：
1. **エラーメッセージをコピーする**
大量の赤いエラーメッセージが表示されたら、そのままコピーして AI に送り、以下のように言います。
> 「実行後に表示された完全なエラーメッセージです。英語が読めません。普通の人が理解できる言葉で、これが大まかにどんな問題か説明して。その後、どうすればいいか教えて。」
2. **AI に画面のスクリーンショットを見せる**
「このページの表示がおかしい」と思っているが、どう表現すればよいか分からない場合、スクリーンショットを撮って AI に送り、コード全体を一緒に送ります。そして言います：
> 「これが現在のページです。これは私の現在の完全なコードです。私は元々 3列レイアウトにしたかったのに、1列になった。原因と修正方法を教えて。」
3. **気に入ったウェブページを参考にする場合**
違切にウェブページを開いたり、スクリーンショットやタイトル、段落をコピーして AI に送ります。
> 「この構造のページを作りたい。同じような構造で、私のテキストに合わせてコードを修正して。」
簡単に言えば：あなたの役割は「見ているものを AI にそのまま持っていく」こと。そして「どうしたいか」を最も素朴な言葉で伝えること。残りの「翻訳してコードにする」「専門用語を調べる」は AI に任せましょう。
### 6.4 AI が生成したコードが動かない時：汎用的な対処法
実際の練習で、必ず次の状況に遭遇します：
AI は真剣に良さそうなコードを出力しましたが、あなたがそのままコピペして実行しても、ブラウザは真っ白だったり、AI が言っていた効果とは全く異なる。
これはあなたが「学べられない」わけではなく、AI も完全に正しいわけでもありません。あなたと AI の間に数ラウンドの「往復確認」が不足しているだけです。
コードが「動かない」場合、以下の固定フローで AI に伝えてください：
1. **「自分が何をしたか ＋ 現在どうなのか」を明確に記述する**
「開いたらページは完全に真っ白」「xxxx ページージを開いたが、そこに言及されている部分がない」といったように、具体的に描写。
2. **現在の完全なコードを AI に送る**
多くの場合、問題はコピー時に一部が欠けているか、前回と今回のコードが混ざっていることです。
> 「以下が私の現在のファイルの全コードです。何か不足している部分や、間違っている部分がないか確認して。修正済みの完全なコードを送ってほしい。一部だけではなく全体を送ってほしい。」
3. **エラーがあれば併せて送る**
例えばブラウザ右上角にポップアップエラーが表示されたり、下部に赤い文字が表示されたりした場合、エラー文字列をコピーまたはスクリーンショットを取り、以下のように伝えます。
> 「これは表示されたエラーです。全く理解できません。まず普通の人が理解できる言葉で、これが大まかに何の問題か説明して。その後、どの行を修正すればいいか教えて。」
4. **「初心者モード」でステップバイステップで説明させる**
自分の状況を明確にし、AI に省略せずに中間ステップも含めて説明させます。
> 「コードは全く書けません。ステップバイステップで教えて：
> 第1歩で何の行を修正するのか
> 第2歩でどう保存するのか
> 第3歩でどうリフレッシュするのか
> 各ステップは完全な文章で書いてほしい。」
5. **「正しい動作時の姿」を AI に聞く**
> 「修正後のコードが正常に動いた場合、ブラウザで何が表示されるか教えて。」
このフローに従って AI と対話すれば、大部分の「コードが動かない」問題は数ラウンドの往復で解決できます。同時に、一般的な問題パターンも次第に似た状況で遭遇したときに自分で解決できるようになります。
## 7. まとめと次のステップ
この章では、ウェブブラウザで AI 生成のスネークゲームを遊べるレベルから、ローカルの AI IDE を使って自作のミニゲームを構築するレベルにアップグレードしました。主に3つのことが理解できました：なぜコードを書くときに VS Code のような IDE が必要なのか。VS Code に AI（Trae、Cursor など）を追加すると、IDE は単なるツールボックスではなく、自然言語を理解し、ファイルの新規作、環境のインストール、コードの修正などを自動で行う「インターンエンジニア」が追加されること。そして IDE の各エリア（左側のファイル、下のターミナル、中央のエディタ、右側の AI パネル）がそれぞれ何を管理しているのかがわかり、使用時に迷子になることはなくなりました。
さらに重要なこととして、1回の完全なフローを実際に実行しました：ローカルで空のフォルダを作成 → AI IDE で開く → サイドバーでニーズを記述 → AI にプロジェクトを生成させ開発サーバーを起動 → 問題が発生したら「現象＋全コード＋エラーのスクリーンショット」を一緒に AI に送り、AI に「初心者モード」でステップバイステップで修正させる。
この過程で、AI との効果的な対話方法も練習しました：目標と内容構造と自分のレベルを明確に伝え、リズムをコントロールし、「まず動くもの」を作ってから「見栄えを良くする」へと段階的に進める。
次の章では、「使えるツール」から「本当に人が使いたいプロトタイプ」へと焦点を移します。ユーザー視点からルール、インタラクション、フィードバックを設計し、AI にこれらのアイデアを実装させます。
## 8. 📚 課題：ローカル AI IDE でもう少し複雑なゲームを作る
🚀 チャレンジタスク：あなたの専用ゲームを作る
ローカル AI IDE でスネークゲームを作った経験があります。今度はもう少し複雑なミニゲームに挑戦し、完全なフロー「ニーズ記述 → プロジェクト生成 → ローカルで実行 → デバッグとイテレーション」を体験してください。
-
スネークより複雑なゲームを選ぶ
- 「ロシアンブロック」「もぐらたたし」「地雷探し」「2048」「飛行機大戦」などが考えられます
- または自分で想像したシンプルなオリジナルゲーム
-
必ずローカル AI IDE を使用すること
- 空のフォルダを作成し、AI IDE で開く
- サイドバーでチャットでゲームのニーズを明確に記述
- AI にファイルの作成、プロジェクト構造の構築、主要ロジックの実装を行わせる
- ローカルで開発サーバーを起動し、ゲームが正常に動作することを確認する
-
基本的な「遊びやすさ」とフィードバックがあること
- 少なくとも「開始」「進行中」「終了」の3つの状態を含める
- 明確な操作方法がある（キーボードまたはマウス）
- 画面上に明確なスコアや進捗のフィードバックがある
-
2回以上のイテレーションを行う
- 第1ラウンド：AI に「遊べる」バージョンを作らせる
- 第2ラウンド以降：具体的な改善を段階的に指示する（スタイル、難易度、インタラクション最適化など）
# 付録
付録ナビ
ここは「必要な時に随时参照できる」補足資料です：用語が分からない、画面の入り口が見つからない時に戻ってください。
付録一：よくあるコンピュータ用語クイックリスト
分からないコンピュータ用語が出たとき、ここで素早く意味を調べ、一通り読むことを推奨します。
付録二：Visual Studio Code メニューバー解析
AI IDE の画面の機能が分からないとき、以下の内容と AI で対話して調べるか、直接表示を確認。
Ctrl/⌘+F でキーワード検索可能。新しい用語が出たら AI にコピペしたエラーを送り、「初心者モード」で説明してもらう。
# 付録一：よくあるコンピュータ用語クイックリスト
🗺️ 用語マップ：ここで出会う用語...
🖥️ ツールインターフェース
IDE / ターミナル / パネル
🌐 ネットワークサービス
URL / ポポート / ローカル
⚙️ フロントエンド/バックエンド
API / JSON / インターフェース
📝 コードの基礎
変数 / 関数 / コンポーネント
🐞 デバッグ・エラー修正
Bug / ブレークポイント / ログ
📂 プロジェクト管理
Git / リポジトリ / コミット
🤖 AI ツール
Agent / モデル / Key
🛠️ ブラウザ
DevTools / コンソール
この部分を暗記する必要はありません。まず脳に印象を作ることが重要です。
## [一、ツールインターフェースに関連する用語](#appendix-1-map)
### 1. IDE、エディタ、ターミナル
**IDE（統合開発環境）**
IDE を「プログラマーの作業台」に例えることができます：
- 一方が書くデスク（エディタ）
- 一方に電源コンセントやボタン（実行、デバッグ）
- 引き出しに様々な小ツール（検索、バージョン管理）
VS Code、Trae、Cursor はすべて IDE または IDE ベースのツールです。
**コードエディタ（Editor）**
「高機能なメモ帳」のイメージで、主に以下のことを行います：
- コードをタイピングする
- 色色でコードの要素を区別する（シンタックスハイライト）
- 入力時に自動補完
IDE の中のコードを書くエリアが、コードエディタです。
**ターミナル / コマンドライン（Terminal / コマンドラインウィンドウ）**
黒背景に白文字のウィンドウで、コマンドを入力してパソコンに作業させる：
- 例：`npm run dev` は「開発サーバーを起動」
- `python main.py` は「Python ファイルを実行」
「パソコンに SMS を送って命令を出し、パソコンがテキストで返す」のようにイメージすると分かりやすいです。
### 2. IDE のいくつかの一般的な領域
**アクティビティバー（Activity Bar）**
左端の縦に並んだ小さなアイコンの列で、「機能タブ」のように機能ビューを切り替えます：
- ファイルアイコンをクリック → 左側にファイルリストを表示
- 虫眼鏡アイコンをクリック → 左側が検索モードに
- Git アイコンをクリック → 左側にバージョン管理を表示
**サイドバー（Side Bar）**
アクティビティバーの右側の大きな領域で、現在のモードの内容を表示：
- ファイルモード：プロジェクト内のファイルとフォルダを表示
- 検索モード：検索結果のリストを表示
- ソースコード管理モード：変更されたファイルのリストを表示
**エディタ（Editor）**
中央の最大の領域で、ファイルを開くと実際の内容が表示・編集される場所。
上のタブページ（Tab）は「現在開いているファイル」を示しています。
**ボトムパネル（Panel）**
通常は最下部にあり、以下のようないセクションを含みます：
- Terminal（ターミナル）：コマンドを実行してプロジェクトを起動
- Problems（問題）：エラーのあるファイルと行番号をリスト
- Output（出力）：ツールが出力する実行情報
- Debug Console（デバッグコンソール）：デバッグ時の出力
**ステータスバー（Status Bar）**
最下部の細いバーで：
- 現在のファイルの言語（JS、HTML、Python など）を表示
- インデントが「2スペース」か「4スペース」かを表示
- エラーの有無、現在の Git ブランチを表示
「現在の開発環境の簡易なチェックリスト」として捉えることができます。
## [二、ウェブ / ネットワーク / サービスに関連する用語](#appendix-1-map)
### 1. URL、HTTP、ポート、ローカル
**URL（ウェブアドレス）**
ブラウザのアドレスバーに入力する文字列です。例：
- `https://www.trae.cn/`
- `http://localhost:3000/`
インターネット上のある場所の「部屋の完全なアドレス」と考えることができます。
**HTTP / HTTPS**
URL の先頭に見る `http://` や `https://`：
- HTTP：通常の転送方式
- HTTPS：暗号化が追加され、より安全
「ウェブアドレスは通常 `http` または `https` で始まる」と覚えておくと良いでしょう。
**ポート（Port）**
1台のコンピュータをビルに見立て、ポートは各部屋のドア番号です：
- `:3000` は 3000 号室
- 同じコンピュータで複数のサービスを同時に実行でき、それぞれがポートを占有
`http://localhost:3000` は「自分のコンピュータの 3000 号室で動いているサービスにアクセスする」という意味です。
**ローカル（Local / localhost）**
自分のコンピュータを指します。
- `localhost` は「このマシン自身」を意味します
`http://localhost:3000` にアクセスすると、実際には自分のコンピュータ上で動いているプログラムと通信しているのであり、外部サーバーにアクセスしているわけではありません。
**サービス（Service / Server）**
「バックグラウンドで常に実行され、いつでも指示を受け付けるプログラム」のことです：
- ウェブサービス：ブラウザがアドレスにアクセスすると、ウェブページのコンテンツを返す
- ゲームサービス：対局の管理、セーブ情報、ランキングなどを処理
ターミナルで `npm run dev` を実行すると、本質的に「ローカルでウェブサービスを開始する」ということになります。
## [三、フロントエンド / バックエンド / データに関連する用語](#appendix-1-map)
### 1. フロントエンド、バックエンド
**フロントエンド（Frontend）**
ユーザーが見えて、触れる部分：
- ウェブページのボタン、テキスト、画像、アニメーション
- React / Vue で作られたページ
インタラクション（クリック、入力、ドラッグ）に応答する
**バックエンド（Backend）**
ユーザーからは見えない、サーバー上で動く部分：
- データの保存と読み取り（ユーザー情報、注文、スコアなど）
- ビジネスルールの実行（ログイン認証、権限判断）
フロントエンドを「店舗と店員」に例えると、バックエンドは「倉庫と帳簿システム」です。
### 2. インターフェース、リクエスト、レスポンス、JSON
**インターフェース / API**
フロントエンドとバックエンドが事前に約束した「質問＋回答」のルールのセットです。
- フロントエンド：「このアドレス、この形式で質問する」
- バックエンド：「この形式で結果を返す」
**リクエスト（Request）**
フロントエンドからバックエンドへの一回の「質問」：
- リクエスト先（URL）
- メソッド（GET、POST など）
- パラメータ（例えばユーザー ID）
**レスポンス（Response）**
バックエンドからフロントエンドへの「回答」：
- ステータスコード（200 は成功、404 は見つからない、500 はサーバーエラー）
- 実際のデータ（多くの場合 JSON 形式）
**JSON**
JavaScript のコードに似た書き方でデータを表現するフォーマット。例：
```json
{
"name": "Alice",
"score": 120
}
```
「機械版のキーバリバリュース」と理解すると分かりやすいです。フロントエンドとバックエンドがデータを交換する際によく使われます。
## [四、コードを書くこと自体に関連する用語](#appendix-1-map)
### 1. 変数、識別子、状態
**変数（Variable）**
「データにラベルを貼る」こと。
- 例：スコアを `score` という名前で記録する
- 以降 `score` という名前を使うだけで、そのデータの読み書きができる：
```js
let score = 0
score = score + 10
```
**識別子（Identifier）**
「自分で付けたさまざまの名前」の総称：
- 変数名：`score`
- 関数名：`moveSnake`
- コンポーネント名：`SnakeGame`
フォルダに名前を付けるのと同じように、コード内で対象を区別できるようになります。
**状態（State）**
プログラムの現在の「重要な状況記録」：
- ゲームがすでに終了したかどうか
- 蛇が現在どのマスにあるか
- 現在のスコアはいくらか
React では、状態が変わると UI も更新されるという理解で良いでしょう。
### 2. 関数、コンポーネント、モジュール
**関数（Function）**
「繰り返し可能な処理をまとめて、名前を付ける」：
```js
function sayHello(name) {
console.log('Hello, ' + name)
}
```
以降 `sayHello('Bob')` と書くだけで、その中の数行を再度実行できます。
**コンポーネント（Component）**
フロントエンドの「再利用可能な小さな UI ＋ 小さなロジック」のまとまり：
- ボタンはコンポーネント
- トップナビゲーションはコンポーネント
- ゲームエリア全体もコンポーネント
コンポーネント同士を組み合わせて使うことができ、レゴブロックのように組み立てられます。
**モジュール（Module）**
「関連するコードをまとめたファイル」：
- `snakeLogic.ts` は蛇の動き方に関するコードのみ
- `score.ts` はスコア計算に関するコードのみ
モジュール同士で `import` / `export` することで、異なるファイルのツールのように使えます。
### 3. シンタックス、プログラミング言語、フレームワーク
**シンタックス（Syntax）**
プログラミング言語の「文法規則と句読点」：
- 文字列には引用符が必要
- 各ステートメントの末尾にセミコロンを書くかどうか
- コードブロックは `{}` で囲む
シンタックスエラーが発生すると、コンパイラ/インタプリタが「シンタックスエラーです」と表示されます
**プログラミング言語（Programming Language）**
コンピュータとコミュニケーションの全体ルールと語彙、例：
- JavaScript、Python、Java、C++、Go……
**フレームワーク（Framework）**
「他人が先に骨組みを組んだ」大量のコードと定石のセット：
- フロントエンド：React、Vue（UI の更新や状態管理などを処理）
- バックエンド：Django、Spring Boot など
元々「既存の骨組みの上に内容を埋める」ことで、ゼロから始めるよりはるかに簡単になります。
## [五、デバッグ / エラー修正に関連する用語](#appendix-1-map)
### 1. Bug、エラー、ログ / console.log
**Bug**
プログラムの動作があなたの期待と異なる状態。例：
- 本来ボタンが表示されるはずだったのに表示されない
- 加算されるはずなのに加算されない
- ページを開くと真っ白になる
**エラーメッセージ（Error Message）**
プログラムがクラッシュした後、画面上やターミナルに表示される「見た目に威圧感のある」英語のテキスト。
不便ですが、通常は以下の情報が含まれています：
- 大まかにどこが間違っているか
- どのファイルの何行目付近いか
- 一言で言えば「修正のヒント」が得られる
あなたの理解できない英語のエラーをそのまま AI に投げ、AI に翻訳と修正を依頼してください。
**ログ（Log）**
プログラムの実行中に自分で「発する」メッセージ。
最も一般的なのはフロントエンドの以下のコード：
```js
console.log('現在のスコア', score)
```
以下のように理解できます：**重要なステップで意図的に記録し、プログラムが意図通りに動いているか確認する**。
> **console.log とは？**
>
> - `console` は「デバッグ用の小さな黒板」
> - `.log` は「その小さな黒板に書き込む」
> - ブラウザで F12 を押して開発者ツールの Console パネルを開くと、この出力が表示されます
### 2. デバッグ、ブレークポイント、ステップ実行、スナップショット
**デバッグ（Debug / デバッグプログラム）**
プログラムに問題がある場合、いきなり全部修正を試みるのではなく：
1. プログラムを特定の行で停止させる（ブレークポイント）
2. その時点での各変数の値を確認する
3. 1行ずつ進めて、どこから問題が始まったか観察する
**ブレークポイント（Breakpoint）**
ブレークポイントを「その行に一時停止ボタンを挿入する」と理解できます：
- プログラムは通常一方向に流れて実行される
- その行に到達すると一時停止し、確認・修正ができる
- コードエディタでブレークポイントを設定することも可能
**ステップ実行（Step）**
ブレークポイントから停止した後、以下のように操作できます：
- 1行ずつ進める（step over）：ブレークポイントの次の行に進む
- 関数の中に入って詳細を見る（step into）：その関数の内部を確認
ダンスのように分解して見るのではなく、アニメーションのように部分的に見るのがコツールのコツです。
**スナップショット（Snapshot）——簡易な理解**
ここでのスナップショットは「ある時点での現在の状態を写真に撮る」のように理解できます：
> ある時点で、現在の状態を写真に撮る。後で比較できるように。
実際のツールでは、スナップショットは以下を意味することがあります：
- あるコミット時のプロジェクトの完全な状態
- デバッグ時のある時点でのメモリ/変数全体の状況
あなたはこの比喩だけで十分です：**スナップショット ≒ ある時点の状態の記録**
## [六、プロジェクト管理に関連する用語](#appendix-1-map)
### 1. プロジェクト、ワークスペース、フォルダ
**プロジェクト（Project）**
1つのアプリケーションを実現するために同じフォルダにまとめられたもの：
- ソースコードファイル
- 設定ファイル
- 素材（画像、音声など）
**ワークスペース（Workspace）**
VS Code / Trae が「現在このセッションで開いている一連のもの」を記述する概念：
- 1つのフォルダを開く → シンプルなワークスペース
- 複数のフォルダをマージして複数プロジェクトのワークスペースにすることも
### 2. Git、リポジトリ、コミット（Commit）
**Git（バージョン管理ツール）**
プロジェクトの「タイムマシン」：
- 毎回変更をまとめて「バージョン写真」を撮る
- 必要に戻せる時は、過去のバージョンに戻せる
- これらの一連の動作が「コミット」を行う
**リポジトリ（Repository / Repo）**
Git を有効にしたプロジェクトフォルダが「バージョン記録付き」になります。
**コミット（Commit）**
「この変更は一つの段階的な成果」と思えるたときに行うアクション：
- 説明（例：`Add score panel`）を書く
- 現在のすべての変更をパッケージしてバージョンを保存
- Git がこの瞬間の状態を保存
この一連の動作が「コミットを行う」と呼ばれます。
## [七、AI 開発ツールに関連する用語](#appendix-1-map)
### 1. AI IDE、Agent、SOLO モード
**AI IDE**
通常の IDE のベースに、「人間の言葉を理解し、自ら動いて」AI のレイヤーが追加されています：
- 「スネークゲームを作って」と言うと、プロジェクトの構築、コードの記述を自動で行う
- エラーメッセージと関連コードを投げると、分析と修正を提案
- 複数のファイルをまたがる修正し、1行ずつの補完ではなく大規模なコードブロックの生成や修正も実行
**Agent（エージェント）**
常に待機している AI アシスタントとしてイメージしてください：
- プロジェクト構造を読み、タスクを分解（依存パッケージ → コード生成 → 実行 → テスト）
- エラーが発生すると、エラー情報に基づいて自動的に修正方案を調整
- 多くのタスクで、一部のジュニアエンジニアの仕事を部分的に代替可能
**SOLO モード（Trae の場合）**
以下を意味します：
> あなたは「終点」だけを明確に伝えれば、
> それ自ら「経路」を計画し、
> ローカルで一歩ずつ実行し、
> 重要な段階でのみに進捗を尋ねてくる。
### 2. モデル、API Key
**モデル（Model、ここでは大規模言語モデルを指す）**
「背後にある巨大な AI の頭脳」と簡単に理解できます：
- 例：GPT、Claude、Kimi、GLM など
- 異らなモデルで「中国語の理解」「コード生成」「推論」のレベルが異なる
- AI IDE のドロップダウンからモデルを切り替えて使用可能
**API Key / 密钥（API Key）**
API Key を「非常に長いパスワード＋身分証番号」と理解できます。
その役割は一つだけ：
> 他人のサーバーに「自分がどのユーザーで、この AI サービスを使う許可を与えてほしい」と伝え、課金を記録させる。
ポイント：
- この文字列は通常ランダムな英数字文字列です
- 公開場所（リポジトリ、スクリーンショット、グループチャットなど）に絶対に投稿しない。他人に渡されると、あなたのアカウントが勝手に使われます
- ツールに API Key を入力することは「鍵を鍵の穴に差し込む」のようなもので、ツールがあなたの代わりに API を呼び出せるようになります
## [八、ブラウザ / 開発者ツールに関連する用語](#appendix-1-map)
**Chrome（Google Chrome）**
現在のフロントエンド開発で最もよく使われるブラウザの一つ：
- ページの読み込みが速い
- 強力な「開発者ツール」が内蔵されており、問題の調査に便利
**リフレッシュ（Refresh / Reload）**
現在のウェブページを再読み込み：
- フロントエンドのコードを修正した後、自動リフレッシュされない場合は手動でリフレッシュ
**開発者ツール（DevTools）**
ブラウザ内蔵の開発者向けの一連のツールパネル：
- ウェブ構造の確認（Elements）
- スタイルの確認（Styles）
- エラーとログの確認（Console）
- ネットワークリクエストの確認（Network）
**Console（コンソール）**
開発者ツール内のタブの一つで、以下を表示：
- `console.log(...)` の出力
- 実行中に発生したエラー（赤文字）
「プログラムのチャットルーム」のように捉えると良いでしょう：
- プログラムが何かを言いたのか、そこに表示されます
- デバッグ時に最もよく見る部分
後で学習中に新しい用語が出た場合も、このスタイルで AI にコピーやして完全な内容を追加させることもできます：
- まず「それは何をしているのか」を一文で説明
- その後、「生活の中で例えて」で説明
- 最後に「簡単な例」を提供
このように、あなたの「個人用語集」はどんどん長くなり、実践で使えるものになります。