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