awesome-hacksClaude Codeのセットアップ手順
Claude Codeをローカル環境で使い始めるための具体的な導入手順
この記事では、Claude Codeを「実際に使える状態」にするまでを、コマンド単位でまとめる。
対象は macOS + zsh（Z Shell、macOSのデフォルトシェル）環境。
先に結論（どこで何をするか）
- Claude Code自体は グローバルインストール（任意のディレクトリで実行可）
- 実際の作業は プロジェクトディレクトリに移動してから 行う
- まずは
sandbox用の練習用ディレクトリで試すと安全
sandbox とは
ここでいう sandbox は、検証専用の作業フォルダという意味。
例: ~/sandbox/claude-code-practice
※ ~/sandbox は説明用の一例。~/work/sandbox や ~/dev/sandbox など、任意の安全な作業ディレクトリで問題ない。
最初に sandbox を作るのは、次の理由があるため。
- 本番リポジトリと分離でき、誤操作の影響を減らせる
- 練習用ファイルだけで試せるので、挙動確認がしやすい
- 慣れていない段階でも、失敗時に作り直しやすい
0. 前提条件
Claude Codeの実行には Node.js（サーバーサイドで動くJavaScriptランタイム）/ npm（Node Package Manager、Node.jsのパッケージ管理ツール）が必要。
node -v
npm -vどちらかが見つからない場合は、先にNode.jsを導入する。
1. 練習用ディレクトリを作る
いきなり本番リポジトリで試さず、まずは検証用ディレクトリを作る。
mkdir -p ~/sandbox/claude-code-practice
cd ~/sandbox/claude-code-practice自分の運用ディレクトリに合わせる場合の例:
mkdir -p ~/work/sandbox/claude-code-practice
cd ~/work/sandbox/claude-code-practice2. Claude Codeをインストールする
グローバルインストール:
npm install -g @anthropic-ai/claude-codeインストール確認:
claude --version
claude --help3. 初回起動と認証
作業したいディレクトリで claude を実行する。
cd ~/sandbox/claude-code-practice
claude初回はログインや利用規約同意などのフローが表示されるので、画面の案内に従って進める。
4. 最初に作るべき設定ファイル（CLAUDE.md）
Claude Codeに「このプロジェクトで守るルール」を渡すため、プロジェクト直下に CLAUDE.md（Claude Codeが自動参照するプロジェクトルール定義ファイル）を置く。
touch CLAUDE.md最小例:
# Project Rules
- 返答は日本語
- 破壊的な操作（大量削除、強制push、reset --hard）は禁止
- コード変更後は lint / test を実行
- 不明点があれば勝手に進めず確認する5. プロジェクトでの基本運用手順
手順1: 作業対象ディレクトリへ移動
cd /path/to/your-project（補足）実コードがない場合は先に最小サンプルを作る
手元に対象コードがない場合は、練習用に最小のNext.js（Reactベースのフルスタックウェブフレームワーク）プロジェクトを作る。
この時点では「Claude Codeが起動し、対象プロジェクトを読める」状態を作ることが目的。
cd ~/sandbox/claude-code-practice
npx create-next-app@latest form-bug-demo --ts --eslint --app --src-dir --import-alias "@/*"
cd form-bug-demo（重要）typecheck スクリプトを先に追加する
このシリーズでは pnpm typecheck を使うため、最初に package.json へ追加しておく。（pnpm：performant npm、高速・省スペースなNode.jsパッケージマネージャー）
pnpm pkg set scripts.typecheck="tsc --noEmit"
pnpm typecheckここまでできれば、セットアップとしては完了。
以降の実践（調査・実装・検証・Git運用）に進む前に、シリーズ共通の練習題材を作る。
（重要）シリーズ共通の練習題材を作る
03〜06 は次の不具合を題材に進める。
- 画面:
/contact - 不具合: email未入力でも送信できる
以下をClaude Codeに貼って、練習用実装を作る。
このNext.jsプロジェクトに、練習用の問い合わせフォーム画面を作ってください。
要件:
- 追加先: src/app/contact/page.tsx
- name と email の2項目を持つフォーム
- わざと不具合として「emailが空でも送信できる」状態にする
- 送信時は alert("submitted") を表示
- まだテストは作らない
変更後、作成したファイル一覧と実装内容を要約してください。作成後、動作確認:
cd ~/sandbox/claude-code-practice/form-bug-demo
pnpm devブラウザで http://localhost:3000/contact を開き、email空で送信できることを確認する。
手順2: Claude Codeを起動
claude手順3: 起動確認の依頼を1つ実行
まずは軽い依頼で、プロジェクトを認識できているか確認する。
Claude Codeへの依頼例（そのまま貼ってOK）:
このリポジトリ構成を確認して、主要ディレクトリの役割を要約してください。
まだファイル編集はしないでください。この時点で期待する状態:
- Claude Codeが対象プロジェクトを読み取れている
- 指示した制約（編集しない）を守っている
- 返答フォーマットが意図どおり
6. よくあるつまずき
claude: command not found
グローバルインストール先のPATH（OSがコマンドを検索するディレクトリの一覧を定義する環境変数）が通っていない可能性が高い。
一度新しいターミナルを開いて再試行し、それでも解決しなければnpmのglobal bin pathを確認する。
Nodeのバージョンが古い
Node.jsを更新してから再インストールする。
いきなり大きい修正をさせてしまう
最初は「調査のみ」→「小さい変更」→「テスト」の順に進めると失敗しにくい。
7. 本番運用に入る前のチェックリスト
- 練習用ディレクトリで一連の動作確認をした
CLAUDE.mdに禁止事項と開発ルールを書いた- 検証コマンド（lint/test/build）の実行手順を決めた（詳細は
05で整備） - 本番系コマンドを都度承認にする方針を決めた（詳細は
08で整備）