8月1日、Collabnixが「Building a Full-Stack Application with Claude Code: A Comprehensive Guide」と題した記事を公開した。複数ファイルにまたがる変更をプロンプト1つで実行し、ブランチ作成からコミット・プッシュまでのGit操作をターミナル内で完結させる——AnthropicのAIコーディングエージェント「Claude Code」を使ってReact＋Node.js/Expressのフルスタックアプリケーションを構築する手順を、実際のコードを交えながら詳しく解説している。
Claude Codeとは
Claude Codeは、Anthropicが2025年5月に一般提供（GA）を開始したターミナル上で動作するAIコーディングエージェントだ。単なるコード補完ツールではなく、コードベース全体の理解、複数ファイルの同時編集、コマンド実行、Git操作までをターミナル内で完結させる。バックエンドモデルはClaude 3.5 SonnetおよびClaude Sonnet 4を使用している。
インストールはmacOS/Linuxならコマンド1行で済む。
curl -fsSL https://claude.ai/install.sh | bash
WindowsはPowerShellから：
irm https://claude.ai/install.ps1 | iex
HomebrewやNPMでも導入できるが、NPM経由のインストールは非推奨（deprecated）とされており、最新機能が使えない可能性があるため避けた方がよい。
最も実用的なポイント：複数ファイルの一括編集とGit操作の自動化
この記事の中で特に注目されるのが、複数ファイルにまたがる変更をプロンプト1つで実行できる点だ。
例えば、プロジェクト全体で使用しているパッケージのバージョンを一括更新したい場合、Claude Codeのインタラクティブセッション（claude コマンドで起動）上で以下のように自然言語で指示するだけでよい。
Update all instances of lodash usage to version 4.17.21 across all files
Claude Codeがコードベースのコンテキストを理解した上で、対象ファイルを横断して変更を適用する。手作業でのgrep＆replaceや、ファイルを一つひとつ開いて修正する作業が不要になる。
Git操作の自動化も同様に強力だ。ブランチ作成・コミット・プッシュといった一連の操作を、セッション内で続けて指示できる。
Create a new branch called feature/api-integration, stage all changes, commit with the message 'Integrate front-end with back-end', and push to origin
Claude Codeが各Gitコマンドを順に実行し、スプリント中にウィンドウを切り替えることなく、一連のGit操作をターミナル内で完結させられる。
ハンズオンの構成：フルスタックアプリの構築手順
記事ではReact（フロントエンド）＋Node.js/Express（バックエンド）の構成でアプリを構築する手順を解説している。
フロントエンドのセットアップはCreate React Appで雛形を生成する。
npx create-react-app my-app
cd my-app
npm start
http://localhost:3000 でReactアプリが起動する。
バックエンドのセットアップではExpressサーバーを別ディレクトリに用意する。
mkdir backend && cd backend
npm init -y
npm install express
server.js に以下を記述してポート3001で起動する。
const express = require('express');
const app = express();
const port = 3001;
app.get('/', (req, res) => {
res.send('Hello World! This is your Express server.');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
フロントエンドとバックエンドの接続ではCRUD操作に対応したAPIエンドポイントを設定する。
app.get('/api/resource', (req, res) => { res.send('Retrieve a resource'); });
app.post('/api/resource', (req, res) => { res.send('Create a new resource'); });
app.put('/api/resource/:id', (req, res) => { res.send('Update a resource'); });
app.delete('/api/resource/:id', (req, res) => { res.send('Delete a resource'); });
フロントエンドからはfetch APIやAxiosでこれらのエンドポイントを呼び出す構成だ。
MCP（Model Context Protocol）による拡張
Claude CodeはAnthropicが策定した**Model Context Protocol（MCP）**をサポートしており、コア機能を外部ツールで拡張できる。
MCPを活用すると、例えばGitHubやJiraといった外部サービスをClaude Codeのセッションから直接操作したり、CIパイプラインのトリガー、クラウドリソースの参照などを自然言語で指示したりすることが可能になる。公式のMCPサーバー一覧にはGitHub・Slack・PostgreSQLなど主要サービスの実装が公開されており、claude mcp add コマンドでプロジェクトへ追加できる。複雑な開発エコシステムへの組み込みを想定した機能であり、チーム固有のワークフローに合わせてClaudeの動作をカスタマイズする際に有用だ。
注意点
記事ではいくつかの落とし穴にも言及している。
- フロントエンド（3000番ポート）とバックエンド（3001番ポート）でポートが競合しないよう設定を確認すること
- NPM経由のClaude Codeインストールは非推奨のため、公式のインストールスクリプトを使うこと
- Claude Codeによる自動変更は、適用前にdiffを確認する習慣をつけること
詳細はBuilding a Full-Stack Application with Claude Code: A Comprehensive Guideを参照していただきたい。
