はじめに
この記事では、最近話題となっているAIエージェント 「Claude Code」 の始め方や使い方を読者の皆様と共有したいという思いから、筆者の学習軌跡を記録していきます。
今回は第一弾ということで、Claude Codeの概要・始め方にフォーカスして紹介させていただきます！
前提条件
- OS：Windows 11
- IDE：Cursor
- ※ WSL2 インストール済み
Claude Codeの概要
Claude Codeとはどのような技術なのか？
いままでのAIツールと何が違うのか？
私なりに要点をまとめて説明させていただきます。
まず大きな特徴として、Claude Codeは ターミナル上で動作するAIコーディングエージェント というところです！
従来のAIツールを例に挙げて比較すると、
- ChatGPT、Google Gemini などのAIチャットツールは ブラウザ上で動作 し、ユーザーの質問に対しての回答やファイル生成などを行えます
- GitHub Copilot のようなAIコーディングアシスタントは エディター上で動作 し、コードの補完やサジェスト、ロジックの生成などを行えます
しかし、これらのツールはあくまでブラウザ・エディター上で動作するため、
- 既存のビジネスロジックが冗長だから、機能ごとにディレクトリを切ってコンポーネント化する
- 設計に基づいた開発環境構築・テスト・デプロイなどのコマンド実行
のような作業を行うことが出来ません。
でもClaude Codeなら？？
Claude Codeは ターミナル上で動作する ため、自然言語で指示するだけで
- ✅ ファイルやディレクトリの作成・編集・削除
- ✅ コマンドの実行（npm install、git commit など）
- ✅ コードベース全体を横断した大規模なリファクタリング
- ✅ テストの実行・デバッグ
といった、開発フローまるごと をAIに任せることができます！
従来のAIツールが 「アドバイスをくれる優秀なアシスタント」 なのに対し
Claude Codeは 「的確に指示すれば代わりに作業をやってくれる優秀な部下」
というイメージです🚀
インストール
① プランの確認・サブスク登録
Claude Codeを使用するには 有料プランが必要 です。
まずは claude.ai/upgrade から自分に合ったプランを選びましょう。
プラン一覧
| プラン | 月額 | こんな人におすすめ |
|---|---|---|
| Pro | $20 / 月（約3,000円） | Claude Codeをまず試したい個人開発者 |
| Max 5x | $100 / 月 | Proの制限に頻繁に引っかかるヘビーユーザー |
| Max 20x | $200 / 月 | 毎日長時間フルに使い倒したい開発者 |
| Team | $25〜$150 / ユーザー / 月 | 5名以上のチームで共同利用したい場合 |
| Enterprise | 要問い合わせ | SSO・監査ログなど高度なセキュリティが必要な組織 |
💡 Freeプランでは Claude Code は利用できません。 まずはじめるなら Pro（$20/月） がおすすめです！
各プランの詳細
🔹 Pro（$20 / 月）
Claude Codeをはじめて試す個人開発者に最適なプランです。ターミナル・Web・デスクトップで Claude Code が利用でき、Sonnet・Opus モデルにもアクセスできます。制限に引っかかることなく、日常的なコーディング作業をこなせる使用枠が確保されています。
🔸 Max 5x / 20x（$100〜$200 / 月）
「Proの上限によく達してしまう」という方向けのプランです。Proと比べて最大20倍の使用枠が与えられ、新機能への優先アクセスや混雑時の優先処理という特典もあります。毎日数時間以上 Claude Code を使い込む開発者に向いています。
👥 Team（$25〜$150 / ユーザー / 月）
5名以上のチームで業務利用する際の標準プランです。管理コンソールによる一元管理・共有プロジェクト・SSO（シングルサインオン）などチーム向けの機能が揃っています。なお、Claude Codeが利用できるのはPremiumシート（$100/ユーザー/月）のみという点に注意が必要です。
🏢 Enterprise（要問い合わせ）
50名以上の大規模組織や、金融・医療・法務など厳格なセキュリティ基準が必要な業種向けのプランです。HIPAA対応・500Kトークンの拡張コンテキストウィンドウ・SCIM・監査ログなどが利用できます。
サブスク登録の手順
- claude.ai にアクセスし、Anthropicアカウントを作成（またはログイン）
- 左下のメニューから 「Upgrade plan」 をクリック
- 希望のプランを選択して 「Subscribe」 をクリック
- クレジットカード情報を入力して支払いを完了
登録が完了したら、いよいよインストールに進みましょう！
② Cursor のターミナルで WSL2 を開く
本記事では Cursor の統合ターミナル上 で作業を進めます。
Cursorを起動したら、左下のアイコンからリモートウインドウメニューを開きConnect to WSLを選択しWSLにリモート接続、Ctrl + ＠でターミナルを開きます。
③ Claude Code をインストールする
ターミナルが起動したら、Claude Code をインストールします。
公式が推奨する方法は ネイティブインストーラー です（npm経由のインストールは現在非推奨）。
curl -fsSL https://claude.ai/install.sh | bash
インストール完了後、バージョンを確認して正常に入ったかチェックしましょう。
claude --version
以下のようにバージョン番号が表示されればインストール成功です！
2.1.101 (Claude Code)
④ 認証（ログイン）する
インストール後、claude コマンドを実行して初回認証を行います。
claude
コマンドを実行するとブラウザが自動で開き、Anthropicアカウントへのログイン・認証画面が表示されます。
「Authorize（認証）」 ボタンをクリックすれば完了です！
⚠️ ブラウザが自動で開かない場合は、以下のコマンドを試してみてください。
コンソールにURLが表示されるので、コピーしてブラウザに貼り付けて認証できます。
claude login --no-browser
Vite + TypeScript 環境を Claude Code で構築してみよう
いよいよ本番！Claude Code を使って Vite + TypeScript のプロジェクトを丸ごと構築し、ブラウザに Hello World を表示させてみます。
① プロジェクト用ディレクトリを作る
Cursor のターミナル上で作業ディレクトリを用意します。
WindowsのCドライブ配下（/mnt/c/...）より、WSL2のLinuxファイルシステム上に置いた方が動作が快適なのでおすすめです。
Linux/Ubuntu-xx.xx/home/Userの配下にプロジェクトディレクトリを作成し、Cursorから開きます。
② Claude Code を起動する
プロジェクトディレクトリに移動したら、Claude Code を起動します。
claude
起動すると以下のようなプロンプトが表示されます。
✻ Welcome to Claude Code!
/help for help, /exit to exit
>
この > のあとに自然言語で指示を入力できます。
③ 自然言語で環境構築を依頼する
日本語でそのまま指示を出してみましょう！
Vite + TypeScriptのプロジェクトをセットアップして、ブラウザに「Hello World」と表示させてください。
すると Claude Code がおそらく以下のような作業を自動で進めてくれます。
-
npm create vite@latestでプロジェクト生成 -
npm installで依存パッケージのインストール -
src/main.tsなど必要なファイルの編集
また、Claude Codeはファイルの書き込みやコマンド実行時などに都度以下のように承認を求めてきます。
Claude Codeにはパーミッションモードという機能があり、ファイルの変更やコマンドの実行時の確認の要否を設定できます。
これがデフォルトでは承認を求めるようになっています。
Opened changes in Cursor ⧉
Save file to continue…
Do you want to make this edit to ~~~?
❯ 1. Yes
2. Yes, allow all edits during this session (shift+tab)
3. No
Esc to cancel · Tab to amend
ここで1. Yesを選択しEnterとすることで、提案された変更が反映されます。
④ 開発サーバーを起動する
セットアップが完了したら、Claude Code に開発サーバーの起動をお願いしてみます。
開発サーバーを起動してください。
または、自分でコマンドを実行する場合は Cursor のターミナルで別タブを開いて
npm run dev
起動が成功すると、以下のようなメッセージが表示されます。
VITE v5.x.x ready in xxx ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
⑤ ブラウザで確認！
ブラウザで http://localhost:5173/ にアクセスすると……
🎉 Hello World が表示されました！
おわりに
今回は Claude Code の概要・インストールから、自然言語だけで Vite + TypeScript 環境を構築して Hello World を表示させるところまで一通り体験してみました。
コマンドを細かく調べなくても、日本語で「〇〇してください」と伝えるだけでAIが作業を進めてくれるのは、実際に触ってみるとなかなかの衝撃です…！
次回以降はより実践的な使い方や頻繁に使用するコマンドも紹介していく予定です！
📝 この記事は筆者が Claude Code を実際に触りながら学んだ内容をまとめたものです。
公式ドキュメントは code.claude.com/docs からご確認ください。
料金・プランの詳細は claude.ai/upgrade をご参照ください。