Build This Now
Build This Now
クロード・コードとは何か?Claude Code のインストールClaude Code ネイティブインストーラーClaude Code で最初のプロジェクトを作る
speedy_devvkoen_salo
Blog/Handbook/Start here/Your First Claude Code Project

Claude Code で最初のプロジェクトを作る

5分で Claude Code を使った動作するCLIタスクマネージャーを作成します。Write、Bash、Read ツールがリアルタイムで動く様子を確認し、1つのプロンプトでデバッグします。

設定をやめて、構築を始めよう。

AIオーケストレーション付きSaaSビルダーテンプレート。

Published Feb 28, 2026Handbook hubStart here index

5分です。それが Claude Code で最初の動作するアプリを出荷するのに必要な時間です。Hello World はスキップします。毎日実際に使うパーソナルタスクマネージャーを作ります。

クイックウィン: これを貼り付けて始めましょう:

mkdir smart-todos && cd smart-todos && claude

ワークスペースが存在します。Claude Code がその中で起動しています。次に何が起きるか見てみましょう。

Claude に欲しいものをシンプルに伝えます:

プロンプト: 「タスクを追加し、完了にマークし、リストを表示できる CLI タスクマネージャーを作成して。タスクが永続するようにファイルに保存すること。」

全体的なプランが返ってきます。Claude が次を通じて考える様子が見えます:

  • ファイル構造(単一の Node.js アプリ)
  • コアの動作(追加、完了、一覧表示)
  • 永続性(ディスク上の JSON ファイル)
  • インターフェース(クリーンなターミナル出力)

Claude が内部でしていること

このプロンプトはあなたに段落を送り出すテキストジェネレーターではありません。ツールチェーンが動きます。Claude はまず現在のディレクトリを読み込み、何もないことを確認して、プランを構築します: 何を書くか、どの順序で、どの依存関係を取得するか。そして各ファイルに Write ツールを使い、npm init -y を実行してパッケージをインストールするために Bash ツールを使い、書いたものをダブルチェックするために Read ツールを使うこともあります。すべてのツール呼び出しが会話の中でリアルタイムに表示されます。

チャットボットはコードをレスポンスボックスにダンプします。Claude Code は実際にファイルシステムを編集し、ターミナルでコマンドを実行します。ディスク上のファイルは本物です。現れる node_modules フォルダも本物です。

Claude は動作するファイルを直接作成します:

// Claude が tasks.js を自動的に作成します
#!/usr/bin/env node
import fs from 'fs';
import path from 'path';

const TASKS_FILE = path.join(process.cwd(), 'tasks.json');
// ... 完全な動作コードが続きます

すぐに新しいタスクマネージャーをテストします:

node tasks.js add "Claude Code を学ぶ"
node tasks.js add "素晴らしいものを作る"
node tasks.js list

期待される出力:

✓ Added: Claude Code を学ぶ
✓ Added: 素晴らしいものを作る

Your Tasks:
□ 1. Claude Code を学ぶ
□ 2. 素晴らしいものを作る

2分です。 ファイル永続性、エラー処理、きれいな出力フォーマットがすべて動作しており、それが本物のCLIアプリの中にあります。

次は楽しい部分です。会話を通じて改良します。次を試してみてください:

色の追加: 「完了したタスクを緑で、保留中のものを黄色で表示して」

優先度システム: 「優先度レベルを追加して - high、medium、low」

締め切り: 「締め切りを設定できるようにして、期限切れのタスクを赤で表示して」

検索機能: 「キーワードでタスクを検索する機能を追加して」

各リクエストはほぼ瞬時に反映されます。Stack Overflow のタブは不要です。設定のウサギ穴もありません。動作を説明して、それが現れるのを見るだけです。

昔のやり方では、始める前にすべてを知る必要がありました:

  • どのライブラリを選ぶか
  • ファイルをどのようにレイアウトすべきか
  • コマンドライン引数の解析
  • ファイル I/O 操作
  • エラー処理パターン

Claude Code はその摩擦をすべて取り除きます。 結果を説明します。Claude が配管を担当します。

