Claude Codeの使い方をゼロから解説｜動かしながら覚える最短ルート

タク

Claude Codeって聞いたことあるんですけど、難しそうで手が出せなくて…

Ren

実は僕も最初はそう思ってた。でも動かしてみたら、チャット版Claudeとは全然別の感覚で、開発が一気に楽しくなったんだ

こんにちは！Renです！

Claude Codeを使ってみたいけど、何から始めればいいか分からない。そんな人は多いと思います。

実は、AIの進化スピードに追いつくには、座学よりも実際に動かして学ぶのが圧倒的に速い。

この記事では、インストールから最初のアプリ完成まで、スクリーンショット付きで丁寧に解説します。

Claude Codeを試してみたいが、何から始めるか分からない

プログラミング初心者だけど、アプリを自分で作ってみたい

ディレクトリ構成や設定ファイルの意味を知りたい

バイブコーディングって何か、実際に体験したい

一つでも当てはまったら、ぜひ読んでみてください。

AIは「動かしながら学ぶ」が圧倒的正解
Claude Codeとは？チャット版との違いを3分で理解する
インストール方法【5分で完了】
1. 前提：Node.jsが必要
2. インストール手順
最初に作るべきディレクトリ構成
はじめての開発：簡単なアプリを作ってみよう
CLAUDE.mdと.claude配下のファイルを育てる
これを繰り返してバイブコーディングに慣れよう
まとめ：今日からClaude Codeを動かそう

AIは「動かしながら学ぶ」が圧倒的正解

まず大前提として、一つ言いたいことがあります。

Claude Codeの使い方を完璧に覚えてから始めようとしないでください。

タク

え、でもちゃんと理解してから使った方がいいんじゃないですか？

Ren

AIツールは月単位で進化してる。完璧に理解しようとした頃には、もう仕様が変わってるんだよ。分からなくてもまず動かす、それが一番の近道

動かしながら学ぶべき3つの理由

① AIの進化スピードは速く、座学の内容がすぐ陳腐化する
② 実際に手を動かすことで、疑問が具体的になり解決が早い
③ 小さな成功体験が積み重なり、継続しやすい

この記事でも、まず簡単なアプリを一つ作ってみることを最終ゴールに設定しています。難しく考えず、一緒に手を動かしていきましょう。

Claude Codeとは？チャット版との違いを3分で理解する

使い始める前に、Claude Codeが何者かだけ把握しておきましょう。

Claude Codeとは

ターミナル（黒い画面）上で動作するAIコーディングエージェント。チャットで指示を出すと、ファイルの作成・編集・コマンドの実行まで自律的にやってくれる。

項目	チャット版Claude	Claude Code
操作場所	ブラウザ	ターミナル
ファイル操作	手動でコピペが必要	自動で作成・編集
コマンド実行	できない	自動で実行
向いている用途	質問・文章作成・調査	アプリ開発・コード作成

Ren

チャット版だとコードを貼って、自分で保存して、また貼って…って繰り返しが必要。Claude Codeはそれを全部自動でやってくれる。開発効率が全然違う

チャット版との使い分けについては、ClaudeCodeは初心者に向いてない？学習効率を比較してわかった真実でも詳しく解説しているので、気になる方はチェックしてみてください。

インストール方法【5分で完了】

難しそうに見えるかもしれませんが、コマンドを3行打つだけです。

前提：Node.jsが必要

Claude Codeを動かすには、Node.js（バージョン18以上）が必要です。まず確認しましょう。

ターミナルを開いて、以下を入力してください。

node -v

「v18.0.0」以上の数字が表示されればOKです。表示されない場合はNode.js公式サイトからインストールしてください。

ターミナルの開き方

・Mac: Spotlight（⌘+スペース）で「ターミナル」と検索
・Windows: スタートメニューで「PowerShell」または「コマンドプロンプト」を検索

インストール手順

Step1	Claude Codeをインストールターミナルで以下を実行します。 `npm install -g @anthropic-ai/claude-code` 少し時間がかかりますが、待つだけでOKです。
Step2	プロジェクトフォルダに移動作業したいフォルダに移動します。 `cd ~/Desktop/my-project` （フォルダがなければ事前に作っておきましょう）
Step3	Claude Codeを起動以下を実行するとClaude Codeが起動します。 `claude` 初回起動時にAnthropicアカウントでのログインを求められます。
Step4	ログインして完了ブラウザが開くのでAnthropicアカウントでログイン。ターミナルに戻ると入力待ち状態になります。これで準備完了です。

