【ITニュース解説】Building a Full Stack Web App from scratch: First Steps

Web開発者Constanza Díaz氏が、自身の新しいWebアプリケーション「HandyFEM」をゼロから構築するプロセスについて解説するシリーズの第一回だ。HandyFEMは、熟練した技術を持つ女性プロフェッショナルと、その技術を必要とするクライアントを結びつけることを目的としたデジタルプラットフォームである。Díaz氏は、AI技術の急速な進化に対応し、実践を通じて新しいスキルを習得するためにこのプロジェクトを開始した。これは、バルセロナの大学が提供する起業家プログラムの一環として、ビジネスプロジェクトとしても進められている。

当初、Díaz氏は計画なしでAIツール、具体的にはVercel v0やLovableといったサービスを使ってコーディングを試みたが、自身の構想がAIへのたった一つの指示（プロンプト）で実現できるほど単純ではないことに気づいた。彼女が目指すアプリケーションは多数の機能を持つため、もっとプロフェッショナルで構造的なアプローチが必要だと判断したのだ。そのため、開発プロセスを各段階で詳細に文書化し、他の開発者やデザイナーからのフィードバックを得ながら進めることを決めた。

このプロジェクトでは、特定の技術スタックが選ばれている。フロントエンド（ユーザーが直接触れる部分）のコンポーネント生成には、AIアシスタントであるVercel v0を活用する予定だ。バックエンド（アプリケーションの裏側でデータ処理などを行う部分）の基盤にはSupabaseを使用する。Supabaseは、データベース、認証機能、リアルタイム機能などを提供するサービスだ。また、全体的なアーキテクチャにはNext.jsとTailwindが採用される。Next.jsはReactをベースとしたフレームワークで、ウェブサイトの高速化やSEO対策に優れる。TailwindはユーティリティファーストのCSSフレームワークで、効率的なスタイル設定を可能にする。このシリーズは、技術的な日誌としてだけでなく、MVP（Minimum Viable Product：最小限の機能でリリース可能な製品）の方向性を決定する意思決定の記録としても機能する。

AIツールは非常に迅速に大量のコードを生成できるが、そのリスクとして、製品に明確な構造がない場合、根本的な部分を見失いがちになる点が挙げられる。この問題を防ぐため、Díaz氏はまず「ナビゲーションマップ」を作成することから始めた。ナビゲーションマップとは、アプリケーションの画面構成、ユーザーがたどる経路（ユーザーフロー）、そして各画面間の接続を高いレベルで示す図のことだ。これにより、後から重要な機能が見落とされたり、不足したりする事態を防ぎ、開発の初期段階で全体像を把握できる。

HandyFEMのMVPナビゲーションマップは、FigJamというツールを使って作成された。このマップは、MVPの範囲を明確にし、開発が計画から逸脱しないようにする。主要なセクションは以下の通りだ。ランディングページはアプリケーションへの入り口で、新規登録、ログイン、そしてプロフェッショナルディレクトリへのアクセスを提供する。認証はクライアントとプロフェッショナルの新規登録、およびログイン機能だ。ロールベースのダッシュボードは、クライアントとプロフェッショナル、それぞれの役割に特化した管理画面を提供する。公開ディレクトリは検索可能なプロフェッショナルのリストで、フィルター機能を持つ。プロフェッショナルプロフィールは各プロフェッショナルの詳細情報が記載されたページで、クライアントからの連絡オプションも含む。メッセージシステムはユーザー間の会話リストと直接チャット機能を提供する。

ナビゲーションマップの作成を通じて、Díaz氏はいくつかの重要な教訓を得た。一つ目は、ダッシュボードとプロフィールは別物であるという点だ。ダッシュボードはユーザーがアプリケーション内で自分の活動を管理するための「コントロールセンター」である一方、プロフィールは単に編集可能なデータ（自己紹介やスキルなど）を表示するページである。これらを分離することで、将来的に機能追加の余地が生まれる。二つ目は、役割（ロール）を明確に定義する必要があるという点だ。クライアントとプロフェッショナルという、異なるユーザーの役割を明確に定義し、それぞれがアプリケーション内でどのようなフローをたどるかを早期に設計することで、将来的な改修を最小限に抑え、製品を拡張可能にする。三つ目は、計画が開発のてこになるという点だ。たった一つの図（ナビゲーションマップ）を作成するだけで、開発の優先順位が明確になり、「まずコードを書き、後から構造を考え直す」というよくある落とし穴を避けることができた。計画は効率的かつ堅牢な開発につながる。

次のステップとして、このナビゲーションマップを基に、プロジェクト管理ツールであるJiraを使ってエピック（大規模なタスクのまとまり）と具体的なタスクを作成する予定だ。その後、「スプリント0」と呼ばれる開発準備段階に焦点を当て、以下の作業を進める。具体的には、Supabaseのテーブルとリレーションシップの設定を行い、データベースの構造を設計し、必要なデータがどのように格納され、関連付けられるかを定義する。次に、認証機能の設定（メールアドレスとパスワード）を行い、ユーザーが安全にログイン・ログアウトできる仕組みを構築する。そして、Next.js + Tailwindの初期アーキテクチャの確立を行い、アプリケーションの基盤となるコードの構造とデザインシステムを初期設定する。この構造化されたアプローチにより、AIツールを効果的に活用しつつも、開発のコントロールを失うことなく、長期的なスケーラビリティ（拡張性）を確保することを目指している。

この記事はHandyFEM開発シリーズの第一弾であり、今後の投稿ではJiraでの計画、スプリント0のセットアップ、Vercel v0のワークフローへの統合について解説される予定だ。このプロジェクトは、最新のAI技術を開発に取り入れながら、綿密な計画と構造的なアプローチを重視することで、複雑なWebアプリケーションを成功させるための実践的な例を示している。