インフラ+バックエンドエンジニア、個人的なアプリが欲しくなる

私的な話なのですが、近々引越しを予定しています。

引越しって、いろいろ大変ですよね。いろいろな住所変更やら手続きもたくさん。

そして、新しい間取りに合わせてどのように家具を配置するか。。。ここがすごく迷います。

間取り図や不動産屋さんに聞いたり、実寸を図ったりして間取り図に書き込み、縮尺を気にしながら

「ここにおけるかな？」「こっちの隙間をこの家具で、、、」

また、新しい家具の購入を検討したりしますよね？

正直、縮尺も面倒だし、家具の配置も書き込んだら消すの面倒、、、アプリで何度も直せたりしたら便利だなって思いませんか？

ググってみると、３Dや間取り図作成ツールの機能でないことはなさそうなのですが、サクッと気軽に試せるものがない。。。。そこで思いました。

AIに作らせたらどうだろう？

以前、仕事に使えそうな構成のバックエンドを作らせた際には、自分の理解のある領域を作らせましたが今回はフロントエンドの知識が必要だと思いました。

そこで、今回もまた、ChatGPTにプロンプトを書くのを手伝ってもらいました。

「アプリを作りたいので手伝って！」

まずは、どのようなアプリを作りたいかを伝えます。

間取り図の画像を取り込んで、家具のパラメータ(サイズ)を入力してオブジェクトを作成して、配置イメージをできるアプリとか作りたい。 公開とか考えずにローカルで動けばいい。

このプロンプトを最初に入れました。これに対しての回答の要約です。↓

ローカル前提なら、現実的な作り方はだいたい3ルート

• ルートA：いちばん早い（ブラウザで動くローカルアプリ）
• ルートB：最小構成で爆速（Pythonでサクッと）
• ルートC：ちゃんとCAD寄り（将来拡張したいなら）

まず決めると迷いが減る「コア仕様」
具体的な実装イメージ（おすすめはA：Tauri + React + Konva）
もし「画像の壁線を自動抽出」までやりたいなら
最短の提案（あなたの要望に一番合う）
→ Tauri + React + Konva.js が、工数と使い勝手のバランスが良い。

次に、一旦新しい情報を入れました。

一度単純に間取り図を読んだあとに、自分である程度長さを入力することで部屋の広さを認識して、家具を配置する際に、家具のサイズと部屋のサイズ感を合わせたい

サイズ感をどうやって判定するかのアイディアを追加しました。すると、

方式1：最小で確実（おすすめ）「2点クリック＋実寸入力」
方式2：部屋の広さを“認識”したい場合（半自動）
家具配置時に“サイズ感を合わせる”ための実装要素
現実的な落とし所（おすすめ構成）

が出てきました。

ということで、ここから先の方針を入力します。

開発はCodexでやる
Codexに流すプロンプトを作成する
必要な入力が足りていないようなら、教えて欲しい
勝手な解釈で進めないで欲しいので、改めて１問１答形式で確認＋追加情報を求めてください

このプロンプトで重要なのが、１問１答形式で確認＋追加情報を求めることです。

よく、AIが勝手に解釈して頼もしないことをガンガンやったり情報過多で何がなんだかわからなくなったりしませんか？

特に自分の得意分野ではないことなら尚更です。

なので、１問１答で少しづつ確実に要件を詰めていきます。

以下のAIがしてきた質問の例を並べておきます。

• 質問1（最重要）
  このアプリは どの環境でローカル実行したいですか？
  • ブラウザだけ（ローカルHTML/JS。インストール不要）
  • デスクトップアプリ（Tauri / Electron でMac/Win向け）
  • Pythonアプリ（Streamlitなどをローカル起動）
• 質問2（技術選定）
  どちらで行きたいですか？
  • Tauri（軽量・配布サイズ小さめ・Rust＋Webフロント）
  • Electron（実績多い・全部JSで完結しやすい・配布サイズ大きめ）
• 質問3（フロントの枠組み）
  TauriのUI側は何で作るのが良い？
  • React + TypeScript
  • Vue + TypeScript
  • Svelte + TypeScript
  • 素のHTML/JS（最小）

こんな実問が全部で16問。全部に答た上で、Codexに流すプロンプトが生成されました。