実際に作ったもの:

  • クロスプラットフォームのファイル操作
  • JSON データ永続性
  • 引数解析
  • カラー化されたターミナル出力
  • 適切なエラー処理
  • ユーザーフレンドリーなヘルプメッセージ

このようなプロジェクトは通常、実際のセットアップ時間と依存関係の調査が必要です。ここでは1つのプロンプトでそれが完了しました。

行き詰まっていますか? インストールガイドに詳細なセットアップの手順があります。

Mac または Linux で tasks.js を実行した時の 「Permission denied」:

chmod +x tasks.js

「Module not found」 エラー:

npm init -y && npm install commander chalk

どこからでも実行したいですか? package.json にこれを追加します:

{
  "bin": {
    "todo": "./tasks.js"
  }
}

次に npm link を実行します。これで todo add "任意のもの" がシステム上のどのフォルダからも動作します。

最初の試みが思っていたものと違う場合があります。それは普通のことです。会話型開発はそれを想定しています。

Claude がコードを書いたが、実行するとエラーが出る。 エラーをそのまま Claude Code に貼り付けます。「アプリ実行時にこのエラーが発生した」と言い、完全なスタックトレースを貼り付けます。エラーが読み込まれ、原因が特定され、ファイルが修正されます。ほとんどの初回実行の問題は依存関係の欠落や Node.js のバージョンの不一致です。

アプリは動くが、説明したことをしない。 次のプロンプトをより具体的にします。「うまくいかない」はスキップして、期待したことと実際に起きたことを正確に述べます。「リストコマンドはタスクを追加された順に表示するが、優先度順に並べ替えたい」と伝えると、Claude には具体的な目標が与えられます。曖昧なフィードバックは曖昧な修正につながります。

Claude がファイルを多く作りすぎたり、過剰に設計した。 広いプロンプトがこれを引き起こします。Claude にとって「タスクマネージャー」はデータベース、設定システム、いくつかのモジュールを意味する場合があります。次のパスではスコープを絞ります:「データベースなしの単一ファイルの Node.js スクリプト、タスクは JSON ファイルに保存」。スコープを絞るとコードも絞れます。

Claude がコマンドを実行する前に毎回パーミッションを求める。 これはパーミッションシステムがマシンを守っています。シェルコマンド、パッケージのインストール、プロジェクト外への書き込みで一時停止します。それぞれに「y」を入力して承認するか、既に信頼しているコマンドの自動承認を設定します。

何が起きたか:

  • アイデアを普通の言葉で説明した
  • Claude が完全な動作するアプリを構築した
  • 5分以内に実行している

これが会話型プログラミングです。問題と解決策で考えます。構文と API はスキップします。

タスクマネージャーが動いています。次を試してみましょう:

次のプロンプト: 「ブラウザからタスクを管理できるウェブインターフェースを追加して。CLI も動いたままにして。」

Express サーバーが表示されます。HTML インターフェースも同様です。CLI はそのまま、手を加えられることなく動き続けます。数分でフルスタックアプリの完成です。

または別の方向に進みましょう:

  • アイデアのために実際のプロジェクト例を閲覧する
  • ワークフローに合わせて Claude Code を設定する
  • 何かうまくいかない時はトラブルシューティングを参照する

