Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OpenSearchを使って ごちクルの検索画面を爆速にする

OpenSearchを使って ごちクルの検索画面を爆速にする

for スタフェス Meetup #3 - PJの技術的取り組み公開
https://stafes.connpass.com/event/279671/

Shinpei.Kondo

May 12, 2023
Tweet

Transcript

  1. OpenSearchを使って
    ごちクルの検索画面を爆速にする

    View Slide

  2. ● はじめに
    ● 自己紹介
    ● ごちクルの過去と現在
    ● OpenSearchを使った検索速度改善
    ● おわりに
    お品書き

    View Slide

  3. ここ一年でごちクルのチームが大きく改善しました。
    その結果、様々な課題を解決できるようになったので、解決した課題の一つとして
    OpenSearch導入で検索の速度を改善したことについてお話します。
    はじめに

    View Slide

  4. 自己紹介
    ● 近藤 心平 (HN.こんぺい)
    ● ごちクルPJ TechPM
    ● 入社2017年
    ● 社内基盤 → ごちクルPJ
    ● PHPer
    ● 最近0.9才の息子にメガネ壊されました

    View Slide

  5. ごちクルの過去と現在

    View Slide

  6. ごちクルとは
    ● お弁当 / ケータリングを中心とした食のECモール
    ● リーズナブルなお弁当から有名店まで幅広く対応
    ● 会議弁当やイベント、学校行事などに利用されています
    ● 商品数: 13,000以上
    ● 2012年から運用

    View Slide

  7. ごちクルの歴史
    ● 2012年にCakePHPでスタート
    ● 2019年にLaravelへリプレイス
    ○ CakePHP 2 -> Laravel 5
    ○ jQuery1.10 -> Vue.js 2.6
    ● データベースは変更なし

    View Slide

  8. ごちクルの歴史
    ● リプレイスした後も課題が残っていた
    ● 全体的にレスポンス速度が遅い
    ○ 特に検索画面の速度が遅い
    ● ユースケースに沿っていないUI
    ● 非同期通信が多くいろんな所でローディングが多い
    ● など

    View Slide

  9. ごちクルチーム





    こんどう
    backend
    PdM
    PMM
    ドメインマスター
    PdM
    冷静さNo1
    PdM
    SEO担当
    PdM
    営業
    カスタマー
    サクセス
    商品開発
    デザ
    イナー エンジニアに理解力の高いデザイナー
    関連部署
    これまでのごちクル
    エンジニアは僕一人 ...
    若手のエース
    backend

    View Slide

  10. 採用が進みチームが拡大!!
    修正
    現在のごちクル
    元CTO
    PL / backend
    猫好き
    backend / frontend
    大阪在住
    backend / frontend
    若手のエース
    backend
    UX Enhancement Growth & Engagement





    こんどう
    backend
    育休復帰即活躍
    frontend
    SEO担当業務委託
    backend / frontend
    業務委託
    backend / frontend
    PdM
    PMM
    データ分析強い
    PMM
    ドメインマスター
    PdM
    冷静さNo1
    PdM
    SEO担当
    PdM
    福岡在住
    PMM
    営業
    カスタマー
    サクセス
    商品開発
    デザ
    イナー エンジニアに理解力の高いデザイナー
    関連部署

    View Slide

  11. 直近の改善例
    OpenSearchを使った検索速度改善

    View Slide

  12. ごちクルの歴史
    ● リプレイスした後も課題が残っていた
    ● 全体的にレスポンス速度が遅い
    ○ 特に検索画面の速度が遅い
    ● ユースケースに沿っていないUI
    ● 非同期通信が多く画面上でローディングが多い
    ● など
    この改善について深掘りします。

    View Slide

  13. ごちクルの検索とは
    ● お弁当の検索
    ○ 社内会議で○月○日にn個お弁当が必要
    ○ どんなお弁当があるのか調査 (購入するかは不明)
    ● 全文検索が遅い
    ○ 2012年からデータ構造が変わっていない
    ■ アプリケーションが改善しても、 DBの改善は行われておらず結果として、 indexが効かない、
    大量のJOINが発生するなどで商品検索が遅い
    ■ 頑張ってRDBで実装していた

    View Slide

  14. OpenSearchの導入による課題解決
    テキスト検索が早い
    複雑なSQL
    joinが多く
    index効かない
    n+1の発生
    負荷
    レスポンス速度↓
    スケールが楽
    構造変化に柔軟に対応できる
    それ以外にもメリットが!

    View Slide

  15. 検証段階ですが、検索速度が10倍早くなった!
    OpenSearch導入の効果
    ● 期待される効果
    ○ 検索を利用しやすくなることで、離脱が減りエンゲージメントが向上する
    ○ RDBに検索クエリが流れなくなることで、 DB負荷削減やデータ構造のリファクタリングなどが行いや
    すくなる
    ● 今後期待できる効果
    ○ 位置情報検索と言った新たな検索を追加できるようになる

    View Slide

  16. おわりに
    ● ex-CTO等強いエンジニアのJOINで、これまで着手できなかった課題の改善が進み
    始めました。
    ● 過去の課題の対応だけでなく、UXをチームを作り新しい取り組みにも挑戦できるよう
    になりました。
    ● 過去の課題の解消や新しいことへの挑戦に興味がある方、ごちクルだと超楽しいで
    す!!

    View Slide

  17. ありがとうございました!!

    View Slide