Tweet
Tweet

Slide 1

Slide 1 text

で している時でも テスト を 動かしたい すぱいす

Slide 2

Slide 2 text

すぱいす

Slide 3

Slide 3 text

すぱいす 作ってる 去年 今年 （最近 に しました） 「スパイスからカレー作ります！」で爆誕

Slide 4

Slide 4 text

前半： しているプロダクトで を動かそうとして 少し苦労して得た学びをシャーします 後半： 前半に関係のありそうな のソースコードを見てみる この は

Slide 5

Slide 5 text

前半

Slide 6

Slide 6 text

とは？ Rendering on the Web - Web上のレンダリング web.dev - Rendering on the Web - より

Slide 7

Slide 7 text

とは？ ブラウザ サーバー ① ② ③ レンダリング

Slide 8

Slide 8 text

とは？ ブラウザ ブラウザ サーバー サーバー ① ② ③ レンダリング ① ③ ② レンダリング

Slide 9

Slide 9 text

マーケティングプラットフォームより とは？

Slide 10

Slide 10 text

マーケティングプラットフォームより とは？ テストができる！ でテストが設定できる！ などと簡単に連携ができる！

Slide 11

Slide 11 text

「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」 「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい

Slide 12

Slide 12 text

「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」 「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 では動かない　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 13

Slide 13 text

「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」 「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 　　まじ？　　　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 14

Slide 14 text

「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」 「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 のツールだよ？　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 15

Slide 15 text

「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」 「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 設定がおかしいんやろ　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 16

Slide 16 text

ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load...

Slide 17

Slide 17 text

ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load... この設定を変えてみた！

Slide 18

Slide 18 text

ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load... この設定を変えてみた！ ＿人人人人人人人人人人＿ ＞　 　動いた　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 19

Slide 19 text

『動いたので確認してみてください〜』 設定を変えてみると

Slide 20

Slide 20 text

『動いたので確認してみてください〜』 「やっぱり動かないのだが？」 「 では全然動きませんが？」 設定を変えてみると

Slide 21

Slide 21 text

『動いたので確認してみてください〜』 「やっぱり動かないのだが？」 「 では全然動きませんが？」 設定を変えてみると ＿人人人人人人人人人人＿ ＞　 　まじか　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 22

Slide 22 text

僕が見たときに動いてたのは気のせいだったのか・・・ もう一度挙動を確認してみる 『あれ、 とか関係なく、動いたり動かなかったりする』 『あれ、よく見たら』 ほんまでっか・・・？

Slide 23

Slide 23 text

よく見たら、 動かない じゃなくて 一瞬テストが表示されて 元の表示に戻っている よく見たら

Slide 24

Slide 24 text

よく見たら、 動かない じゃなくて 一瞬テストが表示されて 元の表示に戻っている よく見たら ＿人人人人人人人人人人＿ ＞　 　一瞬だけ表示　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 25

Slide 25 text

つまり、 は動いていそう それ以外に、 の操作を行っている箇所は・・・ 元の表示にもどっている

Slide 26

Slide 26 text

つまり、 は動いていそう それ以外に、 の操作を行っている箇所は・・・ 元の表示にもどっている ＿人人人人人人人人人人＿ ＞　 　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

Slide 27

Slide 27 text

とは https://ssr.vuejs.org/guide/hydration.html より が 「サーバから送られた静的な を クライアントサイドのデータの変化に反応できる動的な にする」 過程のこと

Slide 28

Slide 28 text

冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング

Slide 29

Slide 29 text

冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング アプリは 「見えるけど操作できない」状態

Slide 30

Slide 30 text

冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング ④レンダリング アプリは 「操作できる」状態

Slide 31

Slide 31 text

の https://ssr.vuejs.org/guide/hydration.html より

Slide 32

Slide 32 text

の https://ssr.vuejs.org/guide/hydration.html より ＿人人人人人人人人人人人人人＿ ＞　 を破棄してーから描画　＜ ￣ＹＹＹＹＹＹＹＹＹＹＹＹＹ￣

Slide 33

Slide 33 text

謎挙動の真相 DOM構築処理 テストの読み込み DOM操作 サーバーから レスポンス 側の処理 の処理 DOMの反映 衝突！

Slide 34

Slide 34 text

謎挙動の真相 DOM構築処理 テストの読み込み DOM操作 サーバーから レスポンス 側の処理 の処理 DOMの反映 衝突！ ネットワーク速度に依存 マシンスペックなどに依存

Slide 35

Slide 35 text

解決するには が終わってからテストの起動 実行をしましょう 後に起きるイベントとして の （ルートの ）、 が作成する が使えます。 の設定は「 アクティベーションイベント」で検索！

Slide 36

Slide 36 text

前半終わり

Slide 37

Slide 37 text

後半

Slide 38

Slide 38 text

のレンダリングってどういう仕組なんすか

Slide 39

Slide 39 text

ソースコードを追ってみます 追っているコードは スクショ貼っちゃいます ごめんなさい、だいぶ雑です

Slide 40

Slide 40 text

がどこから呼ばれているのかイマイチわかりませんでした。 が、 中の挙動 って名前的に初期段階で呼ばれているはずや。

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

がいる！

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

より詳細を知りたい方は

Slide 53

Slide 53 text

より詳細を知りたい方は 実際のソースコード、 など、 チェケラ！

Slide 54

Slide 54 text

ドキュメントには 書いてない はず なので ソースコード 見てみてねー ちなみに、 なんですけど

Slide 55

Slide 55 text

No content