MarkdownとBullet Journal

いわゆるプログラマーのつぶやき

iPhone機種変更時のデータ移動方法

iPhone更新手順

最近は新旧のiPhoneを近づけるだけでOK、ということだが意外に色々と引っかかったので自分用にメモ

①旧 iPhoneの準備:

  • OSを最新にする(今回の場合OS26.1)
  • 最終バックアップを取る。重要データ(LINEトーク、2FA 等)は個別バックアップ方法を確認
  • (LINEはトークバックアップ、Auth系はエクスポート/バックアップコード等)。

②新 iPhone

  • OSを最新にする(今回の場合OS26.1)
  • eSIM有効にする(前機種はカードSIM)
  • 設定-モバイル通信-eSIMの登録が無ければ、プロファイルダウンロードでeSIMを有効にする
  • モバイル通信が動作するか確認
  • 電源投入するも反応しない場合は、一度機内モードにして戻すと繋がった

③新 iPhone を消去(Hello 画面に戻す):

  • QuickStartを有効にすべく一旦消去する
  • 設定 → 一般 → 転送またはリセット → すべてのコンテンツと設定を消去(Erase All Content and Settings)をタップ。パスコード/Apple ID パスワードを入力して進める。
  • 消去オプションで 必ず「eSIM を保持(Keep eSIM)」 を選ぶ。これで回線は消さずに機器を初期化。

④転送:

  • 消去後、Hello(初期設定)画面 が出る。ただしこの状態ではQuickStartに進まない
  • 注意!続いて、言語、基本的な画面設定まで進めると、移行待ちの画面が出る
  • iPhone を近づけて Quick Start を実行
  • iPhone に「新しい iPhone を設定(Continue)」のポップアップが出たらタップ → 画面のアニメーションを新 iPhone のカメラで読み取る → 「iPhone から転送(Transfer from iPhone)」を選択 → 指示に従う。

  • ここで進まないトラブル発生

  • iPhone:画面に以下表示:
    • 「新しいiPhoneの設定を完了」
    • 「情報が転送されている間は、このiPhoneを新しいiPhoneの近くに置いて下さい」
    • メッセージを消す×マークあり
    • 下にクルクル回る、転送中を意味している様なアイコン表示
  • iPhone: Helloの表示

  • 解決策:

  • iPhoneの設定をドンドン進めると、転送開始になった

⑤確認:

  • 移行完了後、iMessage/FaceTime、モバイル通信、アプリの挙動、2FA の動作、Apple Pay 等をチェック

Windows PowerShellで各CLIを使う

Windows+VSCodeで生成AIをフル活用

WindowsPowerShellでも各CLIは利用できる。ただしLinux/UnixではないのでDockerは使えない。

  • GitHub copilot,
  • Claude Code / Claude Code for VSCode,
  • Gemini CLI / Gemini Code Assist Agent,
  • OpenAI Codex CLI / OpenAI’s coding agent,
  • Grok CLI,
  • GitHub CLI

下図はVSCode上でサービスの比較検証をしている状態で、動いているサービスは以下の通り。

  • Gemini Code Assist Agent(左列)
  • Claude Code for VSCode(真ん中上段)
  • Codex CLI(真ん中下段)
  • GitHub Copilot(右列)

4つの生成AIエージェント(CLI)が走った状態

その結果、

  • 開発方針検討は、ChatGPT o3やGemini等とブラウザでチャット、
  • コード自動生成やディレクトリ構築、シェル/Git制御は、VSCodeで実行、

が簡単に実現する(1時間もかからない)。なおWindows WSL版とMac版も記載したのでそれぞれ示す。

programmingforever.hatenablog.com

programmingforever.hatenablog.com

