4DとVS Codeを使ったAIプログラミング：実践ガイド

3月 27, 2026 2 読了時間

先日、4D 21 を使った AI コーディングに関するウェビナーをご覧になった方は、ほぼすべて自然言語のプロンプトだけで、旅行代理店向けアプリケーション（データベース構造、データ、フォーム、AI 機能）を完成させた様子をご覧になったことでしょう。この記事では、そのセットアップ手順を解説し、同じワークフローを皆さんのプロジェクトに取り入れる方法をご紹介します。

必要なもの

4D 21（またはそれ以降）
GitHub Copilotを有効にしたVisual Studio Code（設定方法は後述）
4D Analyzer拡張機能（下記参照）
4D開発用にカスタマイズされた一連の指示ファイル（下記参照）

GitHub Copilot の設定

まず最初に：GitHub Copilotは、OpenAI、Anthropic、その他のAIプロバイダーを介して直接動作するのではなく、GitHubアカウントを通じて動作します。Claudeやその他のサービスからクレジットを購入する必要はありません。すべてはGitHubを通じて管理されます。

1. GitHubアカウントをお持ちでない場合は作成してください：github.com

2. github.com/features/copilot でアカウントのGitHub Copilot を有効にします。毎月十分な利用枠が提供される無料プランが含まれており、開始にクレジットカードは不要です。

3. VS Codeからサインインします。VS Codeを開き、左下隅の「アカウント」アイコンをクリックして、GitHubアカウントでサインインします。接続されると、ステータスバーにCopilotアイコンが表示され、「Chat」が利用可能になります。

4. モデルを選択します。Copilot Chatパネルにあるモデルセレクターで、応答に使用するAIモデル（プランに応じてGPT-4o、Claude、Geminiなど）を選択できます。最初はデフォルト設定で問題ありませんが、後で切り替えることも可能です。

使用状況の確認とプランの管理： github.com/settings/copilot にアクセスしてください。ここからは、使用したリクエスト数を確認したり、有料プランに切り替えたり、容量を増やす必要がある場合の請求管理を行ったりできます。

4D Analyzer 拡張機能

4D Analyzer拡張機能は、VS Codeに4D言語の機能を本格的に実装するものです。VS Code Marketplaceからインストールすると、以下の機能が利用可能になります：

4Dコードの構文ハイライト：メソッド、クラス、フォームクラスなど
コード補完とシグネチャヘルプ
入力中にリアルタイムで表示される診断情報（エラーと警告）

これは AI との連携作業において非常に重要です。GitHub Copilot が 4D コードを生成すると、Analyzer が即座にそのコードを検証します。エディタ上でエラーがハイライト表示されるため、コードを実行する前段階でミスを発見でき、Copilot にフィードバックして修正してもらうことが可能です。

インストール方法：

VS Codeを開く
拡張機能パネルを開く（macOSではCmd+Shift+X、WindowsではCtrl+Shift+X）
「4D Analyzer」を検索
「インストール」をクリック

以上です。4Dプロジェクトフォルダを開くと、拡張機能が自動的に有効になります。

インストラクションファイル：Copilotに4Dコードの書き方を教える

GitHub Copilotは初期状態でも多くのプログラミング言語を理解していますが、あなたのコーディングスタイルやベストプラクティス、4D開発の細かい点までは把握していません。そこで役立つのがインストラクションファイルです。

インストラクションファイルとは、プロジェクトのルートディレクトリにある.github/instructions/フォルダに配置するMarkdown形式のドキュメントです。Copilotはこれらを自動的に読み取り、すべての応答の文脈として使用します。AIが従うスタイルガイドと考えてください。

入手方法

GitHub では、すぐに使える 4D 用インストラクションファイルのセットが利用可能です:

👉github.com/mathieu-ferry/4D-github-instructions

設定方法

4Dプロジェクトのルートディレクトリに、.github/instructions/フォルダを作成します
上記のリポジトリからインストラクションファイルをそのフォルダにコピーします
Copilot Chatを開き、「4Dのコーディング規約は何ですか？」と尋ねると、インストラクションファイルの内容に基づいて回答が返ってくるはずです

返答があれば、準備完了です。このガイドラインでは、次のようなトピックを扱っています：

手続き型メソッドよりもクラスの使用を推奨
フォームクラスの規約
フォームおよびカタログのJSONスキーマ参照
命名規則とコード構造

ヒント：これらのファイルは出発点に過ぎません。自身のコーディング習慣やプロジェクトの規約に合わせて調整することで、最良の結果が得られます。独自のルールを追加し、適用されない部分は削除し、時間をかけて改善を重ねてください。

すべてを統合する：2つの例

例1：プロンプトを使用したデータベース構造の構築

