初めてのClaude Codeで、自分だけのメモアプリを作った話【後編：実装・デプロイ編】

セットアップでさっそくつまずいた

Claude Codeを使うには、まずターミナルにインストールする必要があります。

公式の手順に沿ってインストールを済ませ、さっそく claude と打ち込んでみました。すると、こう返ってきました。

zsh: command not found: claude

いきなりつまずきました。「claude」というコマンドが見つからない、つまりちゃんとインストールできていなかったということです。

原因はパスの設定で、ターミナルを再起動したら解決しました。
こういう「インストールしたはずなのに動かない」は開発あるあるなので、同じところでつまずいた人がいたら、まずターミナルの再起動を試してみてください。

再起動後にもう一度 claude と入力すると、今度は「Welcome back Nori!」と表示されました。

ここまで来るのに、OAuth認証（Claudeとの接続許可のようなもの）やGitHub Appのインストールなど、いくつかのステップがありました。
正直、セットアップだけで結構な時間がかかっています。
でも、ここを越えてしまえば、あとはずっと楽になります。

Claude Codeに設計書を渡す

Claude Codeが動くようになったので、前編で作った要求定義書と技術設計書を渡しました。

まず、Next.jsのプロジェクトを作成します。
Claude.aiから教わった通り、Claude Codeに

「Next.js、TypeScript、Tailwind CSSを使って、新しいプロジェクトを作成してください。プロジェクト名は insight-notes です」

と伝えました。

プロジェクトができたら、docs フォルダを作って、そこに要求定義書を保存してもらいました。
Claude Codeはそのファイルを読み取って、内容を理解した上で、技術設計書も自動的に作成してくれました。

このとき面白かったのは、Claude Codeがプロジェクトの中身を探索してから作業を始めたことです。
いきなりコードを書き始めるのではなく、まずプロジェクトの構成を確認して、それから設計書の内容と照らし合わせて、実装方針を組み立てていました。

選択肢を出してくれるのが心強い

開発を進める中で、判断が必要な場面が何度かありました。

たとえば認証方式です。
Claude Codeは「ログイン機能を実装する方法」「固定UUIDを使う方法」など、複数の選択肢をメリット・デメリット付きで提示してくれました。

初心者の僕にとって「どの方法を選べばいいか分からない」というのが一番怖いところでしたが、Claude Codeは「Noriさん専用のアプリなので、今回は固定UUIDで十分です」と推奨理由も添えてくれます。
最終的に選ぶのは自分ですが、判断材料がちゃんと揃っている状態で選べるのは助かりました。

環境変数の設定も同様です。Supabaseとの接続に必要な3つの値（SupabaseのURL、APIキー、ユーザーID）を .env.local というファイルに書く必要があるのですが、Claude Codeが「この3つの値を用意してください」と具体的に指示を出してくれました。

自分でやるべきことと、Claude Codeに任せることの線引きが明確なので、作業がスムーズに進みました。

localhost:3000に自分のアプリが表示された

Supabaseの設定を終えて、ローカルの開発サーバーを起動しました。
ブラウザで localhost:3000 を開くと、Next.jsのデフォルトページが表示されます。
ここまでは、まだただのテンプレートです。

Claude Codeに実装を進めてもらうと、画面がガラッと変わりました。
「心の気づきメモ」というタイトルが表示されて、「新しい気づきを記録」というボタンが出てきました。

ボタンを押すと、新規作成フォームが開きます。
「きっかけ」欄と「気づきの内容」欄があって、前編でClaude.aiと一緒に決めた設計がそのまま形になっていました。

試しにテストデータを入力して保存してみると、ちゃんと一覧に表示されました。
詳細画面を開けば全文が読めるし、編集ボタンから内容を修正することもできる。削除もできます。
いわゆるCRUD（作成・読み取り・更新・削除）が全部動いていました。

自分が考えたアプリが、自分の画面で動いている。この瞬間は、やっぱり嬉しかったです。

Vercelにデプロイ — ローカルで動いても安心できない

アプリがローカルで動いたので、次はインターネット上に公開する作業です。Vercelというサービスを使って、デプロイ（公開）しました。

Vercelへのデプロイ自体は比較的スムーズに進みました。
GitHubにコードをアップロードして、VercelとGitHubを連携させて、プロジェクトをインポートする。Claude.aiに教わった手順通りにやれば、大きな問題はありませんでした。

ところが、デプロイが完了してURLを開いてみると、こう表示されました。

「データの読み込みに失敗しました」

画面には、エラーの詳細が表示されていました。

"code": "22P02",

"message": "invalid input syntax for type uuid: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\n\""

invalid input syntax for type uuid — UUIDの形式が正しくない、というエラーです。
よく見ると、UUIDの末尾に \n（改行コード）が紛れ込んでいました。