それでは、インストール手順を記載する。今回は何もインストールされていないPCを対象としているが、一部が既にインストールされている場合は該当部はスキップして問題ない。さらに言えば各項目の導入手順は生成AIに聞くのが一番だが、自分自身の備忘録としてまとめた。

  1. Powershell & VSCodeで利用
  2. Claude Code, Gemini CLI, OpenAI Codex CLIインストール
  3. GitHubを使える様にする
  4. 各実行(GitHub Copilot, Claude Code, Gemini CLI, OpenAI Codex CLI

🟢 PowerShellで各CLIを使えるようにする手順

Node.js のインストールから CLIPowerShell 上で使えるようにするまでの手順を整理。

0. PowerShellを管理者として起動

  1. Windowsキー を押して「PowerShell」と入力
  2. 出てきた Windows PowerShell を右クリック → 管理者として実行

1. PowerShell 7をインストール

  • 日本語化対応も良くなったPowerShell 7 のインストールがおススメ
  • 方式:winget
$ PowerShell(管理者)で実行:
winget install -e --id Microsoft.PowerShell
  • インストールが終了したら、pwsh -vでバージョン確認。
  • 以降はメニューから選択、あるいはpwshで`PowerShell7を起動して実行。
  • 次に、$PROFILE用のフォルダとファイルを作成する
  • $PROFILEは5と7で別物なので作成する必要がある
# 1.親フォルダを作る(なければ作成、あってもOK)
$dir = Split-Path -Parent $PROFILE
New-Item -ItemType Directory -Path $dir -Force | Out-Null

# プロファイルファイルを作成(なければ新規)
if (-not (Test-Path $PROFILE)) {
  New-Item -ItemType File -Path $PROFILE -Force | Out-Null
}

# メモ帳で開く
notepad $PROFILE

# 5版の$PROFILEファイルの内容を7版に一式コピー

2. Node.js をインストール

CLI は Node.js が必要。 複数バージョンを切り替えられる nvm for Windows を使う方法がおすすめ。

(1) nvm for Windows を入れる

  1. GitHubnvm-windows Releases ページを開く
  2. 最新版の nvm-setup.exe をダウンロードして実行(基本的に「Next」でOK)
  3. インストール完了後、PowerShell を再起動

(2) Node.js をインストール

※Codexが22以上を求めるので22を入れる

nvm install 22
nvm use 22

(3) バージョン確認

node -v
npm -v

3. 各CLI をインストール

npm を使って 各CLI をグローバルに入れる

npm install -g @anthropic-ai/claude-code  # Claude Code をインストールしたい場合
npm install -g @google/gemini-cli  # Gemini CLI をインストールしたい場合
npm install -g @openai/codex  # OpenAI Codex CLIをインストールしたい場合
npm install -g @vibe-kit/grok-cli  # Grok CLIをインストールしたい場合

GitHub CLIを使える様にする

これで GitHub リポジトリ操作や PR 作成などをコマンドラインから行えるようになる

1. GitHub CLI のインストール

MSI インストーラーを使う

  1. GitHub CLI Releases ページを開く
  2. 最新版の gh_X.Y.Z_windows_amd64.msi をダウンロード
  3. MSI インストーラーを実行(NextでOK)

2. インストール確認

PowerShell で以下を入力:

gh --version
  • バージョンが表示されれば成功

3. 初期設定(GitHub アカウント認証)

GitHub CLI を使うには GitHub アカウントとの接続が必要

gh auth login

選択肢に従って進める:

  • GitHub.com or Enterprise → GitHub.com を選択
  • HTTPS or SSHHTTPS を推奨(初心者向け)
  • 認証方法 → ブラウザでログイン を選択
  • 指示に従ってブラウザで GitHub にサインイン → 認証コード入力

4. 動作確認

例:自分のリポジトリ一覧を表示する。下のコマンドでGitHub 上のリポジトリが表示されれば準備完了。

gh repo list

⑥各生成AIサービスを実行

一連の設定の続きならそのままVSCodeを使用する。

# ①PowerShellを起動
# ②VSCode起動
code

③以降の各生成AIサービスはVSCode上で実行

(1)GitHub Copilot for VSCode

VSCode拡張のCopilot Chat / Copilot Agent(エージェントモード)は、WSL上でもそのまま使用できる。 プロジェクトがWSL上にあっても、Copilotは現在開いているファイルと構成を理解して提案できる

GitHub copilotのインストール方法(初回のみ実行):
  • VSCodeを起動
  • 左側のサイドバーにある拡張機能アイコンをクリック
  • 検索欄に「GitHub Copilot」と入力し、以下2つをインストール
  • インストール後は、GitHubアカウントとの連携が必要
  • 画面に表示される指示に従って認証を完了すれば、Copilotが自動的に有効化され、画面右側にCopilot専用画面が現れてコード補完が可能になる
GitHub copilotの起動方法:
  • 画面上部のcopilotアイコンまたはセカンダリサイドバークリックで起動
  • 使用モード:エージェントモードがお勧め。
  • 使用モデル:自由に選択(GPT4.1など)

(2)Claude Code for VSCode

Claude Code の設定方法(初回のみ):
  • claudeで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • Claude Codeの有料契約情報の紐付けを行う
  • VSCode拡張機能で「Claude Code for VSCode」を探してインストール
  • VSCodeの画面右上に現れるClaudeアイコンをクリックすると、GitHub copilotの様に画面右側にClaude Codeが現れる
  • あとは自由に対話
Claude Code の起動方法:
$ claude

(3)Gemini CLI

Gemini CLIの設定方法(初回のみ):
  • geminiで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • Googleの個人ユーザーとの紐付けを行う
  • あとは自由に対話
Gemini CLIの起動方法:
$ gemini

(4)OpenAi Codex CLI

OpenAi Codex CLIの設定方法(初回のみ):
  • codexで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • ChatGPT Plus以上のユーザーであれば、web認証で利用OK
  • (またはOpenAIのAPIキーの紐付けを行う)
  • あとは自由に対話
OpenAi Codex CLIの起動方法:
$ codex
VSCodeのAgentモードでCodexを使う:
  • VSCode拡張機能で、「Codex – OpenAI’s coding agent」をインストール
  • 右上のアイコンをクリックすると専用チャットWindowが拓く

(5)Gemini Code Assist Agentモードを使う:

2025年6月25日に登場したもので、GitHub Copilotの様に画面右サイドにGeminiを表示して使用できる。とても便利なので合わせて導入したい。

  • GeminiからVSCode用として提供されている拡張機能をInsiderバージョンにアップデート
    • VSCodeのコマンドパレットを開く
    • Windows/Linux: Shift + Ctrl + Pを同時に押す Mac: Shift + Command + Pを同時に押す
    • コマンド パレットに「ユーザー設定 (JSON を開)く」 を選択
    • ユーザー設定 JSON に次の行を追加
    • "geminicodeassist.updateChannel": "Insiders",
  • VSCode拡張機能からGemini Code Assistをインストール
  • ここでVSCodeを再起動
  • VS Code の左サイドバーに登場した [Gemini] アイコンをクリック
  • 下部にある[Agent]トグルを ON にしてエージェントモードを開始
    • もし見えなければもう一度VSCodeを再起動か、拡張機能からGemini Code Assistを見つけてそこに現れている再起動をクリック
  • エージェントモードをONに出来たら、利用するフォルダ、ワークスペースを開く
  • テキストボックスに、エージェントに実行させたいタスクを自然言語で入力
  • エージェントがタスクを完了するための計画と変更内容を提示します。内容を確認し、[Accept] することで、エージェントが作業を実行します。また、コマンド実行が必要な場合は [Run] を実施
  • 変更を一つずつ確認するのが面倒な場合は、[変更を自動承認] を選択することで、プロセスを完全に自動化することも可能

以上を済ませることで、下図のような状態に出来る。

  • Gemini CLI(左列)
  • Claude Code(真ん中上段)
  • Codex CLI(真ん中下段)
  • GitHub Copilot(右列)

4つの生成AIエージェント(CLI)が走った状態

これで各サービスを同時に性能比較できる様になった。ちなみに画面では4つのサービスに対して、コミットやGitHubへのpushが可能かを確認している状態で、全てのサービスが「はい!出来ます!」と明るく回答した。

滅茶苦茶面白い。MCP含め実に面白い。以上でインストール一式完了。Enjoy!

Obsidianの相互メモリンクをTyporaでも使う

Obsidianをインストール

おそまきながらもObsidianを使い始めた。Markdown記法が使え、ノート間の相互リンクが使え、様々な外部ツールとリンク出来るそうだ。同期はMDファイルで容量も小さいこともあり、とりあえずiCloud上にvalutを設置することで、iPhone, iPad, Mac, Windows間で共有を実現した。

しかし以前から私はTyporaを愛用している。TYporaはMarkdown記法で入力するとただちに指定の記法で表現され、また通常のテキスト表示との切り替えも簡単なので、例えばwebサイトや他のMarkdown記法の記事を一旦Typoraにコピーしてテキスト表示に切り替えたものを、このはてなブログなどに張り付けるのがクイックに出来るので重宝している。

対してObsidianのキモはウイキリンク記法( ... )にあると感じた。そこで調べると同様の機能がTyporaでも行える方法を見つけたので備忘録として残す。

🔁 [[...]] 記法を使う方法

Typoraにも「コミュニティ製のプラグイン」を導入することで、Obsidian風の [[リンク名]] に対応させることができる。

プラグイン名:

  • typora-plugin-wikilink

機能:

  • [[...]] 記法の認識
  • 入力補完機能([[ を入力するとファイル候補が表示)
  • Ctrlキー+クリックでリンクを開く
  • 既存のMarkdownファイルに対応

🛠 プラグイン導入手順

  1. GitHub から typora-plugin-wikilink をダウンロード
  2. Typoraのプラグインフォルダにコピー
  3. Typora設定でプラグインを有効化

注意:Typoraのプラグイン機能は一部の最新版でのみ利用可能であり、ベータ版または開発者向けの設定が必要な場合がある。


Mac+VSCodeでGitHub copilot, Claude Code, Gemini Code Assist Agent/Gemini CLI, Dockerを使う

Mac+VSCodeで生成AIをフル活用

前の記事ではWindowsのWSL+VSCodeでClaude Codeなどを使う方法を示したが、当然Macでも使える。*Windows版は下記記事参照。

programmingforever.hatenablog.com

この記事を読めば、以下の各サービスを並行で自由に開発で使える様になるのでそのインストール手順を示す。

  • GitHub copilot,
  • Claude Code / Claude Code for VSCode,
  • Gemini CLI / Gemini Code Assist Agent,
  • OpenAI Codex CLI / OpenAI’s coding agent,
  • Grok CLI,
  • GitHub CLI,
  • Docker

下図はVSCode上でサービスの比較検証をしている状態で、動いているサービスは以下の通り。

  • Gemini Code Assist Agent(左列)
  • Claude Code(真ん中上段)
  • Codex CLI(真ん中下段)
  • GitHub Copilot(右列)

4つの生成AIエージェント(CLI)が走った状態

その結果、

  • 開発方針検討は、ChatGPT o3やGemini等とブラウザでチャット、
  • コード自動生成やディレクトリ構築、シェル/Git制御は、VSCodeで実行、

が簡単に実現する(1時間もかからない)。

  • ※Gemini CLI以外は全て有料サービスなので別途契約が必要
  • ※Docker Desktopは個人ユーザーの場合は無料で使える

それでは、Macへのインストール手順を以下記載する。今回の記載は何もインストールされていないPCを対象としているが、一部が既にインストールされている場合は該当部はスキップして問題ない。さらに言えば各項目の導入手順は生成AIに聞くのが一番だが、自分自身の備忘録としてまとめた。

  1. VSCodeを使える様にする
  2. 各インストール(Claude Code, Gemini CLI, OpenAI Codex CLI
  3. GitHubを使える様にする
  4. Docker Desktopインストール
  5. 各実行(GitHub Copilot, Claude Code, Gemini CLI, OpenAI Codex CLI

手順

VSCodeを有効にする

②各インストール

以下、VSCodeのターミナル上で実行する。単体のターミナルでも良い。

  • [以下シェル(bash)で作業
  • Homebrewで作業するので、先にHomebrewのインストールが必要
  • Homebrewのインストールは下記サイトから行える

brew.sh

  • Homebrewがインストールされたら以下のシェルを実行する
  • 注:nvmを用いるのでnode.jsをインストールする手順を含いんでいる
  • Gemini CLIがnvm20以降推奨、OpenAI Codex CLIがnvm22以降推奨なのでnodeのバージョンは22に合わせる
$ brew update  #パッケージ一覧の更新
$ brew upgrade  #パッケージのアップグレード
$ brew cleanup  #不要なキャッシュの削除

$ brew install node  # node.jsをインストール
$ node -v  #インストール確認
$ npm -v  #インストール確認

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash  #nvmインストール
$ source ~/.bashrc  # bash再起動
$ nvm --version  #nvmインストール確認

$ nvm install 22  # nvmのVer.22をインストール(Codexは要22以上、Geminiは要20以上)
$ nvm use 22  # 以降Ver.22を使用
$ nvm alias default 22  # 注意:今後Ver.22に固定したい場合

$ npm install -g @anthropic-ai/claude-code  # Claude Code をインストールしたい場合
$ npm install -g @google/gemini-cli  # Gemini CLI をインストールしたい場合
$ npm install -g @openai/codex  # OpenAI Codex CLIをインストールしたい場合
$ npm install -g @vibe-kit/grok-cli  # Grok CLIをインストールしたい場合

GitHub CLIを使える様にする

🔐 方法:gh auth login を使う(推奨)

GitHub CLIgh)を使えば、GitHub認証がスムーズに行える。

1. GitHub CLI (gh) をインストール

$ brew install gh  # GitHub CLI(gh)のインストール
$ gh --version  # インストール確認

2. 認証実行

gh auth login

対話形式で以下の選択をする:

質問 推奨回答
What account do you want to log into? GitHub.com
What is your preferred protocol for Git operations? HTTPS
Authenticate Git with your GitHub credentials? Yes
How would you like to authenticate? Login with a web browser(コード入力が必要)

すると、次のようなメッセージが出る:

! First copy your one-time code: XXXX-XXXX
Press Enter to open https://github.com/login/device

iPhoneWindowsブラウザでそのURLを開き、表示されたコードを入力して認証する

✅ 成功後の確認

gh auth status

で以下のような表示が出ればOK:

Logged in to github.com as [ユーザー名] ([認証済みトークンのスコープ])

これで、WSL内でGitHub操作(push, pull, clone)やCopilot連携が可能になった。念の為登録情報を記載しておく

$ git config --global user.name "あなたのGitHubユーザー名"
$ git config --global user.email "GitHubに登録したメールアドレス"

④Docker Desktopインストール

(1)インストーラーのダウンロード:

Docker公式サイトにアクセスし、「Download for Mac」ボタンをクリックして、Docker Desktop をダウンロード。

(2)インストーラーの実行:

ダウンロードしたDocker Desktop Installer.exeをダブルクリックして実行。管理者権限が必要。

(3)Docker Desktopの起動:

  • インストールが完了したら、成功のメッセージが表示されることを確認。
  • スタートメニューから「Docker Desktop」を起動

(4)確認:

$ docker --version      # => 成功すれば CLI は通る
$ docker info           # => Docker デーモンとの通信が可能か確認

これでDockerが使えるようになった。

⑤各生成AIサービスを実行

(1)GitHub Copilot for VSCode

GitHub copilotのインストール方法(初回のみ実行):
  • VSCodeを起動
  • 左側のサイドバーにある拡張機能アイコンをクリック
  • 検索欄に「GitHub Copilot」と入力し、以下2つをインストール
  • インストール後は、GitHubアカウントとの連携が必要
  • 画面に表示される指示に従って認証を完了すれば、Copilotが自動的に有効化され、画面右側にCopilot専用画面が現れてコード補完が可能になる
GitHub copilotの起動方法:
  • 画面上部のcopilotアイコンまたはセカンダリサイドバークリックで起動
  • 使用モード:エージェントモードがお勧め。
  • 使用モデル:自由に選択(GPT4.1など)

(2)Claude Code for VSCode

Claude Code の設定方法(初回のみ):
  • claudeで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • Claude Codeの有料契約情報の紐付けを行う
  • VSCode拡張機能で「Claude Code for VSCode」を探してインストール
  • VSCodeの画面右上に現れるClaudeアイコンをクリックすると、GitHub copilotの様に画面右側にClaude Codeが現れる
  • あとは自由に対話
Claude Code の起動方法:
$ claude

(3)Gemini CLI

Gemini CLIの設定方法(初回のみ):
  • geminiで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • Googleの個人ユーザーとの紐付けを行う
  • あとは自由に対話
Gemini CLIの起動方法:
$ gemini

(4)OpenAi Codex CLI

OpenAi Codex CLIの設定方法(初回のみ):
  • codexで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • ChatGPT Plus以上のユーザーであれば、web認証で利用OK
  • (またはOpenAIのAPIキーの紐付けを行う)
  • あとは自由に対話
OpenAi Codex CLIの起動方法:
$ codex
VSCodeのAgentモードでCodexを使う:
  • VSCode拡張機能で、「Codex – OpenAI’s coding agent」をインストール
  • 右上のアイコンをクリックすると専用チャットWindowが拓く

(5)Gemini Code Assist Agentモードを使う:

2025年6月25日に登場したもので、GitHub Copilotの様にGeminiを画面右サイドに表示して使用できる。とても便利なので合わせて導入したい。

  • GeminiからVSCode用として提供されている拡張機能をInsiderバージョンにアップデート
    • VSCodeのコマンドパレットを開く
    • Windows/Linux: Shift + Ctrl + Pを同時に押す Mac: Shift + Command + Pを同時に押す
    • コマンド パレットに「ユーザー設定 (JSON を開)く」 を選択
    • ユーザー設定 JSON に次の行を追加
    • "geminicodeassist.updateChannel": "Insiders",
  • VSCode拡張機能からGemini Code Assistをインストール
  • ここでVSCodeを再起動
  • VS Code の左サイドバーに登場した [Gemini] アイコンをクリック
  • 下部にある[Agent]トグルを ON にしてエージェントモードを開始
    • もし見えなければもう一度VSCodeを再起動か、拡張機能からGemini Code Assistを見つけてそこに現れている再起動をクリック
  • エージェントモードをONに出来たら、利用するフォルダ、ワークスペースを開く
  • テキストボックスに、エージェントに実行させたいタスクを自然言語で入力
  • エージェントがタスクを完了するための計画と変更内容を提示します。内容を確認し、[Accept] することで、エージェントが作業を実行します。また、コマンド実行が必要な場合は [Run] を実施
  • 変更を一つずつ確認するのが面倒な場合は、[変更を自動承認] を選択することで、プロセスを完全に自動化することも可能

以上を済ませることで、下図のような状態に出来る。

  • Gemini CLI(左列)
  • Claude Code(真ん中上段)
  • Codex CLI(真ん中下段)
  • GitHub Copilot(右列)

4つの生成AIエージェント(CLI)が走った状態

これで各サービスを同時に性能比較できる様になった。ちなみに画面では4つのサービスに対して、コミットやGitHubへのpushが可能かを確認している状態で、全てのサービスが「はい!出来ます!」と明るく回答した。

滅茶苦茶面白い。MCP含め実に面白い。以上でインストール一式完了。Enjoy!

🧠おまけ①: ~/.gitconfig の充実例

iniコピーする編集する[user]
    name = ***
    email = ***@example.com

[core]
    editor = code --wait
    autocrlf = input
    excludesfile = ~/.gitignore_global

[credential]
    helper = cache

[push]
    default = simple

[init]
    defaultBranch = main

[alias]
    st = status
    ci = commit
    co = checkout
    br = branch
    lg = log --oneline --graph --decorate

🧠おまけ②:CopilotとCodeの連携

ここからは、GitHub Copilot Agent(エージェントモード)*を最大限に活用して、Claude CodeやWSL環境と*高度に連携する開発スタイルを紹介する。

目的

Copilot Agent を "AI開発アシスタント" として使い、プロジェクトの設計・修正・Git操作・ドキュメント化などを自然言語で制御する。Claude CodeとCLIは補完的に利用する。

✅ 前提確認

まず以下の機能が使える状態になっている必要がある(上記①-⑤を行えばOK):

項目 状態 確認方法
VSCode + GitHub Copilot 拡張 拡張機能で「GitHub Copilot」「Copilot Chat」「Copilot Agent」が入っている
GitHub アカウントでログイン済 VSCode右上の「アカウントアイコン」がアクティブならOK
プロジェクトがWSL上 code . で開いていればOK
Claude Code CLIがWSL上で稼働 補完的に使う(後述)

🚀 高度な Copilot Agent 活用方法

以下に代表的な高度な連携技術をシナリオ別に紹介


✨ ① プロジェクト初期構成の自動生成(Claudeとの連携も可能)

指示例(Copilot Agent に):
新しいIoTダッシュボードのプロジェクトを作成したいです。
技術スタックは React, Vite, TypeScript, Tailwind CSS, FastAPI(バックエンド)。
DockerとGitHub ActionsによるCI/CDも含めて、ディレクトリ構成と最低限のコードを生成してください。

💡 Copilot Agent はプロジェクト全体を把握し、複数ファイルを一括生成・修正

▶ Claude Code CLI を補助的に使えば、同様の構成をCLIで再現・調整可能。


✨ ② 自然言語でGit操作(安全・確認付き)

指示例:
この変更を 'fix: 認証エラーの修正' としてコミットして。
pushもしておいて。

結果:

  • ステージされていないファイルの確認
  • 自動で git add .git commit -mgit push を実行
  • エラーや未設定があれば確認・対話あり

✨ ③ テストやドキュメントの自動生成

指示例:
/backend/app/api.py に対して pytest のユニットテストコードを作成して、
/tests ディレクトリに保存してください。

→ Copilot Agent は依存ファイルを探索し、正しいパスとモジュール構成でテストコードを生成する。


✨ ④ コードの一括リファクタリング・規約適用

指示例:
このプロジェクト全体にESLintのルールを追加して、コードも自動整形してください。

eslint.config.js を生成し、対応コードを一括修正。 場合によっては package.json に自動で依存追加。


✨ ⑤ Claude Codeとのハイブリッド運用

Claude CLI では、次のようなことが可能:

  • YAMLベースで複数ファイル生成
  • スクリプトで命令を一括化(例:一括rename、一括コメント挿入)
  • 環境設定やDocker化をロジカルに処理

💡 これらを使ってファイル群を「準備」し、Copilot Agentで理解・微調整・Git管理という連携が理想的。


📁 開発ワークフロー統合例(Claude + Copilot)

フェーズ 使用ツール 操作
要件整理・構成案作成 Claude Code YAMLテンプレートで一括生成
ファイル編集・コード補完 Copilot Chat / Agent 自然言語で修正・提案を受ける
テスト追加・CI対応 Copilot Agent 自動でファイルを追加しテスト実行
Git操作・デプロイ Copilot Agent git pushやCI実行も自然言語

🧩 応用機能

応用項目 概要
@workspace 指定 プロジェクト全体を対象にAgentが分析・対応
CopilotでAsk Me Anything ChatGPTのように自然言語質問可(ただしプロジェクト文脈ベース)
CopilotからGitHub PR作成 修正 → コミット → PR起票まで自動でサポート可能

📝 まとめ

ツール 得意な役割
Claude CLI 最初の設計生成(仕様からコードへ)
VSCode Copilot Chat 局所の修正、補完、説明
VSCode Copilot Agent 全体の変更、Git操作、テスト追加、CI設定など"実働部隊"

🧠おまけ③:Claude Codeへの効果的な指示

Claude(Claude Code CLIやClaude 3.5 SonnetのCodeモード)に渡すと効果的な 「プロジェクト構成テンプレート」の例 を提示。

これは「仕様からプロジェクト一式を生成する」ためのテンプレートで、Claudeにそのまま貼り付けて使える。


📦 Claudeに渡すテンプレート例(プロジェクト構成生成用)

project_name: smartfit-dashboard
description: >
  このプロジェクトは、IoTエッジデバイス「SmartFitPRO」の状態を監視・設定するためのWebダッシュボードです。
  ユーザーはリアルタイムでデバイスのデータを確認し、設定変更、ログ確認ができます。

stack:
  frontend:
    framework: React
    language: TypeScript
    build_tool: Vite
    styling: Tailwind CSS
  backend:
    framework: FastAPI
    language: Python 3.11
    api_routes:
      - GET /devices
      - POST /devices/:id/settings
      - GET /devices/:id/logs
  database:
    type: PostgreSQL
    schema:
      - table: devices
        fields: [id, name, status, last_seen, ip_address]
      - table: logs
        fields: [id, device_id, timestamp, message]

structure:
  - /frontend
    - /src
      - /components
      - /pages
      - App.tsx
      - main.tsx
    - index.html
    - tailwind.config.js
  - /backend
    - /app
      - main.py
      - /routers
      - /models
      - /schemas
  - /database
    - init.sql
  - /tests
    - test_devices.py
  - .gitignore
  - docker-compose.yml
  - README.md

tasks:
  - 全体のディレクトリと初期ファイルを生成
  - REST APIのルーティングコードを scaffolding
  - フロントエンドで `/devices` API を呼び出して一覧表示
  - Dockerで frontend + backend + db を統合
  - GitHub Actionsで CI を構成

✍️ Claudeへの指示例(自然言語

このYAMLテンプレートに従って、プロジェクト一式を作成してください。
必要に応じてコードも生成してください。Docker対応とREADMEも含めてください。

あるいは:

以下のテンプレートに基づいて、React + FastAPI + PostgreSQL のIoT管理アプリの雛形を生成してください。

→ Claudeはこれに従って:

  • ディレクトリ構成
  • 最小限のReactコード
  • FastAPIのエンドポイント
  • docker-compose.yml
  • README.md

などを一括生成してくれる。


💡 Tips:Claudeテンプレートの良い書き方

要素 ポイント
description: プロジェクトの目的やユースケースを書くとClaudeが文脈を正確に理解
stack: 使用する技術スタックは細かく(バージョンもOK)
structure: 階層構造はインデントを守って丁寧に記述
tasks: Claudeに何をして欲しいか明示することで意図通りの生成がされやすい

🧩 応用アイデア

  • auth: セクションを入れてログイン機能を要求
  • i18n: セクションで多言語対応
  • logging: セクションで構成のログ方針
  • env: セクションで .env 設定内容を指定

ProgrammingForEver 1日前 読者になる

コメントを書く

2025-06-26

WindowsでClaude CodeとGemini CLIを使う

WSLを用いたインストール

昨日(2025年6月25日)、GoogleがGemini CLIを発表した。Claude Codeの対抗馬としての位置付けであり、早速試してみたので、そのインストール方法をClaude Codeとセットで記載する。

Windows環境でClaude CodeとGemini CLIを使う場合、WSL(WSL2)の利用が最も簡単だ。合わせてOpenAI Codex CLIGitHub Copilot CLIもインストールしたので、これら4サービス全てに対応するインストール手順としている。

参考:WSL上でVSCodeを使用すると、DockerやGitHub Copilotも合わせて使用出来るので、その辺りも含めた記事も書いた(下記)。

programmingforever.hatenablog.com

手順

①WSLインストール

  • 最初にPowerShellを「管理者権限」で起動する。Windowsの検索バーに「PowerShell」と入力して一覧で表示された「Windows PowerShell」を右クリックして「管理者として実行」を選択
  • 開いたPowerShellの画面で、WSLのインストールコマンドを入力
wsl --install

実行するとWSL2とUbuntuがインストールされる。なおDockerなどをインストールしている場合は既にWSLがインストールされているので、同じコマンドでubuntuのみ追加インストールとなる。またその場合は、引き続きユーザー名(半角小文字)とパスワードを続いて入力してpowershellでの作業は終了。

ubuntuでインストール

  • Windowsのスタートメニューにubuntuが登場していると思うのでそれをクリックして起動
  • 以下画面で作業
  • ここでユーザー名とパスワードを聞かれたら登録
  • Gemini CLIがnvm20以降推奨、OpenAI Codex CLIがnvm22以降推奨なので22に合わせる
$ sudo apt update  #アップデート
$ sudo apt install -y nodejs npm  # node.jsをインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash  #nvmインストール
$ source ~/.bashrc  # bash再起動
$ nvm install 22  # nvmのVer.22をインストール(Codexは要22以上、Geminiは要20以上)
$ nvm use 22  # 以降Ver.22を使用
$ nvm alias default 22  # 注意:今後Ver.22に固定したい場合

$ npm install -g @anthropic-ai/claude-code  # Claude Code をインストールしたい場合
$ npm install -g @google/gemini-cli  # Gemini CLI をインストールしたい場合
$ npm install -g @openai/codex  # OpenAI Codex CLIをインストールしたい場合

これでインストール完了。

③Gemini CLI起動

以下のコマンドでGemini CLIは起動する。

$ gemini

次に起動画面に出てくる2つの選択を行う。

(1)表示スタイルを選択(そのままエンターでもOK)

 ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
  ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
    ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
     ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
   ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
 ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░

╭──────────────────────────────────────╮
│                                                                          │
│ > Select Theme                            Preview                        │
│ ○ ANSI Dark                               ┌─────────────┐ │
│ ○ Atom One Dark                           │                          │ │
│ ○ Ayu Dark                                │ 1 # function             │ │
│ ● Default Dark                            │ 2 -def fibonacci(n):     │ │
│ ○ Dracula Dark                            │ 3 -    a, b = 0, 1       │ │
│ ○ GitHub Dark                             │ 4 -    for _ in range(n):│ │
│ ○ ANSI Light Light                        │ 5 -       a, b = b, a + b│ │
│ ○ Ayu Light Light                         │ 6 -    return a          │ │
│ ○ Default Light Light                     │                          │ │
│ ○ GitHub Light Light                      │ ╭───────────╮ │ │
│ ○ Google Code Light                       │ │                    │ │ │
│ ○ Xcode Light                             │ │ No changes detected│ │ │
│                                           │ │                     │ │ │
│   Apply To                                │ ╰───────────╯  │ │
│ ● User Settings                           │                          │ │
│ ○ Workspace Settings                      └─────────────┘ │
│                                                                           │
│ (Use Enter to select, Tab to change focus)                                │
│                                                                           │
╰──────────────────────────────────────╯


╭──────────────────────────────────────╮
│                                                                          │
│ > Select Theme                            Preview                        │
│ ○ ANSI Dark                               ┌─────────────┐ │
│ ○ Atom One Dark                           │                          │ │
│ ○ Ayu Dark                                │ 1 # function             │ │
│ ● Default Dark                            │ 2 -def fibonacci(n):     │ │
│ ○ Dracula Dark                            │ 3 -    a, b = 0, 1       │ │
│ ○ GitHub Dark                             │ 4 -    for _ in range(n):│ │
│ ○ ANSI Light Light                        │ 5 -       a, b = b, a + b│ │
│ ○ Ayu Light Light                         │ 6 -    return a          │ │
│ ○ Default Light Light                     │                          │ │
│ ○ GitHub Light Light                      │ ╭───────────╮ │ │
│ ○ Google Code Light                       │ │                    │ │ │
│ ○ Xcode Light                             │ │ No changes detected│ │ │
│                                           │ │                     │ │ │
│   Apply To                                │ ╰───────────╯  │ │
│ ● User Settings                           │                          │ │
│ ○ Workspace Settings                      └─────────────┘ │
│                                                                           │
│ (Use Enter to select, Tab to change focus)                                │
│                                                                           │
╰──────────────────────────────────────╯

~           no sandbox (see /docs)      gemini-2.5-pro (100% context left)

(2)次にログイン(個人ユーザーの選択が無難)

 ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
  ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
    ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
     ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
   ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
 ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░


Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.

╭──────────────────────────────────────╮
│                                                                           │
│ Select Auth Method                                                        │
│ ● Login with Google                                                      │
│ ○ Gemini API Key                                                         │
│ ○ More...                                                                │
│                                                                           │
│                                                                           │
│ (Use Enter to select)                                                     │
│                                                                           │
╰──────────────────────────────────────╯

これで「>」カーソルが現れるので、自由に日本語を用いて指示を与える事ができる。例えばToDoアプリを作ってと伝えると、数分で完成する(ローカル)。

④Cluade Code起動

(1)APIキーを設定

※最新ではAPIキーの入力は不要になった模様。以下あくまで参考

~/.bashrcにAPIキーを設定する(Ubuntu環境)。Claudeの有料会員登録で取得したAPIキー(sk-***)を環境変数として設定。~/.bashrcの末尾等に1行追記する。

export CLAUDE_API_KEY="sk-***"

(2)起動

  • 上のAPIキーを入れた場合はshellを再起動するか、source ~/.bashrcを実行してリセット(初回のみ)
  • claudeを起動
$ claude

起動したらGemini CLK同様にテキストの表示を好みに合わせて、ブラウザでログインし、双方の吐き出すコードで認証すればOK(初回のみ)。

       ___   ___         ___     _   _     ___      _____
      / __| | |         / _ \   | | | |   |   \    | ____|
     | |    | |        | |_| |  | | | |   | |) |   | |_
     | |    | |        |  _  |  | | | |   |  _ <    |  _|
     | |__  | |____    | | | |  | |_| |   | |_) |   | |___
      \___| |______|   |_| |_|   \___/    |____/    |_____|

  Claude Code - Anthropic's official CLI for Claude

  Welcome to Claude Code! I'm here to help you with software engineering tasks.
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                         │
│                                                   │
│   /help for help, /status for your current setup  │
│                                                   │
│   cwd: /home/t-wada/todo-app                      │
╰───────────────────────────────────────────────────╯

 Tips for getting started:

 1. Run /init to create a CLAUDE.md file with instructions for Claude
 2. Use Claude to help with file analysis, editing, bash commands and git
 3. Be as specific as you would with another engineer for the best results

あとはGemini CLI同様に使える

⑤Gemini CLI/Claude Codeの利用例:

(1)シェルを用いた対話

シェル操作を行う範囲なら、なんでも依頼出来る。

  • シェル操作(フォルダ削除や移動)
  • Git操作(コミット、リセット、プルリクなど)
  • リファクタリング
  • コード/関数の解説
  • 未使用変数の削除
  • テスト実行、エラー修正

(2)プロジェクトへの理解

Claude Codeのプロンプトで/initと入力すると、指定プロジェクトのディレクトリ構成や、package.jsonyamlなど設定ファイルを解析し、プロジェクト概要(ビルド方法、主要な技術スタック、ディレクトリ構成など)を記述した「CLAUDE.md」を生成する。この利用で人と生成AI(Claude Code)の両者共に指定プロジェクトの中身を可視化できるため、AI生成の精度向上が期待できる。

Gemini CLIには同等のコマンドはないが、「**プロジェクトの概要(ビルド方法、主要な技術スタック、ディレクトリ構成など)を記述した「Gemini.md」を作って」と言えばよい。

⑥OpenAI Codex CLIのインストール(WSL上)

※インストール自体は、上のオールインストールで完了する。以下は個別でインストールする方法を記載

WSL (Ubuntu) で OpenAI Codex CLI を入れる最短ルート

ステップ コマンド 補足
1. Node 22 以上を準備 bash nvm install 22 # 初回だけ nvm use 22 # セッション用 nvm alias default 22 # 任意、常用なら Codex CLI の公式要件は Node 22+github.com(Node 20 でも動く場合がありますが、将来のアップデートで外れる可能性あり)
2. グローバルにインストール bash npm install -g @openai/codex nvm 管理下なので sudo 不要。EACCES エラーも起きません。help.openai.com
3. API キーを渡す bash export OPENAI_API_KEY="sk-..." (恒久化するなら echo 'export OPENAI_API_KEY="sk-..."' >> ~/.bashrc .env ファイルを置いても自動で読み込まれます。github.com
4. 起動テスト bash codex "explain this repo to me" codex だけで対話モード、--auto-edit / --full-auto でより自律的に実行できます。

使い始めに役立つオプション

目的 説明
モデルを指定 codex -m gpt-4o --model で任意の Chat Completions API モデルを利用
承認モード codex --auto-edit SuggestAuto EditFull Auto の順に権限が広がる
サンドボックスを Docker 化 ./scripts/run_in_container.sh Linux ではデフォルトで OS サンドボックス無し。公式スクリプトで隔離実行可github.com
他プロバイダーを使う codex --provider gemini export GEMINI_API_KEY=... のようにキーを追加

WSL 固有のチェックポイント

項目 内容
Node の衝突 which node/home/…/.nvm/versions/node/v22…/bin/node を指すか確認。Windows 側の node.exe が先に拾われるとエラーになります。
ブラウザー連携 Codex CLI は基本的に API キー認証なのでブラウザーは不要。ただし、別ツール同梱の xdg-open でリンクが開かない場合は wslu を入れて export BROWSER=wslview が便利(先ほどの gh と同様)。
権限エラー もし EACCES が出る場合は npm config get prefix/usr 配下になっていないか確認し、nvmnpm config set prefix ~/.npm-global で解決します。

GitHub Copilot CLIのインストール(WSL上)

GitHub有料サービスアカウントが必要

(1) CLI をインストール済みか確認

gh --version

(2)インストールされていない場合:

# Ubuntu / Debian系 (WSL) での gh CLI インストール
# 以下5つのコマンドを実行
type -p curl >/dev/null || sudo apt install curl -y
curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | \
  sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg

sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg

echo "deb [arch=$(dpkg --print-architecture) \
signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] \
https://cli.github.com/packages stable main" | \
  sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null

sudo apt update

sudo apt install gh -y

(3)GitHub にログイン(まだの場合)

gh auth login
# ブラウザで GitHub に認証 → WSL に戻って完了

(4)Copilot CLI 拡張をインストール

gh extension install github/gh-copilot

成功すれば以下のようなコマンドが使えるようになる。

gh copilot suggest "curl で HTML をダウンロードする方法は?"
gh copilot explain 'tar -czvf archive.tar.gz ./src'

正直、日本語での使い勝手はいまいち。

WSL+VSCodeでGitHub copilot, Claude Code, Gemini Code Assist Agent/Gemini CLI, Dockerを使う

WSL+VSCodeで生成AIをフル活用

WSLを利用すると、Windows上のVSCodeで以下の各サービスを並行で自由に開発で使える様になるのでそのインストール手順を示す。

  • GitHub copilot,
  • Claude Code / Claude Code for VSCode,
  • Gemini CLI / Gemini Code Assist Agent,
  • OpenAI Codex CLI / OpenAI’s coding agent,
  • Grok CLI,
  • GitHub CLI,
  • Docker

PowerShellを用いてもほぼ同様の開発が行える(Dockerは使えない)。PowerShell版の記事は以下。

programmingforever.hatenablog.com

下図はVSCode上でサービスの比較検証をしている状態で、動いているサービスは以下の通り。

  • Gemini Code Assist Agent(左列)
  • Claude Code(真ん中上段)
  • Codex CLI(真ん中下段)
  • GitHub Copilot(右列)

4つの生成AIエージェント(CLI)が走った状態

その結果、

  • 開発方針検討は、ChatGPT o3やGemini等とブラウザでチャット、
  • コード自動生成やディレクトリ構築、シェル/Git制御は、VSCodeで実行、

が簡単に実現する(1時間もかからない)。なおMac版も記載したのでMacは以下を参照して欲しい。

programmingforever.hatenablog.com

その前に、なぜこの様なマルチツールを使う記事を書いたのかモチベーションを記載してみたい。つい先日、Vibecodingの自動化レベルを洗濯で例えるXの記事があり、面白かったのでそれを自分なりにアレンジしてみた。

・手洗い:自力開発(webや資料は見る)
 ↓
・2槽式洗濯機:ChatGPT等とチャットで開発
 ↓
・全自動洗濯機:GitHub copilot, Cursor(AIがコード生成)
 ↓
・ドラム式洗剤自動投入:Claude Code,Gemini CLI(環境まで制御)
 ↓
・ホテルの洗濯サービス:manus、lovable(任せるだけ)

いずれのステップもそれなりにニーズや利便性がある。そこでニーズや目的別に各種生成AIの支援が受けられる様に下記のツールを並行して開発で使いたいと考えた。

  • 開発方針検討は、ブラウザ上で、ChatGPT o3やGemini等とチャット、
  • 実行や環境構築やGit制御は、シェル上で、Claude CodeやGemimiCLI使用、
  • 局所的なコード生成は、VSCode上で、GitHub copilot使用、

以上は簡単に実現する(1時間もかからない)。エディターであるVSCodeの Remote - WSL 拡張でWSL上でVSCodeが起動するとVSCodeのターミナルでClaude Code/Gemini CLIが走る様になり、次に GitHub Copilot拡張 でGitHub Copilotの連携も可能になる。

正直Windowsでここまで生成AI連携で自由度の高い開発が出来るようになる事実に感動している

  • ※Gemini CLI以外は全て有料サービスなので別途契約が必要
  • ※Docker Desktopは個人ユーザーの場合は無料で使える

それでは、PCへのインストール手順を以下記載する。今回の記載は何もインストールされていないPCを対象としているが、一部が既にインストールされている場合は該当部はスキップして問題ない。さらに言えば各項目の導入手順は生成AIに聞くのが一番だが、自分自身の備忘録としてまとめた。

  1. WSL(ubuntu)インストール
  2. Docker Desktopインストール
  3. VSCodeをWSLで使える様にする
  4. Claude Code, Gemini CLI, OpenAI Codex CLIインストール
  5. GitHubを使える様にする
  6. 各実行(GitHub Copilot, Claude Code, Gemini CLI, OpenAI Codex CLI

手順

WindowsにWSL(ubuntu)をインストールする所から始まる(②のDockerが先でも問題ない)。

①WSLインストール

  • 最初にPowerShellを「管理者権限」で起動する。Windowsの検索バーに「PowerShell」と入力して一覧で表示された「Windows PowerShell」を右クリックして「管理者として実行」を選択
  • 開いたPowerShellの画面で、WSLのインストールコマンドを入力
wsl --install

実行するとWSL2とUbuntuがインストールされる。名前とパスワード入力を聞かれたら、ここで登録する。Powershellでの作業はここで終了。

②Docker Desktopインストール

(1)インストーラーのダウンロード:

Docker公式サイトにアクセスし、「Download for Windows」ボタンをクリックして、Docker Desktop Installer.exeをダウンロード。

(2)インストーラーの実行:

ダウンロードしたDocker Desktop Installer.exeをダブルクリックして実行。管理者権限が必要。

(3)Docker Desktopの起動:

  • インストールが完了したら、成功のメッセージが表示されることを確認。
  • スタートメニューから「Docker Desktop」を起動

(4)設定:

WSL(ubuntu)もインストールしたら使えるように設定する。

1. Docker Desktop の「WSL Integration」を確認
  • Docker Desktop → Settings → Resources → WSL Integration
  • Ubuntu にチェックを入れる → Apply & Restartを実行
2. Ubuntu ターミナルで確認
$ docker --version      # => 成功すれば CLI は通る
$ docker info           # => Docker デーモンとの通信が可能か確認

これでWSL上でDockerが使えるようになった。

VSCode-Remote-WSLを有効にする

以下、VSCodeでWSL上のプロジェクトを扱うための手順を記載

① 前提確認

  • 上記のWSL(例:Ubuntu)がインストール済み
  • 上記のVSCodeがインストール済み(Windows側)
  • code コマンドがWSL内で動くようになっている

VSCodeに「Remote - WSL」拡張をインストール

  1. VSCodeを起動(Windows側で)
  2. 拡張機能(Ctrl + Shift + X)で Remote - WSL を検索
  3. インストール

🔄 これで、VSCodeがWSLのUbuntu環境に「リモート接続」できるようになる。

③ WSL側でプロジェクトを開く

WSL内から code . を実行

# WSL内でプロジェクトディレクトリに移動してから
# cd ~/myproject
# code .

→ 自動的に WSLモードでVSCodeが立ち上がり、Linux側のファイルを編集可能になる。

ubuntu上で各生成AIアプリをインストール

以下、VSCodeubuntu上で実行する(ubuntu起動でも良い)。

  • VSCodeのターミナル画面を表示させるとubuntubashが使える
  • 以下シェル(bash)で作業
  • ユーザー名とパスワードを聞かれたら登録
  • Gemini CLIがnvm20以降推奨、OpenAI Codex CLIがnvm22以降推奨なので22に合わせる
$ sudo apt update  #アップデート
$ sudo apt install -y nodejs npm  # node.jsをインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash  #nvmインストール
$ source ~/.bashrc  # bash再起動
$ nvm install 22  # nvmのVer.22をインストール(Codexは要22以上、Geminiは要20以上)
$ nvm use 22  # 以降Ver.22を使用
$ nvm alias default 22  # 注意:今後Ver.22に固定したい場合

$ npm install -g @anthropic-ai/claude-code  # Claude Code をインストールしたい場合
$ npm install -g @google/gemini-cli  # Gemini CLI をインストールしたい場合
$ npm install -g @openai/codex  # OpenAI Codex CLIをインストールしたい場合
$ npm install -g @vibe-kit/grok-cli  # Grok CLIをインストールしたい場合

GitHub CLIを使える様にする

以下、GitHubアカウントをWSLでもログインする方法を記載

🔐 方法:gh auth login を使う(推奨)

  • GitHub CLIgh)を使えば、GitHub認証がスムーズに行える。

1. GitHub CLI (gh) をubuntuにインストール(WSL内)

type -p curl >/dev/null || sudo apt install curl -y

curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | \
  sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg

sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] \
  https://cli.github.com/packages stable main" | \
  sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null

sudo apt update

sudo apt install gh -y

2. 認証実行

gh auth login

対話形式で以下の選択をする:

質問 推奨回答
What account do you want to log into? GitHub.com
What is your preferred protocol for Git operations? HTTPS
Authenticate Git with your GitHub credentials? Yes
How would you like to authenticate? Login with a web browser(コード入力が必要)

すると、次のようなメッセージが出る:

! First copy your one-time code: XXXX-XXXX
Press Enter to open https://github.com/login/device

iPhoneWindowsブラウザでそのURLを開き、表示されたコードを入力して認証する

✅ 成功後の確認

gh auth status

で以下のような表示が出ればOK:

Logged in to github.com as [ユーザー名] ([認証済みトークンのスコープ])

これで、WSL内でGitHub操作(push, pull, clone)やCopilot連携が可能になった。

⑥各生成AIサービスを実行

一連の設定の続きならそのままVSCodeを使用する。PC再起動などした場合は、ubuntuアプリを起動してその中でVSCodeを起動する(WSLアプリは起動不要)。

# ①Windows-WSL-実行環境起動
Windowsのスタートから「ubuntu」をクリックして起動

# ②ubuntuの中からVSCode起動
code .

# ③以降の各生成AIサービスはVSCode上で実行

(1)GitHub Copilot for VSCode

VSCode拡張のCopilot Chat / Copilot Agent(エージェントモード)は、WSL上でもそのまま使用できる。 プロジェクトがWSL上にあっても、Copilotは現在開いているファイルと構成を理解して提案できる

GitHub copilotのインストール方法(初回のみ実行):
  • VSCodeを起動
  • 左側のサイドバーにある拡張機能アイコンをクリック
  • 検索欄に「GitHub Copilot」と入力し、以下2つをインストール
  • インストール後は、GitHubアカウントとの連携が必要
  • 画面に表示される指示に従って認証を完了すれば、Copilotが自動的に有効化され、画面右側にCopilot専用画面が現れてコード補完が可能になる
GitHub copilotの起動方法:
  • 画面上部のcopilotアイコンまたはセカンダリサイドバークリックで起動
  • 使用モード:エージェントモードがお勧め。
  • 使用モデル:自由に選択(GPT4.1など)

(2)Claude Code for VSCode

Claude Code の設定方法(初回のみ):
  • claudeで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • Claude Codeの有料契約情報の紐付けを行う
  • VSCode拡張機能で「Claude Code for VSCode」を探してインストール
  • VSCodeの画面右上に現れるClaudeアイコンをクリックすると、GitHub copilotの様に画面右側にClaude Codeが現れる
  • あとは自由に対話
Claude Code の起動方法:
$ claude

(3)Gemini CLI

Gemini CLIの設定方法(初回のみ):
  • geminiで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • Googleの個人ユーザーとの紐付けを行う
  • あとは自由に対話
Gemini CLIの起動方法:
$ gemini

(4)OpenAi Codex CLI

OpenAi Codex CLIの設定方法(初回のみ):
  • codexで起動する
  • 画面表示方法のオプションを選択(デフォルトでリターンでOK)
  • ChatGPT Plus以上のユーザーであれば、web認証で利用OK
  • (またはOpenAIのAPIキーの紐付けを行う)
  • あとは自由に対話
OpenAi Codex CLIの起動方法:
$ codex
VSCodeのAgentモードでCodexを使う:
  • VSCode拡張機能で、「Codex – OpenAI’s coding agent」をインストール
  • 右上のアイコンをクリックすると専用チャットWindowが拓く

(5)Gemini Code Assist Agentモードを使う:

2025年6月25日に登場したもので、GitHub Copilotの様に画面右サイドにGeminiを表示して使用できる。とても便利なので合わせて導入したい。

  • GeminiからVSCode用として提供されている拡張機能をInsiderバージョンにアップデート
    • VSCodeのコマンドパレットを開く
    • Windows/Linux: Shift + Ctrl + Pを同時に押す Mac: Shift + Command + Pを同時に押す
    • コマンド パレットに「ユーザー設定 (JSON を開)く」 を選択
    • ユーザー設定 JSON に次の行を追加
    • "geminicodeassist.updateChannel": "Insiders",
  • VSCode拡張機能からGemini Code Assistをインストール
  • ここでVSCodeを再起動
  • VS Code の左サイドバーに登場した [Gemini] アイコンをクリック
  • 下部にある[Agent]トグルを ON にしてエージェントモードを開始
    • もし見えなければもう一度VSCodeを再起動か、拡張機能からGemini Code Assistを見つけてそこに現れている再起動をクリック
  • エージェントモードをONに出来たら、利用するフォルダ、ワークスペースを開く
  • テキストボックスに、エージェントに実行させたいタスクを自然言語で入力
  • エージェントがタスクを完了するための計画と変更内容を提示します。内容を確認し、[Accept] することで、エージェントが作業を実行します。また、コマンド実行が必要な場合は [Run] を実施
  • 変更を一つずつ確認するのが面倒な場合は、[変更を自動承認] を選択することで、プロセスを完全に自動化することも可能

以上を済ませることで、下図のような状態に出来る。

  • Gemini CLI(左列)
  • Claude Code(真ん中上段)
  • Codex CLI(真ん中下段)
  • GitHub Copilot(右列)

4つの生成AIエージェント(CLI)が走った状態

これで各サービスを同時に性能比較できる様になった。ちなみに画面では4つのサービスに対して、コミットやGitHubへのpushが可能かを確認している状態で、全てのサービスが「はい!出来ます!」と明るく回答した。

滅茶苦茶面白い。MCP含め実に面白い。以上でインストール一式完了。Enjoy!

🧠おまけ①: ~/.gitconfig の充実例

iniコピーする編集する[user]
    name = ***
    email = ***@example.com

[core]
    editor = code --wait
    autocrlf = input
    excludesfile = ~/.gitignore_global

[credential]
    helper = cache

[push]
    default = simple

[init]
    defaultBranch = main

[alias]
    st = status
    ci = commit
    co = checkout
    br = branch
    lg = log --oneline --graph --decorate

🧠おまけ②:CopilotとCodeの連携

ここからは、GitHub Copilot Agent(エージェントモード)*を最大限に活用して、Claude CodeやWSL環境と*高度に連携する開発スタイルを紹介する。

目的

Copilot Agent を "AI開発アシスタント" として使い、プロジェクトの設計・修正・Git操作・ドキュメント化などを自然言語で制御する。Claude CodeとCLIは補完的に利用する。

✅ 前提確認

まず以下の機能が使える状態になっている必要がある(上記①-⑤を行えばOK):

項目 状態 確認方法
VSCode + GitHub Copilot 拡張 拡張機能で「GitHub Copilot」「Copilot Chat」「Copilot Agent」が入っている
GitHub アカウントでログイン済 VSCode右上の「アカウントアイコン」がアクティブならOK
プロジェクトがWSL上 code . で開いていればOK
Claude Code CLIがWSL上で稼働 補完的に使う(後述)

🚀 高度な Copilot Agent 活用方法

以下に代表的な高度な連携技術をシナリオ別に紹介


✨ ① プロジェクト初期構成の自動生成(Claudeとの連携も可能)

指示例(Copilot Agent に):
新しいIoTダッシュボードのプロジェクトを作成したいです。
技術スタックは React, Vite, TypeScript, Tailwind CSS, FastAPI(バックエンド)。
DockerとGitHub ActionsによるCI/CDも含めて、ディレクトリ構成と最低限のコードを生成してください。

💡 Copilot Agent はプロジェクト全体を把握し、複数ファイルを一括生成・修正

▶ Claude Code CLI を補助的に使えば、同様の構成をCLIで再現・調整可能。


✨ ② 自然言語でGit操作(安全・確認付き)

指示例:
この変更を 'fix: 認証エラーの修正' としてコミットして。
pushもしておいて。

結果:

  • ステージされていないファイルの確認
  • 自動で git add .git commit -mgit push を実行
  • エラーや未設定があれば確認・対話あり

✨ ③ テストやドキュメントの自動生成

指示例:
/backend/app/api.py に対して pytest のユニットテストコードを作成して、
/tests ディレクトリに保存してください。

→ Copilot Agent は依存ファイルを探索し、正しいパスとモジュール構成でテストコードを生成する。


✨ ④ コードの一括リファクタリング・規約適用

指示例:
このプロジェクト全体にESLintのルールを追加して、コードも自動整形してください。

eslint.config.js を生成し、対応コードを一括修正。 場合によっては package.json に自動で依存追加。


✨ ⑤ Claude Codeとのハイブリッド運用

Claude CLI では、次のようなことが可能:

  • YAMLベースで複数ファイル生成
  • スクリプトで命令を一括化(例:一括rename、一括コメント挿入)
  • 環境設定やDocker化をロジカルに処理

💡 これらを使ってファイル群を「準備」し、Copilot Agentで理解・微調整・Git管理という連携が理想的。


📁 開発ワークフロー統合例(Claude + Copilot)

フェーズ 使用ツール 操作
要件整理・構成案作成 Claude Code YAMLテンプレートで一括生成
ファイル編集・コード補完 Copilot Chat / Agent 自然言語で修正・提案を受ける
テスト追加・CI対応 Copilot Agent 自動でファイルを追加しテスト実行
Git操作・デプロイ Copilot Agent git pushやCI実行も自然言語

🧩 応用機能

応用項目 概要
@workspace 指定 プロジェクト全体を対象にAgentが分析・対応
CopilotでAsk Me Anything ChatGPTのように自然言語質問可(ただしプロジェクト文脈ベース)
CopilotからGitHub PR作成 修正 → コミット → PR起票まで自動でサポート可能

📝 まとめ

ツール 得意な役割
Claude CLI 最初の設計生成(仕様からコードへ)
VSCode Copilot Chat 局所の修正、補完、説明
VSCode Copilot Agent 全体の変更、Git操作、テスト追加、CI設定など"実働部隊"

🧠おまけ③:Claude Codeへの効果的な指示

Claude(Claude Code CLIやClaude 3.5 SonnetのCodeモード)に渡すと効果的な 「プロジェクト構成テンプレート」の例 を提示。

これは「仕様からプロジェクト一式を生成する」ためのテンプレートで、Claudeにそのまま貼り付けて使える。


📦 Claudeに渡すテンプレート例(プロジェクト構成生成用)

project_name: smartfit-dashboard
description: >
  このプロジェクトは、IoTエッジデバイス「SmartFitPRO」の状態を監視・設定するためのWebダッシュボードです。
  ユーザーはリアルタイムでデバイスのデータを確認し、設定変更、ログ確認ができます。

stack:
  frontend:
    framework: React
    language: TypeScript
    build_tool: Vite
    styling: Tailwind CSS
  backend:
    framework: FastAPI
    language: Python 3.11
    api_routes:
      - GET /devices
      - POST /devices/:id/settings
      - GET /devices/:id/logs
  database:
    type: PostgreSQL
    schema:
      - table: devices
        fields: [id, name, status, last_seen, ip_address]
      - table: logs
        fields: [id, device_id, timestamp, message]

structure:
  - /frontend
    - /src
      - /components
      - /pages
      - App.tsx
      - main.tsx
    - index.html
    - tailwind.config.js
  - /backend
    - /app
      - main.py
      - /routers
      - /models
      - /schemas
  - /database
    - init.sql
  - /tests
    - test_devices.py
  - .gitignore
  - docker-compose.yml
  - README.md

tasks:
  - 全体のディレクトリと初期ファイルを生成
  - REST APIのルーティングコードを scaffolding
  - フロントエンドで `/devices` API を呼び出して一覧表示
  - Dockerで frontend + backend + db を統合
  - GitHub Actionsで CI を構成

✍️ Claudeへの指示例(自然言語

このYAMLテンプレートに従って、プロジェクト一式を作成してください。
必要に応じてコードも生成してください。Docker対応とREADMEも含めてください。

あるいは:

以下のテンプレートに基づいて、React + FastAPI + PostgreSQL のIoT管理アプリの雛形を生成してください。

→ Claudeはこれに従って:

  • ディレクトリ構成
  • 最小限のReactコード
  • FastAPIのエンドポイント
  • docker-compose.yml
  • README.md

などを一括生成してくれる。


💡 Tips:Claudeテンプレートの良い書き方

要素 ポイント
description: プロジェクトの目的やユースケースを書くとClaudeが文脈を正確に理解
stack: 使用する技術スタックは細かく(バージョンもOK)
structure: 階層構造はインデントを守って丁寧に記述
tasks: Claudeに何をして欲しいか明示することで意図通りの生成がされやすい

🧩 応用アイデア

  • auth: セクションを入れてログイン機能を要求
  • i18n: セクションで多言語対応
  • logging: セクションで構成のログ方針
  • env: セクションで .env 設定内容を指定

WindowsでClaude CodeとGemini CLIを使う

WSLを用いたインストール

昨日(2025年6月25日)、GoogleがGemini CLIを発表した。Claude Codeの対抗馬としての位置付けであり、早速試してみたので、そのインストール方法をClaude Codeとセットで記載する。

Windows環境でClaude CodeとGemini CLIを使う場合、WSL(WSL2)の利用が最も簡単だ。合わせてOpenAI Codex CLIGitHub Copilot CLIもインストールしたので、これら4サービス全てに対応するインストール手順としている。

参考:WSL上でVSCodeを使用すると、DockerやGitHub Copilotも合わせて使用出来るので、その辺りも含めた記事も書いた(下記)。

programmingforever.hatenablog.com

手順

①WSLインストール

  • 最初にPowerShellを「管理者権限」で起動する。Windowsの検索バーに「PowerShell」と入力して一覧で表示された「Windows PowerShell」を右クリックして「管理者として実行」を選択
  • 開いたPowerShellの画面で、WSLのインストールコマンドを入力
wsl --install

実行するとWSL2とUbuntuがインストールされる。なおDockerなどをインストールしている場合は既にWSLがインストールされているので、同じコマンドでubuntuのみ追加インストールとなる。またその場合は、引き続きユーザー名(半角小文字)とパスワードを続いて入力してpowershellでの作業は終了。

ubuntuでインストール

  • Windowsのスタートメニューにubuntuが登場していると思うのでそれをクリックして起動
  • 以下画面で作業
  • ここでユーザー名とパスワードを聞かれたら登録
  • Gemini CLIがnvm20以降推奨、OpenAI Codex CLIがnvm22以降推奨なので22に合わせる
$ sudo apt update  #アップデート
$ sudo apt install -y nodejs npm  # node.jsをインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash  #nvmインストール
$ source ~/.bashrc  # bash再起動
$ nvm install 22  # nvmのVer.22をインストール(Codexは要22以上、Geminiは要20以上)
$ nvm use 22  # 以降Ver.22を使用
$ nvm alias default 22  # 注意:今後Ver.22に固定したい場合

$ npm install -g @anthropic-ai/claude-code  # Claude Code をインストールしたい場合
$ npm install -g @google/gemini-cli  # Gemini CLI をインストールしたい場合
$ npm install -g @openai/codex  # OpenAI Codex CLIをインストールしたい場合

これでインストール完了。

③Gemini CLI起動

以下のコマンドでGemini CLIは起動する。

$ gemini

次に起動画面に出てくる2つの選択を行う。

(1)表示スタイルを選択(そのままエンターでもOK)

 ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
  ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
    ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
     ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
   ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
 ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░

╭──────────────────────────────────────╮
│                                                                          │
│ > Select Theme                            Preview                        │
│ ○ ANSI Dark                               ┌─────────────┐ │
│ ○ Atom One Dark                           │                          │ │
│ ○ Ayu Dark                                │ 1 # function             │ │
│ ● Default Dark                            │ 2 -def fibonacci(n):     │ │
│ ○ Dracula Dark                            │ 3 -    a, b = 0, 1       │ │
│ ○ GitHub Dark                             │ 4 -    for _ in range(n):│ │
│ ○ ANSI Light Light                        │ 5 -       a, b = b, a + b│ │
│ ○ Ayu Light Light                         │ 6 -    return a          │ │
│ ○ Default Light Light                     │                          │ │
│ ○ GitHub Light Light                      │ ╭───────────╮ │ │
│ ○ Google Code Light                       │ │                    │ │ │
│ ○ Xcode Light                             │ │ No changes detected│ │ │
│                                           │ │                     │ │ │
│   Apply To                                │ ╰───────────╯  │ │
│ ● User Settings                           │                          │ │
│ ○ Workspace Settings                      └─────────────┘ │
│                                                                           │
│ (Use Enter to select, Tab to change focus)                                │
│                                                                           │
╰──────────────────────────────────────╯


╭──────────────────────────────────────╮
│                                                                          │
│ > Select Theme                            Preview                        │
│ ○ ANSI Dark                               ┌─────────────┐ │
│ ○ Atom One Dark                           │                          │ │
│ ○ Ayu Dark                                │ 1 # function             │ │
│ ● Default Dark                            │ 2 -def fibonacci(n):     │ │
│ ○ Dracula Dark                            │ 3 -    a, b = 0, 1       │ │
│ ○ GitHub Dark                             │ 4 -    for _ in range(n):│ │
│ ○ ANSI Light Light                        │ 5 -       a, b = b, a + b│ │
│ ○ Ayu Light Light                         │ 6 -    return a          │ │
│ ○ Default Light Light                     │                          │ │
│ ○ GitHub Light Light                      │ ╭───────────╮ │ │
│ ○ Google Code Light                       │ │                    │ │ │
│ ○ Xcode Light                             │ │ No changes detected│ │ │
│                                           │ │                     │ │ │
│   Apply To                                │ ╰───────────╯  │ │
│ ● User Settings                           │                          │ │
│ ○ Workspace Settings                      └─────────────┘ │
│                                                                           │
│ (Use Enter to select, Tab to change focus)                                │
│                                                                           │
╰──────────────────────────────────────╯

~           no sandbox (see /docs)      gemini-2.5-pro (100% context left)

(2)次にログイン(個人ユーザーの選択が無難)

 ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
  ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
    ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
     ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
   ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
 ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░


Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.

╭──────────────────────────────────────╮
│                                                                           │
│ Select Auth Method                                                        │
│ ● Login with Google                                                      │
│ ○ Gemini API Key                                                         │
│ ○ More...                                                                │
│                                                                           │
│                                                                           │
│ (Use Enter to select)                                                     │
│                                                                           │
╰──────────────────────────────────────╯

これで「>」カーソルが現れるので、自由に日本語を用いて指示を与える事ができる。例えばToDoアプリを作ってと伝えると、数分で完成する(ローカル)。

④Cluade Code起動

(1)APIキーを設定

※最新ではAPIキーの入力は不要になった模様。以下あくまで参考

~/.bashrcにAPIキーを設定する(Ubuntu環境)。Claudeの有料会員登録で取得したAPIキー(sk-***)を環境変数として設定。~/.bashrcの末尾等に1行追記する。

export CLAUDE_API_KEY="sk-***"

(2)起動

  • 上のAPIキーを入れた場合はshellを再起動するか、source ~/.bashrcを実行してリセット(初回のみ)
  • claudeを起動
$ claude

起動したらGemini CLK同様にテキストの表示を好みに合わせて、ブラウザでログインし、双方の吐き出すコードで認証すればOK(初回のみ)。

       ___   ___         ___     _   _     ___      _____
      / __| | |         / _ \   | | | |   |   \    | ____|
     | |    | |        | |_| |  | | | |   | |) |   | |_
     | |    | |        |  _  |  | | | |   |  _ <    |  _|
     | |__  | |____    | | | |  | |_| |   | |_) |   | |___
      \___| |______|   |_| |_|   \___/    |____/    |_____|

  Claude Code - Anthropic's official CLI for Claude

  Welcome to Claude Code! I'm here to help you with software engineering tasks.
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                         │
│                                                   │
│   /help for help, /status for your current setup  │
│                                                   │
│   cwd: /home/t-wada/todo-app                      │
╰───────────────────────────────────────────────────╯

 Tips for getting started:

 1. Run /init to create a CLAUDE.md file with instructions for Claude
 2. Use Claude to help with file analysis, editing, bash commands and git
 3. Be as specific as you would with another engineer for the best results

あとはGemini CLI同様に使える

⑤Gemini CLI/Claude Codeの利用例:

(1)シェルを用いた対話

シェル操作を行う範囲なら、なんでも依頼出来る。

  • シェル操作(フォルダ削除や移動)
  • Git操作(コミット、リセット、プルリクなど)
  • リファクタリング
  • コード/関数の解説
  • 未使用変数の削除
  • テスト実行、エラー修正

(2)プロジェクトへの理解

Claude Codeのプロンプトで/initと入力すると、指定プロジェクトのディレクトリ構成や、package.jsonyamlなど設定ファイルを解析し、プロジェクト概要(ビルド方法、主要な技術スタック、ディレクトリ構成など)を記述した「CLAUDE.md」を生成する。この利用で人と生成AI(Claude Code)の両者共に指定プロジェクトの中身を可視化できるため、AI生成の精度向上が期待できる。

Gemini CLIには同等のコマンドはないが、「**プロジェクトの概要(ビルド方法、主要な技術スタック、ディレクトリ構成など)を記述した「Gemini.md」を作って」と言えばよい。

⑥OpenAI Codex CLIのインストール(WSL上)

※インストール自体は、上のオールインストールで完了する。以下は個別でインストールする方法を記載

WSL (Ubuntu) で OpenAI Codex CLI を入れる最短ルート

ステップ コマンド 補足
1. Node 22 以上を準備 bash nvm install 22 # 初回だけ nvm use 22 # セッション用 nvm alias default 22 # 任意、常用なら Codex CLI の公式要件は Node 22+github.com(Node 20 でも動く場合がありますが、将来のアップデートで外れる可能性あり)
2. グローバルにインストール bash npm install -g @openai/codex nvm 管理下なので sudo 不要。EACCES エラーも起きません。help.openai.com
3. API キーを渡す bash export OPENAI_API_KEY="sk-..." (恒久化するなら echo 'export OPENAI_API_KEY="sk-..."' >> ~/.bashrc .env ファイルを置いても自動で読み込まれます。github.com
4. 起動テスト bash codex "explain this repo to me" codex だけで対話モード、--auto-edit / --full-auto でより自律的に実行できます。

使い始めに役立つオプション

目的 説明
モデルを指定 codex -m gpt-4o --model で任意の Chat Completions API モデルを利用
承認モード codex --auto-edit SuggestAuto EditFull Auto の順に権限が広がる
サンドボックスを Docker 化 ./scripts/run_in_container.sh Linux ではデフォルトで OS サンドボックス無し。公式スクリプトで隔離実行可github.com
他プロバイダーを使う codex --provider gemini export GEMINI_API_KEY=... のようにキーを追加

WSL 固有のチェックポイント

項目 内容
Node の衝突 which node/home/…/.nvm/versions/node/v22…/bin/node を指すか確認。Windows 側の node.exe が先に拾われるとエラーになります。
ブラウザー連携 Codex CLI は基本的に API キー認証なのでブラウザーは不要。ただし、別ツール同梱の xdg-open でリンクが開かない場合は wslu を入れて export BROWSER=wslview が便利(先ほどの gh と同様)。
権限エラー もし EACCES が出る場合は npm config get prefix/usr 配下になっていないか確認し、nvmnpm config set prefix ~/.npm-global で解決します。

GitHub Copilot CLIのインストール(WSL上)

GitHub有料サービスアカウントが必要

(1) CLI をインストール済みか確認

gh --version

(2)インストールされていない場合:

# Ubuntu / Debian系 (WSL) での gh CLI インストール
# 以下5つのコマンドを実行
type -p curl >/dev/null || sudo apt install curl -y
curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | \
  sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg

sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg

echo "deb [arch=$(dpkg --print-architecture) \
signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] \
https://cli.github.com/packages stable main" | \
  sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null

sudo apt update

sudo apt install gh -y

(3)GitHub にログイン(まだの場合)

gh auth login
# ブラウザで GitHub に認証 → WSL に戻って完了

(4)Copilot CLI 拡張をインストール

gh extension install github/gh-copilot

成功すれば以下のようなコマンドが使えるようになる。

gh copilot suggest "curl で HTML をダウンロードする方法は?"
gh copilot explain 'tar -czvf archive.tar.gz ./src'

正直、日本語での使い勝手はいまいち。

OneNoteに置換機能を追加

他諸々の機能を追加できるマクロ集のOneTasticをインストールすれば良い。

Microsoftから「信頼できるアプリか?」と問われ、保存出来ない場合も強制的に保存すれば良い。これまでも安定して利用出来ている。

www.naporitansushi.com