Structureエディタを使用すると、変更内容はcatalog.4DCatalogファイルに反映されます。GitHubリポジトリの指示ファイルを使用すれば、Copilotはこの同じファイルを安全に編集できます（スキーマのコンテキストはそれらの指示に含まれています）。プロンプト主導の作業を維持でき、再起動後、構造の変更は4D上で即座に確認できます。以下に現実的な一連の流れを示します：

あなた： 「カタログに、従業員の姓と名を記載したテーブルを作成してください。」

Copilotが構造を編集します。4Dを再起動すると、UUIDを主キーとし、指定されたフィールドを持つ「Employee」テーブルが作成されます。

あなた： 「会社の部署を一覧表示する新しいテーブルを作成してください。」

別のテーブルが表示されます。

あなた： 「従業員と部署の間にリレーションを追加し、各従業員が1つの部署に所属するようにしてください。」

Copilotが外部キーと適切なリレーション定義を追加します。このように、AIと会話するだけで、段階的にリレーショナルモデル全体を構築できます。

重要なポイントは、意図を平易な言葉で説明すれば、AIがカタログの詳細を処理してくれることです。指示ファイルにより、出力は期待される規約（UUIDキー、適切な属性タイプ、正しいリレーション構文）に準拠した状態が保たれます。

例2：フォームとそのクラスの作成

フォームの作成は、特に興味深い部分です。レイアウトは1つのプロンプトで記述できます：

あなた： 「タスクを一覧表示する4Dフォームを作成してください。左側に、概要、担当者の姓、部署、期限、ステータスを表示するリストボックスを配置したいです。右側には、それらの情報に加え、タスクの説明と部署のマネージャーを表示する詳細ビューを表示してください。このフォームをフォームクラスに関連付けてください。」

Copilotが生成する内容：

リストボックス、入力フィールド、およびレイアウトを含むフォームのJSON（form.4DForm）
イベント処理とデータバインディングロジックを含むフォームクラス（.4dm）

その結果、4Dで開いてすぐに使用できる動作するフォームが完成します。一発でピクセル単位まで完璧になるでしょうか？おそらくそうではないでしょう。しかし、その後のプロンプトや手動での調整を通じて改良していくための、確固たる基盤が得られます。

デザインの調整

最初に生成されたフォームは、完成品ではなく、動作する土台です。Copilotにより良い結果へと導く方法はいくつかあります:

インスピレーションを得るためにスクリーンショットを貼り付ける。気に入ったUIを見つけ、それをCopilot Chatに貼り付け、「これを視覚的な参考としてフォームを再設計してください」と指示します。Copilotは画像からレイアウトパターン、色調、余白を抽出します。
具体的なデザイン要件を提示する。意図、雰囲気、制約を説明します。「メールを迅速に処理する必要がある旅行代理店向けに、このフォームを再設計してください。情報密度、高コントラストのステータスインジケーター、キーボード操作に適したナビゲーションを優先してください。」
デザイントークンを明示的に指定しましょう。デザインシステムをお持ちの場合は、直接指定してください。「8pxのベース間隔、ニュートラルグレーの背景（#F5F5F5）、主要アクションには青（#1A73E8）、タスクステータスには意味を持つ赤/オレンジ/緑を使用してください。」
既存のフォームとの一貫性を求めましょう。毎回一から作り直すのではなく：「このフォームを既存の『従業員フォーム』と視覚的に一貫性を持たせてください。ヘッダーのスタイル、ボタンの階層、リスト行の密度を同じにしてください。」
スタイルを指示ファイルに記述する。最も持続可能なアプローチです。カラーパレット、間隔のルール、UIコンポーネントの規約を.github/instructions/ に一度定義すれば、Copilotが生成するすべてのフォームが、確認を求められずとも自動的にそれらに従います。

Copilot Chatのモード：「Ask」、「Plan」、「Agent」

VS CodeのCopilot Chatには3つのモードがあり、チャットパネル下部のエージェントピッカーから選択できます：

Ask（質問）：Q&A専用。ファイルには一切触れることなく、コードベース、コーディングの概念、またはVS Codeに関する質問に答えます。仕組みの理解やアイデアの検討に役立ちます。
Plan:コードを1行も書く前に、読み取り専用のコードベース分析を用いて、構造化された段階的な実装計画を生成します。曖昧な要件に関する未解決の疑問点を明らかにするため、事前に意図を明確にすることができます。内容に納得したら、「Start Implementation」ボタンをクリックすることで、計画を直接 Agent モードに引き継ぎ、実行させることができます。
エージェント：コーディングの主力です。プロジェクト内のファイルを自律的に編集し、ターミナルコマンドを実行し、ツールを呼び出し、タスクが完了するまでエラーを修正するために反復処理を行います。

この記事の前半で紹介したすべての例はエージェントモードで実行されました。プロジェクトを実際に変更するタスクには、これが最適なデフォルト設定です。