よくある躓きポイント

・「command not found」と出る → Node.jsがインストールされていない
・「permission denied」と出る → コマンドの先頭に sudo をつけて再実行
・ログイン後に何も起きない → ターミナルをクリックして入力待ち状態を確認

タク

エラーが出たらどうすればいいですか？

Ren

そのままエラーメッセージをコピーしてClaude Codeに貼り付けて「このエラーを解決して」って聞けばOK。起動前なら普通のClaude（チャット版）に聞いてもOK。分からないことはその場で解決するのが一番大事

最初に作るべきディレクトリ構成

インストールが終わったら、次はプロジェクトの「骨格」を作ります。

この構成を最初に整えておくことで、Claude Codeが状況を正確に把握しやすくなり、指示の精度が上がります。

タク

ディレクトリ構成って自分で全部作らないといけないんですか…？

Ren

それもClaude Codeに作ってもらえばOK。「以下のディレクトリ構成を作って」って渡すだけで全部やってくれる

推奨ディレクトリ構成

my-project/
│
├── CLAUDE.md                    # Claudeが毎セッション自動読み込みする指示書（最重要）
├── CLAUDE.local.md              # 自分だけの設定（gitignoreに追加して管理）
│
├── .claude/
│   ├── settings.json            # パーミッション設定
│   ├── commands/                # スラッシュコマンド置き場
│   │   ├── implement.md         # /project:implement で呼び出せる
│   │   └── review.md            # /project:review で呼び出せる
│   ├── rules/                   # CLAUDE.mdを分割したルール集（自動読み込み）
│   │   ├── code-style.md        # コーディング規約
│   │   └── testing.md           # テスト方針
│   └── skills/                  # 関連作業時だけ読み込まれる知識ファイル
│
├── .mcp.json                    # 外部ツール（GitHub・DBなど）との連携設定
│
├── docs/
│   ├── requirements.md          # 要件定義（ここに作りたいものを書く）
│   ├── plan.md                  # 実装計画・作業ログ
│   └── architecture.md          # 設計・構成メモ
│
└── src/                         # ソースコード本体

以下のようにClaudeCodeにディレクトリ作成指示を出しました。

１分ほどでディレクトリ作成が完了しました。

各ファイルの役割を理解しよう

ファイル	役割	最初の設定量
CLAUDE.md	Claudeへの指示書。毎回自動で読み込まれる	最低限でOK
.claude/rules/	コーディング規約・テスト方針など汎用ルール	最低限でOK
.claude/commands/	繰り返す作業をコマンド化して呼び出せる	慣れてから追加
.claude/skills/	特定作業のときだけ読み込まれる知識ファイル	まずは公式のものを利用
docs/requirements.md	作りたいものの要件定義。開発の出発点	しっかり書く

最初は最低限の設定でOK。使いながら育てていくイメージ。

完璧な設定を目指して手が止まるより、まず動かして、気づいたことを追加していく方がずっと早く成長できます。

Skillsは最初、Anthropic公式をそのまま使おう

Skillsファイルとは、特定の作業をするときだけClaude Codeに読み込ませる知識ファイルです。

最初から自分で作る必要はありません。AnthropicがGitHubで公式のSkills（https://github.com/anthropics/skills）を公開しているので、それをダウンロードして.claude/skills/に置くだけでOK。

Skillsの育て方

① まずAnthropicの公式Skillsをそのまま使う
② 使いながら「このプロジェクトならこんな知識が必要」と気づく
③ 慣れてきたら自分でカスタムSkillsを作成する

はじめての開発：簡単なアプリを作ってみよう

準備ができたら、いよいよ開発です。

まず目標はシンプルに。PC内で動く小さなアプリを一つ完成させること。ToDoリストや簡単な計算ツールなど、何でも構いません。

Step1：docs/requirements.mdに要件を書く

開発の出発点はdocs/requirements.mdです。ここに「作りたいもの」を書きます。

難しく考えなくてOK。箇条書きで構いません。

requirements.mdの記載例：
# ToDoリストアプリ要件定義

