worksフォトブック注文サービス

今回の技術選定

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

• フレームワーク：インフラ要件の静的生成に対応するため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を利用して、全工程をマイルストーンとタスクとして管理しました。開発メンバーは共通の目標であるマイルストーン期限の達成を目指し、相互にコードレビューを実施しつつ開発を進めていきます。進捗はタスクの消化率から簡単に確認できます。

弊社の開発体制・フローに参加していただくことで、技術はもちろん、弊社の開発手法やプロジェクトマネジメントを実際に体験していただきながら、ナレッジを共有することができます。長期的な関係を築く中でクライアント社内での内製化をサポートすることも可能です。