worksPHOTO BOOK SHOP

技術選定のポイント

今回は以下のような技術選定を行いました。

• フレームワーク：インフラ要件の静的生成に対応するためNext.jsを選びました。静的生成のサポートを強化するためにApp Routerを採用しています。
• UIライブラリ：C向けアプリケーションなので見た目を自由にカスタマイズできるshadcn/uiを選びました。shadcn/uiはRadix UIというヘッドレスUIライブラリとTailwind CSSで構成されています。UIのふるまいだけを提供するヘッドレスUIライブラリを利用することで高品質なUIを高速に作ることができます。
• UIカタログ：UIバリエーションを過不足なく実装し、効率的にコーディング・レビューを行うためにStorybookを導入しました。
• スタイリング：Tailwind CSSを使い、デザイントークンをテーマに反映することで、堅牢で高速な開発体験を実現できました。
• データフェッチ：クライアントサイドフェッチするためにTanstack Queryを選びました。またAPIとアプリケーションを並行して開発する必要があったので、APIをモックできるMSWも導入しています。

静的生成するSPAアプリケーションにおいて、よく見られる構成ではありますが、プロジェクトに合わせて細部をうまく調整できたと思います。また、開発チーム全体の認識を統一するため、ライブラリの使用方法や効率的な記述方法をコーディングガイドラインとして定義し、サンプルコードも用意しました。

共同開発体制の構築

今回のプロジェクトでは、弊社エンジニアが開発フローを策定し、クライアントのエンジニアとの共同開発体制を構築しました。

GitHub Projectsを活用し、開発の全工程をマイルストーンとタスクで管理しました。開発メンバーはマイルストーンの期限達成を目指し、相互にコードレビューを行いながら開発を進めます。進捗はタスクの消化率で常に確認でき、プロジェクトの透明性を高めました。

共同の開発フローを構築したことで、ナレッジを共有しつつプロジェクトを完遂することができました。長期的な関係を築く中で、クライアント社内での内製化をサポートすることも可能です。