ChatGPTへの毎日の相談をアプリ化してみた。Claude Codeで「ノーコード卒業」の一歩を踏み出す

こんにちは、ちょです。

最近、ChatGPTとのやり取りで気づいたことがあります。毎朝、同じような質問を繰り返していた。献立の相談、その日の疲れをどう解消するか、モヤモヤした判断を誰かに聞いてもらう——こんなパターンが月に何十回も。そのたびにプロンプトを入力して、スクロールして、また別のタブでChatGPTを開く。便利なんだけど、どこか効率が悪い。それなら、もう一段階進んで、この「毎日のAI相談」をアプリ化してしまおうと思い立ちました。

StreamlitでAI提案ツールを作る話は前に書きましたが、今回はもう少し軽く、Claude Codeを使って実装してみることにしました。

「毎日の相談」が何度も繰り返されていることに気づく

ノーコードツール（Bubble、Flutterflow）で何本かアプリを作ったあとで、気づいたんです。結局、決まったパターンの相談が何度も回ってくる。

疲れた日の夜：「今日はこんなことがあったんだけど、どう対処すればいい？」。これ、月に15回は聞いてる。献立決定：「今日は何かある？その日に合った献立は？」。これも定型的。写真整理のアドバイス：「この何百枚の写真、どういう基準で分類したらいい？」。何度も何度も。

そのたびにChatGPTを開いて、長めのプロンプトを入力して、返答を読む。便利だけど、毎回イチから始まる感じがしていた。同じ質問をしているのに、毎回の入力が必要で、毎回、システムプロンプトも共有しなおしている。これを「アプリ」にしてしまえば、画面を開いて、テキストボックスに入力するだけで済むんじゃないか。

Claude Codeで「相談アプリ」のプロトタイプを作る

まず、Claude Codeの基本的な仕組みを思い出しました。Claude 3.5 Sonnetは、コード作成と実行ができる機能を持っていて、簡単なHTMLやJavaScriptなら、そのまま動作環境で実装できる。前回のStreamlit記事では、Pythonバックエンド + Webフロントエンドという形でしたが、今回は「もっとシンプルに」と考えて、Claude Codeで直接、HTML + JavaScriptで作ることにしました。

プロンプトはこんな感じ：「毎日の悩み・判断・疲れについて相談するシンプルなWebアプリを作ってください。入力フォーム1つ、ボタン1つで、Claude APIを呼び出して、AI アドバイスを返す。レスポンス時間は3秒以内、UIはシンプル」。

Claude Codeに投げてから、約30秒で基本的なHTMLが返ってきました。

html
<input type="text" id="consultation" placeholder="今日の悩みを入力してください">
<button onclick="getAdvice()">アドバイスをもらう</button>
<div id="result"></div>

これ、本当にシンプルです。ただ、この段階ではAPIキーの処理が入っていなくて、実際には動かない。Claude Codeの実行環境では、セキュリティ上の理由でAPIキーをハードコードできないので、ここで少し詰まりました。

つまずいた所：APIキーの管理とリアルタイム実行

Claude Codeの実行環境は「プレビュー環境」で、外部APIを呼び出すには制限があります。つまり、Claude APIを直接フロントエンドから呼ぶことができない。

セキュリティと実装の両立を考えて、2つのアプローチを試しました。

1つ目は「Vercelの無料Functionsを使う」。Claude Code内でバックエンド関数を定義して、それを呼び出す形にしようとしたんですが、這うClaude Codeの環境では実行時間に制約があって、APIレスポンスの待機が長いと、タイムアウトしてしまう。実際にやってみたら、5秒以上待つと「接続エラー」が返ってきました。

2つ目は「あらかじめ決まったプロンプトテンプレートを埋め込む」。つまり、APIを呼ばない代わりに、よくある相談パターンに対して、あらかじめ学習済みのテンプレート応答を用意する。これは「アプリ化」というより「相談テンプレート集」になってしまうので、没。

結局、実用的にするには「バックエンドを用意する」しかないことに気づきました。Claude Codeだけでは完結しないんです。

方針転換：Replit上でNode.js + Express で実装

そこで、方針を変えました。Replitを使うことにしたんです。

Replit は「クラウド開発環境」で、Node.js、Python、あらゆる言語が動きます。ここでExpress サーバーを立てて、フロントエンドはClaude Codeで作ったHTMLを埋め込む形にしました。