ローカルでは動いていたのに、Vercel上では動かない。原因は、Vercelの環境変数にUUIDを登録するとき、コピー＆ペーストで改行が混入してしまったことでした。

エラーを読む力は、AIに作ってもらっても必要

このエラーの原因特定ができたのは、画面にデバッグ情報が表示されていたからです。
実はClaude Codeが実装時に、エラーが起きたときに環境変数の状態を画面に表示するデバッグ用のコードを仕込んでくれていました。

ENV check:

SUPABASE_URL: SET

ANON_KEY: SET

USER_ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

これのおかげで、「環境変数自体は設定されているけど、USER_IDの値に問題がある」ということがすぐ分かりました。

修正は簡単でした。
Vercelのダッシュボードで環境変数を開いて、USER_IDの値を削除して、改行が入らないように注意しながら再入力して保存するだけです。

再デプロイが完了してもう一度URLを開くと、今度はちゃんとアプリが表示されました。

「ローカルで動いたからOK」ではないというのは、頭では分かっていたつもりでした。
でも、実際に体験してみると、その意味がよく分かります。
ローカルとデプロイ先では環境が違うので、同じコードでも動作が変わることがあって、エラーメッセージをちゃんと読めば、たいていの問題は原因が特定できる。これは、AIにコードを書いてもらっても変わらない、自分自身に必要なスキルだと感じました。

ちなみに、ログイン機能を実装していないので、URLは非公開にしています。
URLを知っていれば誰でもアクセスできてしまうので、自分専用のアプリとして使うぶんには、URLを誰にも教えないのが一番シンプルな対策です。

使ってみて、初めて見えるもの

アプリが公開されて、スマホからもアクセスできるようになりました。
さっそく日常的に使い始めてみると、作っているときには気づかなかったことが見えてきました。

たとえば、「スマホの画面だと、新規作成のボタンが見切れてしまう」ということ。パソコンのブラウザで開発していたので、スマホでの見え方まで十分に意識できていませんでした。

それから、「メモが増えていったときに、スクロールの使い勝手が気になる」ということも、実際にメモを溜めていく中で感じたことです。

こうした改善点は、作っている最中には分からなかったものです。
これがフェーズ2に向けた本当の要件になるんだなと実感しました。

「速さ」と「理解」のバランス

今回の開発を通して一番考えたのは、Claude Codeとの付き合い方です。

最初の設計書をしっかり作っておけば、Claude Codeでの実装自体はかなりスムーズに進みます。
要求定義書と技術設計書を渡したら、それに沿って一気にコードを書いてくれるので、動くアプリはあっという間にできあがります。

ただ、「動くものができた」と「何が起きているか理解できた」は、別の話です。

僕は、コードの意味も理解しながら進めたかったので、あえてステップを細かく分けました。
Claude Codeにいきなり全部作らせるのではなく、一つの機能ごとに「まずClaude.aiで仕組みを教わる → 理解してからClaude Codeで実装する」という流れです。

たとえば、Claude Codeが書いた Promise.all というコードの意味が分からなかったとき、Claude.aiに「これは何をしているのか」と聞きました。
すると、「2つのデータを同時に取りに行く仕組みで、順番に取りに行くより待ち時間が短くなる」と教えてくれました。
こういう小さな「なるほど」の積み重ねが、自分の中に残っていきます。

時間はかかります。
Claude Codeに一括で任せれば、おそらく半分の時間で完成していたと思います。
でも、理解が伴わないまま完成しても、エラーが出たときに自分で対処できないし、次に何かを作るときにも同じことの繰り返しになってしまいます。

急ぎのプロジェクトならClaude Codeに一気に任せるのもありだと思います。
でも、学びながら作りたいなら、ステップを細かく分けてClaude.aiに先に教わるのがおすすめです。

この体験から伝えたいこと

前編と後編を通して、Claude Codeで初めてアプリを作った体験を書いてきました。

Claude Codeは、すごく便利なツールです。
ターミナルに指示を出せば、コードを書いてくれるし、ファイルも作ってくれるし、エラーの修正もしてくれます。
設計書をちゃんと用意すれば、驚くほど的確なコードが出てきます。

ただ、魔法の杖ではありません。

「何を作りたいか」は、自分で考える必要があります。
その「考える」フェーズをClaude.aiが手伝ってくれて、「作る」フェーズをClaude Codeがやってくれる。そして、作った後に「使って、直して、また使う」というサイクルを回すのは、やっぱり自分自身です。

今回作った「心の気づきメモ」は、まだフェーズ1の状態です。
使いながら見つけた改善点を元に、これからフェーズ2に取り組んでいく予定です。
その過程も、また記事にできたらと思っています。