Claudeコード入門：五分でアプリ作成からデプロイまで完了するCLI開発実践ガイド
お疲れ様です！IT業界で働くアライグマです！
「Cursorもいいけど、もっとターミナルから離れずに開発したい」
「個人の小さなツールを作るのに、わざわざIDEを開くのが面倒」
「デプロイの設定、毎回忘れて調べ直していませんか？」
エンジニアなら誰しも、黒い画面（ターミナル）だけで全てを完結させたいという欲求を持ったことがあるはずです。
そんな願いを叶える強力なツールが登場しました。Anthropic公式のCLIツール、Claude Codeです。
正直なところ、最初は「また新しいAIエディタか」と思っていました。
しかし、実際に使ってみて驚愕しました。これはエディタではありません。ターミナルの中に住む、腕利きの開発パートナーです。
コードを書くだけでなく、コマンドを実行し、エラーが出れば修正し、Gitコミットし、あまつさえGitHub Pagesへのデプロイまで自律的にやってのけるのです。
本記事では、このClaude Codeを使って、実際にTODOアプリをゼロから作成し、インターネット上に公開するまでの手順を完全実況します。
所要時間はたったの5分（デプロイ待ち時間を除く）。
このスピード感を一度味わうと、もう元の開発フローには戻れないかもしれません。
私が普段使っている開発マシンのファンが唸る間もなく、アプリが完成してしまうのですから。
Claude Codeとは？ターミナルに住むAIエージェント
Claude Codeは、Anthropicが提供する「エージェント型コーディングツール」です。
従来のAIコーディングアシスタント（Copilotなど）が「IDEの中でコードを補完する」ものだったのに対し、Claude Codeは「ターミナルの中で開発プロセス全体を実行する」ものです。
Gemini3が変えるAI開発の常識でも触れたように、AIは単なるチャットボットから「エージェント」へと進化しています。Claude Codeはその最前線に位置するツールと言えるでしょう。
実行権限を持つことの意味
最大の特徴は、「実行権限」を持っていることです。
Claude Codeは、ファイルを編集するだけでなく、ls でファイルを探し、grep でコードを検索し、npm test でテストを回します。
そしてエラーが出れば、そのログを読んで勝手に修正案を考え、適用します。
これは、私たちが普段手作業で行っている「試行錯誤」のプロセスそのものを代行してくれることを意味します。
私がPjMとして管理しているプロジェクトでも、環境構築の手順書更新や、細かなバグ修正といったタスクをClaude Codeに任せてみたところ、驚くべき自律性を発揮しました。
「指示を出して放置しておけば、いつの間にか終わっている」。これこそが、私たちが求めていたAI開発の姿ではないでしょうか。
MCPによる拡張性
さらに、Claude CodeはMCP（Model Context Protocol）に対応しているため、外部ツールとの連携も可能です。
ローカルのドキュメントやデータベースを読み込ませることで、より文脈に沿ったコーディングが可能になります。
これにより、単なるコード生成だけでなく、仕様書に基づいた実装や、既存のデータベーススキーマに合わせたクエリの生成などがスムーズに行えます。
AIの仕組みをより深く理解したい方は、大規模言語モデルの書籍を読んでおくと、ツールの挙動がより深く理解できるはずです。なぜ彼らが「考えている」ように見えるのか、その裏側を知ることはエンジニアとしての基礎体力になります。
環境構築からHello Worldまで：3分で終わるセットアップ
では、さっそく使ってみましょう。
前提として、Node.jsがインストールされている環境が必要です。
バージョン管理にはVoltaやfnmを使うのがおすすめですが、今回はシンプルに進めます。
また、Gitの設定（user.name, user.email）が済んでいることも確認しておいてください。
インストールと認証
ターミナルを開き、以下のコマンドを実行します。
npm install -g @anthropic-ai/claude-code
claude authブラウザが開き、Anthropicのアカウント認証を求められます。承認すれば準備完了です。
これだけです。面倒なAPIキーのコピペや設定ファイルの作成は必要ありません（初回はベータ版のWaitlist登録が必要な場合があります）。
もし認証でつまづいた場合は、一度ブラウザのキャッシュをクリアするか、シークレットウィンドウで試してみてください。
また、企業ネットワーク内などでプロキシ環境下にいる場合は、適切な環境変数（HTTP_PROXYなど）の設定が必要になることがあります。
最初の指令
プロジェクト用のディレクトリを作成し、Claude Codeを起動します。
mkdir my-todo-app
cd my-todo-app
claudeすると、ターミナルが対話モードに切り替わります。
ここで、「ReactでHello Worldを表示するアプリを作って」と入力するだけで、必要なパッケージのインストールからファイルの作成まで、全て自動で行われます。
この手軽さは、GitHub Copilotでチームの生産性が低下する？で議論したような「導入のハードル」を極限まで下げてくれます。
チームメンバー全員がこの環境を持っていれば、「ちょっと試してみる」という文化が根付きやすくなるでしょう。
開発効率を上げるには、ハードウェア環境も重要です。LG Monitor モニター ディスプレイ 34SR63QA-W 34インチ 曲面 1800Rのような広い画面があれば、ログとコード、そしてブラウザのプレビューを同時に確認でき、AIとのペアプログラミングが捗ります。
実践：TODOアプリ作成からデプロイまで
ここからが本番です。シンプルなTODOアプリを作り、GitHub Pagesで公開するまでを、Claude Codeだけでやってみます。
n8n実践ガイドで紹介したようなワークフロー自動化とは異なり、こちらは「コーディング作業そのもの」の自動化です。
ステップ1: アプリの実装
Claude Codeに対して、以下のプロンプトを投げます。
プロンプトは具体的であればあるほど、手戻りが少なくなります。
ReactとViteを使って、シンプルなTODOアプリを作ってください。
以下の要件を満たすこと：
1. タスクの追加、削除、完了チェックができる。
2. タスクはローカルストレージに保存され、リロードしても消えない。
3. デザインはTailwindCSSを使ってモダンでシンプルに。ダークモード対応ならなお良し。
4. コンポーネントは小さく分割して、保守性を高く保つこと。
Claude Codeは、npm create vite@latest を実行し、コンポーネントを作成し、CSSを当てていきます。
途中、「サーバーを起動して確認しますか？」と聞かれるので Yes と答えると、ローカルホストで動作確認までしてくれます。
もしエラーが出ても、Claude Codeがログを読み取って「パッケージが足りませんでした、インストールします」と自己修復してくれます。この体験は感動的です。
ステップ2: デプロイの自動化
アプリができたら、公開です。ここもClaude Codeに頼ります。
これをGitHub Pagesにデプロイしたい。必要な設定とコマンド実行を全部やって。
リポジトリ名は 'claude-todo-demo’ でお願いします。
もしリポジトリが既にある場合は、エラーを出さずに適切に処理して。
Claude Codeは以下のアクションを次々と実行します。
git initと.gitignoreの作成gh repo create(GitHub CLIがなければインストールを提案、あるいはブラウザでの作成を案内)package.jsonにデプロイ用スクリプト（gh-pagesなど）を追加npm run deployの実行
私たちはただ、画面を眺めて時々 Enter を押すだけです。
まるで熟練のDevOpsエンジニアが隣にいて、代わりにコマンドを叩いてくれているような安心感があります。
AIへの指示出し（プロンプト）のコツを掴めば、さらに複雑なアプリも作れるようになります。プロンプトエンジニアリングの教科書で学ぶことで、AIをより自在に操れるようになるでしょう。
以下のグラフは、従来の手作業による開発と、Claude Codeを使った場合の所要時間を比較したものです。
デプロイ設定や環境構築にかかる時間が大幅に圧縮されていることがわかります。
VS Code/Cursorとの使い分け戦略
「じゃあもうVS CodeやCursorはいらないの？」というと、そうではありません。
それぞれのツールには得意分野があり、適材適所で使い分けるのが賢いエンジニアの戦略です。
フェーズによる使い分け
私は以下のように使い分けています。
- Claude Code (0→1): 新規プロジェクトの立ち上げ、定型的なタスク処理、リファクタリング、環境構築、デプロイ。特に「ディレクトリ構造を作る」「設定ファイルを書く」といった面倒な作業に最適です。
- Cursor (1→10): 複雑なロジックの記述、大規模なコードベースの探索、デバッグ時の詳細なコードリーディング。CursorとMCP統合実践でも書いたように、コードの詳細な文脈を理解しながら、細部を作り込む作業にはIDEの補完機能が欠かせません。
私は、「0から1」を作るフェーズではClaude Codeを使い、「1から10」に育てるフェーズではCursorを使うという使い分けをしています。
例えば、ベースとなるアプリの骨格とCI/CDパイプラインはClaude Codeに作らせ、その後の機能追加や細かいチューニングはCursorで行う、といった具合です。
また、外出先でラップトップしか持っていない時は、ターミナルだけで完結するClaude Codeが重宝します。
以前、プロダクトマネージャーのための技術理解術でも書きましたが、ツールに使われるのではなく、ツールの特性を理解して使いこなすことが重要です。
アーキテクチャの基礎を理解しておくと、どちらのツールを使う場合でも、より適切な指示が出せるようになります。ソフトウェアアーキテクチャの基礎は、どのような開発環境でも通用する不変の知識を与えてくれます。
まとめ
Claude Codeは、ターミナル派のエンジニアにとって夢のようなツールです。
「コマンドを打つ」という行為そのものをAIが代行してくれるため、私たちは「何を作るか」という本質的な作業に集中できます。
これまでは「やりたいこと」があっても、環境構築やツールの使い方を調べることに時間を奪われていましたが、その障壁が取り払われたのです。
今回のポイント：
- 環境構築不要:
npm installだけで使い始められる手軽さ。 - 自律的な行動: コマンド実行からエラー修正までAIが自走する頼もしさ。
- 圧倒的なスピード: アプリ作成からデプロイまで5分で完結可能な生産性。
ぜひ皆さんも、今すぐターミナルを開いて claude と打ち込んでみてください。
そこには、頼れる新しい相棒が待っています。
そして、そのスピード感に酔いしれてください。
もしこの記事が役に立ったら、SNSでシェアしていただけると嬉しいです。
現場からは以上です！