こっちのプロンプトは：「Replitで動作するNode.js + Expressサーバーを作成してください。エンドポイント1つ（/api/advice）で、Claude APIに質問を送って、その返答をJSONで返す。フロントエンド側はこのAPIを呼び出してUIに結果を表示」。

ReplitのClaude統合（正式には「Claude API」の無料ティア）を使って、実装してみました。かかった時間は、プロンプト作成と調整を含めて約45分。

ポイントは：
- フロントエンド側で「ユーザーの相談内容」を取得
- 「あなたは日常の悩みアドバイザーです。簡潔で、実行可能なアドバイスを返してください」というシステムプロンプトを一度だけ設定
- バックエンドがClaudeに投げて、レスポンスをフロントに返す
- UIに結果を表示（実際には、返答内容をHTML の <div> に挿入）

実装の最中、ハマったのは「CORS エラー」。フロントエンドとバックエンドが別オリジンだと、ブラウザが通信をブロックします。Replit上では同じドメインなので大丈夫でしたが、外部からアクセスしようとしたときに気をつけました。

動かしてみたら、思ったより「相談相手」になってくれた

アプリが完成したのは、開始から約1時間半後でした。さっそく、実際に使ってみました。

テスト入力1：「昨日の会議で提案が通らなかった。モヤモヤしてる」→ 返答は「提案が採用されなかったのは、タイミングか内容の問題かもしれません。次の会議では、事前に決定者に下相談してみては」。的確です。

テスト入力2：「明日の献立、何か健康的で時短なものはない？」→ 「タンパク質をたっぷり使った『豆腐とほうれん草の炒め物』はいかがでしょう。加熱時間5分、栄養バランスも良好」。実際に作ってみたら、本当に5分で完成しました。

テスト入力3：「写真の整理、何百枚もあるんだけど」→ 「撮影日付で分類、その後『人物』『風景』『商品』『その他』で二次分類してはどうでしょう。アルバムアプリなら自動タグ機能も便利です」。これもまさに求めていたアドバイスでした。

何度も同じ相談をしていたのは、実は「決定を誰かに委ねたい」というより「決定の材料をもらいたかった」んだと気づきました。ChatGPTへのテキスト入力という「儀式」を毎回踏むことで、頭が整理されていたのかもしれません。アプリにしてしまうと、その「儀式感」はなくなる。でも、レスポンスが圧倒的に速い。プロンプトのコピペも不要。画面を開いて、入力して、読むだけ。

実際の使い勝手は、ChatGPTより「手軽」でした。ただし、精度は同じくらい。特に長めの相談には、AIも「質問を返す」ことがあるので、その場合は手動でチャット形式にするしかない。アプリは「短答型の相談」に最適化されているんだと感じました。

ここからの展望：ノーコード卒業、実装スキルの使い方

この一連の作業で感じたのは「ノーコードとローコードの境界は、思ったより曖昧だ」ということです。

Claude Codeは「コードを書かない」というより「コード補完をAIに頼る」という感覚に近い。プロンプトを投げれば、基本的なボイラープレートは自動生成される。だから、実装の心理的なハードルが大幅に下がる。ノーコードツールで「限界を感じた人」は、このClaude Code → Replit という流れを試すと、次のステップに行きやすいんじゃないかと思います。

ノーコード卒業という言葉は、ちょっと大げさですが、実際のところ「自分の小さな課題を自分で実装できる」って、すごく気持ちいい。ChatGPTに毎回同じ質問をする日常が、ワンステップ進んだ。

このアプリは、今のところReplitの無料ティアで動いています。もし実際に毎日使うなら、Supabaseでログを記録して、「自分の相談履歴」を学習させるって手もある。でも、それはまた別の話。今は「毎日の小さな相談が、アプリになった」という事実だけで十分です。

あわせて読みたい

あなただけのフィルムシュミレーションレシピを。
https://note.com/fast_cosmos9357/n/n4271dc3c9b39

部屋が片付かない人ほど知ってほしい「置き場所」の考え方
https://note.com/fast_cosmos9357/n/n49f0c7ecfb64

「戻す場所」を決めるだけで散らからない、家の設計思想
https://note.com/fast_cosmos9357/n/n05e89c2f148d

#Claude #AI #ノーコード #AIアプリ開発 #実装記録 #生成AI活用 #日常アプリ #副業