秘書アプリ開発
開発の実践
Claude Codeへの指示の出し方、Node.jsの導入確認、ローカルサーバーの起動とエラー対処、そして実際に秘書アプリを作ってみるところまでを、実際に手を動かしながら覚える
はじめに
前回は、秘書アプリのプロジェクトフォルダに何があるのか、秘密情報をどう守るのか、ビルド・デプロイ・ローカルサーバーとは何かという「地図」を確認しました。今回はいよいよ、その地図を手に、実際にアプリを動かしていく回です。
とはいえ、あなたがコードを1行ずつ書く必要はありません。中心になるのは「Claude Codeにどう指示を出すか」です。加えて、開発の土台となるNode.jsの準備と、手元でアプリを動かすローカルサーバーの起動・トラブル対処までを、この回でひと通り体験します。
Claude Codeに指示をして秘書アプリを作成する流れ
「会話」で作るという考え方
秘書アプリ開発では、コードを一行ずつ自分の手で書くことはありません。あなたの役割は、Claude Codeに「こんな機能がほしい」「ここをこう直したい」と日本語で伝えることです。実際にコードを組み立てるのはClaude Codeの仕事です。
日本語で伝える
コードを実装する
アプリになる
プログラミングの知識よりも、「何を作りたいのか」「今どういう問題が起きているのか」を、はっきり言葉にできることの方が大切です。
良い指示の出し方
同じ「直してほしい」という気持ちでも、伝え方次第でClaude Codeの理解度は大きく変わります。「何を」「いつ」「どうなってほしいか」を具体的に伝えるのがコツです。
| ぼんやりした指示 | 具体的にした指示 | ポイント |
|---|---|---|
| 「いい感じにして」 | 「送信ボタンを押したら、入力欄を空にして、完了メッセージを3秒間だけ表示して」 | 「何を」「いつ」「どうなるか」を言葉にする |
| 「バグを直して」 | 「送信ボタンを2回連続で押すと、同じメッセージが2件送信されてしまう」 | 起きている現象をそのまま伝える |
| 「もっと良くして」 | 「入力欄をもう少し大きくして、文字サイズを16pxにして」 | できるだけ数値や具体例で伝える |
最初から完璧な指示を出す必要はありません。「なんとなくこう動いてほしい」というイメージを伝えるだけでも、Claude Codeから「こういうことですか？」と確認が返ってくることがあります。そこでやり取りしながら詰めていけば十分です。
指示→実装→確認のサイクル
秘書アプリ作りは、一度の指示で完成させるものではありません。次の4ステップを何度も繰り返しながら、少しずつ理想の形に近づけていきます。
ほしい機能や直したい点を、日本語でそのまま伝えます。
指示の内容をもとに、必要なファイルの作成・修正を行ってくれます。
頭の中で想像するだけでなく、必ず自分の目で動きを確認します（起動方法は第3章）。
「思っていたのと違う」「ここはこうしたい」を伝えて、また指示→実装→確認を繰り返します。
小さく試して、小さく直す。このサイクルを繰り返すことが、秘書アプリを育てていく一番の近道です。
アプリ開発の前提となるNode.jsの確認と導入手順
Node.jsとは何か
秘書アプリのようなアプリ開発では、多くの場合Node.js（ノードジェイエス）という土台ソフトがパソコンに入っている必要があります。Node.jsは、本来ブラウザの中でしか動かないJavaScriptを、パソコン単体でも動かせるようにする仕組みです。ローカルサーバーの起動や、必要な部品（パッケージ）のダウンロードにも使われます。誰でも無料でダウンロードして使うことができます。
JavaScriptをパソコン単体で動かせるようにするソフトです。ローカルサーバーの起動など、開発中のあらゆる場面で使われます。
開発の土台ソフト 無料Node.jsを導入すると同時に使えるようになる道具です。アプリに必要な部品（パッケージ）のダウンロードや、起動コマンドの実行に使います。
Node.jsに同梱Node.jsやnpmの内部の仕組みを理解する必要はありません。「これが入っていないとアプリが動かせない、土台のソフト」という認識だけで十分です。
インストール済みか確認する
すでにNode.jsが入っているパソコンも多いので、まずは導入せずに確認から始めます。ターミナルとは、Claude Codeを使うときにVS Codeの画面下に出てくる、文字だけの黒い操作欄のことです。この中に、次の2つのコマンドを打ってみましょう。
画面下の「ターミナル」というタブをクリックすると、この黒い入力欄が開きます。これ以降「ターミナルで打つ」と出てきたら、ここに文字を入力してEnterを押すという意味です。
上記のように v20.11.0 のような番号が表示されれば、Node.jsとnpmはすでに使える状態です。次の第3章に進んで構いません。
Node.jsがまだ入っていない状態です。次の「インストールの手順」に沿って導入しましょう。
インストールの手順
ブラウザで nodejs.org を開きます。
サイト上に2種類のボタンが表示された場合は、安定版である「LTS」と書かれている方を選んでクリックします。これでインストーラー（導入用のファイル）がパソコンにダウンロードされます。
サイトは基本的に使っているパソコンの種類（Windows / macOS）を自動で判別してくれますが、OSやCPUの種類（アーキテクチャ）の選択を求められることもあります。Macの場合は「Apple Silicon（M1/M2/M3など）」と「Intel」のどちらかを選びます。どちらか分からない場合は、画面左上の🔉（Appleメニュー）から「このMacについて」を開くと確認できます。
ダウンロードフォルダなどに保存されたファイルをダブルクリックして開き、あとは「次へ」を押し続けるだけで導入が完了します。設定を変更する必要はありません。
インストール後は一度ターミナルを閉じて開き直し、node -v でバージョンが表示されるか確認します。
手順の途中でわからないことがあれば、「Node.jsのインストールで詰まっている」とClaude Codeにそのまま伝えれば、状況に応じて案内してもらえます。
ローカルサーバーの起動方法とエラー発生時の対処法
ローカルサーバーを起動する
Node.jsの準備ができたら、いよいよ秘書アプリを手元で動かしてみます。使うのは、第2章で開いたのと同じVS Codeのターミナルです。秘書アプリのプロジェクトフォルダをVS Codeで開いた状態で、ターミナルに起動コマンドを打ちます。
npm run dev のほか、npm start など別の名前の場合もあります。不明なときは「このアプリの起動コマンドを教えて」とClaude Codeに聞けば、正しいコマンドを案内してもらえます。
この http://localhost:5173/ という表示には、それぞれ意味があります。
インターネット上ではなく、自分のパソコンの中だけで動いているサーバーにアクセスするときに使う特別なアドレスです。
自分のPC専用同じパソコン上で複数のサービスが同時に動いている場合に、どのサービスにつなぐかを識別するための番号です。
サービスの入り口番号このコマンドを実行している間は、ターミナルを閉じないようにしてください。閉じるとサーバーも一緒に停止し、ブラウザからアクセスできなくなってしまいます。
自分でコマンドを打つのが不安なときは、「ローカルサーバーを起動して」とClaude Codeに指示するだけでも、代わりに起動してもらえます。
ブラウザで動作を確認する
ターミナルに表示された http://localhost:5173/ のようなURLをコピーし、ブラウザのアドレス欄に貼り付けます。
ボタンを押す、文字を入力するなど、実際に触って想定どおりに動くかを確かめます。
ローカルサーバーを起動したままClaude Codeに修正を頼むと、多くの場合ブラウザの表示が自動で更新されます。再起動が必要な場合はClaude Codeが案内してくれます。
エラーが出たときの対処法
ローカルサーバーの起動時や動作中に、赤い文字のエラーメッセージが表示されることがあります。焦らず、代表的なパターンを知っておきましょう。
$ npm run dev
Error: Cannot find module 'express'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)| よくあるエラー | 主な原因 | 対処法 |
|---|---|---|
Port ... is already in use |
ポート番号がすでに別のプロセスで使われている | 使っていない他のターミナル・ローカルサーバーを閉じてから再実行する |
Cannot find module |
アプリに必要な部品（パッケージ）が不足している | npm install を実行してから、もう一度起動コマンドを打つ |
'npm' is not recognized |
Node.jsが未導入、または導入直後でターミナルが未反映 | 第2章の手順を確認し、ターミナルを開き直す |
エラー文を要約したり書き換えたりせず、表示された内容をそのままコピーしてClaude Codeに貼り付けましょう。エラーメッセージには原因を特定するための重要な情報が詰まっています。
エラーメッセージが出た場合は、そのメッセージを丸ごとコピーしてClaude Codeに貼り付けてください。また、エラー画面のスクリーンショットを撮って、画像ごと貼り付けるのも非常に効果的です。Claude Codeは画像も理解できるので、文字でうまく説明できない状況でもそのまま伝わります。
実践：秘書アプリを作ってみよう
指示文をClaude Codeに貼り付ける
ここまでで、指示の出し方・Node.jsの準備・ローカルサーバーの起動方法を一通り確認しました。この章では、実際に「自分専用の秘書アプリ」をゼロから作るための指示文を用意しました。下のボックスをそのままコピーして、Claude Codeに貼り付けてみましょう。
ごく簡単な「自分専用の秘書アプリ」を作成してください。 必要な機能は以下の通りです。 1. メモ機能 - タイトルと本文を入力できる - メモを追加できる - 追加したメモを一覧で確認できる - 作成日時を表示する 2. タスク管理機能 - タスクを入力できる - タスクを追加できる - 追加したタスクを一覧で確認できる - タスクを完了済みにできる - タスクを削除できる - 作成日時と完了状態を表示する 3. ダッシュボード機能 画面上部に、以下の情報を表示してください。 - メモの件数 - タスクの件数 - 未完了タスクの件数 画面には、以下を配置してください。 - ダッシュボード - メモ追加欄 - メモ一覧 - タスク追加欄 - タスク一覧 アプリは画面から操作可能にしてください。 入力したメモやタスクはファイルに保存し、アプリを閉じても消えないようにしてください。 Node.jsで作成してください。
貼り付けて送信すると、Claude Codeが必要なファイルを自動で作成・編集していきます。作業が終わるまでしばらく待ちましょう。
上のボックスの「コピー」ボタンを押し、Claude Codeの入力欄に貼り付けて送信します。
Claude Codeがファイルの作成・編集を自動で進めます。完了の合図が出るまで待ちましょう。
第3章の手順（npm run dev）でローカルサーバーを起動し、表示されたURLをブラウザで開いて実際に操作してみます。特に次の4点を確認しましょう。
- メモの追加・一覧の確認ができるか
- タスクの追加・完了・削除ができるか
- ダッシュボードで件数が表示されるか
- アプリを一度閉じて再度開いても、データが消えていないか
「メモの文字をもう少し大きくして」など、第1章の指示→実装→確認のサイクルを繰り返しながら、自分好みに育てていきましょう。
この章の確認チェックリスト
| ☐ | Claude Codeへの指示は「何を」「いつ」「どうなるか」を具体的に伝えるとよいと理解した |
| ☐ | 指示→実装→確認のサイクルを繰り返すという進め方を理解した |
| ☐ | node -v / npm -v でNode.jsの導入状況を確認できる |
| ☐ | ローカルサーバーの起動方法と、エラー時にまずすべきことを説明できる |
| ☐ | 用意された指示文をClaude Codeに貼り付け、秘書アプリの作成を実行できる |