Project Detail
( 05 )
SABI SHOP - WABI SABI Minimal Coffee Store
SABI SHOPは、日本の美意識「侘び寂び(Wabi-Sabi)」から着想を得たミニマルなコーヒーストアです。 「華やかさよりも余白を、装飾よりも温もりを」というコンセプトのもと、抑えたデザインと直感的なユーザー体験(UX)を追求しました。 Next.jsのSSRおよびSSGを活用し、SEOパフォーマンスを強化しました。 Tailwind CSSによって高速かつ一貫性のあるデザインシステムを構築し、Redux Toolkitを用いてグローバル状態を効率的に管理しています。 また、Firebase AuthとFirestoreを利用してログインおよび注文データを処理し、Vercelによる自動デプロイパイプラインを構築しました。 i18nに対応し、韓国語と日本語の切り替えが可能な多言語構造を設計しました。
本プロジェクトの主要機能・構造・スクリーンショット等はGitHubにてご確認いただけます。また、プロジェクトリンクから実際のサービスを体験することも可能です。
本ページでは、開発の背景、課題解決の過程、学んだ点を中心にまとめています。
Motive
これまでのプロジェクトではReact SPAとContext APIを基盤として実装していましたが、レンダリング効率や状態管理の複雑さ、SEO対応において限界を感じていました。 そこでNext.jsを導入し、CSRだけでなくSSR・SSGの構成を直接体験し、実際のデプロイ環境でSEOおよび初期ロード速度の改善効果を検証しました。 また、CSS(BEM命名)による静的スタイリングから脱却し、Tailwind CSSへ移行することで、高速なスタイル設計と一貫したレスポンシブデザインを実現しました。
Problem Solving
React Context APIの代わりにRedux Toolkitを導入し、カートのように複数ページで共通利用されるグローバル状態をslice単位で構造化し、localStorageと同期させることでデータの永続性を確保しました。 Firebase Authを用いてユーザー認証を簡素化し、Firestoreで注文データを管理しました。 また、VercelのCI/CDパイプラインを構成し、push操作のみで自動デプロイが行える環境を整えました。 Next.jsの動的ルーティング(App Router)を活用して、商品詳細ページおよび注文履歴を効率的にレンダリングし、i18nの多言語JSON構造をlocaleごとに分離して保守性を向上させました。 TypeScriptを導入することでコンパイル段階でエラーを事前に検出し、props・stateの型整合性を維持することで安定したコード品質を実現しました。
Learned
Next.jsへの移行を通じて、React SPAとは異なるレンダリング方式(SSR、SSG、ISR)を理解し、サービス構築におけるクライアントとサーバーの役割分担を明確に把握することができました。 Tailwind CSSの導入によって、デザインシステムの管理効率と生産性の向上を実感し、TypeScriptへのマイグレーションを通じてコードの安全性と保守性を大幅に高めました。 また、Redux Toolkitのslice構造により状態管理ロジックがシンプルかつ予測可能になり、Vercelによる自動デプロイにより開発からデプロイ、フィードバックまでのサイクルを大幅に短縮できました。 結果として、SABI SHOPは技術的な実験と学習を兼ね備えた「次のステップへの成長プロジェクト」となり、フロントエンドエンジニアとして新しい技術スタックを実務レベルで習得した貴重な経験となりました。