## 概要
シンプルなToDoリストアプリ。ターミナル上で動作する。

## 機能
・タスクを追加できる
・タスクの一覧を表示できる
・タスクを完了済みにできる
・完了済みタスクを削除できる

## 使用言語
Python（シンプルなものでOK）

要件定義のコツ

・完璧な要件書を目指さない
・「何ができるか」をシンプルに書くだけでOK
・あとから修正・追加するのは当たり前
・分からない部分はClaude Codeに相談しながら決めればいい

Step2：Claude Codeに実装を依頼する

requirements.mdが書けたら、Claude Codeにそのまま渡します。

Claude Codeへの指示例：
「docs/requirements.mdを読んで、要件に沿ったアプリを実装してください」

これだけです。Claude Codeがrequirements.mdを読み込み、ファイルを作成し、コードを書き始めます。

今回はわずか10秒で簡単なアプリが出来上がりました。

タク

作業中にわからない言葉が出てきたら、どうすればいいですか？

Ren

そのままClaude Codeに聞けばいい。「このコードの〇〇ってどういう意味？」って聞くと、ちゃんと説明してくれる。わからないことをその場で解決する癖が、一番の近道だよ

現代はAIを使いながらIT知識を身につける時代です。

おすすめの勉強法はAIを使えばプログラミング学習効率が3〜5倍に！でも9割が知らない「正しい順序」で解説しています。

Step3：完成したものをレビューする

実装が終わったら、実際に動かしてレビューします。

この「レビュー」がとても重要です。Claude Codeが作ったものを盲目的に信用しない。

要件通りの動作をするか確認する

エラーや不具合がないか試してみる

コードを眺めて、大まかな流れを把握する

「なぜこの実装にしたのか」を必要に応じて質問する

よくある失敗

動いているからOK、と中身を確認しないのは危険。Claude Codeでブラックボックス化が起きる原因の多くは「動いたからOK」でレビューをスキップすること。

ブラックボックス化の問題については、非エンジニアがClaude Codeを使うとなぜブラックボックス化するのかで詳しく解説しています。

Step4：修正依頼を出す

レビューしたら、気になった部分を修正してもらいます。難しく考えなくてOK。

修正依頼の例：
・「タスクを追加したあと、一覧が自動でソートされるようにしてほしい」
・「エラーメッセージの文言をもっと分かりやすくして」
・「完了済みのタスクをグレーアウトして表示したい」

普通の日本語で大丈夫です。Claude Codeが意図を理解して修正してくれます。

CLAUDE.mdと.claude配下のファイルを育てる

開発を繰り返すうちに、気づくことが増えてきます。

「毎回同じ指示を出してるな」「この作業、毎回手間だな」という感覚が出てきたら、それがCLAUDE.mdや.claude配下のファイルを育てるサインです。

気づいたことをメモしておく

開発中に「これは毎回必要だな」と思ったことは、すぐメモしておくのがコツです。

メモしておきたいことの例：
・毎回「コメントは日本語で書いて」と言っている
・「エラーが出たら原因を説明してから修正して」をいつも指示する
・「実装前に計画を提示して確認を取って」を必ず言う
・コードのインデントを4スペースに統一したい

メモをClaude Code自身に追記させる

メモが溜まったら、自分でファイルを編集する必要はありません。

「このメモをCLAUDE.mdに追記して」とClaude Codeに指示するだけでOK。自分でテキストを書く手間が省けます。

追記を依頼するときの注意点

Claude Codeが追記した内容は、必ず自分でチェックしてください。意図と違う表現になっていたり、余計な情報が入ることがあります。盲目的に信用せず、追記後は必ず読み直す癖をつけましょう。

どのファイルに何を追記するか

慣れてきたら、内容に応じて書く場所を分けると管理しやすくなります。

ファイル	追記すべき内容	性質
CLAUDE.md	このプロジェクト固有のルール・背景・よく使う指示	プロジェクト専用
.claude/rules/code-style.md	命名規則・インデント・コメント方針など	汎用（再利用可）
.claude/rules/testing.md	テストの書き方・カバレッジ方針など	汎用（再利用可）
.claude/commands/	繰り返す作業フロー（実装→レビューなど）	汎用（再利用可）
.claude/skills/	特定技術の知識・使い方メモ	汎用（再利用可）