プランモードが真価を発揮する場面

これまで、私たちは段階的に作業を進めてきました：1つのプロンプト、1つの変更、レビュー、そして繰り返し。探索的な作業や簡単な追加であれば、これは十分に効率的です。しかし、複数のコンポーネントに同時に影響する大規模な機能の場合、プランモードは手間をかける価値があります。

プランモードは、何かを生成する前にコードベースを読み込みます。出力されるのは、実行可能なステップに分割された高レベルの要約であり、要件に関する疑問点も含まれます。プランが希望する内容を正確に反映するまで、平易な会話形式で反復調整を行い、その後エージェントに引き渡します。

これは、単一の機能でカタログ、1つ以上のメソッドやクラス、フォームJSON、フォームクラス、リソースファイルに同時に影響を与えるような4Dプロジェクトにおいて特に価値があります。計画段階で誤った前提に気づくことは、間違った方向に進んでしまった複数ファイルにわたる処理を解きほぐすよりも、はるかにコストが低くなります。

実際の運用例

次のような段階的な手順ではなく：

「メールテーブルを追加する」
「メール用のフォームを作成する」
「メールを処理するボタンを追加する」
「AI処理メソッドを作成する」
「サンプルデータを追加する」

機能全体を説明する、構造化された単一のプロンプトを作成し、Planで実行してアプローチを検証した後、Agentに一連の処理として実行させることができます。これは、ウェビナーで「メールからタスクへのAI機能」を構築した際に行った手法そのものです。つまり、テーブル、フォーム、ボタン、処理ロジック、APIキーの設定、サンプルデータをすべて一度に網羅する、1つの大きなプロンプトを作成したのです。

効率的なAIワークフローのヒント

タスクの規模に合わせてアプローチを調整しましょう。探索段階や範囲が不明確な場合は、段階的なプロンプト作成が有効です。これにより、レビューや方向修正が容易になります。明確に定義された機能については、Planモードを使用した単一の大きなプロンプトの方が効率的です。VS Codeのドキュメントでは、複雑なタスクを分割することを推奨していますが、期待される出力（どのファイル、どのような動作）を含めることで、エージェントが自身の作業を検証しやすくなる点にも言及しています。
「どのように行うか」ではなく、「何を期待するか」を明記しましょう。大規模なプロンプトの場合、作成される予定のファイル、テーブル、フォームを列挙することで、推測の余地を減らすことができます。実装の詳細を過度に指定するのは避けましょう。それはエージェントの仕事です。目標は明確な境界を設定することであり、仕様書を書くことではありません。
定常的なルールはインストラクションファイルに、その場限りのコンテキストはプロンプトに記述しましょう。規約、命名規則、アーキテクチャの好みなどは.github/instructions/ に記述し、すべてのプロンプトで繰り返さないでください。VS Codeのドキュメントによると、インストラクションファイルはすべての対話で読み込まれるため、AIがコードのみから推測できない内容に焦点を絞ってください。
エラーはフィードバックし、原因が明らかでない場合はコンテキストを添えてください。単発のミスであれば、実行時エラーを Copilot に直接貼り付けるだけで十分な場合が多いです。ロジックやアーキテクチャの問題については、関連するファイルへのリンクを貼るか、期待される動作を説明してください。エラーメッセージだけでは十分な手がかりになりません。
視覚的な診断にはスクリーンショットを使用してください。レイアウトの問題を言葉で説明するよりも、スクリーンショットを添付する方が迅速です。また、VS Codeのドキュメントでも、推奨されるコンテキスト手法として挙げられています。注：Copilotのプランや組織の設定によっては、画像のサポートを有効にする必要がある場合があります。
AIの出力を確認する：重要度に応じて確認の程度を調整する。プロトタイプの場合は、ざっと目を通すだけで十分です。本番環境の場合は、他の寄稿されたコードと同様に扱ってください。ロジック、エッジケース、入力の妥当性チェック、および外部サービスや認証情報に関わる部分をすべて確認してください。
指示ファイルは簡潔かつ最新の状態に保ちましょう。より的を絞った指示ほど良い出力が得られますが、指示ファイルはリクエストのたびに読み込まれます。VS Codeのドキュメントでは、AIがコードから推測できない点（デフォルト以外の規約、アーキテクチャ上の決定、環境固有の事項など）に焦点を当てるよう推奨しています。冗長で何でもかんでも盛り込んだファイルは、重要な情報を希薄化させてしまいます。

さらに一歩進んだ活用：カスタムエージェントとスキル

これまで説明してきた内容はすべて、共有された指示ファイルを使用する組み込みエージェントを利用しています。しかし、VS Codeでは現在、プロジェクト内の.github/agents/ ディレクトリに保存される独自の カスタムエージェントやスキルを定義することで、さらに一歩進んだ活用が可能になっています。

