VWork バイブコーディングフレームワーク

初級二：AI プログラミングツールを学ぶ — easy-vibe Stage 1

easy-vibe Stage 1 の続きとして、今回は 「初級二：AI プログラミングツールを学ぶ」 をVWork向けに日本語で紹介します。

この記事は、公式教材の内容をもとに、バイブコーディングを仕事やプロダクト開発に使う視点で読みやすく整理したものです。

本章のガイド

前の章では、z.ai で AI プログラミングを体験しましたが、ウェブ版には多くの制限があります——いつでも保存できない、ファイル管理がしにくい、複雑なプロジェクトが作れない。この章は、開発環境を自分のパソコンに移し、本当に独立してものを作れるようにします。

まず IDE と AI IDE の違いが何かを明確にし、なぜ後者が効率を倍増させるのかを理解します。その後、手取りでTrae を使ってローカルでスネークゲームを作り、インストールから実行までの完全なフローを体験します。最後に、AI との対話の実用的なテクニックを共有し、遠回りを避けられるようにします。

この章を終えると、プログラマーと似た開発フローをマスターできます。

1. コードを書くために必要な環境とツール

1.1 思考の転換：問題があったら、まず AI に聞く

様々な環境やツールを紹介する前に、まず思考習慣を変える必要があります。

従来のプログラミング学習では、Python をインストールしたり、Conda を設定したり、npm のインストール失敗を解決したりするとき、通常は検索エンジンを開き、チュートリアルを見つけて、ステップに従って操作していました。途中でエラーが出たら、さらにエラー情報を検索し、何度も試行錯誤するという方法でした。

間違いです！❌

AI 時代、特に AI IDE を使用する場合、コア原則を覚えておいてください：どんな操作も、まず AI に聞いてみて、必要なら直接やらせることができます。

1.2 なぜ環境とツールが必要なのか

「数行のコードを書いてみる」ことから「長期的にメンテナンスできるプロジェクトを作る」ことになると、環境とツールに対する要件は完全に異なります。

理論上、システム付属のメモ帳でもコードは書けますが、問題はすぐに起こります：

したがって、IDE（統合開発環境）が必要です。IDE はコードを色分けして表示し、入力時に自動補完し、ファイルをプロジェクト単位で整理し、エラーをステップごとに追跡できるため、開発の効率と正確さが大幅に向上します。

2. IDE とは何か、なぜ 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) で、軽量で拡張性が高いです。JetBrains 全家桶などの専門 IDE もありますが、VS Code は初学者に最も親和的です。

VS Code のコア理念は「すべてがプラグイン」です。プラグインメカニズムを通じて各言語をサポートし、Python プラグインをインストールすれば Python IDE に、C++ プラグインをインストールすれば C++ IDE になります。プラグインをインストールしなければ、高度なテキストエディタに過ぎません。

Markdown ドキュメントを編集することもできます。

要するに、IDE は開発者が効率的にコードを書き、プログラムを実行するためのツールキットです。

より詳細な解説は、付録の仮想 IDE 可視化 IDE 原理部分を参照してください。

3. AI IDE と通常の IDE の違い

通常の IDE（例えばオリジナルの VS Code）は本質的に「ツールボックス」です： プロジェクトを開き、コードを書き、実行・デバッグでき、プラグインもインストールできますが、自分が何をすべきか、どうやるべきかを知っていることが前提です：

しかし AI IDE では、大規模言語モデルを使ってコーディングやファイルの修正を直接支援できます：

例えば、コードの一部を選択して「リファクタリングして」「コメントを付けて」と言ったり、サイドバーで「このプロジェクトはどう設計されているの？」と聞いたりすることもできます。@ファイル名 や @プロジェクト全体 で参照範囲を指定し、一文で新しいファイルの作成、コードの記述、実行までの面倒な操作を自動化できます。

最新版の 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 がファイルの生成、パッケージのインストール、実行、コードの修正などを自動で行い、多くのタスクで初級ソフトウェアエンジニアの仕事を部分的に代替可能。

4. 実践：AI IDE を使ってローカルでスネークゲームを生成する

前のセクションでは主に「概念」と「違い」について説明しました。このセクションでは、完全な実践を通じて抽象的な概念を具体的な操作に落とし込みます：空のフォルダを作成 → AI IDE で開く → サイドバーでチャットし、React でスネークゲームをゼロから生成。 ここでは上記で紹介した Trae を例にします。

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 の料金と使用方法

💡 現在 OpenRouter の無料モデルを使ったテストを推奨

チチュートリアル執筆時点（2026-02-12）の時点で、StepFun のモデルを無料で試用できます。詳細は以下の 4.2 セのモデル統合方法を参照し、stepfun/step-3.5-flash:free を統合してください。

Trae の料金と使用方法には以下のオプションがあります：

初心者は中国 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” モードが表示されます：

下のエリアにはモデル選択オプションがあり、クリックすると現在の大規模モデルを変更できます。中国版では 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 のウィンドウにドラッグ＆ドロップして開くこともできます。この時点で、左側のエクスプローラーにはコードファイルが何も表示されず、完全に空白のプロジェクト状態から始まることを示しています。

Trae でカスタムモデルを統合する際、デフォルトで OpenRouter 方案を推奨します。OpenRouter は統一 API インターフェースを提供し、複数の大規模言語モデルを便利に統合できます。

2026年2月12日時点で、無料の StepFun API も利用可能です：

その他の無料モデル：

これらの無料オプションは初心者に最適です。本格的な本番環境に導入する前に、無料方案で 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 を入力すれば正常に使用できます。）

例えば下図のように、AI Agent が実行中に一時停止することがあります。これはユーザーの入力を待っているためです。例えば、作成する名前の入力、Enter でコマンドの実行確認、またはコマンドのクリックなど。通常はそのまま Enter を押せば問題ありません。このステップで何をすべきか分からない場合は、現在の画面のスクリーンショットを撮って AI に聞いてください。

VWorkとしての見方

このセクションのポイントは、AIに任せる範囲を広げることではなく、人間が目的・条件・確認ポイントを言葉で整理し、AIに実装を進めさせる力を育てることです。

バイブコーディングでは、コードを書く前に「何を作るのか」「誰に使ってもらうのか」「どこまでできれば試せるのか」を言語化する力が重要になります。

出典：datawhalechina/easy-vibe / 原文: docs/ja-jp/stage-1/introduction-to-ai-ide/index.md
ライセンス：Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International

エクスブリッジ / VWork