Vibe Code Lab
Claude Code入門 ── ターミナルで動く最強のAIコーディングアシスタント
ツール Step 3 約27分で読めます

Claude Code入門 ── ターミナルで動く最強のAIコーディングアシスタント

Claude Codeとは

Claude Codeは、Anthropic社が開発したAIコーディングアシスタントだ。最大の特徴は「自分でファイルを読み、自分で編集し、自分でテストする」という自律的な動作にある。ユーザーが日本語で「こういうWebサイトを作って」と指示するだけで、プロジェクトの初期化からコード生成、デバッグ、デプロイ準備まで一気に進めてくれる。

2024年にCLI（コマンドライン）版としてリリースされ、2026年4月現在では以下の4つの環境で利用可能になっている。

環境特徴リリース時期
CLI（ターミナル）最も高機能。自律的にコマンド実行可能2024年〜
デスクトップアプリMac / Windows対応。GUIで操作しやすい2025年〜
Webアプリ（claude.ai/code）ブラウザだけで利用可能。インストール不要2025年〜
IDE拡張機能VS Code・JetBrains（IntelliJ, PyCharm等）に統合2025年〜

従来のChatGPTやClaudeの通常チャットとの最大の違いは、実際のファイルシステムにアクセスできることだ。チャットではコードをコピペして貼り付ける必要があるが、Claude Codeはプロジェクトフォルダの中身を自分で読み、必要なファイルを自分で作成・編集する。まるで隣に座っている優秀なエンジニアに作業を頼んでいるような感覚で開発を進められる。

ℹ️

このサイト自体がClaude Codeで作られている

このVibe Code Lab自体が、Claude Codeを使ってゼロから構築された。Astroプロジェクトの作成、コンポーネント設計、記事執筆、Cloudflare Pagesへのデプロイまで、全てClaude Codeとの対話だけで完成している。

他のツールとの比較

Claude Codeを選ぶべきか迷っている人のために、主要なAIコーディングツールを比較してみよう。

ツール動作環境特徴向いている人
Claude CodeCLI / デスクトップ / Web / IDE自律的にファイル操作・コマンド実行本格的に開発したい人
Cursorデスクトップ（VS Code風）エディタ内でAI補完・チャットGUIが好きな人
GitHub CopilotVS Code / JetBrainsコード補完がメイン既にコードが書ける人
Boltブラウザブラウザだけで完結とにかく簡単に始めたい初心者
LovableブラウザUIデザインに強いデザイン重視の人
Windsurf (Codeium)デスクトップコード補完+チャットCursor代替を探している人

Claude Codeが特に強い場面

  • プロジェクト全体の構築: ゼロから一気にサイトやアプリを作る
  • 大規模なリファクタリング: 複数ファイルにまたがる変更を一括で行う
  • デバッグ: エラーを自動で読み取り、原因特定から修正まで自律的に進む
  • 環境構築: パッケージインストール、設定ファイルの作成を丸ごと任せられる
  • コードレビュー: プロジェクト全体を読み込んで品質チェックできる

Claude Codeが苦手な場面

  • リアルタイムの補完: タイピング中に候補を出す機能はCursorやCopilotの方が得意
  • GUIでの操作: コマンドライン操作に慣れていないと最初は戸惑う
  • 大量の画像処理: 画像生成や画像内のUI操作は直接できない
💡

組み合わせて使うのがベスト

多くの開発者はClaude Code + Cursor（またはVS Code拡張版）を組み合わせて使っている。大きな作業はClaude Codeに任せ、細かい修正はエディタ内のAI補完で行うのが効率的だ。

インストール方法

前提条件

Claude Codeを使うには、以下が必要だ。

項目要件
OSmacOS / Linux / Windows（WSL推奨）
Node.jsバージョン18以上
Anthropicアカウントclaude.ai でアカウント作成済み
プランClaude Pro（月$20）以上、またはAPI直接利用
⚠️

WindowsはWSLを推奨

Windows環境ではWSL（Windows Subsystem for Linux）経由での利用が推奨されている。ネイティブWindowsのコマンドプロンプトやPowerShellでも動作するが、一部の機能に制限がある場合がある。デスクトップアプリを使う場合はWSL不要だ。

Node.jsのインストール（まだ入っていない場合）

Node.jsが入っているか確認しよう。

node -v

バージョンが表示されなければ、以下の方法でインストールする。