カスタムエージェントとは、Markdownファイル（.agent.md）であり、AIに特定の役割を与え、使用可能なツールを制限し、必要に応じて特定のモデルに紐付けることができます。例えば、4Dプロジェクトのコード品質、セキュリティ上の脆弱性、命名規則に専念する専用の「4D-reviewer」エージェントを作成できます。このエージェントは読み取り専用ツールを使用するため、明示的に指示しない限り何も変更しません。あるいは、フォームやクラスのテンプレートをプリロードし、必要に応じて新しい画面を即座に生成できる「4D-scaffolder」エージェントを作成することも可能です。

スキル（.skill.mdファイル）はさらに一歩進んだ機能です。スクリプトを含めたり外部リソースにアクセスしたりできる、再利用可能でポータブルな機能です。指示ファイルが受動的なルールを保持するのに対し、スキルはエージェントが呼び出せる能動的なロジックを保持します。4Dの実用的な例として、4Dのドキュメントサイトをクエリし、関連するコードサンプルをチャットに直接取り込む方法を知っているスキルが挙げられます。

VS Codeのドキュメントでは、ハンドオフについても説明されています。これは、ボタンをクリックするだけで、あるエージェントがコンテキストを次のエージェントに渡す、連鎖したワークフローです。例えば、計画エージェントが機能仕様を生成し、それを実装エージェントに引き渡し、実装エージェントがレビューエージェントに引き渡すといった流れです。各ステップは実行前に人間の承認が必要です。

これらすべてを、チャット内で直接AIを使って生成できます。「/create-agent」または「/create-skill」と入力し、希望する内容を記述するだけです。これらはワークスペースレベル（ソース管理を通じてチームと共有）またはユーザープロファイル（個人用で、すべてのプロジェクトで利用可能）に保存できます。

コード生成を超えて：その他の有用なAIワークフロー

機能の構築は、開発ワークフローにおいてAIエージェントが得意とする業務のほんの一部に過ぎません。以下に、Copilotが大きな負担を軽減できるその他のシナリオを紹介します：

ドキュメント作成。エージェントに、ソースコードから技術ドキュメントの作成や更新を依頼したり、メソッドやクラスのdocstringを生成したり、既存のドキュメントを別の言語に翻訳したりできます。特に4Dの場合、フォームクラスのロジックからユーザー向けのヘルプコンテンツを生成したり、一連のメソッドから構造化されたAPIリファレンスを作成したりすることが可能です。
セキュリティレビュー。メソッド、フォームクラス、あるいは機能全体について、一般的な脆弱性（検証されていない入力、アクセス制御の欠如、SQLインジェクションのリスク、ハードコードされた認証情報など）を分析するようエージェントに依頼します。専用の読み取り専用セキュリティエージェント（前述参照）は、この用途に最適です。これは適切なセキュリティ監査に代わるものではありませんが、迅速な一次チェックとして有効です。
リファクタリング。AIエージェントは、シンボルの統一的なリネーム、繰り返されるロジックの共有メソッドやクラスへの抽出、手続き型コードのORDAパターンへの変換、あるいはレガシーな4Dコードを現在のベストプラクティスに更新するといった、機械的なリファクタリングタスクをうまく処理します。
コードの説明とオンボーディング。「Ask」モードを使用して、不慣れなコードを理解したり、メソッドの動作を追跡したり、複雑なロジックの平易な要約を取得したりできます。これは、既存のプロジェクトを引き継ぐ際や、新しいチームメンバーをオンボーディングする際に特に役立ちます。
テスト生成。エージェントに、特定のメソッドやクラスに対するユニットテスト（エッジケースやエラー条件を含む）の作成を依頼できます。Copilotはテストを生成した後、実行し、失敗した場合は再試行することも可能です。
コミットメッセージとプルリクエストの説明文。VS Codeには、ステージングされた変更やプルリクエストの概要からコミットメッセージを生成するスマートアクションが組み込まれています。些細な時間の節約ですが、積み重なれば大きな効果となります。

今後の展開

この記事で紹介したワークフローは、今すぐご利用いただけます。プロンプトを使って最初のテーブルやフォームを作成し、プランモードを使って機能全体に取り組み、レガシーコードをリファクタリングし、ドキュメントを生成し、セキュリティレビューを実行し、チーム専用のカスタムエージェントを作成しましょう。あとは試してみるだけです。

すぐに始めるために必要なものはすべてこちらです：

4D 21をダウンロード
GitHub Copilotを有効にした状態でVS Codeをインストール
4D Analyzer拡張機能を追加
説明ファイルをプロジェクトにコピーする

エージェントモードを開き、作りたいものを記述して、どこまで進められるか試してみてください。

皆様の体験談をお待ちしています。4Dフォーラムで成果やワークフロー、質問などをぜひ共有してください。コミュニティが楽しみにしています！