従来のチュートリアルは構文を教えます。今あなたが手に入れたのは Claude Code 開発パターンです。同じ5ステップのループが CLI ツールにも、フルスタック SaaS にも機能します。

  1. 欲しい結果を説明する。 どうやって構築するかではなく、完成品が何をするかに集中します。「タスクを追加、完了、一覧表示できるタスクマネージャー」は「Commander.js を使い JSON ファイルストアを持つ Node.js スクリプトを作成」よりも良いです。実装の詳細は Claude の問題です。方向付けは後から行います。

  2. Claude にソリューションを設計させる。 あなたの説明がファイル構造、依存関係、ビルド順序に分解されます。ライブラリが選ばれます。パターンが選択されます。1時間の調査が必要だったような小さな決定が何百もあなたのために行われます。どれかに異議があれば、「JSON ファイルの代わりに sqlite を使って」と言えばそれで済みます。

  3. すぐにテストする。 Claude が書き終えた瞬間に出力を実行します。最初に行ごとに読もうとしないでください。本当の問題(依存関係の欠落、ランタイムエラー)は実際に動かすとすぐに現れます。Claude Code に貼り付けたエラーは即座の修正になります。

  4. 会話で機能拡張する。 各フォローアッププロンプトが機能を追加するか動作を調整します。「締め切りを追加して。」「出力をきれいにして。」「検索コマンドを追加して。」既存のコードはその場で変更され、すでに動いているものは動き続けます。このループは、すべての決定が動作中のプロトタイプに対して行われるため、事前に計画するよりも速いです。

  5. 自信を持ってデプロイする。 3〜4回の機能拡張サイクルを経る頃には、アプリは各ステップでテストされています。エッジケースは会話型開発中に浮上しました。Git にプッシュします。出荷します。

このパターンはどんな規模でも機能します。ソロ開発者はこれで丸々 SaaS アプリを構築しています。チームはスプリント計画前の機能プロトタイプに使っています。

本物を作りました。次のステップは Claude Code をあなたの思考に合わせて動作させることです。2つのガイドがそこへ向かう場所です:

Claude Code の設定は設定、パーミッション、モデルの選択をカバーします。信頼済みコマンドの自動承認をオンにし、タスクに応じて Sonnet と Opus を切り替え、ターミナルエクスペリエンスを調整する場所です。

CLAUDE.md ガイドでは、すべてのプロジェクトで Claude の動作を制御するファイルについて説明します。最初のプロジェクト後にできることの中で、これが最も大きなリターンをもたらします。しっかりした CLAUDE.md があれば、コーディング標準が守られ、好みのパターンが使われ、あなたが決定するような方法で決定が行われます。

設定の先には:

  • スキルガイドを読んで Claude にドメインの深い専門知識を与える
  • 大きなタスクで複数の並列エージェントを実行するエージェントの基礎を探索する
  • 何かが壊れた時のトラブルシューティングに飛び込む

Continue in Start here

  • Claude Code のインストール
    Windows、macOS、Linux に2分で Claude Code をインストール。Node.js 不要のネイティブインストーラー、Homebrew、npm の各方法と確認手順を解説します。
  • Claude Code ネイティブインストーラー
    Windows、macOS、Linux、WSL にコマンド一つで Claude Code をインストール。Node.js 不要、npm 不要、PATH 設定不要。自動アップデート付き。npm との比較も紹介。
  • クロード・コードとは何か?
    Anthropicのエージェント型コーディングアシスタントは、ターミナルやIDEで動作し、レポやgitの履歴を読み、承認を得てコマンドを実行する。プランモード、スキル、フック

More from Handbook

  • エージェントの基礎
    Claude Codeでスペシャリストエージェントを構築する5つの方法:タスクサブエージェント、.claude/agents YAML、カスタムスラッシュコマンド、CLAUDE.mdペルソナ、パースペクティブプロンプト。
  • エージェントパターン
    オーケストレーター、ファンアウト、バリデーションチェーン、スペシャリストルーティング、プログレッシブリファインメント、ウォッチドッグ。Claude Code のサブエージェントを組み合わせる6つのオーケストレーション形状。
  • エージェントチームのベストプラクティス
    Claude Code エージェントチームの実証済みパターン。コンテキストが豊富なスポーンプロンプト、適切なサイズのタスク、ファイルオーナーシップ、デリゲートモード、v2.1.33〜v2.1.45 の修正内容。
  • エージェントチームのコントロール
    デリゲートモード、表示モード、プラン承認、ファイル境界、CLAUDE.md ルールを設定して、Claude Code のチームリードがコーディングではなくコーディネートに専念できるようにします。

設定をやめて、構築を始めよう。

AIオーケストレーション付きSaaSビルダーテンプレート。

On this page

Claude が内部でしていること

設定をやめて、構築を始めよう。

AIオーケストレーション付きSaaSビルダーテンプレート。