macOSの場合（Homebrewを使用）:

brew install node

Windowsの場合:

Node.js公式サイトからLTS版をダウンロードしてインストール。

CLI版のインストール

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

インストールが完了したら、バージョンを確認する。

claude --version

デスクトップアプリのインストール

CLIに慣れていない場合は、デスクトップアプリがおすすめだ。

  1. claude.ai/download にアクセス
  2. Mac版またはWindows版をダウンロード
  3. インストールして、Anthropicアカウントでログイン
  4. プロジェクトフォルダを開いて作業開始

IDE拡張機能のインストール

VS Codeの場合:

  1. VS Codeの拡張機能マーケットプレイスで「Claude Code」を検索
  2. インストールして、Anthropicアカウントで認証

JetBrains（IntelliJ, PyCharm等）の場合:

  1. Settings → Plugins → Marketplace で「Claude Code」を検索
  2. インストールして認証

初回起動とログイン

cd あなたのプロジェクトフォルダ
claude

初回起動時にブラウザが開き、Anthropicアカウントでのログイン認証が求められる。認証が完了すれば、ターミナルに対話型インターフェースが表示される。

インストール時のトラブルシューティング

問題原因と対処
npm: command not foundNode.jsがインストールされていない。上記の手順でインストール
permission deniedmacOS/Linuxでは sudo npm install -g @anthropic-ai/claude-code を試す
認証が通らないブラウザのCookieをクリアしてから再度 claude を起動
バージョンが古いnpm update -g @anthropic-ai/claude-code でアップデート
EACCES エラーnpmのグローバルディレクトリの権限問題。npm config set prefix ~/.npm-global で解決

基本的な使い方 ── ステップバイステップ

Claude Codeを初めて使うときの流れをTimeline形式で見てみよう。

Step 1

プロジェクトフォルダに移動

cd ~/projects/my-app のように、作業したいフォルダに移動してから claude コマンドを実行する。

10秒
Step 2

Claude Codeを起動

ターミナルで claude と入力するだけ。対話型インターフェースが立ち上がる。

5秒
Step 3

日本語で指示を出す

「Reactでカウンターアプリを作って」のように、やりたいことを自然言語で伝える。技術的な用語を無理に使う必要はない。

30秒
Step 4

AIが作業計画を提示

Claude Codeがどのファイルを作成・変更するかの計画を示す。内容を確認して問題なければ承認する。

1分
Step 5

自動でコード生成・修正

承認後、AIが自律的にファイルの作成・編集・コマンド実行を進める。進捗がリアルタイムで表示される。

2〜10分
Step 6

結果を確認・追加指示

完了後、動作確認する。修正が必要なら追加で指示を出す。「ボタンの色を赤にして」のように細かい調整も可能。

適宜
💡

承認モードを使いこなそう

Claude Codeにはファイル変更やコマンド実行時に毎回承認を求める「承認モード」がある。最初は承認モードをオンにして、AIが何をしているか確認しながら進めるのがおすすめだ。慣れてきたら、信頼できる操作は自動承認に切り替えると作業が速くなる。

実践的な指示の例15選

Claude Codeに出す指示（プロンプト）の実例を、カテゴリ別に紹介する。

Webサイト作成

> Astroで個人ブログを作って。
  Tailwind CSSでスタイリング、ダークモード対応、
  トップページ・記事一覧・記事詳細の3ページ構成で。
> Next.jsでポートフォリオサイトを作って。
  自己紹介セクション、スキルセクション、制作実績セクションの3つ。
  アニメーションも入れて。

UI修正・デザイン

> ヘッダーのナビゲーションにハンバーガーメニューを追加して。
  モバイルで768px以下のときに表示されるようにして。
> フッターのデザインを改善して。SNSリンクのアイコンを横並びにして、
  著作権表示は中央揃えにして。

デバッグ・エラー修正

> npm run build したらエラーが出た。修正して。
> ページ遷移時にチラつきが発生している。原因を調査して修正して。

リファクタリング・コード改善

> src/componentsの中で重複しているコードがないか調べて、
  共通化できるものはコンポーネントにまとめて。
> このプロジェクトのTypeScriptの型定義を見直して、
  anyを使っている箇所を適切な型に修正して。

テスト・品質

> src/utils/の全関数にJestのユニットテストを書いて。
  エッジケースもカバーしてほしい。

パフォーマンス

