はじめに
パーソナルコーチングを行う中で、人生の輪（Wheel of Life）を使ったりします。
対面であれば、印刷した紙の上に描いていくのですが、オンラインでは難しい。
オンラインでやるために、Googleスプレッドシートやスライドを使いつつ、簡単に入力して表示できる物を作りたくてGeminiと相談していました。
Googleスライドに、ピザのように45度にカットした図形を数パターン用意して重ね合わせる方法を考えてみたりしましたが、納得がいかない・・・。これだと修正が面倒・・・。
そんな中、あれ？もう自分でアプリつくれば良くない？と思い、
Geminiに「いっそ、HTMLとJavaScriptで作れない？」と、投げかけたのがスタートでした。
エンジニアとしての経験は長いものの、これまで生成AIは文書作成やアイデア出しに留め、コーディングに使っていませんでした。「これは学びのチャンスだ！」と、あえて自分の手を縛り「監督」に徹しアプリ開発を行ってみました。
この記事のターゲット
大雑把に書くと以下の方がターゲットです。
- 生成AIを使ってコードの修正はしているが、直接アプリを作ったことがない方
- プログラミングはそんなにわからないが、アプリを作ってみたい方
今回の記事以外に、Claude Codeや対話してアプリを作成するサービスは他にもあります。それらのサービスを使用すれば、もっと簡単に作れたりします。
それらのサービスを利用する前に、どんなものか体感するには、Web版Geminiとの対話から始めるのが容易だと思うので試してみてください。
技術スタック
- Framework: Next.js (App Router)
- Library: React
- Deployment: GitHub Pages
-
AI Tools:
- Gemini (Web版：設計・相談・プロンプト生成)
- Gemini Code Assist (VS Code拡張：コード生成・デバッグ)
開発のルール
- 自身で機能追加のコードは書かない
- 不具合の原因も解決方法もわかっているが、直接解決しない
- エラー修正も、原因を把握した上でAIに指示を出して修正
開発のフェーズ
1. 概念実証（PoC）
どんなものを作りたいか、Web版Geminiと具現化しながらすり合わせる。
「HTMLとJavaScriptで作れない？」と投げると、即座に単一のHTMLが出力されました。 この段階ではVS Codeすら使わず、Geminiとのチャットだけで数回往復。30分後にはMVP（最小機能版）が完成しました。
MVP
- グラフを一つ表示できる
- スライダーバーで値を変更できる
- グラフをクリック（タップ）して値を変更できる
- スマホだとみづらいのでレスポンシブ対応されている
あっという間にMVP完成！ばんざい！
どういったものが作りたいか、コアとなる部分はここですり合わせられました。
このタイミングでGitHub Pagesを対応していたのですが、
驚いたのは、 「スマホだけでアプリ開発ができる」 という事実です。
- スマホでGeminiに機能追加を相談
- 出力されたコードをGitHubのWebページから直接編集
- GitHub Pagesで即座に反映
個人で遊んでいる状態だったらスマホだけでアプリ開発して遊べるという事です。
移動中でもツールが進化していく。すごい時代だ。
2. Next.jsへのリアーキテクトと実戦投入
具現化できたら正しい技術スタックで一緒に生成AIと作り上げる。
「単一HTMLではエンジニアとしての学びが薄い」と感じ、Next.jsへのリアーキテクトを決意。VSCodeを立ち上げ、Gemini Code Assistをセットアップしました。
まずは、Geminiに相談してアイデアを出していく。そして方針が決まったらGemini Code Assistに伝えつつコーディングを行う事に。
どうせなら、Next.jsにリアーキテクトしよう！MVVMにしよう！となりました。
こちらから指示だけして言われた物を理解しながら対応していく。コンテナ環境にし、Next.jsで作り変えました。
環境構築に一番時間がかかりましたが、それでも全てひっくるめて30～40分くらいで完全に動作。あっという間。
AIに「AIへの指令書」を書いてもらう
今回最も効率的だったのは、 「プロンプトの二段構え」 です。Web版のGeminiとエディタ内のCode Assistを以下のように使い分けました。
-
設計・相談（Gemini）:
「Next.jsで、グラフを表示し、入力領域を動的に反映させる構成を考えて」
「言語切り替えを行いたい。各文字列を日本語と英語で切り替えるようにしたい」 -
指令書の生成（Gemini）:
相談してたらGeminiがプロンプトを勝手に提案してきただけ。それいいな！ってなったのでどんどん指示してもらいました。 -
実装（Code Assist）:
生成されたプロンプトをVS Code上で実行。
この「AIにAIへの指示を書いてもらう」手法により、文脈の齟齬が減り、精度の高いコードが生成されました。
ControlPanel コンポーネントに、各カテゴリの説明文を表示する機能を追加したいです。
framer-motionを使用して、インフォメーションアイコンをクリックすると説明文がアコーディオン形式で展開されるようにしてください。
## 要件
1. **State管理**:
- `activeInfo` というステートを作成し、現在説明文が開いているカテゴリの `key` (string) を保持してください（開いていない場合は null）。
- アイコンをクリックすると、そのカテゴリの説明文の開閉を切り替える (`toggleInfo`) 関数を作成してください。
2. **UI変更 (スライダーのラベル横)**:
- カテゴリ名の横に、小さな「インフォメーションアイコン (i)」を追加してください。
- アイコンはSVGで直接記述してください（円の中にiがあるシンプルなもの）。
- アイコンはクリック可能にし、色は薄いグレー、ホバー時に濃くなるようにしてください。
3. **UI変更 (スライダーの下)**:
- スライダー要素の下に、説明文を表示するエリアを追加してください。
- `AnimatePresence` と `motion.div` を使用して、`activeInfo` が一致する場合のみ表示してください。
- アニメーション:
- `initial={{ height: 0, opacity: 0 }}`
- `animate={{ height: "auto", opacity: 1 }}`
- `exit={{ height: 0, opacity: 0 }}`
- 説明文の内容は `t.descriptions[category.key]` から取得してください。
- テキストは小さめ（text-sm）、色はグレー（text-gray-500）にしてください。
4. **型定義**:
- 辞書データに `descriptions` が追加されたことを想定して、型エラーが出ないようにしてください（必要であれば any で回避せず適切にプロパティアクセスしてください）。
エラーを「隠す」AI
面白い事もありました。 コンソールにエラーが出た際、あえて「エラーを修正して」とだけ曖昧に指示してみたのです。
するとAIは、**「エラーが発生している箇所に条件分岐を追加し、処理をスキップする」**という修正案を提示してきました。 エンジニアなら一目で「それは解決じゃなく隠蔽だ」とわかります。
「エラーを消しただけで、そこが未定義になること自体間違ってるよね？」と指摘すると、「おっしゃる通りです……」と正しいロジックを書き直してくる。そのモデルがどこまでの情報を網羅できているかですが、指示が、最短距離で「エラーを消す」という目的を達成しようとしてきた。
新人みたいでかわいいやつ。
まとめ：どこまで全てを理解する必要があるのか？
今回の開発では、全ての技術的・論理的構造を理解した上で、あえて「書かない」という選択をしました。そこで感じたのは、「どこまで理解する必要があるのか？」 ということです。
今回の実装は全て技術的にもアルゴリズムも理解できています。
ですが、個人で作成したり軽量なもので生成AIとやりとりしながら全て解決できる範囲だったら、全て理解してなくても、作れることは良いことかなと思います。
- 「そもそもエンジニアがいないからツールが作れない」
- 「エンジニアはいるけど、忙しくてツールを作る時間が取れない」
（作りなさいよとは思う）
たとえ100%理解できていなくても、AIと対話して課題を解決できる範囲ならそれは立派な取り組みだと思います。サクッとツールを作ったりして、作業効率、開発効率を上げていくのはドンドンやったらいい！
非エンジニアの方でも簡単に作れるので、ぜひ遊んでみてください！