あなたはTauri + React + TypeScriptでローカルデスクトップアプリ(Mac/Windows)を実装するエンジニアです。
目的は「間取り図画像を下敷きに、実寸スケールに合わせた家具（矩形）を作成・配置できるアプリ」のMVPを作ることです。
外部公開は不要、ローカルで動けば良いです。

技術スタック（確定・変更不可）

• Tauri（安定版）
• フロント: React + TypeScript + Vite
• 描画: Konva.js + react-konva
• 状態管理: 任意（Zustand推奨だが自由）
• Undo / Redo: 実装必須（家具操作のみ）

機能要件（MVP・確定）

1. 間取り図画像の読み込み

• png / jpg を選択して読み込む。
• キャンバスの背景として表示する。
• プロジェクト保存時、画像はJSONと同じフォルダにコピーし、相対パスで管理する。

2. スケール設定（必須）

• スケール設定モードを用意。
• ユーザーが画像上で2点をクリックして基準距離を指定。
• 実寸長さを mm 単位で入力。
• px / mm スケールを算出して保持する。
• スケールは再設定可能とし、再設定時は既存家具の表示サイズがすべて追従する。
• スケール未設定時は家具追加を禁止または警告表示する。

3. 家具オブジェクト

• 家具は矩形で表現する。
• 家具プリセット（例: ベッド、机、ソファ）を用意し、サイズ編集可能にする。
• 家具属性:
• id
• name
• presetType
• widthMm
• depthMm
• xPx
• yPx
• rotationDeg（自由回転）
• 操作:
• ドラッグで移動
• 回転操作（UIボタンまたは角度入力）
• 衝突判定、壁判定、部屋判定は実装しない。

4. グリッド表示

• 実寸ベースのグリッド（mm基準）を表示できる。
• グリッドON / OFF切替。
• グリッド間隔（例: 50 / 100 / 200 mm）を選択可能。
• スナップ機能は実装しない。

5. Undo / Redo

• 対象: 家具の追加 / 削除 / 移動 / 回転 / サイズ変更。
• スケール設定や画像読み込みは対象外。
• ボタンUIで操作可能にする。

6. 保存 / 読み込み

• プロジェクトを JSON として保存 / 読み込み。
• JSON内容（最低限）:
• backgroundImage: 相対パス
• scalePxPerMm
• items: 家具配列（id, name, presetType, widthMm, depthMm, xPx, yPx, rotationDeg）

7. 書き出し

• 現在の状態を PNG と JSON の両方で書き出す。
• PNGには背景画像・家具・グリッド（ON時）を含める。

厳守事項

• 要件にない機能を勝手に実装しない。
• 判断が分かれる部分は実装前に質問する。
• MVPとして動くことを最優先する。

実装方針

• Tauri初期化 → React UI構築 → Konva Stage/Layer構成。
• 家具サイズは常に mm → px 変換で描画する。
• Undo / Redo は家具状態の履歴管理で実装する。
• ファイル操作は Tauri FS / dialog API を使用する。

成果物

• 実行手順（dev / build）を含む README。
• ローカルで起動して動作確認できる状態。

そして出来上がったプロンプトをCodexに流し込みます。

そして出来上がったコード類がこんな感じです。

READMEも作ってもらってるので、使い方も一目瞭然。

実際に動かすとこんな感じです。

フロントエンドなんて全くわかってないのに、簡単にアプリができる時代になりました🥺

背景画像で間取り図を選択し、スケールを設定、家具を配置してみたのが

こんな感じです。

実際に引っ越す前に、既存の家具の配置イメージと設置できる範囲のシミュレーションが簡単にできました。

簡易ツールではありますが、十分に目的は達成できるアプリができたのではないかと思います。

間取り図のに長さが書いてあるタイプだったのでスケール設定は簡単でしたが、Webで見る間取り図でスケールが分からなければどこか一箇所測って代用することもできるので、引越しが決まってからなら使えるかなと思ってます。

まとめ

はい、フロントエンド知識は皆無のエンジニアでも、実質１時間程度でアプリができてしまいました。

色々荒削りな部分もありますが、自分で使いたい程度のアプリならこのような形でプロンプトをAIにまとめさせて、AIエージェントにコードを書かせることで、仕様を詰めながら簡単に作成できることが、わかりました。

自分が欲しいものを作る。これが一番楽しく学習に繋げていけるコツなのではないかと感じました。

今後も、自分が欲しいもの、やりたいことをAIで実現できないか、色々試行錯誤をしながらやった結果を発信していけたらと思います。