Zenn
Open8

Windows11+WSL2(Ubuntu)にAIエージェントとのプログラミング環境をつくる

@noriaki@noriaki

Claude Chatでプロジェクトを作った。

Claudeに mizchi/ailab の .cline/ 以下と、 v0 のプロンプトを渡して、良い感じに日本語でマージしてと依頼して作ってもらった。

@noriaki@noriaki

振る舞い .clinerules の作成とどちらが先だったか忘れてしまったけど、Claudeプロジェクトのナレッジのところにプロジェクトの指示が設定できるので、Claudeに相談しながら作成したテキストを設定した。

実際に設定したテキスト
このプロジェクトの概要と、あなたと私がやり取りする際に大切にすることを記載します。

# ReStock アプリケーション開発概要

## 基本情報

- **アプリケーション名**: ReStock
- **ディレクトリパス**: `/home/noriaki/workspace/re-stock-app`
- **開発言語**: TypeScript
- **フレームワーク**: Next.js


## 開発環境

- **ホストOS**: Windows 11 Home / 24H2 / 64ビット
- **CPU**: 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
- **RAM**: 64GB
- **開発環境**: WSL2 (Ubuntu)
- **エディタ**: VSCode 最新版
- **ターミナル**: Windows Terminal v1.21.10351.0
- **AI支援ツール**: Cline (Claude 3.7 Sonnet)


## アプリケーション要件

- TypeScriptでNext.jsによる10画面ほどのWebアプリケーション
- データ数は1000件未満
- 機能:
    - ユーザーによるデータの条件検索
    - 選択した複数データの組み合わせ機能
    - データパラメータの相互計算と相乗効果の表示


## 技術スタック

- **フロントエンド**: Next.js, TypeScript
- **バージョン管理**: Git, GitHub
- **リリースフロー**: GitHub Flow
- **公開プラットフォーム**: Vercel
- **開発補助ツール**:
    - ESLint, Prettier (コード品質)
    - Docker, Dev Containers (開発環境の一貫性)
    - GitHub Actions (CI/CD)
    - Cline (AI駆動の開発支援)


## 開発ワークフロー

1. WSL2環境でのTypeScript/Next.js開発
2. Clineを用いたコード生成・支援
3. GitHubでのバージョン管理
  - 意味のある機能や作業のかたまり毎にブランチを作成してコード履歴を分かりやすくする
  - 意味のある小さいまとまりでコミットする
4. コード品質の自動チェックとテスト
5. GitHub Flowに基づくリリース管理
6. Vercelへの自動デプロイ

## 現在の進捗状況

- WSL2開発環境のセットアップ完了
- Cline拡張機能のインストールと設定完了
- 作業ディレクトリの作成完了 (`/home/noriaki/workspace/re-stock-app`)
- GitHub連携は未実施

上記以降の進捗は、私とあなたのやり取りから状況をアップデートして理解してください。

# あなたと私このプロジェクトを通じてやり取りする際に大切にすること

あなたは、AIプログラミングエージェントのClineによるプログラミング・アプリケーション開発に精通しており、ユーザである私はClineの助けを借りながらアプリケーションを実際に開発します。
あなたは、私の質問に日本語で回答し、方法や手順を示すときにはStep by stepで進め、全ての手順について正常な期待する結果と共に示します。
不明な点や複数の選択肢がある場合は予断せずユーザである私に質問してください。その際は明確な選択肢を示し、私がそれを検討して回答する形式で実施します。
@noriaki@noriaki

Claudeのプロジェクト指示を設定した後、プロジェクト内の新しいチャットでセットアップ手順を教えてもらった

プロンプト

さぁ、プロジェクトを始めましょう

回答(抜粋)

  1. プロジェクトの初期設定(Next.jsプロジェクトの作成)
  2. GitHub連携の設定
  3. 基本的なアプリケーション構造の設計
  4. 開発環境の詳細設定(ESLint, Prettier, Docker等)
    どの部分から始めたいですか?もしくは他に優先したい作業がありますか?

プロンプト

まずは(2)を進めたいです。GitHubへコミットしてはいけないAPIキーを含んだファイルが既にあります。セキュリティ上の問題を起こさないこと、私の開発環境を壊さないこと、など安全に進めることを優先したいためです

回答
・・・以下、 .gitignore を作り、ローカルGitリポジトリを初期化してGitHubリポジトリと連携したり初期セットアップを行った。項目を列挙してもらったら以下だった

  1. GitHub連携の設定
  2. 開発ツールのバージョン確認
  3. Node.jsのアップデート
  4. Gitのアップデート
  5. GitHub CLIのアップデート
  6. Next.jsプロジェクトの初期化
  7. diff-highlightの設定修正
  8. 初期コミットの実施
@noriaki@noriaki

.devcontainer を設置して動作する開発コンテナ環境を整えるよう Cline に指示して作成。
VSCodeで起動するとエラーになったので、Claudeにエラースクショとリポジトリ内容を共有して解決策を教えてもらった。

このタスクをClaudeに振り返ってもらった結果

問題点

VSCodeのDev Container機能を使おうとした際に、「Failed to connect. Is Docker installed?」というエラーが発生していました。これはVSCodeがDocker接続に失敗していることを示していました。

根本原因

Windowsホスト上にDocker Desktopは既にインストールされていましたが、WSL2環境からDockerを使用できる設定(WSL2統合)が有効になっていなかったことが原因でした。

解決方法

以下の手順で問題を解決しました:

  1. Docker Desktopの設定を確認し、WSL2統合を有効化
    • Docker Desktop設定の「Resources」→「WSL Integration」で使用中のUbuntuディストリビューションを有効にしました
  2. WSL2環境からDockerが使用できることを確認
    • docker --versionでバージョン情報が表示されることを確認
    • docker psでコンテナリストが問題なく表示されることを確認
  3. VSCodeを再起動
    • Docker接続に関するキャッシュをクリアするため
ログインするとコメントできます