実際に作ってみよう

こんにちは😊 前回は、秘書アプリを作る前に「どんなファイルがあるのか」「秘密の情報はどう守るのか」「ビルド・デプロイ・ローカルサーバーって何なのか」という、アプリ開発の地図を一緒に見てきました。

今回は、いよいよその地図を使って実際に秘書アプリを動かしていきます✨ 「ついにアプリを作るの？難しそう……」と思った方もいるかもしれませんが、大丈夫ですよ😊 今回も、自分でコードを1行ずつ書くわけではありません。私たちがすることは、Claude Codeに「こうしたい」と伝えること。そして、できたものを実際に動かして確認することです。

そして最後には、自分専用の秘書アプリを実際に作って動かすところまで進みます✨ 全部を完璧に覚えなくても大丈夫、一緒に画面を見ながら進めていきましょう😊

秘書アプリを作るときも、自分でコードを1行ずつ書く必要はありません。私たちの役割は「こんな機能がほしい」「ここをこう直したい」と、Claude Codeに日本語で伝えることです。コードを書くのはClaude Codeの仕事です😊

お願いする → Claude Codeが作る → 実際に動かして私たちが確認する。この流れです。つまり、私たちはコードを書く人ではなく「何を作りたいか伝える人」というイメージです✨

Claude Codeへのお願いの仕方を見てみましょう。ポイントは「何を」「いつ」「どうなってほしいのか」を伝えることです。

「バグを直して」だけよりも、こんな風に状況を伝えた方がClaude Codeも理解しやすくなります。とはいえ「そんなにきれいに説明できないよ」という場合も大丈夫です😊 最初から完璧な指示は必要ありません。「なんとなくこうしたい」と伝えると、Claude Codeから「こういう意味ですか？」と聞いてくれることもあります。そこから会話しながら決めていけばOKです✨

アプリ作りは、一度お願いしたら完成、というものではありません。基本はこの繰り返しです。

たとえば「タスク機能を作って」とお願いし、実際に触ってみたら「完了したタスクが分かりにくいな」と思った。そこで「完了したタスクは、見た目で分かるようにして」とまたお願いする。こんな感じです😊 一度で100点を作ろうとしなくて大丈夫。小さく作って、小さく直す。この繰り返しでアプリを育てていきます✨

ここからは、実際にアプリを動かす準備です。アプリを動かすためにNode.jsというものが必要になります。仕組みを覚える必要はなく、アプリを動かすための土台だと思ってください。家を建てるときにまず土地や基礎が必要なように、Node.jsもアプリを動かすための土台のようなものです。Node.jsを入れるとnpmという、アプリに必要な部品を用意したり起動したりするための道具も一緒に使えるようになります。

Node.jsの準備ができたら、次はアプリを実際に動かしてみます。前回出てきたローカルサーバー、覚えていますか？ 自分のパソコンの中だけでアプリをお試しで動かす場所でしたね。料理でいう「味見」のようなものです😊

アプリを作っていると、赤い文字がたくさん出ることがあります。初めて見ると「壊した！？」と思いますよね😊 でもエラーは珍しいことではなく、アプリ開発では普通に出てきます。大切なのは自分で無理に原因を考えないことです。

では、ここからいよいよ実践です🎉 今回作る秘書アプリには、次の3つの機能を入れます。

さらに、入力したメモやタスクはアプリを閉じても消えないようにします。これを全部、自分でコードを書くのではなくClaude Codeにお願いして作ってもらいます😊 次の指示文をそのままコピーして、Claude Codeの入力欄に貼り付けて送ってみましょう。

送ってみたら、少しの間Claude Codeが作業してくれるので待ちましょう。「何が起きてるんだろう…」と不安になるかもしれませんが、私たちの代わりにアプリを作ってくれています。途中で確認が表示されたら、内容を見ながら進めてください😊

Claude Codeの作業が終わったら、先ほどと同じようにnpm run devでローカルサーバーを起動し、表示されたURLをブラウザで開きます。次の5つを確認してみましょう。

もちろん、最初から完璧じゃなくても大丈夫です。「メモの文字が少し小さいな」と思ったら「メモの文字をもう少し大きくして」、「このボタンの場所を変えたい」と思ったらそのまま伝えてみます。修正してもらって、またブラウザで確認する。

今日最初に出てきた指示 → 実装 → 確認ですね😊 このサイクルを繰り返しながら、自分が使いやすい秘書アプリに少しずつ育てていきます。一度で完成させなくて大丈夫ですよ✨