> このサイトのLighthouseスコアを改善したい。
  画像の最適化、不要なJSの削除、CSSの軽量化をして。

Git操作

> ここまでの変更をコミットして。
  コミットメッセージは変更内容に合わせて適切につけて。

ドキュメント

> このプロジェクトのREADME.mdを作成して。
  セットアップ手順、使い方、フォルダ構成を含めて。

API連携

> OpenWeatherMap APIから天気データを取得して
  ダッシュボードに表示するページを追加して。
  APIキーは環境変数で管理して。

デプロイ

> このAstroプロジェクトをCloudflare Pagesにデプロイする
  設定を行って。wrangler.tomlの設定も含めて。

CLAUDE.mdの活用法

CLAUDE.mdはClaude Codeの最も強力な機能の1つだ。プロジェクトのルートに CLAUDE.md ファイルを置くと、Claude Codeが毎回起動時に自動で読み込み、そこに書かれた指示に従って動作する。

CLAUDE.mdに書くべき内容

カテゴリ例
プロジェクト概要「このプロジェクトはAstro製のブログサイトです」
技術スタック「Astro 5.x + Tailwind CSS + TypeScript」
コーディング規約「変数名はcamelCase、コンポーネントはPascalCase」
ファイル構成のルール「ページは src/pages/ 以下、コンポーネントは src/components/ 以下」
禁止事項「jQueryは使わない」「CSSフレームワークはTailwindのみ」
出力言語「コメントとドキュメントは日本語で書く」
テスト方針「新しい関数には必ずテストを書く」

CLAUDE.mdのテンプレート例

# CLAUDE.md

## プロジェクト概要
個人ブログサイト。Astro + Tailwind CSSで構築。

## 技術スタック
- フレームワーク: Astro 5.x
- スタイリング: Tailwind CSS 4.x
- 言語: TypeScript
- ホスティング: Cloudflare Pages

## コーディング規約
- コンポーネント名: PascalCase (例: BlogCard.astro)
- ユーティリティ関数: camelCase (例: formatDate.ts)
- コメント・ドキュメント: 日本語
- インデント: スペース2つ

## 禁止事項
- jQuery, Bootstrap は使わない
- any型は使わない（TypeScript）
- インラインスタイルは使わない

## デプロイ
- npm run build でビルド
- Cloudflare Pagesにデプロイ

階層的なCLAUDE.md

Claude Codeは複数のCLAUDE.mdを読み込める。プロジェクトルートだけでなく、サブフォルダにも配置可能だ。

my-project/
├── CLAUDE.md           ← プロジェクト全体のルール
├── src/
│   ├── CLAUDE.md       ← src以下の追加ルール
│   ├── components/
│   │   └── CLAUDE.md   ← コンポーネント固有のルール
│   └── pages/

サブフォルダのCLAUDE.mdは、そのフォルダ内のファイルを操作するときに追加で読み込まれる。大規模プロジェクトで部分ごとにルールを変えたいときに便利だ。

💡

CLAUDE.mdは育てていくもの

最初から完璧なCLAUDE.mdを書く必要はない。Claude Codeを使っていて「毎回同じ注意をしている」と感じたら、その内容をCLAUDE.mdに追加しよう。使い続けるうちに、あなたのプロジェクトに最適化されたルールブックが出来上がる。

料金体系

Claude Codeの利用方法は大きく2つある。それぞれの料金体系を見てみよう。

1. Claude Pro / Max Plan経由（推奨）

claude.aiのサブスクリプションプランに含まれる形で利用する方法。

プラン月額Claude Codeの利用特徴
Pro$20/月利用可能（上限あり）一般ユーザー向け。月数百回程度の利用
Max 5x$100/月大容量利用可能ヘビーユーザー向け。Pro の5倍の利用量
Max 20x$200/月超大容量利用可能プロ開発者向け。Proの20倍の利用量
ℹ️

まずはProプランから始めよう

バイブコーディングを始めるなら、月$20のProプランで十分。1日数回の作業であれば余裕がある。毎日ガッツリ使うようになったらMaxプランへのアップグレードを検討しよう。

2. API直接利用

Anthropic APIキーを使って直接課金する方法。使った分だけ料金がかかる従量課金制だ。

モデル入力（100万トークン）出力（100万トークン）
Claude Sonnet 4$3$15
Claude Opus 4$15$75

