はじめに
普段はHR・人事領域働いている、いわゆる非エンジニアです。コードはほとんど書けません。
そんな自分が、最近話題のAIコーディングツールが気になって、Claude Codeを使って介護記録を音声から自動生成するWebアプリを作ってみました。
動機はシンプルで、AIと一緒に開発するというのがどんな体験なのか、自分の手で試してみたかったからです。ついでに、開発職へのキャリアチェンジも考えているので、ポートフォリオになれば嬉しい、くらいの気持ちで始めました。
この記事では、うまくいったこともいかなかったことも、そのまま書いていきます。
作ったもの
サービス名は「介護DXアシスト」。本番URLはこちらです。
機能はシンプルで、音声を録音してアップロードすると文字起こしされ、それをAIが介護記録の形式に整えて保存してくれる、というものです。
技術スタックはこんな感じになりました。
| レイヤー | 技術 |
|---|---|
| フロントエンド | Next.js 14（App Router） |
| 言語 | TypeScript |
| 認証・DB | Supabase |
| 音声→テキスト | OpenAI Whisper |
| AI記録生成 | Claude API |
| 決済 | Stripe |
| ホスティング | Vercel |
| E2Eテスト | Playwright |
選定の細かい理由はあまりなくて、Claude Codeに「初心者でも扱いやすい構成で」と相談しながら決めていきました。
Claude Codeを使ってみた感想
Claude Codeはターミナル上で動くAIエージェントです。チャット欄にコードを書いてもらうのではなく、ターミナルでファイルを読み書きしながら一緒に作業を進めてくれる、という感じでした。
自分の役割は、コードを書くというより「指示を出す」のほうに近かったです。「ログイン画面を作ってほしい」「このエラーが出てる」と話しかけると、必要なファイルを読んで、書き換えて、テストを走らせて、自分で直そうとしてくれます。
良かったのは、とにかく実装が速いこと。詰まっても自力でリトライしてくれるので、自分はその間にコーヒーを淹れていることもありました。
困ったのは、たまに古いモデル名を指定してきたり、急に突拍子もないリファクタを始めたりすること。そういうときは「待って、それは要らない」と止める判断が必要でした。
一緒に開発している感覚が、思っていた以上に楽しかったです。
詰まったところ（正直に3つ）
ひとつめはSupabaseのRLS（Row Level Security）。テーブルにデータを入れても、フロントから取得すると空配列が返ってくる。原因は、RLSポリシーで自分のuser_idに紐づくレコードしか見えない設定にしていたのに、INSERT時にuser_idを入れ忘れていたことでした。状況をそのまま伝えたら、ポリシーとINSERTの両方を直してくれました。
ふたつめはStripe Webhookの署名検証エラー。No signatures found matching the expected signature でハマりました。Next.jsのAPI Routeでbodyをパースしてしまっていたのが原因で、生のbodyを渡すように修正して解決。
みっつめは本番デプロイ直後の真っ白画面。ブラウザのコンソールにCSP違反のエラーが大量に出ていました。next.config.js のヘッダ設定を見直したら直りました。
どの詰まりも、エラーメッセージを丸ごと貼って状況を説明したら候補を出してくれて、助かりました。
やってみてわかったこと
コードが書けなくても、動くものは作れるんだな、というのが正直な感想です。実際こうして本番にデプロイされて動いていますし。
ただ、「なぜこのエラーが起きているのか」をある程度理解しようとする姿勢は必要だと感じました。Claudeの提案を全部そのまま採用していたら、たぶんどこかで詰まっていた気がします。「これはなんで？」と聞き返すことで、自分の理解も少しずつ深まっていきました。
そしてもうひとつ。開発って、思っていたよりずっと楽しかったです。動かなかったものが動く瞬間の小さな達成感が、ずっと続く感じ。
いま一番楽しいのは「次に何を作ろうか」を考えている時間です。
おわりに
実はいま、もうひとつ別のプロダクトも作っています。MeetingMind AI という、会議の議事録からアクションアイテムを自動抽出するWebアプリです。こちらはまだ作りかけで、開発過程をGitHubで公開しています。
→ https://github.com/takepon7/meeting-mind
ポートフォリオとして、これからも興味のあるものを少しずつ作っていく予定です。開発職へのキャリアチェンジを目指している身としては、ひとつでも形にできるものを増やしていきたいなと。
同じようにAIと一緒に開発を楽しんでいる方がいたら、ぜひコメントで感想や進捗を教えてもらえると嬉しいです。
タグ: ClaudeCode 個人開発 Next.js Supabase 作ってみた