バイブコーディングという言葉をご存知ですか?
AIに自然言語で指示を出して、コードを書いてもらう。細かい文法を覚えなくても、やりたいことを「言葉」で伝えるだけで、AIがコードを生成してくれる。そんな新しい開発スタイルが、今どんどん広がっています。
「こんなアプリを作りたい」「このバグを直して」「テストを書いて」
こんなふうに話しかけるだけで、AIが実際にコードを書き、ファイルを作り、プロジェクトを動かしてくれる。まるで優秀なエンジニアが隣にいるような体験です。
そんなバイブコーディングを実現するツールの中でも、特に注目されているのが今回紹介する Claude Code です。
この記事では、Claude Codeとは何か、何ができるのか、インストールから基本的な使い方まで、初心者の方にもわかるようにステップバイステップで解説します。
ターミナル(コマンドライン)で動くAIコーディングアシスタントです。
Claude Codeは、AI企業の Anthropic(アンソロピック) が開発した公式のコーディングツールです。中身にはAnthropicが開発した高性能AIモデル「Claude」が使われています。
Claude Codeはターミナルを中心に利用できます。現在はIDE、Web、GitHub上のワークフローなど、ターミナル以外から利用できる形態も提供されています。本講座ではターミナル版を扱います。
起動すると、チャットのようにAIと対話できるようになります。そしてClaude Codeは、ただ会話するだけでなく、以下のようなことを実際に実行してくれます。
つまり、「AIと会話するだけ」ではなく、AIが実際にあなたのプロジェクトの中で作業してくれるのが大きな特徴です。
AIを使ったコーディングツールはいくつかありますが、Claude Codeはそれらとは少し違ったアプローチを取っています。
ChatGPT(チャットGPT)との違い
ChatGPTは会話、調査、ファイル作業など幅広い用途を扱うサービスで、Codexを使ったエージェント型の開発作業にも対応しています。Claude CodeはClaudeを使ったコーディング作業に特化しています。「ChatGPTはコードを表示するだけ」という区別は現在では正確ではありません。
Cursor(カーソル)との違い
Cursorは、VS CodeベースのIDE(統合開発環境) にAI機能を組み込んだエディタです。エディタの中でAIと対話しながらコードを書けます。
Claude Codeはターミナルから利用する場合、特定のエディタに固定されません。CursorにもAgent機能があるため、現在の違いは「自動編集できるか」ではなく、ターミナル中心か、AI統合エディタ中心かという作業体験にあります。
まとめると
| ツール | 動く場所 | 特徴 |
|---|---|---|
| ChatGPT / Codex | ChatGPT、デスクトップ、CLI、IDEなど | 汎用的な会話からエージェント型開発まで対応 |
| Cursor | 専用エディタ | 補完、質問、Agent作業をエディタ内で利用 |
| Claude Code | ターミナル、IDE、Webなど | Claudeを使ったエージェント型開発 |
Claude Codeでできることを、具体的に見ていきましょう。
「ログイン機能を作って」「お問い合わせフォームを作って」のように指示するだけで、必要なコードを生成してファイルに書き込んでくれます。
「このエラーを修正して」とエラーメッセージを伝えるだけで、原因を特定してコードを修正してくれます。プロジェクト全体のコードを読んで理解した上で修正するので、的確な対応が可能です。
「このコードをもっと読みやすくして」「パフォーマンスを改善して」といった依頼にも対応できます。既存のコードを分析して、より良いコードに書き換えてくれます。
ファイルの作成、編集、削除、名前の変更など、ファイルに関する操作を自然言語で指示できます。「srcフォルダにutils.jsを作って」「このファイルの名前を変えて」といった具合です。
コードの変更をGitでコミットしたり、ブランチを作成したり、変更履歴を確認したりできます。「今の変更をコミットして」「新しいブランチを作って」のように指示するだけです。
「Reactの新しいプロジェクトを作って」「Express.jsでAPIサーバーの雛形を作って」のように、プロジェクトの初期セットアップもお任せできます。
「このファイルが何をしているか説明して」「この関数の処理を教えて」と聞けば、コードを読み解いて日本語でわかりやすく説明してくれます。他の人が書いたコードを理解するのにも便利です。
「テストを実行して」「この関数のテストを書いて」といった指示で、テストの作成や実行もしてくれます。テスト結果を見て、失敗したテストの原因分析もできます。
Claude Codeを使い始めるには、対応OS、インターネット接続、利用可能なAnthropicアカウントまたは対応する企業向け環境が必要です。
ネイティブインストーラーを使う場合、Claude Code自体のためにNode.jsを入れる必要はありません。Node.jsは、JavaScriptやNext.jsのプロジェクトを開発するときに別途必要になります。OSとシェルの最新要件は、インストール前にAnthropic公式ドキュメントを確認してください。
Claude Codeは、AnthropicのClaude AIモデルを使います。利用するには、以下のいずれかが必要です。
方法A:APIキーを使う(従量課金)
Anthropicのウェブサイト(console.anthropic.com)でアカウントを作成し、APIキーを発行します。使った分だけ料金がかかる従量課金制です。
方法B:Claude Max サブスクリプション(定額制)
対応するClaudeのサブスクリプションに加入している場合は、Claudeアカウントで認証できます。ただし、プランごとに利用上限があり、常に無制限に使えるわけではありません。
どちらの方法を選ぶかは、後ほどの「料金について」のセクションで詳しく説明します。
準備ができたら、公式のネイティブインストーラーでClaude Codeを導入します。
ターミナルを開いて、以下のコマンドを実行します。
macOS・Linuxでは公式インストールスクリプトまたはHomebrew、Windowsでは公式PowerShellインストーラーまたはWinGetが案内されています。コマンドは変更される可能性があるため、Anthropic公式セットアップからコピーしてください。npmによるグローバルインストールは現在非推奨です。
このコマンドの意味を簡単に説明すると:
npm install --- npmでパッケージをインストールする-g --- グローバル(パソコン全体)にインストールする@anthropic-ai/claude-code --- インストールするパッケージ名グローバルにインストールすることで、どのフォルダからでも claude コマンドが使えるようになります。
インストールが完了したら、以下のコマンドで正しくインストールされたか確認しましょう。
1claude --versionバージョン番号が表示されれば、インストール成功です。
1claude v1.x.xこのように表示されたら、準備完了です。
インストールが終わったら、初回の設定を行います。
任意のフォルダで以下のコマンドを実行します。
1claude初回起動時には、認証(ログイン)の手順が表示されます。
Claude Codeの認証方法は2つあります。
方法A:APIキーで認証
Anthropicのコンソール(console.anthropic.com)で発行したAPIキーを入力します。
1. Claude Codeの初回起動時に表示されるプロンプトに従います
2. APIキーの入力を求められたら、取得したAPIキーを貼り付けます
3. 認証が完了すると、Claude Codeが使えるようになります
方法B:Claudeアカウントでログイン(OAuth)
Claude ProやClaude Maxのサブスクリプションを持っている場合は、ブラウザ経由でログインできます。
1. Claude Codeの初回起動時に、ブラウザが自動的に開きます
2. Claudeアカウントでログインします
3. 認証が完了すると、ターミナルに戻ってClaude Codeが使えるようになります
どちらの方法でも、認証情報はローカルに保存されるので、次回以降は自動的にログインされます。
さあ、ここからが本番です。Claude Codeの基本的な使い方を見ていきましょう。
まず、作業したいプロジェクトのフォルダに移動します。
1cd ~/my-projectClaude Codeは、起動したフォルダの中身を読み取って理解します。そのため、必ず作業したいプロジェクトのフォルダ内で起動することが大切です。
フォルダに移動したら、claude コマンドで起動します。
1claude起動すると、対話モードになります。チャットのように、自然言語でAIに指示を出せる状態です。
あとは、やりたいことを日本語で伝えるだけです。いくつか実際の使用例を見てみましょう。
例1:プロジェクトの構造を理解する
1このプロジェクトの構造を教えてClaude Codeがプロジェクト内のファイルやフォルダを分析して、全体の構成を説明してくれます。新しいプロジェクトに参加したときなどに便利です。
例2:READMEを作成する
1このプロジェクトのREADMEを作ってプロジェクトの内容を分析した上で、適切なREADME.mdファイルを自動生成してくれます。
例3:バグを修正する
1npm run dev を実行するとエラーが出る。原因を調べて修正してClaude Codeはコマンドを実行してエラーを確認し、コードを分析して原因を特定し、修正まで行ってくれます。
例4:新しい機能を追加する
1ヘッダーにダークモード切り替えボタンを追加して既存のコードを読み取った上で、プロジェクトのコーディングスタイルに合わせて新しい機能を実装してくれます。
例5:コードを説明してもらう
1src/utils/auth.js が何をしているか、わかりやすく教えて指定したファイルの内容を読んで、処理の流れを日本語で丁寧に解説してくれます。
Claude Codeを終了するには、以下のいずれかを入力します。
1/exitまたは Ctrl + C でも終了できます。
Claude Codeをより効果的に使うためのコツをいくつか紹介します。
曖昧な指示よりも、具体的な指示のほうが良い結果が得られます。
1❌ 悪い例:フォームを作って
2⭕ 良い例:名前、メールアドレス、メッセージの3つのフィールドを持つお問い合わせフォームを作って。バリデーション付きで、送信後に「送信完了しました」と表示して何をしたいのかだけでなく、「なぜそれをしたいのか」「どういう状況なのか」も伝えると、より適切な提案をしてくれます。
1⭕ 良い例:このアプリはECサイトで、商品一覧ページのパフォーマンスが遅い。画像の遅延読み込みを実装して改善してほしい一度に大きな指示を出すより、小さなステップに分けて進めるほうがうまくいくことが多いです。
1ステップ1:まず、現在のプロジェクト構造を教えて
2ステップ2:ユーザー認証の機能を追加したい。まずは設計方針を提案して
3ステップ3:その方針でOK。実装して自分で書いたコードをClaude Codeにレビューしてもらうのも効果的です。
1src/components/LoginForm.jsx を確認して、改善点があれば教えてバグの可能性、パフォーマンスの問題、セキュリティリスクなどを指摘してくれます。
エラーが発生したときは、エラーメッセージをそのまま伝えましょう。Claude Codeがエラーの内容を分析して、適切な修正を行ってくれます。
1以下のエラーが出ている。修正して:
2TypeError: Cannot read properties of undefined (reading 'map')Claude Codeには、CLAUDE.md というとても便利な仕組みがあります。
プロジェクトのルートフォルダに CLAUDE.md というファイルを置くと、Claude Codeが起動時に自動的に読み込みます。いわば、AIへのプロジェクト固有の指示書です。
プロジェクトに関する情報やルールを書いておくと、Claude Codeがそれに従って作業してくれます。
1# CLAUDE.md
2
3## プロジェクト概要
4これはReact + TypeScriptで作られたECサイトのフロントエンドです。
5
6## 技術スタック
7- React 18
8- TypeScript
9- Tailwind CSS
10- Next.js 14(App Router)
11
12## コーディングルール
13- コンポーネントはfunction宣言で書く(アロー関数ではなく)
14- CSSはTailwind CSSのユーティリティクラスを使う
15- 状態管理にはuseStateとuseReducerを使う(外部ライブラリは不要)
16- コメントは日本語で書く
17
18## ディレクトリ構成
19- src/components/ --- 共通コンポーネント
20- src/app/ --- Next.jsのページ
21- src/utils/ --- ユーティリティ関数
22- src/types/ --- TypeScriptの型定義
23
24## 注意事項
25- .envファイルの内容は出力しない
26- テストはJestを使用するCLAUDE.mdは必須ではありませんが、使いこなすとClaude Codeの出力品質が大幅に向上します。ぜひ活用してみてください。
Claude Codeの料金体系について説明します。
Anthropicのコンソールで発行したAPIキーを使う場合、使った分だけ課金されます。
料金は「トークン」という単位で計算されます。トークンは、入力した文字数と、AIが出力した文字数の合計に基づいて決まります。
Claude Codeは、あなたのプロジェクトのファイルを読み取る際にもトークンを消費します。大規模なプロジェクトで作業すると、その分コストが増える可能性があります。
目安として:
ただし、これはあくまで目安です。プロジェクトの規模や指示の内容によって大きく変わります。
対応するAnthropicのサブスクリプションにはClaude Codeの利用枠が含まれますが、プランごとの利用上限があります。API利用は従量課金です。具体的な金額、対象プラン、上限は変更されるため、契約前に公式料金ページを確認してください。
最新の料金情報は、Anthropicの公式サイトで確認してください。
Claude Codeの導入時によくあるトラブルと、その解決方法をまとめます。
以前のnpm版が残っている場合は、まず claude doctor でインストール状態を確認します。公式セットアップの移行・アンインストール手順に従い、sudo npm installなどで無理に上書きしないでください。
1Error: Invalid API key対処法:
claude コマンドが見つからない1command not found: claude対処法:
claude doctor を実行できる場合はインストール状態を確認するClaude Codeはインターネット接続が必要です。オフラインでは動作しません。
対処法:
お疲れさまでした。この記事で学んだことを振り返りましょう。
1. Claude Codeとは --- Anthropicが開発したエージェント型コーディングツール
2. 他のツールとの違い --- ターミナルを中心に、IDEやWebなど複数の環境から利用できる
3. できること --- コード生成、バグ修正、リファクタリング、ファイル操作、Git操作、コード説明など多岐にわたる
4. 準備するもの --- 対応環境と利用可能なAnthropicアカウント等
5. インストール --- OSに合う公式ネイティブインストーラーを利用する
6. 使い方 --- プロジェクトフォルダで claude を実行し、自然言語で指示する
7. CLAUDE.md --- プロジェクト固有の設定ファイルで出力品質を向上
1# インストール
2# OS別の最新コマンドはAnthropic公式セットアップから取得
3
4# バージョン確認
5claude --version
6
7# Claude Codeを起動
8claude
9
10# 終了
11/exitClaude Codeをインストールできたら、ぜひ以下のことを試してみてください。
1. 小さなプロジェクトのフォルダでClaude Codeを起動してみる
2. 「このプロジェクトの構造を教えて」と聞いてみる
3. 簡単な修正や機能追加を指示してみる
4. CLAUDE.mdファイルを作って、プロジェクトのルールを設定してみる
最初は小さな作業から始めて、徐々にClaude Codeに任せる範囲を広げていくのがおすすめです。
バイブコーディングの世界へようこそ。AIという強力な相棒と一緒に、楽しくプログラミングを進めていきましょう。

バイブコーディングという用語の定義から、従来のプログラミングとの違い、必要なスキル、Claude CodeやCursorなど主要ツール、よくある誤解までを徹底解説。AI時代に「コードが書けなくても作れる」とは具体的にどういうことか、初心者にもわかりやすく整理した完全ガイドです。
無料
AIを使ってWebアプリを作り、実際にインターネットに公開するまでの全体像をわかりやすく解説します。企画→開発→デプロイの流れ、使うツールや技術の選び方、初心者が陥りやすい落とし穴まで、バイブコーディング時代の開発プロセスを俯瞰できるコラムです。
無料
AIとJavaScript・Next.js開発を始めるために、Node.jsとは何か、なぜ必要なのかを解説します。Windows・Macでの導入手順とnpmの基本操作を、初心者向けに学べます。
無料
プログラミング初心者が最もつまずく「エラーメッセージ」を徹底攻略します。赤い文字や英語の羅列に怯える必要はもうありません。この無料講座では、Pythonのエラーメッセージの読み方を「下から上へ」のシンプルなルールで解説し、よく出る10大エラーの原因と対処法を具体的なコード例とともに紹介します。エラーを「敵」から「味方」に変えて、バイブコーディングをもっとスムーズに進めましょう。
無料