はじめに
こんにちは！株式会社ブロードエッジ・ウェアリンク CTOの高丸です。
今回は、Qiita Advent Calendar 2024の15日目の記事です。
今回は、弊社サービスのコアな部分である診断とカルテの機能に関してリプレイスした取り組みについてお話しさせていただきます。
診断・カルテに関して
診断機能は、ワイン初心者の方でもいくつかの質問に答えていただくだけで簡単に自分の好みの味わいを知ることのできる機能です。弊社独自の38分類から、お客様一人一人に合った味わいタイプを見つけることができます。
また、カルテ機能では、その味わいタイプに関する詳しい説明と、個人の好みに合わせたワインのレコメンデーションを提供しています。
今回のリプレイスでは、診断機能において新しい質問形式を導入し、カルテ機能では味わいタイプに関する説明の情報量を充実させ、レコメンデーションするワインの数を増やすこととなりました。
開発にあたっては、Hydrogen（Remix）での実装となるため、フロントエンドの実装が特に重要となりました。
ステート管理の最適化や、多岐にわたる表示項目に対応するための再利用性の高いコンポーネント作成が必須でした。
弊社のメンバー体制はフリーランスとインターン中心で、この時点で最大10名前後のエンジニアとなっていましたが、その中で特に重要視したポイントが一つあります。
それは、フロントエンドの開発推進です。
フロントエンド開発の加速化
当初の開発を担当していた業務委託会社のメンバーは在籍していたものの、フロントエンド開発が得意なメンバーが少なく、フロントエンド関連のタスクが大量に残っている状況でした。
この課題を解決するため、私はフロントエンドに強い協力会社を探すことにしました。
そして、FLAT社との協業が実現しました。
FLAT社はフロントエンド専門のWeb制作会社で、当時Remixの開発実績こそありませんでしたが、今回のリプレイスプロジェクトは彼らの協力なくしては成功しえなかったと確信しています。
コンポーネントの整理、コロケーションやTailwindCSSクラスの設計、そして素早い画面制作など、私の手の届かなかった部分を全面的に担当していただきました。
私がログイン周りのリプレイスに注力している間に、並行で診断・カルテのページの開発を進めてもらっていましたが、ものすごい速さでできあがっていったのを今でも覚えております。
苦労したところ
バックエンド開発も順調に進んでいましたが、リリース時に予期せぬ問題が発生しました。
今回からGraphQLのAPIとしてバックエンドを開発していましたが、パフォーマンスの面で課題が浮き彫りとなったのです。
特にDB周りの操作に関して、初歩的なN+1問題からDBのコネクション数の問題まで、様々な事象が発生しました。（これらの詳細は後日の記事で詳しく説明させていただく予定です）
振り返ってみると、リプレイス前からのDB設計の不十分さも一因であったと考えています。
新機能の開発を進める中で、それらの修正を行いながらも、パフォーマンスや安定稼働の面での配慮が十分でなかったことは反省点です。
リリース後
チーム全体でボトルネックの特定と対処に取り組み、2024年8月に無事リリースを迎えることができました。
リプレイス前の診断・カルテ画面（スマートフォン）
リプレイス後の診断画面（PC）
リプレイス後のカルテ画面（PC）
リプレイス後のカルテ画面（PC）
リプレイス後のカルテ画面（PC）
このプロジェクトを通じて、チームの団結力は着実に高まっていきました。
また、主要ページのほとんどがリプレイス後のデザインに生まれ変わり、画面遷移の度に、私も感慨深い思いがこみ上げてきました。
さいごに
今回のリプレイスプロジェクトを通じて、技術的な課題解決だけでなく、チーム作りの重要性を改めて実感することができました。フロントエンドの開発では、FLAT社との協業により大きな成果を上げることができ、バックエンドでの問題に直面した際も、チーム全体で取り組むことで乗り越えることができました。
お酒に関する注記
20歳未満の方の飲酒は法律で禁止されています。妊娠中や授乳期の飲酒は、胎児・乳児の発育に悪影響を与えるおそれがあります。
Discussion