GitHub Codespaces で Claude Code 開発環境

ここでは、ソースコード管理サービスの最大手のGitHubが提供する「オンライン上の開発環境」である、GitHub Codespaces で、Claude Code が使える開発環境を準備する方法を説明します。

GitHub Codespacesを使えば、ローカルマシンにソフトウェアをインストールすることなく、ブラウザ上でClaude Codeを試すことができます。特に初心者や学習目的の方におすすめです。

💡 GitHub Codespacesとは？

GitHubが提供するクラウドベースの開発環境サービスです。ブラウザだけでフル機能の開発環境にアクセスでき、設定済みのツールやライブラリがすぐに使えます。

📋 事前準備

• GitHubにアカウント登録を済ませておく
• Claude（Pro、Team、または従量課金プラン）のアカウント

🔄 作業の全体像

📁 Step1: リポジトリを作成

1. リポジトリの作成

   • https://github.com/new でリポジトリを作成する

   

2. Codespaceの起動

   • 「Code」のプルダウンメニューから、「Codespaces」を選択
   • 「Create codespace on main」をクリック

   

3. 環境の準備完了を待つ

   • ステータスバーが止まるまで待機（通常は数分で起動完了）

💻 Step2: Claude Code をインストール

GitHub Codespacesは、デフォルトで開発に必要な環境がほぼ完備されているため、すぐにClaude Codeのインストールを開始できます。

インストール手順:

1. ターミナルを開く
2. 以下のコマンドをコピー&ペーストして実行

npm install -g @anthropic-ai/claude-code

npm notice 
npm notice New major version of npm available! 9.8.1 -> 11.5.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.5.2
npm notice Run npm install -g npm@11.5.2 to update!
npm notice 

🔐 Step3: Claude にログインする

認証の手順:

1. Claude Codeの起動

   claude

2. プランの選択

   • サブスクリプションプランまたは従量課金プランを選択
   • 詳細はこちらのガイドを参照

3. 認証プロセス

   GitHub Codespacesでは通常の認証フローとは異なる手順が必要です：

   ❌ 自動ポップアップは使用不可

   • 最初にポップアップするURLは認証に失敗するため、閉じてください

   

   ✅ ターミナルのURLを使用

   • ターミナルに表示されたURLを手動でブラウザにコピーして開く

   

   🔑 認証キーの入力

   • ブラウザに表示されたキーをコピーし、ターミナルに貼り付ける

   

まとめ

• 上記の手順で、Claude Code、Git、Github、Visual Studio Code の設定は完了しています
• あとは、好きにプロジェクトを実行すればOKです！

ヒント

ワンページ作成ノウハウを使う場合は、以下のようなコマンドになります。

git clone https://github.com/toiee-lab/webpage-template-for-cc.git tmp-repo
rm -rf tmp-repo/.git
mv tmp-repo/* .
mv tmp-repo/.* .
rmdir tmp-repo

あるいは、最初からGihubのページ上でクローンして使うと良いでしょう。