WSLで始める Claude Max + Claude Code
～ ターミナル駆動のAIペアプログラミング革命 ～
皆さん、こんにちは！
Arterect (アルテレクト) にてAIプラットフォームの開発を行っている Hayate Esaki（haya21_8）です。
今回は、Claude好きにはたまらない Claude Code をご紹介します。
Claude Maxプランで利用可能な Claude Code を、WSL環境とVSCodeで統合し、AI駆動の開発環境を構築する手順を詳しく解説します。
まずは環境構築の前に、Claude Codeを活用したライディングページの生成をご紹介！
0. Claudeで「おしゃれなライディングページ」を作ってみる！
- Claude Codeを起動する
Claude Codeモードは、ターミナルなどのCLI上で自然言語によるAIへの指示ができる状態になります。
- Claudeに依頼内容を伝える
続いて、プロンプト（指示文）として
おしゃれなAIのライディングページを作成してほしい
と入力します。
Claudeは要件を自動で整理し、デザインや内容を計画した上で、コードを自動生成してくれます。
- Claudeがコードとファイルを自動生成
Claudeは、HTML・CSS・JavaScript などの必要なファイルを自動的に作成します。
進行中には、ToDoリストや進捗状況もターミナル上で表示されるので、AIがどのように考え、作業を進めているかがリアルタイムで分かります。
- ファイルを確認・実行する
生成されたファイル（例：index.htmlやstyle.cssなど）は、まずClaude自身が内容をプレビューして「この内容で問題ないですか？」と確認してくれます。
Yesと入力すると、ファイルが現在の作業ディレクトリに保存されます。
今回AIが自動生成してくれたのは、なんと「アニメーション付き」の超おしゃれなライディングページ！
手間をかけずに、動きのあるリッチなUIや洗練されたデザインまで自動で作成してくれるので、手作業ではなかなか実現できないクオリティ高いWebページが、自然言語で指示するだけで完成してしまいました。
1. Claude Codeとは？
Claude Code は、Anthropic社が開発したターミナルベースのAIコーディングアシスタントです。このツールは、開発者が直接コマンドラインからClaude AIの機能を活用できるよう設計された革新的なツールです。
1.1 主な特徴
-
自然言語によるコーディング：
コード編集、リファクタ、テスト、バグ修正などを自然言語で指示可能 -
プロジェクト全体の理解：
コードベース全体を自動解析、構造や依存関係も説明 -
多彩なAIアシスト：
バグ発見、設計アドバイス、ドキュメント自動生成など -
Gitやコマンドラインツールとの連携
git commitやpush、テスト実行、ファイル作成なども一括で指示 -
VSCode/JetBrains連携
ターミナル/エディタをまたいだAIコーディング体験 -
最大20万トークンの巨大コンテキスト
大規模コードベースも一瞬で俯瞰可能
1.2 利用可能なプラン
Claude Codeは以下のプランで利用できます：
- Maxプラン（$100/月 または $200/月）
- Teamプラン
- Enterpriseプラン
詳しくは Anthropic公式ドキュメント をご参照ください。
2. Claude Max プラン概要と料金（2025年6月最新）
2.1 Claude Maxプランとは？
Claude Maxプランは2025年4月9日にリリースされたパワーユーザー向けサブスクリプション。
MaxプランユーザーはClaude CodeやWeb Claudeの全機能が使えます。
2.2 プラン詳細と料金体系
| プラン | 月額料金 | 使用量 | 主な特徴 |
|---|---|---|---|
| Free | 無料 | 日次制限あり | 基本的なClaude利用 |
| Pro | $20 | 標準使用量 | 日常的な生産性向上 |
| Max（拡張） | $100 | Pro比5倍の使用量 | パワーユーザー向け |
| Max（最大） | $200 | Pro比20倍の使用量 | 高頻度利用者向け |
| Team | $25/月/ユーザー | チーム向け使用量 | 最小5ユーザー |
| Enterprise | 要相談 | エンタープライズ向け | カスタマイズ対応 |
- 5時間セッション制（1セッション = 最初のメッセージから5時間）
- Max $100：最低225メッセージ/5時間、Max $200：最低900メッセージ/5時間
- 月50セッションを超えると制限の可能性
主要機能
- Claude Code（ターミナル統合AIコーディング）
- 高度リサーチ・Web検索
- 各種統合（Integrations）※詳細は後述
- Claude 4モデルへのアクセス
3. WSL環境のセットアップ
3.1 WSLとは？
WSL（Windows Subsystem for Linux）は、Windows上でLinux環境を動かせる機能です。
Linux開発ツールやアプリがWindows上で直接動作します。
3.2 WSLインストール手順（2025年最新）
-
Windowsのバージョン確認
- Windows 10 バージョン2004以降、またはWindows 11
- [設定] → [システム] → [バージョン情報] で確認
- Microsoft公式インストール手順
- Windows機能の「Windows Subsystem for Linux」を有効化
-
PowerShellを管理者権限で起動
-
コマンドでWSLとLinuxカーネルをインストール
wsl --install- デフォルトはUbuntu、他ディストリ指定は
wsl --install -d Debian
- デフォルトはUbuntu、他ディストリ指定は
-
WSL2へアップグレード（必要なら）
wsl --set-default-version 2 -
Linuxディストリの初期セットアップ（ユーザー名・パスワード設定）
-
インストール確認
wsl --list --verbose
4. WSL環境の初期設定
4.1 パッケージ更新
sudo apt update && sudo apt upgrade -y
4.2 必要ツールのインストール
sudo apt install -y git curl build-essential
# Node.js と npm のインストール（Claude Code に必要）
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
# インストール確認
node --version
npm --version
4.3 Windowsファイルシステムへのアクセス
-
/mnt/c以下にCドライブがマウント - 例：
cd /mnt/c/Users/yourname/Downloads
5. Claude Maxプランの契約とセットアップ
5.1 申し込み手順
- claude.ai へアクセス
- アカウント作成 or ログイン
- claude.ai/upgrade でアップグレード
- Maxプラン（$100または$200） を選択
- 支払い情報を入力
6. Claude Codeのインストールと初期設定
6.1 システム要件
- Ubuntu 20.04以上 または Debian 10以上（WSL可）
- Node.js 18以上
6.2 Claude Codeのインストール
Claude Codeは、Anthropicが提供するコマンドライン型のAIアシスタントツールです。インストールはnpxコマンドを使用して簡単に実行できます。
npx @anthropic-ai/claude-code
このコマンドを実行すると、Claude Codeが自動的にダウンロードされ、初回セットアップが開始されます。
- テーマ（表示スタイル）選択
- ターミナル環境に最適な表示スタイルを選択できます。
選択肢の説明：
Dark mode（現在選択中）：標準的なダークテーマ
Light mode：標準的なライトテーマ
Dark mode (colorblind-friendly)：色覚異常の方に配慮したダークテーマ
Light mode (colorblind-friendly)：色覚異常の方に配慮したライトテーマ
Dark mode (ANSI colors only)：基本的なANSI色のみを使用するダークテーマ
Light mode (ANSI colors only)：基本的なANSI色のみを使用するライトテーマ
-
ログイン方法の選択
初回実行時には、認証方法を選択する画面が表示されます：
-
Claude account with Max subscription：
月額100ドルからの定額制プラン。個人利用や継続的な使用に適しており、予算管理がしやすい課金体系です。 -
Anthropic Console account：
API使用量に基づく従量課金制。開発者や断続的な利用者に適しています。
6.3 認証（Maxプラン連携）
- 初回のみOAuth認証が必要（ターミナルのURLにアクセス）
- ログイン認証
- 先ほど選択した認証方法（Claude MaxまたはAnthropic Console）でログイン
- Claude Codeへのアクセス許可を承認
- セットアップ完了画面（Enterで次へ）
- フォルダー信頼性確認画面（設定されているディレクトリの認証）
- 起動完了画面
APIからMax認証へ切り替える場合
/login
claudeコマンドを使用したい場合（グローバルインストール）
グローバルインストールとは、claudeコマンドを直接使えるようにシステム全体にインストールすることです。
# npmの設定を変更
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
# その後でインストール
npm install -g @anthropic-ai/claude-code
# グローバルインストール後
claude # 短いコマンドで直接実行
7. Claude Codeの使い方・活用例
7.1 基本操作・コマンド例
-
プロジェクト初期化
/init -
プロジェクト概要の要約
claude > summarize this project's architecture -
ファイルの編集/リファクタ
claude > refactor the authentication module for better readability -
バグ修正
claude > fix the type errors in the auth module -
ドキュメント生成
claude > add comprehensive comments to this function -
コードベース横断検索・説明
claude > explain how the payment processing works across the entire codebase
7.2 便利なスラッシュコマンド例
-
/cost：使用量とコストの監視 -
/compact：コンテキストサイズの管理 -
/clear：コンテキストのクリア -
/login：アカウント切り替え
7.3 汎用的な活用例
- テスト自動化・実行
- プロジェクト設計レビュー
- 新機能の設計書作成
- リリースノート生成
- コーディング規約の適用・ESLint指摘まとめ
- コードの大規模リファクタリング
- 複数ファイル横断のバグ特定
- 複数人協働開発でのワークフロー自動化
- 要件仕様→実装案→実装までの一貫AIアシスト
8. VSCodeとの連携
8.1 VSCodeインストール
- VSCode公式サイトからダウンロード
- Windowsにインストール
8.2 「Remote - WSL」拡張の導入
- VSCodeを起動
- 拡張機能タブ（Ctrl + Shift + X）
- 「Remote - WSL」を検索してインストール
8.3 VSCodeからWSL環境へ接続
- コマンドパレット（Ctrl + Shift + P）
- 「WSL: 新しいウィンドウで開く」
- プロジェクトディレクトリを開く
- 統合ターミナルで
claudeコマンド（グローバルインストールの場合）を実行
9. Claude Max統合機能の活用（2025年新機能）
9.1 Integrations（統合機能）の設定
Max/Team/Enterpriseアカウントでclaude.aiログインし、設定メニューの「Integrations」で追加可能。
- Atlassian（Jira/Confluence等）
- Zapier（タスク自動化）
- Slack
- Github
- Google Workspace
- Asana
- Trello
- Notion
- Webhooks
- その他主要な業務SaaSサービス
9.2 Web検索・高度リサーチ
- グローバルWeb検索：リアルタイム情報の取得
- Deep Research：AIによる調査レポート生成
- API Web検索：1,000検索あたり$10（API利用時）
9.3 汎用タスク自動化例
- タスク自動作成／ToDo管理／リマインダー
- 会議メモや議事録から要約やアクション抽出
- タイムライン・スケジュール管理
- プロジェクト管理サービスとの連携で進捗自動更新
- コードレビュー自動化
10. ベストプラクティス（2025年版）
10.1 CLAUDE.mdファイルの活用
- プロジェクトごとのルールやガイドラインを記載
claude > # Always use TypeScript for new files claude > # Follow our company's ESLint configuration claude > # Write comprehensive unit tests for all functions
10.2 計画・段階的進行のアプローチ
- まずは設計・方針案をAIに依頼し、人間が承認してから実装フェーズへ
claude > make a plan for refactoring the user authentication system, but don't code until I confirm the plan looks good
10.3 効率的なワークフロー例
# 1. プロジェクト計画作成
claude > analyze this codebase and create a development plan for the new payment feature
# 2. 実装フェーズ
claude > implement the first phase of the payment feature plan
# 3. テストとデバッグ
claude > run tests and fix any issues
# 4. Git操作
claude > commit changes with appropriate message and create PR
11. コスト管理と最適化
11.1 使用量・コスト監視
/cost
/compact
/clear
11.2 セッション管理
- 1セッション＝最初のメッセージから5時間
- 月50セッションの上限に注意
- 効率的な作業時間を計画
11.3 プラン変更
- $100→$200 Maxプランアップグレード
- 従量課金（Pay-as-you-go）切り替え
- 次セッションまで待機
12. トラブルシューティング
12.1 WSLでのインストール問題
12.2 認証エラー
- Maxプランが有効か確認、ネット接続チェック、
/login再試行
12.3 使用量制限エラー
-
/costで状況確認、5時間経過を待つ、プランアップグレード
12.4 Node.jsバージョンエラー
node --version
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
13. まとめ
主要な改善点（2025年6月版）：
🚀 統合AI開発環境
- Claude MaxプランでWeb・モバイル・ターミナル統一
- Claude 4モデルの最新機能
- 20万トークンの巨大コンテキスト
💰 明確な料金体系
- $100/$200の2階層、API課金なし
- セッションベースの透明な制限
🔗 各種統合
- Jira, Slack, Github, Notion, Trello, Asana, Google Workspaceなど主要SaaSと自動連携
- MCPサーバーによる業務自動化も
⚡ 圧倒的な開発速度
- 大規模コードベースも瞬時解析
- 複数ファイル横断の自動リファクタ
- GitHub/GitLab連携もシームレス
🛡️ セキュリティと制御
- 権限ベースの安全なAI実行
- 30日間の限定データ保持、トレーニングデータ不使用保証
Claude Max + Claude Code + WSL + VSCode の組み合わせで、2025年最先端AI開発環境を実現しましょう！
Discussion