Yahoo!知恵袋におけるFeature Flag活用〜安全で柔軟なリリースを目指して〜

フロントエンドカンファレンス東京 2025 での登壇
https://fec-tokyo.connpass.com/event/352581/

Transcript

1. © LY Corporation Yahoo!知恵袋におけるFeature Flag活用 〜安全で柔軟なリリースを目指して〜 LINEヤフー株式会社 津村光輝
2. © LY Corporation 自己紹介 2 • 2022/04 新卒でヤフー株式会社に入社 • 2022/06-2023/12 Yahoo!しごとカタログ • 2023/04-現在 Yahoo!知恵袋 経歴 津村 光輝(@l1lhu1hu1)
3. © LY Corporation 機能・ページ • AI回答機能 • 知恵トーク(CBT) • カウンセラー・占い師相談 • おすすめ質問レコメンド機能 3 Yahoo!知恵袋の紹介 基本情報 • 登録利用者数5,200万人以上(2024年4月時点) の2004年からあるQ&Aサイト(21周年 ) • Node.js, React, Express.js等を利用
4. © LY Corporation 4 フロントエンドチームが抱える問題 4 問題はたくさんある コードを置く 場所が不明確 バグの検知 がしづらい デザインとコードの 紐づけができていない 生成AIを開発で十分に 活用しきれていない 不具合時の復旧 に時間がかかる
5. © LY Corporation 5 フロントエンドチームが抱える問題 5 問題はたくさんある コードを置く 場所が不明確 バグの検知 がしづらい デザインとコードの 紐づけができていない 不具合時の復旧 に時間がかかる 今回は赤文字の部分 について話します！ 生成AIを開発で十分に 活用しきれていない
6. © LY Corporation 問題: 不具合時の復旧に時間がかかる 問題1: 復旧作業が複雑 問題2: 原因の特定が困難 6
7. © LY Corporation 問題: 不具合時の復旧に時間がかかる 問題1: 復旧作業が複雑 複数機能を同時にリリース時に不具合が発生しrevert時にconflictが発生すると、 conflict解消や確認に時間がかかる 問題2: 原因の特定が困難 7
8. © LY Corporation 問題: 不具合時の復旧に時間がかかる 問題1: 復旧作業が複雑 複数機能を同時にリリース時に不具合が発生しrevert時にconflictが発生すると、 conflict解消や確認に時間がかかる 問題2: 原因の特定が困難 本番環境でのみ再現する不具合は原因特定が難しく時間がかかる 8
9. © LY Corporation Feature Flag導入で解決！ 解決策 9
10. © LY Corporation 10 10 特定の機能を有効化・無効化するための仕組み • 機能ごとのスイッチがあるイメージ • 静的なものと動的なものがある(今回話すのは動的な方) • 様々なサービスでの採用実績がある Feature Flagとは(1/2) 機能名 有効か 質問投稿機能 false 回答投稿機能 true ランキングモジュール表示機能 true
11. © LY Corporation 11 11 システム Feature Flagとは(2/2) リクエスト リクエスト オンになっている 機能のフラグ一覧 レスポンス ユーザー 開発者 機能名 有効か 質問投稿機能 false 回答投稿機能 true ランキングモジュール表示機能 true Feature Flag管理システム 操作
12. © LY Corporation 12 12 システム Feature Flagとは(2/2) リクエスト リクエスト オンになっている 機能のフラグ一覧 レスポンス ユーザー 開発者 機能名 有効か 質問投稿機能 false 回答投稿機能 true ランキングモジュール表示機能 true Feature Flag管理システム 操作 メリット • リリース後に機能のオンオフを制御可能 • 新機能の公開時刻をデプロイと分けられる
13. © LY Corporation 13 13 Yahoo!知恵袋 FEシステム ABテスト管理システム Yahoo!知恵袋のフロントエンドシステム リクエスト レスポンス レスポンス ユーザー 社内システム 1 社内システム 2 … リクエスト 社内システム N レスポンス リクエスト レスポンス リクエスト Yahoo!知恵袋のFEシステムは複数のAPIを呼び出し、レスポンスを作成する
14. © LY Corporation 14 14 Yahoo!知恵袋 FEシステム ABテスト管理システム リクエスト レスポンス レスポンス ユーザー … リクエスト レスポンス リクエスト レスポンス リクエスト Feature Flagの導入は、赤枠部分に実装及び設定追加で実現した Yahoo!知恵袋のフロントエンドシステム 社内システム 1 社内システム 2 社内システム N
15. © LY Corporation 15 15 Yahoo!知恵袋 FEシステム ABテスト管理 システム リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 Yahoo!知恵袋のフロントエンドシステム
16. © LY Corporation 16 16 Yahoo!知恵袋 FEシステム ABテスト管理 システム リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 Yahoo!知恵袋のフロントエンドシステム
17. © LY Corporation ABテスト管理システム 17 17 Bucket名 Bucket割当 pv 50% createdAt 50% ランキング表示変更ABテスト … ABテストとは 2つ以上の機能のパターンを用意して、実際のユーザーにランダムに振り分 け、どのパターンがより良い成果を出すかを比較検証する手法 Bucket名 Bucket割当 blue 50% red 50% 質問投稿ボタンの色変更ABテスト
18. © LY Corporation 18 18 Feature Flagの導入(1/5) ABテスト管理システム … Bucket名 Bucket割当 blue 50% red 50% 質問投稿ボタンの色変更ABテスト Bucket名 Bucket割当 環境変数 user 100% feat1=true feat2=false feat3=true inspect 0% Feature Flag用ABテスト NEW! • Feature Flag用ABテストを新たに追加 • Feature Flag用ABテストにはuserとinspectの2つのbucketを追加
19. © LY Corporation 19 19 Yahoo!知恵袋 FEシステム ABテスト管理 システム Feature Flagの導入(2/5) リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作
20. © LY Corporation 20 20 Feature Flagの導入(3/5) ABテスト管理システム Bucket名 Bucket割当 環境変数 user 100% feat1=true feat2=false feat3=true inspect 0% Feature Flag用ABテスト … ユーザー向けのbucket • 常に100%割当 • 環境変数のみ変更する
21. © LY Corporation 21 21 Feature Flagの導入(4/5) ABテスト管理システム Bucket名 Bucket割当 環境変数 user 100% feat1=true feat2=false feat3=true inspect 0% Feature Flag用ABテスト … 開発者向けのbucket • 常に0%割当 • 不具合発生時の検証用
22. © LY Corporation 22 22 Feature Flagの導入(5/5) ABテスト管理システム Bucket名 Bucket割当 環境変数 user 100% feat1=true feat2=false feat3=true inspect 0% feat1=true feat2=true feat3=true Feature Flag用ABテスト … 例: feat2で問題が起きた場合 1. userのfeat2をfalse, inspectのfeat2をtrueに設定 2. 自分にinspect bucketを割り当てて検証
23. © LY Corporation 23 23 Yahoo!知恵袋 FEシステム ABテスト管理 システム Feature Flagの導入: ここまでの全体像 リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作
24. © LY Corporation 24 24 Yahoo!知恵袋 FEシステム ABテスト管理 システム ABテスト管理システム障害発生時 (1/2) リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 出てほしくない機能がオンに、出てほしい機能がオフになりうる
25. © LY Corporation 25 25 Yahoo!知恵袋 FEシステム ABテスト管理 システム リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 Feature名 デフォルト値 feat1 true feat2 false FEシステム側で各Feature Flagごとにデフォルト値を設ける ABテスト管理システム障害発生時 (2/2)
26. © LY Corporation 26 26 ABテスト管理 システム 最終形 リクエスト cookie bucket一覧 feature flag一覧 レスポンス ユーザー 開発者 操作 Feature名 デフォルト値 feat1 true feat2 false feat3 false Yahoo!知恵袋 FEシステム
27. © LY Corporation 27 実際に導入してみて発生した問題 27 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる
28. © LY Corporation 28 実際に導入してみて発生した問題 28 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる 解決策: 基本的にFeature Flagを一週間で消す運用 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる
29. © LY Corporation 29 実際に導入してみて発生した問題 29 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる 解決策: 基本的にFeature Flagを一週間で消す運用 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 解決策: 大きな機能追加に入れ、細かい修正に入れない(例: 軽微なUI修正) 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる
30. © LY Corporation 30 実際に導入してみて発生した問題 30 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる 解決策: 基本的にFeature Flagを一週間で消す運用 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 解決策: 大きな機能追加に入れ、細かい修正に入れない(例: 軽微なUI修正) 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる 解決策: ライブラリアップデート、リファクタ、リアーキテクトに入れない
31. © LY Corporation まとめ Yahoo!知恵袋で抱えていた不具合時の復旧に時間がかかる問題 問題1: 復旧作業が複雑 問題2: 原因の特定が困難 31
32. © LY Corporation まとめ Yahoo!知恵袋で抱えていた不具合時の復旧に時間がかかる問題 問題1: 復旧作業が複雑 一部解決: • 不具合のある機能のFeature Flagをオフにし迅速な復旧が可能に • 次のリリースまでに落ち着いて修正する選択肢が増えた 問題2: 原因の特定が困難 32
33. © LY Corporation まとめ Yahoo!知恵袋で抱えていた不具合時の復旧に時間がかかる問題 問題1: 復旧作業が複雑 一部解決: • 不具合のある機能のFeature Flagをオフにし迅速な復旧が可能に • 次のリリースまでに落ち着いて修正する選択肢が増えた 問題2: 原因の特定が困難 一部解決: • ユーザー影響なしで本番環境の検証が可能に • 原因特定は導入前よりしやすくなった 33
34. © LY Corporation 34 最後に 34 Feature Flagは安全で柔軟なリリースを実現できる強力なツール • 緊急時のドタバタから解放され、落ち着いた対応を可能にする • 利用する場合は運用ルールの整備をセットでやるのがおすすめ • やり方を工夫すれば本番環境でのみ起こる不具合の検証を可能に
35. © LY Corporation 35 みなさんもFeature Flag使っていきましょう！ 35
36. © LY Corporation 参考・引用 Yahoo!知恵袋、サービス開始20周年を記念した特集サイトを公開 https://www.lycorp.co.jp/ja/news/release/007875 回答のつかない質問を減らすために https://chiebukuro.yahoo.co.jp/topic/ai/answer.html 36
37. © LY Corporation ご清聴ありがとうございます！