AIとコードを書くための環境

前回は「素材」の話（Astro + TailwindCSS）をしました。今回は、それらを調理する「キッチン」——つまり開発環境の話です。

私たちの開発スタイルは少し特殊。人間がコードを書く時間よりも、AIに指示を出してコードを書かせる時間の方が長いんです。だからこそ、VS Code周りを徹底的に整備しています。

ルールでAIを制御する

AIは優秀ですが、プロジェクト特有の「お作法」までは知りません。そこで重要なのが、明確なルール定義です。

本プロジェクトでは、AIに対して以下のような指示をシステムレベルで与えています。

日本語での応答: 思考プロセスを日本語で共有すること。
Astro + Tailwind: 余計なCSSファイルを作らず、ユーティリティクラスを使うこと。
絶対パスの使用: ファイル操作ミスを防ぐため。

これにより、AIは「このプロジェクトの一員」として振る舞うようになります。

コード品質を自動化する

AIが生成したコードが、プロジェクトのスタイルガイドに合っているか確認するのは人間の仕事…ではありません。それも自動化します。

.vscode/settings.json

保存時に自動的にフォーマットがかかるように設定しています。

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

Prettier & ESLint

AIも人間も、コードを書いた瞬間にPrettierが走り、ESLintが構文チェックを行います。 .prettierrc.mjs で定義されたルール（タブ幅4、セミコロン必須など）に強制的に従わせることで、誰が書いても統一された美しいコードが保たれます。

// .prettierrc.mjs の一部
export default {
    plugins: ["prettier-plugin-astro"],
    tabWidth: 4,
    semi: true,
    // ...
};

Agentic AI とは？

私たちが使っている「Antigravity」は、単なるチャットボットではありません。**Agentic（自律的）**なAIです。

「ブログの記事一覧ページ作って」と頼むと、彼（彼女？）は自分でファイルを検索し、必要なフォルダを作り、コードを書き、そしてブラウザで表示確認まで行います。詳細な指示をしなくても、「意図」を汲み取って行動してくれる。これがAgentic AIの凄さであり、これからのWeb開発のスタンダードになると確信しています。

GitHub Copilot 活用術

AI 開発研究会

Recommend: AIペアプログラミングの真髄は「指示の出し方」にあります。Antigravityのようなエージェントを使いこなすための必読書。

Amazonで見る

Antigravityへの指示例 (Prompt)

この「自律的な振る舞い」を引き出すためのプロンプト例です。

Rule Definition Prompt: 「このプロジェクトでは以下のルールを厳守してください。

ファイル操作は必ず絶対パスで行うこと。

settings.json を確認し、フォーマッターの設定に従うこと。

スタイリングは新しいCSSファイルを作らず、Tailwindのクラスのみで行うこと。」

最初にこの「役割とルール」を明確に伝えることで、AIは迷いなく適切な行動を取れるようになります。

次回は、この「Agentic AI」と一緒に作り上げた、予約システムの裏側（Google Sheets連携）について解説します。

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたはAI活用に精通した開発者です。VS CodeでAgentic AI（Antigravityなど）を活用してペアプログラミングを行うための、最適な環境設定を教えてください。
以下の点を含めてください:
- 必須の拡張機能（Linter, Formatters）
- .vscode/settings.json の推奨設定
- AIにコンテキストを正しく渡すためのプロジェクト構造の工夫

VS Code + Agentic AI 最強の執筆環境 - Vol.2

Project Dev.Log