Claude Code 入門チュートリアル

Claude Code をインストールしてサインイン

ターミナルのコマンド1つで CLI を導入し、ブラウザでサインインしてプランを接続します。

1. 1

   インストールページを開いてスクリプトをコピー

   Claude Code のホームページでコピーボタンからインストールスクリプトを取得し、ターミナルで実行します。Windows ユーザーは PowerShell 版を使います。うまく動かない場合は、後述の npm 経路が確実な代替手段です。

   

2. 2

   Node.js のインストールを確認

   npm からのインストールには Node が必要です。不安なら nodejs.org からインストーラーを入手し、node -v で確認しましょう。バージョン番号が表示されれば OK です。

   

3. 3

   claude を実行してアカウントを接続

   claude と入力して Enter。テキストテーマを選び、サインイン方法を選択します——Claude サブスクリプション（Pro・Max・Team）か、API 利用従量課金の Anthropic Console アカウントです。ブラウザでの認証が終わるとウェルカム画面に到達します。

   

4. 4

   VS Code の中で Claude Code を開く

   ターミナル単体でも使えますが、本領を発揮するのはエディタ統合です。VS Code でプロジェクトを開き、新しいターミナルを作り、claude と入力して 1 を押せばディレクトリを信頼します。開いているファイルや差分を Claude が把握できるようになります。

   

plan モードで最初のアプリを作る

コードを書く前に、Claude に「ヒアリング」させましょう。

1. 5

   要件は箇条書きで書く

   曖昧なプロンプトは曖昧なアプリしか生みません。実際の要件を箇条書きにし、「ask me questions to clarify the requirements...」という一文を加えて、Shift+Tab を押してフッターが plan mode になるまで切り替えます。plan モードの Claude はコードを書かず、調査と質問に徹します。

   

2. 6

   Claude の質問に答える

   plan モードは番号付きの質問を返してきます——技術スタック、ストレージ、追加機能など。数字キーで答え、左右の矢印キーで質問を移動し、Enter で送信します。このヒアリングが曖昧なアイデアを実装可能な仕様に変えます。

   

3. 7

   実装プランをレビューする

   Claude は概要、主要機能、技術スタック、データモデル、プロジェクト構成、実装ステップからなるプランを生成します。納得できない判断がないか読み込みましょう——デモでは TypeScript が必要な場面で JavaScript が選ばれていました。フィードバックを選ぶと Claude がプランを書き直します。

   

4. 8

   プランを承認し、編集モードを選ぶ

   オプション 1 は全編集を自動承認、オプション 2 はファイルごとに確認します。最初は手動承認が安全ですが、すぐ面倒になります。早めのコミットを習慣づければ「自動承認 + git ブランチ」が現実的な落とし所です。

   

5. 9

   コマンド実行時に承認する

   デフォルトでは Claude はインストール、ビルド、開発サーバーなど全コマンドの前に確認を求めます。信頼できるパッケージインストールには「このフォルダーでは npm install を再度確認しない」オプション 2 が合理的です。動画の作者は開発サーバーだけは別ターミナルで自分で起動する派だと言っています。

   

6. 10

   生成されたアプリを実際に試す

   デモで作られるのはオフィスの家事管理アプリです。カレンダー表示、チームメンバー、繰り返し家事。実際の UI を操作してみましょう——家事を追加し、毎週繰り返しに設定し、週表示を確認します。次に直すべき小さなバグがここで見つかります。

   

CLAUDE.md でプロジェクトを教える

毎セッション読み込まれる 1 つのファイルが、Claude にプロジェクトを教えます。

1. 11

   CLAUDE.md の 3 層構造を理解する

   CLAUDE.md は毎回の Claude セッションに注入されるので、普遍的に使える指示だけを書きます。3 つの層とは WHAT（技術スタック・構成・主要ファイル）、WHY（各コンポーネントの目的）、HOW（変更ごとにテストを実行する、など Claude への働き方の指定）です。

   

2. 12

   /init で生成してから手を入れる

   /init はコードベースから CLAUDE.md を自動生成します。ただし動画の指摘どおり、デフォルトの出力は 3 層構造になっていません。what/why/how とプログレッシブディスクロージャー（詳細 markdown への索引）を求めるプロンプトを貼り付けるのがおすすめです。

   

3. 13

   ハウスルールを追加する——「まずブランチ」

   生成されたファイルは普通のドキュメントとして編集します。デモでは 1 行追加しました：新機能やバグ修正では必ず最初に git ブランチを作る。以降、Claude は自律的にブランチを切ります。編集の自動承認を許す前に欲しい保険そのものです。

   

安全に速くする

速度のために権限をスキップ、安全網は git で。

1. 14

   bypass permissions の正体を知る

   claude --dangerously-skip-permissions を付けて起動すると、Claude はコマンド実行前に確認しなくなります。動画の言い方は正直です：リスクは本物だが、信頼できるループなら速度の見返りは大きい。フラグなしでも Shift+Tab でモードを切り替えられます。

   

2. 15

   本物のアーキテクチャ変更を納品する

   最終デモは、家事データをタブ間でリアルタイム同期する変更。Claude は探索し、3 つの選択肢（ポーリング、WebSocket、BroadcastChannel）を計画し、バイパスモードのまま WebSocket サーバーを無人で構築します。並べた 2 つのブラウザが同期を証明——これが explore・plan・code・commit ループの成果です。

   

さらに学ぶ