【ITニュース解説】Building a browser-based room planner with Codex: what I learned

「Small Room Solver」は、部屋の模様替えを計画する際に、実際に家具を動かす前にブラウザ上で手軽に配置をシミュレーションできる無料のウェブツールだ。ユーザーはまず、自分の部屋の形をウェブ上で描き、次に所有する家具の寸法を入力する。これにより、2Dの画面で家具を自由に配置して試行錯誤し、その結果を3Dプレビューで確認できる。このツールは、アカウント登録が一切不要で、作成したレイアウトデータはユーザーのブラウザ内にローカルに保存されるため、プライバシーが保護される。もし作成したレイアウトを他の人と共有したい場合は、その時だけスナップショットを共有する選択肢が用意されている。

このツールの開発において、特筆すべきは、OpenAIが提供する「Codex」というAIツールが、実装作業やデバッグ作業の多くの部分で活用された点だ。Codexは、人間が自然言語で指示を出すと、それに従ってプログラミングコードを生成したり、既存のコードの問題点を指摘したりする能力を持つAIで、これにより開発者は非常に効率的に開発を進めることができた。

使用されている技術スタックも現代的で興味深い。ウェブサイトのフレームワークとしては「Astro」と「React」が採用されており、プログラミング言語には「TypeScript」が使われている。Astroは、特に高速なウェブサイトを構築するのに向いており、優れたパフォーマンスを提供する。Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリで、Small Room Solverのような対話的な画面を実現するのに適している。TypeScriptは、JavaScriptに静的型付けという機能を追加したもので、これによりコードの信頼性が高まり、大規模なプロジェクトでも開発がしやすくなる。2Dエディタ部分は「SVG（Scalable Vector Graphics）」で描画されている。SVGは、画像を拡大・縮小しても画質が劣化しないベクター形式のグラフィックであり、部屋のレイアウトを鮮明に表示するのに最適だ。3Dプレビュー機能には「Three.js」が利用されている。これは、ブラウザで3Dグラフィックスを表示するための強力なJavaScriptライブラリで、さらに「React Three Fiber」を通じてReactアプリケーションに統合されており、3D要素をReactコンポーネントとして扱いやすくしている。ユーザーが作成したレイアウトデータは、ブラウザが提供する「IndexedDB」というローカルデータベースに保存される。これは、ウェブアプリケーションがクライアント側のブラウザに大量の構造化データを保存できる仕組みで、オフライン環境でもデータにアクセスできるメリットがある。

開発のワークフローは、「小さな反復（イテレーション）」を繰り返すアジャイルな手法が取られている。具体的には、まず実現したい機能や挙動を明確に記述し、その記述に基づいてCodexを利用してコードを実装する。その後、ブラウザで実際に動作を確認し、必要に応じて修正や調整を加えるというサイクルを高速に繰り返す。このアプローチにより、開発者は常に機能の進捗を把握しながら、柔軟に開発の方向性を調整できる。プロジェクトの重要な制約や開発方針は「AGENTS.md」というファイルに明記されており、例えば、入力された家具の寸法は常に正確に保つことや、ユーザーの編集データはブラウザにローカル保存されることなどが明確にされている。これは、開発チーム内で共通の認識を持ち、開発の軸がぶれないようにするための工夫だ。さらに、開発者はCodexにフロントエンドデザインやアクセシビリティに関するスキルも追加している。アクセシビリティとは、障がいのある人を含め、すべての人がウェブツールを問題なく利用できるようにする設計のことで、AIの活用により、より使いやすいツールを効率的に作り上げることが可能になる。品質保証のためには、複数のテストツールが使われている。「Vitest」は、JavaScriptやTypeScriptのコードを高速にテストするためのフレームワークで、部屋の形状計算などの「ジオメトリ」やアプリケーションの核となる「コアロジック」が正しく機能するかを検証するのに使われる。また、「Playwright」は、実際のブラウザを操作して、ユーザーのインタラクションやアクセシビリティの問題がないかを自動的にチェックし、ユーザー体験が良好であることを保証している。

このツール開発を通じて、いくつかの実践的な教訓が得られた。 一つ目は、「寸法データと描画表現の明確な分離」だ。ユーザーが入力した家具の寸法は、例えばミリメートル単位の整数値としてアプリケーション内部で正確に管理される。そして、2Dキャンバス上での家具のイラスト表示、ズーム機能、3Dビューでの表示といった、視覚的な表現の部分は、この基となる寸法データに基づいて描画されるだけで、元の寸法データ自体は一切変更されない。これにより、表示方法が変わっても寸法の正確性が常に保たれ、信頼性の高いレイアウト計画が可能になる。 二つ目は、「Undo（元に戻す）機能のユーザー操作への追従」の重要性だ。例えば、ユーザーが家具をドラッグして移動させる操作は、技術的にはマウスのポインターが動くたびに多くのデータ更新が発生する。しかし、ユーザーにとっては、これら一連の動きは「家具を移動させた」という単一のアクションと認識されるべきだ。そのため、エディタの状態管理において、これらの連続するポインター更新を一つの「Undoステップ」としてグループ化するように明示的に処理する必要があった。これにより、ユーザーは自分の意図した粒度で操作を元に戻すことができるようになる。 三つ目は、「3Dプレビューのオンデマンドロード」だ。3Dグラフィックスのレンダリングは、高い処理能力を必要とし、ウェブページの初期読み込み時間を長くする要因となることがある。この問題を避けるため、Small Room Solverでは、3Dプレビューはユーザーが明示的に「見たい」と操作した場合にのみ読み込まれるように設計されている。これにより、初期の2Dエディタの読み込み速度が向上し、ユーザーは素早くレイアウト作業を開始できる。さらに、もし3Dレンダリング機能に何らかの問題が発生したとしても、2Dエディタは独立して機能し続けるため、ツール全体が使用不能になるという事態を防ぐことができる。

現在、開発者が最も注力しているのは「初回訪問時のユーザー体験の改善」だ。多くの人がウェブサイトにはアクセスしているものの、実際にプランナーの機能を深く使い込んだり、具体的なフィードバックを寄せたりする人がまだ少ないという課題がある。この状況を改善するため、開発者はツールの操作方法をさらに簡素化し、さらに、プランナーで何ができるのかを短いデモ動画でループ再生することで、ユーザーがプランナーを本格的に利用する前に、その魅力と使い方を視覚的に理解できるように工夫している。

最後に、開発者は読者に対して、「もしあなたが部屋の模様替えをするなら、何が最も混乱する点か、あるいは作業を妨げる要因となるか」という問いを投げかけている。これは、実際のユーザーからの直接的な意見を収集し、今後のツール改善に活かしていくための重要なフィードバックを求める姿勢を示している。この一連の解説は、Small Room Solverの開発事例を通して、現代のウェブアプリケーション開発におけるAIの活用、多様な技術スタックの組み合わせ、効率的な開発手法、そして何よりもユーザー体験を重視した実装の重要性を、システムエンジニアを目指す初心者にも理解しやすい形で伝えている。