大畑さん_20180530_shuuumatu-worker_lt_ohata__2_.pdf

Transcript

1. Varnish Cache 環境でAB テストをするために React を使った話 ShuuuMai #04 Vue.js/React/Go/Rails5.2 のリアル 2018/05/30 大畑 直幸
2. アジェンダ 自己紹介 扱うAB テストの種類について React, Vue, jQuery で比較 まとめ
3. 自己紹介 エンジニア歴 5 年くらい 2017 年よりフリー ランス シュー マツワー カー さんにもお世話になっています。 フロントエンドエンジニア サー バー サイドはrails が好き hiphop 好き 実装中はよく w r e p . j p を聴く よくハタボー と呼ばれるので github: h a t a b o w
4. 話すこと フロント側でAB テストを頑張らないといけない環境での工夫した話 ※SPA の話はしません
5. AB テストの種類 リダイレクト 別URL で実装 リダイレクトで何とかする サー バー サイド View に分岐を書く フロント o n l o a d 後にJS でDOM を書き換える
6. Varnish Cache の壁があった HTML をごっそりキャッシュしている キャッシュクリアは1 時間毎 キャッシュがある場合当然サー バー サイドのプログラムは動かない…
7. AB テストの種類 リダイレクト 別URL で実装 リダイレクトで何とかする サー バー サイド View に分岐を書く フロント o n l o a d 後にJS でDOM を書き換える ↑ キャッシュがあるしこれしかない
8. AB テストツー ル バリエー ション、 セッション管理のツー ル
9. VWO https://vwo.com/ 有料 $599/ 月 タグを入れるだけ
10. Matomo 旧Piwik https://matomo.org/ オー プンソー ス 無料 自分で環境を用意する必要あり
11. 実装までの経緯 AB テストで表示に用いる値 バリエー ション 値によって表示が変わる ↓ J S フレー ムワー クの基本的な機能 ↓ R e a c t でとりあえずできそう ということで実践してみました
12. 全体像 React で表示切り替えロジックを仕込んでおく 処理フロー ペー ジ読み込み ↓ Matomo がCookie を元にバリエー ションを決定 ↓ Matomo でJS を実行 ( 表示切り替え処理) ↓ 表示
13. HTML < ! ‑ ‑ 切り替えるr o o t を定義する ‑ ‑ > < d i v i d = " r e a c t R o o t " > < / d i v > < ! ‑ ‑ サー バー サイドのテンプレー トの記述をそのまま使える ‑ ‑ > < s c r i p t t y p e = " x ‑ t e m p l a t e " i d = " v a r i a t i o n 1 " > < d i v > v a r i a t i o n 1 です< / d i v > < / s c r i p t > < s c r i p t t y p e = " x ‑ t e m p l a t e " i d = " v a r i a t i o n 2 " > < d i v > v a r i a t i o n 2 です< / d i v > < / s c r i p t > < s c r i p t t y p e = " x ‑ t e m p l a t e " i d = " v a r i a t i o n 3 " > < d i v > v a r i a t i o n 3 です< / d i v > < / s c r i p t > < ! ‑ ‑ I E を無視してもよければt e m p l a t e タグでも可 ‑ ‑ > < t e m p l a t e i d = " v a r i a t i o n 4 " > < d i v > t e m p l a t e タグv a r i a t i o n 4 < / d i v > < / t e m p l a t e >
14. React: 表示ロジック i m p o r t R e a c t f r o m ' r e a c t ' i m p o r t R e a c t D O M f r o m ' r e a c t ‑ d o m ' c l a s s A b T e s t R o o t e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) t h i s . s t a t e = { v a r i a t i o n : w i n d o w . v a r i a t i o n | | ' 1 ' } / / 外からv a r i a t i o n を変えられるように出しておく w i n d o w . A b T e s t R o o t = t h i s } u p d a t e V a r i a t i o n ( v a r i a t i o n ) { t h i s . s e t S t a t e ( { v a r i a t i o n } ) } r e n d e r ( ) { c o n s t h t m l = d o c u m e n t . g e t E l e m e n t B y I d ( ` v a r i a t i o n $ { t h i s . s t a t e . v a r i a t i o n } ` ) . i n n e r H T M L r e t u r n < d i v d a n g e r o u s l y S e t I n n e r H T M L = { { _ _ h t m l : h t m l } } / > } } R e a c t D O M . r e n d e r ( < A b T e s t R o o t / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' r e a c t R o o t ' ) )
15. React: ツー ル側から動かすJS / / 非同期でツー ルが動くため、 / / コンポー ネントの初期化より先に動くか後に動くかバラツキがある w i n d o w . v a r i a t i o n = ' 2 ' ; i f ( w i n d o w . A b T e s t R o o t ) { w i n d o w . A b T e s t R o o t . u p d a t e V a r i a t i o n ( w i n d o w . v a r i a t i o n ) ; }
16. Vue 版: 表示ロジック < ! ‑ ‑ r e a c t R o o t のところだけV u e 用に変えています ‑ ‑ > < d i v i d = " v u e R o o t " v ‑ h t m l = " h t m l " > < / d i v > Vue i m p o r t V u e f r o m ' v u e ' w i n d o w . v u e R o o t = n e w V u e ( { e l : ' # v u e R o o t ' , d a t a : { v a r i a t i o n : w i n d o w . v a r i a t i o n | | ' 1 ' , } , c o m p u t e d : { h t m l ( ) { r e t u r n d o c u m e n t . g e t E l e m e n t B y I d ( ` v a r i a t i o n $ { t h i s . v a r i a t i o n } ` ) . i n n e r H T M L } , } , } )
17. Vue 版: ツー ル側から動かすJS / / 非同期でツー ルが動くため、 / / コンポー ネントの初期化より先に動くか後に動くかバラツキがある w i n d o w . v a r i a t i o n = ' 3 ' ; i f ( w i n d o w . v u e R o o t ) { w i n d o w . v u e R o o t . v a r i a t i o n = w i n d o w . v a r i a t i o n ; }
18. jQuery 版: 表示ロジック w i n d o w . r e n d e r A b t e s t C o n t e n t s = > ( v a r i a t i o n = ' 1 ' ) { $ ( ' # a b T e s t R o o t ' ) . h t m l ( $ ( ` # v a r i a t i o n $ { v a r i a t i o n } ` ) . h t m l ( ) ) } $ ( f u n c t i o n ( ) { w i n d o w . r e n d e r A b t e s t C o n t e n t s ( w i n d o w . v a r i a t i o n ) } ) ; これだけか…
19. jQuery 版: ツー ル側から動かすJS w i n d o w . v a r i a t i o n = ' 1 ' ; i f ( $ ( ' # v a r i a t i o n ' + w i n d o w . v a r i a t i o n ) . l e n g t h > 0 ) { w i n d o w . r e n d e r A b t e s t C o n t e n t s ( w i n d o w . v a r i a t i o n ) ; }
20. まとめ メリット ツー ル側で実行するJS がシンプルになる 表示ロジックをgit で管理できる コンポー ネントをたくさん作るわけではないので開発スピー ドを下 げずに済む React やVue を気軽に試せる 今後アダプティブUX なども実装できそう デメリット バリエー ションを適用する処理が o n l o a d 以降のためチラつく チラつくためファー ストビュー などのAB では一工夫必要
21. まとめ2 React を使うには処理がシンプル過ぎてちょっと良さが活かせない 感あり jQuery は記述は少ないが、 縛りが少ないので書き方がバラツキそう なのと条件が複雑になった場合に管理できるか少し心配 おすすめはVue v ‑ i f , v ‑ e l s e , v ‑ b i n d が結構便利 スピー ド重視でテンプレー トを分けるほどではないけど分岐だけで どうにかしたい場合など
22. 以上、 ご清聴ありがとうございました！ 本格的にReact を使いたい場合はSPA 案件を 取りに行くべき シュー マツワー カー さんに相談しましょ う！！