利用料金の目安（API直接利用の場合）:

作業内容おおよそのコスト
小規模な修正（1〜2ファイル変更）$0.05〜$0.20
中規模な機能追加$0.50〜$2.00
プロジェクトの初期構築$2.00〜$10.00
大規模リファクタリング$5.00〜$20.00
⚠️

API利用は予算上限を設定しよう

API直接利用の場合、Anthropicのダッシュボードで月次の予算上限を設定できる。最初は$20程度に設定しておくと安心だ。上限に達すると利用が一時停止されるので、予想外の高額請求を防げる。

便利なコマンドとショートカット

Claude Codeには作業を効率化するコマンドやショートカットが多数用意されている。

スラッシュコマンド

コマンド説明
/helpヘルプを表示
/clear会話履歴をクリア
/compact会話を要約して圧縮（トークン節約）
/config設定を変更
/review変更されたコードをレビュー
/commit変更をGitにコミット
/prプルリクエストを作成

キーボードショートカット

ショートカット説明
Ctrl + C現在の処理を中断
Ctrl + DClaude Codeを終了
Esc入力中の文をキャンセル
Tabファイルパスの補完
↑ / ↓過去の入力履歴を呼び出す

ワンショットモード（非対話型）

対話せずに1つの指示だけ実行したい場合は、コマンドラインから直接指示を渡せる。

claude "このプロジェクトのREADME.mdを更新して"

パイプで別のコマンドの出力を渡すこともできる。

cat error.log | claude "このエラーの原因を教えて"
git diff | claude "この変更内容をレビューして"

実践例：ゼロからブログを作る流れ

ここでは、Claude Codeを使ってAstro製ブログをゼロから構築する流れを、実際の指示とともに紹介する。

0分

プロジェクト初期化

「Astroで個人ブログを作って。Tailwind CSS使用、日本語対応、ダークモード付きで」と指示。Claude Codeが npm create astro からパッケージインストール、初期設定まで全て自動で行う。

約5分
5分

レイアウト・コンポーネント作成

「ヘッダー、フッター、サイドバーのレイアウトを作って。ヘッダーにはサイト名とナビゲーション」と指示。共通レイアウトとコンポーネントが生成される。

約5分
10分

トップページ・記事一覧の作成

「トップページにヒーローセクションと最新記事3件を表示して。記事一覧ページも作って」と指示。

約5分
15分

記事詳細ページの作成

「Markdownで記事を書けるようにして。src/content/posts/ に記事ファイルを置く構成で」と指示。Content Collectionsの設定も自動で行われる。

約5分
20分

サンプル記事の追加

「サンプル記事を3本作って。テーマはプログラミング入門、AI活用術、おすすめツール紹介」と指示。

約3分
23分

デザイン調整

「カラーテーマをネイビー系に変更して。フォントはNoto Sans JPを使って」「カード型のデザインにして影をつけて」と細かく調整。

約5分
28分

動作確認とバグ修正

「npm run dev で起動して、問題があれば修正して」と指示。ビルドエラーや表示崩れがあれば自動で検知・修正。

約3分
31分

デプロイ準備

「Cloudflare Pagesにデプロイする設定をして。ビルドコマンドとアウトプットディレクトリの設定も」と指示。

約2分

所要時間は約30分。プログラミング経験がなくても、日本語で指示を出すだけで完成度の高いブログサイトが出来上がる。

注意点とベストプラクティス

Claude Codeを効果的に使うために、知っておくべき注意点をまとめる。

やるべきこと

ベストプラクティス理由
GitをこまめにコミットするAIの変更で問題が起きても、いつでも元に戻せる
指示は具体的に出す「かっこよくして」ではなく「ヘッダーの背景をグラデーションにして」
CLAUDE.mdを整備する毎回同じ説明をする手間が省ける
小さい単位で指示を出す一度に大量の変更を求めるとミスが増える
AIが生成したコードを確認する動作確認は必ず自分の目で行う
/compactで会話を圧縮する長い会話はトークンを消費する。適度に圧縮しよう

やってはいけないこと

アンチパターンなぜダメか
一度に大量のファイル変更を指示変更が追えなくなり、バグの原因特定が困難に
AIの出力を無条件に信頼まれにセキュリティ上問題のあるコードが生成される場合がある
機密情報をプロンプトに含めるAPIキーやパスワードをプロンプトに直接書かない
エラーを無視して先に進むエラーは都度解決する。放置すると後で大きな問題になる
バージョン管理なしで作業Git未使用だと、AIの変更で全てが壊れたとき取り返しがつかない
⚠️

