workswine@オンラインストア
プロジェクト概要
Summary
トップソムリエが厳選したワインを購入できるオンラインショップです。ワインを購入して飲み、評価やオンライン診断を行うことで、自分の好みを反映したパーソナライズカルテを作成できます。さらに、体験型ワインショップ「wine@EBISU」では、ソムリエのアドバイスを受けながらワインを楽しみ、評価や診断を体験することができます。
クライアントの課題
Business Issue
技術のリプレイスやコア機能の改善を進めているが、実装のクオリティやスピードに課題がある。
自社のスクラムチームに加わり、ナレッジの共有やチームの育成をサポートしてほしい。
最新のフロントエンド技術を十分に活用できておらず、実装方針の策定や技術的負債の解消、開発をリードしてほしい。
達成成果
Achievements
技術のリプレイスやコア機能の改善を担当し、スピード感を持ってヘッドレスコマースサイトを構築した。
DXを促進するツールや仕組みを導入し、チームへのナレッジ共有を行うことで、チーム全体の生産性を向上させた。
最新のフロントエンド技術を活用したより良い設計・実装方針を提案し、既存コードの修正やリファクタリングまで行った。
Web開発・課題解決について提案いたします
Web開発のご相談やお見積、事例についてなど、お気軽にお問い合わせください。
打ち合わせでのヒアリングも可能です。
ヘッドレスコマースサイトの構築
本プロジェクトでは、Shopifyで構築されたECサイトを、Shopify提供のReactフレームワーク「Hydrogen React」にリプレイスし、カスタマイズ性の高いヘッドレスコマースサイトの構築を目指しました。Hydrogenの標準技術スタックであるRemix、Tailwind CSS、GraphQLを活用しています。
弊社はフロントエンドのリードエンジニアとして、技術のリプレイスとコア機能の改善に取り組みました。主な取り組み内容は以下のとおりです。
- 新しい診断ロジックと診断フローの開発
- カルテおよび診断結果画面のUIとコンテンツの改善
- 店舗でワインを飲みながら評価を体験できるメニューの開発
- ワインのお気に入り・ユーザー評価画面のリニューアルと機能改善
- フロントエンドフレームワークの最新機能を活用し、ページパフォーマンスを向上
チーム全体の生産性向上
.png)
実装のクオリティやスピードに課題があったため、まずは効率的に開発できる実装基盤の構築を目指しました。主な取り組み内容は以下のとおりです。
- リンターやCIなどの開発環境の整備
- コードの全体像を把握しやすいように新しい設計方針の導入
- 新しい設計方針に基づく既存コードのリファクタリング実施
- フロントエンドのテスト
開発のベースラインを整えた上で、モダンフロントエンド開発に必要な以下の観点について、ナレッジの共有も行いました。
- ヘッドレスUIライブラリとTailwind CSSを活用した、堅牢で再利用性の高いコンポーネント開発
- Storybookとモックを活用した効率的なコーディング、レビューへの活用方法
- GraphQLのコード自動生成と実装方針
- フレームワークの概念に則ったデータフェッチ戦略やフックを利用したコーディング
- ストリーミング配信やSuspense、APIルートを用いた高パフォーマンスな開発手法
ガイドラインやサンプルコードの作成、コードレビューやモブプログラミング、リファインメントを通じてチームメンバーと密にコミュニケーションを取り、これらの考え方を徐々に浸透させました。
フロントエンドの経験が浅いメンバーもいる中、チームに参画して半年以上経ち、スクラム開発を通じて生産性の高いクロスファンクショナルなチームを構築することができました。弊社は特に、チーム全体のフロントエンド開発力の向上に貢献できたと考えています。
Web開発・課題解決について提案いたします
Web開発のご相談やお見積、事例についてなど、お気軽にお問い合わせください。
打ち合わせでのヒアリングも可能です。
