Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yahoo!知恵袋におけるFeature Flag活用〜安全で柔軟なリリースを目指して〜
Search
Koki Tsumura
September 20, 2025
5
890
Yahoo!知恵袋におけるFeature Flag活用〜安全で柔軟なリリースを目指して〜
フロントエンドカンファレンス東京 2025 での登壇
https://fec-tokyo.connpass.com/event/352581/
Koki Tsumura
September 20, 2025
Tweet
Share
More Decks by Koki Tsumura
See All by Koki Tsumura
ステップバイステップで進めるYahoo!知恵袋のフロントエンドリアーキテクト
l1lhu1hu1
1
5.7k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Writing Fast Ruby
sferik
629
62k
Bash Introduction
62gerente
615
210k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Building Applications with DynamoDB
mza
96
6.6k
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Documentation Writing (for coders)
carmenintech
75
5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Transcript
© LY Corporation Yahoo!知恵袋におけるFeature Flag活用 〜安全で柔軟なリリースを目指して〜 LINEヤフー株式会社 津村光輝
© LY Corporation 自己紹介 2 • 2022/04 新卒でヤフー株式会社に入社 • 2022/06-2023/12
Yahoo!しごとカタログ • 2023/04-現在 Yahoo!知恵袋 経歴 津村 光輝(@l1lhu1hu1)
© LY Corporation 機能・ページ • AI回答機能 • 知恵トーク(CBT) • カウンセラー・占い師相談
• おすすめ質問レコメンド機能 3 Yahoo!知恵袋の紹介 基本情報 • 登録利用者数5,200万人以上(2024年4月時点) の2004年からあるQ&Aサイト(21周年 ) • Node.js, React, Express.js等を利用
© LY Corporation 4 フロントエンドチームが抱える問題 4 問題はたくさんある コードを置く 場所が不明確 バグの検知
がしづらい デザインとコードの 紐づけができていない 生成AIを開発で十分に 活用しきれていない 不具合時の復旧 に時間がかかる
© LY Corporation 5 フロントエンドチームが抱える問題 5 問題はたくさんある コードを置く 場所が不明確 バグの検知
がしづらい デザインとコードの 紐づけができていない 不具合時の復旧 に時間がかかる 今回は赤文字の部分 について話します! 生成AIを開発で十分に 活用しきれていない
© LY Corporation 問題: 不具合時の復旧に時間がかかる 問題1: 復旧作業が複雑 問題2: 原因の特定が困難 6
© LY Corporation 問題: 不具合時の復旧に時間がかかる 問題1: 復旧作業が複雑 複数機能を同時にリリース時に不具合が発生しrevert時にconflictが発生すると、 conflict解消や確認に時間がかかる 問題2:
原因の特定が困難 7
© LY Corporation 問題: 不具合時の復旧に時間がかかる 問題1: 復旧作業が複雑 複数機能を同時にリリース時に不具合が発生しrevert時にconflictが発生すると、 conflict解消や確認に時間がかかる 問題2:
原因の特定が困難 本番環境でのみ再現する不具合は原因特定が難しく時間がかかる 8
© LY Corporation Feature Flag導入で解決! 解決策 9
© LY Corporation 10 10 特定の機能を有効化・無効化するための仕組み • 機能ごとのスイッチがあるイメージ • 静的なものと動的なものがある(今回話すのは動的な方)
• 様々なサービスでの採用実績がある Feature Flagとは(1/2) 機能名 有効か 質問投稿機能 false 回答投稿機能 true ランキングモジュール表示機能 true
© LY Corporation 11 11 システム Feature Flagとは(2/2) リクエスト リクエスト
オンになっている 機能のフラグ一覧 レスポンス ユーザー 開発者 機能名 有効か 質問投稿機能 false 回答投稿機能 true ランキングモジュール表示機能 true Feature Flag管理システム 操作
© LY Corporation 12 12 システム Feature Flagとは(2/2) リクエスト リクエスト
オンになっている 機能のフラグ一覧 レスポンス ユーザー 開発者 機能名 有効か 質問投稿機能 false 回答投稿機能 true ランキングモジュール表示機能 true Feature Flag管理システム 操作 メリット • リリース後に機能のオンオフを制御可能 • 新機能の公開時刻をデプロイと分けられる
© LY Corporation 13 13 Yahoo!知恵袋 FEシステム ABテスト管理システム Yahoo!知恵袋のフロントエンドシステム リクエスト
レスポンス レスポンス ユーザー 社内システム 1 社内システム 2 … リクエスト 社内システム N レスポンス リクエスト レスポンス リクエスト Yahoo!知恵袋のFEシステムは複数のAPIを呼び出し、レスポンスを作成する
© LY Corporation 14 14 Yahoo!知恵袋 FEシステム ABテスト管理システム リクエスト レスポンス
レスポンス ユーザー … リクエスト レスポンス リクエスト レスポンス リクエスト Feature Flagの導入は、赤枠部分に実装及び設定追加で実現した Yahoo!知恵袋のフロントエンドシステム 社内システム 1 社内システム 2 社内システム N
© LY Corporation 15 15 Yahoo!知恵袋 FEシステム ABテスト管理 システム リクエスト
cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 Yahoo!知恵袋のフロントエンドシステム
© LY Corporation 16 16 Yahoo!知恵袋 FEシステム ABテスト管理 システム リクエスト
cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 Yahoo!知恵袋のフロントエンドシステム
© LY Corporation ABテスト管理システム 17 17 Bucket名 Bucket割当 pv 50%
createdAt 50% ランキング表示変更ABテスト … ABテストとは 2つ以上の機能のパターンを用意して、実際のユーザーにランダムに振り分 け、どのパターンがより良い成果を出すかを比較検証する手法 Bucket名 Bucket割当 blue 50% red 50% 質問投稿ボタンの色変更ABテスト
© 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を追加
© LY Corporation 19 19 Yahoo!知恵袋 FEシステム ABテスト管理 システム Feature
Flagの導入(2/5) リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作
© 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%割当 • 環境変数のみ変更する
© 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%割当 • 不具合発生時の検証用
© 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を割り当てて検証
© LY Corporation 23 23 Yahoo!知恵袋 FEシステム ABテスト管理 システム Feature
Flagの導入: ここまでの全体像 リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作
© LY Corporation 24 24 Yahoo!知恵袋 FEシステム ABテスト管理 システム ABテスト管理システム障害発生時
(1/2) リクエスト cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 出てほしくない機能がオンに、出てほしい機能がオフになりうる
© LY Corporation 25 25 Yahoo!知恵袋 FEシステム ABテスト管理 システム リクエスト
cookie ユーザーに割り当てる bucket一覧 レスポンス ユーザー 開発者 操作 Feature名 デフォルト値 feat1 true feat2 false FEシステム側で各Feature Flagごとにデフォルト値を設ける ABテスト管理システム障害発生時 (2/2)
© LY Corporation 26 26 ABテスト管理 システム 最終形 リクエスト cookie
bucket一覧 feature flag一覧 レスポンス ユーザー 開発者 操作 Feature名 デフォルト値 feat1 true feat2 false feat3 false Yahoo!知恵袋 FEシステム
© LY Corporation 27 実際に導入してみて発生した問題 27 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる
問題2: 全修正でFeature Flagを導入すると実装が複雑になる 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる
© LY Corporation 28 実際に導入してみて発生した問題 28 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる
解決策: 基本的にFeature Flagを一週間で消す運用 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる
© LY Corporation 29 実際に導入してみて発生した問題 29 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる
解決策: 基本的にFeature Flagを一週間で消す運用 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 解決策: 大きな機能追加に入れ、細かい修正に入れない(例: 軽微なUI修正) 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる
© LY Corporation 30 実際に導入してみて発生した問題 30 以下のような問題が発生 問題1: Feature Flagを消さずに放置すると条件分岐が複雑になる
解決策: 基本的にFeature Flagを一週間で消す運用 問題2: 全修正でFeature Flagを導入すると実装が複雑になる 解決策: 大きな機能追加に入れ、細かい修正に入れない(例: 軽微なUI修正) 問題3: Feature Flagを入れるもの・入れないものの迷いが生じる 解決策: ライブラリアップデート、リファクタ、リアーキテクトに入れない
© LY Corporation まとめ Yahoo!知恵袋で抱えていた不具合時の復旧に時間がかかる問題 問題1: 復旧作業が複雑 問題2: 原因の特定が困難 31
© LY Corporation まとめ Yahoo!知恵袋で抱えていた不具合時の復旧に時間がかかる問題 問題1: 復旧作業が複雑 一部解決: • 不具合のある機能のFeature
Flagをオフにし迅速な復旧が可能に • 次のリリースまでに落ち着いて修正する選択肢が増えた 問題2: 原因の特定が困難 32
© LY Corporation まとめ Yahoo!知恵袋で抱えていた不具合時の復旧に時間がかかる問題 問題1: 復旧作業が複雑 一部解決: • 不具合のある機能のFeature
Flagをオフにし迅速な復旧が可能に • 次のリリースまでに落ち着いて修正する選択肢が増えた 問題2: 原因の特定が困難 一部解決: • ユーザー影響なしで本番環境の検証が可能に • 原因特定は導入前よりしやすくなった 33
© LY Corporation 34 最後に 34 Feature Flagは安全で柔軟なリリースを実現できる強力なツール • 緊急時のドタバタから解放され、落ち着いた対応を可能にする
• 利用する場合は運用ルールの整備をセットでやるのがおすすめ • やり方を工夫すれば本番環境でのみ起こる不具合の検証を可能に
© LY Corporation 35 みなさんもFeature Flag使っていきましょう! 35
© LY Corporation 参考・引用 Yahoo!知恵袋、サービス開始20周年を記念した特集サイトを公開 https://www.lycorp.co.jp/ja/news/release/007875 回答のつかない質問を減らすために https://chiebukuro.yahoo.co.jp/topic/ai/answer.html 36
© LY Corporation ご清聴ありがとうございます!