Slide 1
Slide 1 text
ローンチから16年目の
Webサービスに、
どうやってフィーチャートグル
を導入したか、
運用しているか。
Slide 2
Slide 2 text
自己紹介
名前: meihei（江間洋平）
所属: 株式会社PR TIMES
Twitter: app1e_s
GitHub: meihei3
VTuberの配信を流して生きて
います
2
Slide 3
Slide 3 text
今回が初登壇です🙌
3
Slide 4
Slide 4 text
この発表の位置づけ
4
Slide 5
Slide 5 text
5
ローンチから16年目の
Webサービスに、
どうやってフィーチャートグル
を導入したか、
運用しているか。
Slide 6
Slide 6 text
アジェンダ
● 導入の背景と結果
● フィーチャートグルについて
● フィーチャートグルの実装・導入
● フィーチャートグルの運用・改善
● まとめ
6
Slide 7
Slide 7 text
アジェンダ
● 導入の背景と結果
● フィーチャートグルについて
● フィーチャートグルの実装・導入
● フィーチャートグルの運用・改善
● まとめ
7
Slide 8
Slide 8 text
PR TIMESというサービスについて
● プレスリリース配信サービス
● 月間のサイト閲覧数
は6,000万PV
8
Slide 9
Slide 9 text
その裏側は？（去年まで）
● PHP x.x ( < 8.1 ) で動いている
● 触れるとすべてが崩壊する独自フレームワーク
● テストなし
● Namespaceなし
● スーパーグローバル使いたい放題
9
Slide 10
Slide 10 text
つまり、レガシーコード
10
Slide 11
Slide 11 text
レガシーコードゆえの課題
● コードを変更する事のコストが大きい
● 少しの改修も一苦労
● 新規機能追加はなかなか行えない
11
Slide 12
Slide 12 text
レガシーコードゆえの課題
● コードを変更する事のコストが大きい
● 少しの改修も一苦労
● 新規機能追加はなかなか行えない
→ 開発速度の鈍化
12
Slide 13
Slide 13 text
レガシーコードゆえの課題
● コードを変更する事のコストが大きい
● 少しの改修も一苦労
● 新規機能追加はなかなか行えない
→ 開発速度の鈍化
→ サービスの成長が鈍化している
13
Slide 14
Slide 14 text
もう少し課題の原因を深堀りする
14
Slide 15
Slide 15 text
開発速度の鈍化の原因
● レガシーコードであること
15
Slide 16
Slide 16 text
開発速度の鈍化の原因
● レガシーコードであること
● １度のリリースのコードの変更量が多い
○ コードレビューや UI テスト（人力）のコストが増加
● ↑２つが合わさってバグが生まれやすくなり、さらに
開発工数がかさむ
16
Slide 17
Slide 17 text
１度のリリースの変更量を減らしたい
17
Slide 18
Slide 18 text
１度のリリースの変更量を減らしたい
→フィーチャートグルという戦略
18
Slide 19
Slide 19 text
その他、背景
● エンジニア以外の人でも、リリース前に変更内容を
確認できるようにしたい
○ 他部署の人が変更内容を事前にキャッチアップできる
ように
○ 開発担当者以外が確認する事で、未然にバグを発見で
きるように
19
Slide 20
Slide 20 text
導入背景をまとめると
● １度のリリースの変更量を減らしたい
● エンジニア以外の人でも、リリース前に変更内容を
確認できるようにしたい
20
Slide 21
Slide 21 text
フィーチャートグルを導入した結果
21
Slide 22
Slide 22 text
2021年4月〜12月上旬までの開発生産性
● レガシーコードであること
※フィーチャートグル以外の要因もあります 22
Slide 23
Slide 23 text
2021年4月〜12月上旬までの開発生産性
● レガシーコードであること
※フィーチャートグル以外の要因もあります 23
Slide 24
Slide 24 text
2021年4月〜12月上旬までの開発生産性
● レガシーコードであること
※フィーチャートグル以外の要因もあります 24
Slide 25
Slide 25 text
「細かい変更を頻繁に」行う用になった理由
● 細かい変更を頻繁に行える仕組みがある
○ ＝フィーチャートグルが運用されている
● デプロイ速度の改善
● UIテストの自動化ツールの導入
● フロントエンドのリプレイス
● PHPコードのレガシー改善
● etc... 25
Slide 26
Slide 26 text
アジェンダ
● 導入の背景と結果
● フィーチャートグルについて
● フィーチャートグルの実装・導入
● フィーチャートグルの運用・改善
● まとめ
26
Slide 27
Slide 27 text
フィーチャートグルとは何か
● コードを書き換えることなく動的にシステムの振る
舞いを変更できる開発手法
● アプリの再起動やコードのデプロイを伴わない
参考: https://martinfowler.com/articles/feature-toggles.html
27
Slide 28
Slide 28 text
フィーチャートグルの例
参考: https://martinfowler.com/articles/feature-toggles.html
28
Slide 29
Slide 29 text
フィーチャートグルの分類
● Release Toggles
● Experiment Toggles
● Ops Toggles
● Permission Toggles
29
Slide 30
Slide 30 text
フィーチャートグルの分類
● Release Toggles
● Experiment Toggles
● Ops Toggles
● Permission Toggles
PR TIMES が使っているものは Release Toggles + α
30
Slide 31
Slide 31 text
● トランクベース開発に利用されるフラグ
○ 細かい変更を頻繁に main ブランチにマージする手法
● 開発中の機能をOFFにすることで、機能が未完成で
あっても main ブランチにマージできる
● このフラグは静的である
Release Toggles
31
Slide 32
Slide 32 text
● トランクベース開発に利用されるフラグ
○ 細かい変更を頻繁に main ブランチにマージする手法
● 開発中の機能をOFFにすることで、機能が未完成で
あっても main ブランチにマージできる
● このフラグは静的である
ただし、社内からのアクセスだけ、動的にフラグを切り
替える事が出来て、開発中の機能を試す事ができる
PR TIMES が使っている Release Toggles
32
Slide 33
Slide 33 text
PR TIMES が使っている Release Toggles
33
Slide 34
Slide 34 text
アジェンダ
● 導入の背景と結果
● フィーチャートグルについて
● フィーチャートグルの実装・導入
● フィーチャートグルの運用・改善
● まとめ
34
Slide 35
Slide 35 text
フィーチャートグルの導入方針
● 必要最低限の機能で実装する
● 導入することに比重をおく
○ レガシーコードは一旦無視
○ 導入後にリファクタリングする
35
Slide 36
Slide 36 text
仕様の確認
36
Slide 37
Slide 37 text
フィーチャートグルの仕様
● ON/OFF を切り替える事で、実装を切り替える
● 基本的にリリース時まではフラグをOFFにする
● ただし、社内からのアクセスだけは、動的にフラグ
を切り替える事ができる
37
Slide 38
Slide 38 text
実装
38
Slide 39
Slide 39 text
フィーチャートグルの仕様
● ON/OFF を切り替える事で、実装を切り替える
● 基本的にリリース時まではフラグをOFFにする
● ただし、社内からのアクセスだけは、動的にフラグ
を切り替える事ができる
39
Slide 40
Slide 40 text
実装切り替えのコード
40
Slide 41
Slide 41 text
フラグは常にOFFにする
41
Slide 42
Slide 42 text
フィーチャートグルの仕様
● ON/OFF を切り替える事で、実装を切り替える
● 基本的にリリース時まではフラグをOFFにする
● ただし、社内からのアクセスだけは、動的にフラグ
を切り替える事ができる
42
Slide 43
Slide 43 text
実装方針
● 社内からのアクセスを判定する事ができる
○ （オフィス・VPNの）IPアドレスから判定
● 動的にフラグを切り替える事ができる
○ Cookiesでフラグを管理
43
Slide 44
Slide 44 text
フィーチャートグルの実装方針
44
Slide 45
Slide 45 text
フィーチャートグルの実装方針
● 社内からのアクセスを判定する事ができる
○ （オフィス・VPNの）IPアドレスから判定
● 動的にフラグを切り替える事ができる
○ Cookiesでフラグを管理
45
Slide 46
Slide 46 text
（オフィス・VPNの）IPアドレスから判定
46
Slide 47
Slide 47 text
（オフィス・VPNの）IPアドレスから判定
47
Slide 48
Slide 48 text
（オフィス・VPNの）IPアドレスから判定
48
Slide 49
Slide 49 text
（オフィス・VPNの）IPアドレスから判定
49
Slide 50
Slide 50 text
フィーチャートグルの実装方針
● 社内からのアクセスを判定する事ができる
○ （オフィス・VPNの）IPアドレスから判定
● 動的にフラグを切り替える事ができる
○ Cookiesでフラグを管理
50
Slide 51
Slide 51 text
Cookiesでフラグを管理
51
Slide 52
Slide 52 text
Cookiesでフラグを管理
52
Slide 53
Slide 53 text
Cookiesでフラグを管理
53
Slide 54
Slide 54 text
導入完了
54
Slide 55
Slide 55 text
なんでスーパーグローバル
を使っているの？
55
Slide 56
Slide 56 text
その裏側は？（去年まで）
● PHP x.x ( < 8.1 ) で動いている
● 触れるとすべてが崩壊する独自フレームワーク
● テストなし
● Namespaceなし
● スーパーグローバル使いたい放題
56
Slide 57
Slide 57 text
正しい設計・実装
を行うこと
フィーチャートグル
を導入すること
＜
57
Slide 58
Slide 58 text
第一優先でフィーチャートグルを導入する
● この実装でレガシーコードが増える事は承知の上
○ 既にレガシーコードだから、レガシーコードが増えて
も良い、というわけではない
○ 導入後、開発速度を上がった時にリファクタリングす
れば良いという考え
※これは、会社・個人によって方針は変わると思います。
58
Slide 59
Slide 59 text
アジェンダ
● 導入の背景と結果
● フィーチャートグルについて
● フィーチャートグルの実装・導入
● フィーチャートグルの運用・改善
● まとめ
59
Slide 60
Slide 60 text
フィーチャートグルを使ってもらう
60
Slide 61
Slide 61 text
フィーチャートグルを使ってもらう為に
● トランクベース開発を実践する
● フィーチャートグル自体を使いやすい物にする
● 情報を公開する
61
Slide 62
Slide 62 text
フィーチャートグルを使ってもらう為に
● トランクベース開発を実践する
● フィーチャートグル自体を使いやすい物にする
● 情報を公開する
62
Slide 63
Slide 63 text
１度のリリースの変更量を減らす
● チケットの粒度を小さくする
○ 実装開始から１〜２日で終わる程度に
● 細かい変更量で main ブランチにマージする
○ Release Toggles を OFF にすることで、開発中の
機能であっても影響なくマージ可能
● 「細かい変更を頻繁に」という意識を持つ
63
Slide 64
Slide 64 text
「細かい変更を頻繁に」という意識を持つ
● チケット（Issue or Pull Request）の粒度自体にも
アドバイスをする
64
Slide 65
Slide 65 text
フィーチャートグルを使ってもらう為に
● トランクベース開発を実践する
● フィーチャートグル自体を使いやすい物にする
● 情報を公開する
65
Slide 66
Slide 66 text
現在の実装のコードを確認
66
Slide 67
Slide 67 text
● Namespaceを用意していないので Autoloader が
使えない
● Featureテストでスーパーグローバルを操作出来ない
ので、ONの時の動作をテスト出来ない
○ （または、テスト自体できない）
現在の実装の問題点
67
Slide 68
Slide 68 text
リファクタリングをする
68
Slide 69
Slide 69 text
● クラス化（Namespaceが設定された状態）
○ 動的にフラグの切り替えもできるようにする
● スーパーグローバルをインジェクトできるようにす
る
リファクタリングをする
69
Slide 70
Slide 70 text
クラス化（Namespaceが設定された状態）
70
Slide 71
Slide 71 text
動的にフラグの切り替えもできるようにする
71
Slide 72
Slide 72 text
少しコードをきれいに
72
Slide 73
Slide 73 text
少しコードをきれいに
73
Slide 74
Slide 74 text
スーパーグローバルをインジェクトできるよ
うにする
74
Slide 75
Slide 75 text
スーパーグローバルをインジェクトできるよ
うにする
75
Slide 76
Slide 76 text
スーパーグローバルをインジェクトできるよ
うにする
76
Slide 77
Slide 77 text
フィーチャートグルを使ってもらう為に
● トランクベース開発を実践する
● フィーチャートグル自体を使いやすい物にする
● 情報を公開する
77
Slide 78
Slide 78 text
社内で共有する
78
Slide 79
Slide 79 text
● エンジニアは、フィー
チャートグルを用いた開発
が行えるように
● エンジニア以外は、フィー
チャートグルの切り替え方
法がわかるように
社内Wikiで共有
79
Slide 80
Slide 80 text
● 社内で多くの人に使っ
てもらう
Slackで共有
「プレスキット」という機能がリリースされる数日前の様子
80
Slide 81
Slide 81 text
社外で共有する
81
Slide 82
Slide 82 text
● 社内外の人に認知しても
らう
○ 社内の人にとっても
参考資料となる
○ 新しくJOINする人に
事前に知ることができ
る情報となる
テックブログで発信
82
Slide 83
Slide 83 text
アジェンダ
● 導入の背景と結果
● フィーチャートグルについて
● フィーチャートグルの実装・導入
● フィーチャートグルの運用・改善
● まとめ
83
Slide 84
Slide 84 text
● レガシーコードだからこそ、必要最低限の質素な実
装でフィーチャートグルを導入する
● その後にテスタブルにする、リファクタリングする
● 結果、開発速度が向上しました
まとめ
84
Slide 85
Slide 85 text
● フィーチャーフラグにはタイプ（リリース・実験・運用・許可）がある！
○ https://kakakakakku.hatenablog.com/entry/2022/02/01/102104
● 小さく安全なリリースを実現するために使える「フィーチャートグル」って
何？年収は？彼女は？調べてみました！
○ https://qiita.com/ipeblb/items/92b794321751a6fa133e
● FeatureToggle戦略と運用方法
○ https://speakerdeck.com/kubotak/featuretogglezhan-lue-toyun-yong-fang-fa
● トランク ベース開発
○ https://www.atlassian.com/ja/continuous-delivery/continuous-integration/trun
k-based-development
参考
85
Slide 86
Slide 86 text
● 株式会社PR TIMESはPHPer募集しています
○ https://herp.careers/v1/prtimes/ePCFEMomxCoA
● テックブログもやっているので是非見てください
○ https://developers.prtimes.jp/
会社紹介
86