セキュリティに注意

Claude Codeはファイルシステムにアクセスできるため、プロジェクト内の .env ファイルや設定ファイルの内容を読み取れる。機密性の高いプロジェクトで使う場合は、APIキーや認証情報が含まれるファイルを .claudeignore に追加して、Claude Codeの読み取り対象から除外しよう。

よくある質問（FAQ）

Q1. プログラミング未経験でもClaude Codeは使えますか？

使える。 Claude Codeの最大の強みは、日本語の指示だけでコードを生成・修正できること。「ブログサイトを作って」「ボタンの色を変えて」といった自然な日本語で指示を出せば、AIが適切なコードを書いてくれる。ただし、ターミナル（コマンドライン）の基本操作（cdコマンドでフォルダ移動、など）は覚える必要がある。

Q2. 無料で使えますか？

完全無料では使えない。 Claude Pro（月$20）以上のプランか、Anthropic APIの従量課金が必要だ。ただし、Anthropicが提供する無料トライアルで試用できる場合がある。月$20のProプランが最もコスパが良い。

Q3. CursorとClaude Code、どちらを先に始めるべきですか？

目的による。 プログラミング完全初心者で、GUIの操作に慣れている人はCursorから始めるのがスムーズ。一方、「ゼロから一気にプロジェクトを作りたい」「コマンドライン操作に抵抗がない」という人はClaude Codeが向いている。両方試してみて、自分に合う方をメインに使うのがおすすめだ。

Q4. Claude CodeはオフラインでもCLAUDE.mdを読み込みますか？

インターネット接続が必須。 Claude CodeはAnthropic社のAPIサーバーと通信して動作するため、オフライン環境では利用できない。CLAUDE.mdのファイル自体はローカルにあるが、その内容をAIが解釈するにはAPI通信が必要だ。

Q5. 既存のプロジェクトにClaude Codeを導入しても大丈夫ですか？

もちろん大丈夫。 既存プロジェクトのフォルダで claude を起動すれば、Claude Codeがプロジェクトの構造を読み取って対応してくれる。ただし、初回は「このプロジェクトの構成を説明して」と聞いて、AIが正しく理解しているか確認するのがおすすめだ。また、作業前にGitでコミットしておけば安心だ。

Q6. Claude CodeとClaude（通常チャット）の違いは何ですか？

ファイル操作とコマンド実行ができるかどうか。 通常のClaudeチャットは質問に答えたりコードを提案したりするが、実際のファイルを読み書きすることはできない。Claude Codeは、あなたのPC上のファイルを直接読み、編集し、npm install などのコマンドも自律的に実行できる。

Q7. 1日にどのくらい使えますか？

プランによる。 Proプラン（$20/月）では、1日に数十回の指示が出せる程度の利用量がある。ただし、大規模なプロジェクト構築など1回の指示で大量のトークンを消費する作業を繰り返すと、1日で上限に達する場合もある。毎日ヘビーに使うならMax 5x（$100/月）以上がおすすめだ。

Q8. 生成されたコードの著作権はどうなりますか？

Anthropicの利用規約上、AIが生成したコードの利用権はユーザーにある。 商用利用も問題ない。ただし、AIが学習データに含まれる既存のオープンソースコードに似たコードを生成する可能性はゼロではないため、重要なプロジェクトではライセンスの確認を推奨する。

まとめ

Claude Codeは「AIと一緒にプログラミングする」体験を最も深いレベルで実現するツールだ。CLI、デスクトップアプリ、Webアプリ、IDE拡張と4つの環境が揃い、自分に合ったスタイルで使える。

Claude Codeが特におすすめな人:

  • プログラミング未経験だが、本格的なWebサイトやアプリを作りたい人
  • 既にコードが書けるが、開発速度を劇的に上げたい人
  • AIツールを使いこなして、個人開発の生産性を最大化したい人

最初は慣れが必要だが、CLAUDE.mdを整備し、具体的な指示の出し方を覚えれば、開発速度は劇的に向上する。まずはProプラン（月$20）で始めて、小さなプロジェクトから試してみよう。

次の記事: 他のツール（Cursor、Bolt）との使い分けを詳しく解説。

他のカテゴリの記事