これでLTした時の資料です https://lapras.connpass.com/event/177974/
で している時でもテスト を動かしたいすぱいす
View Slide
すぱいす
すぱいす作ってる去年今年(最近 に しました)「スパイスからカレー作ります!」で爆誕
前半:しているプロダクトでを動かそうとして少し苦労して得た学びをシャーします後半:前半に関係のありそうな のソースコードを見てみるこの は
前半
とは?Rendering on the Web - Web上のレンダリングweb.dev - Rendering on the Web - より
とは?ブラウザサーバー①②③ レンダリング
とは?ブラウザ ブラウザサーバーサーバー①②③ レンダリング①③② レンダリング
マーケティングプラットフォームよりとは?
マーケティングプラットフォームよりとは?テストができる!でテストが設定できる!などと簡単に連携ができる!
「あのサイトで 使いたい」マーケティング担当者から要望があったあのサイト で している以前他の人が調べてくれていたみたいで、「 で動くけど では動かなかった」「ちゃんと動いたときも、しばらく経つと動かなくなる」らしい
「あのサイトで 使いたい」マーケティング担当者から要望があったあのサイト で している以前他の人が調べてくれていたみたいで、「 で動くけど では動かなかった」「ちゃんと動いたときも、しばらく経つと動かなくなる」らしい_人人人人人人人人人人_> では動かない < ̄YYYYYYYYYY ̄
「あのサイトで 使いたい」マーケティング担当者から要望があったあのサイト で している以前他の人が調べてくれていたみたいで、「 で動くけど では動かなかった」「ちゃんと動いたときも、しばらく経つと動かなくなる」らしい_人人人人人人人人人人_> まじ? < ̄YYYYYYYYYY ̄
「あのサイトで 使いたい」マーケティング担当者から要望があったあのサイト で している以前他の人が調べてくれていたみたいで、「 で動くけど では動かなかった」「ちゃんと動いたときも、しばらく経つと動かなくなる」らしい_人人人人人人人人人人_> のツールだよ? < ̄YYYYYYYYYY ̄
「あのサイトで 使いたい」マーケティング担当者から要望があったあのサイト で している以前他の人が調べてくれていたみたいで、「 で動くけど では動かなかった」「ちゃんと動いたときも、しばらく経つと動かなくなる」らしい_人人人人人人人人人人_> 設定がおかしいんやろ < ̄YYYYYYYYYY ̄
ツール側で設定を変えてみた以外のツールを介して読み込んでいたので・・・GoogleTagManager製のサイトload...load...
ツール側で設定を変えてみた以外のツールを介して読み込んでいたので・・・GoogleTagManager製のサイトload...load...この設定を変えてみた!
ツール側で設定を変えてみた以外のツールを介して読み込んでいたので・・・GoogleTagManager製のサイトload...load...この設定を変えてみた!_人人人人人人人人人人_> 動いた < ̄YYYYYYYYYY ̄
『動いたので確認してみてください〜』設定を変えてみると
『動いたので確認してみてください〜』「やっぱり動かないのだが?」「 では全然動きませんが?」設定を変えてみると
『動いたので確認してみてください〜』「やっぱり動かないのだが?」「 では全然動きませんが?」設定を変えてみると_人人人人人人人人人人_> まじか < ̄YYYYYYYYYY ̄
僕が見たときに動いてたのは気のせいだったのか・・・もう一度挙動を確認してみる『あれ、 とか関係なく、動いたり動かなかったりする』『あれ、よく見たら』ほんまでっか・・・?
よく見たら、動かないじゃなくて一瞬テストが表示されて元の表示に戻っているよく見たら
よく見たら、動かないじゃなくて一瞬テストが表示されて元の表示に戻っているよく見たら_人人人人人人人人人人_> 一瞬だけ表示 < ̄YYYYYYYYYY ̄
つまり、 は動いていそうそれ以外に、 の操作を行っている箇所は・・・元の表示にもどっている
つまり、 は動いていそうそれ以外に、 の操作を行っている箇所は・・・元の表示にもどっている_人人人人人人人人人人_> < ̄YYYYYYYYYY ̄
とはhttps://ssr.vuejs.org/guide/hydration.html よりが「サーバから送られた静的な をクライアントサイドのデータの変化に反応できる動的な にする」過程のこと
冒頭の 図ブラウザサーバー①③② レンダリング
冒頭の 図ブラウザサーバー①③② レンダリングアプリは「見えるけど操作できない」状態
冒頭の 図ブラウザサーバー①③② レンダリング④レンダリングアプリは「操作できる」状態
のhttps://ssr.vuejs.org/guide/hydration.html より
のhttps://ssr.vuejs.org/guide/hydration.html より_人人人人人人人人人人人人人_> を破棄してーから描画 < ̄YYYYYYYYYYYYY ̄
謎挙動の真相DOM構築処理テストの読み込み DOM操作サーバーからレスポンス側の処理の処理DOMの反映衝突!
謎挙動の真相DOM構築処理テストの読み込み DOM操作サーバーからレスポンス側の処理の処理DOMの反映衝突!ネットワーク速度に依存マシンスペックなどに依存
解決するにはが終わってからテストの起動 実行をしましょう後に起きるイベントとしての(ルートの )、が作成するが使えます。の設定は「 アクティベーションイベント」で検索!
前半終わり
後半
のレンダリングってどういう仕組なんすか
ソースコードを追ってみます追っているコードはスクショ貼っちゃいますごめんなさい、だいぶ雑です
がどこから呼ばれているのかイマイチわかりませんでした。が、中の挙動 って名前的に初期段階で呼ばれているはずや。
がいる!
より詳細を知りたい方は
より詳細を知りたい方は実際のソースコード、など、チェケラ!
ドキュメントには書いてない はず なのでソースコード見てみてねーちなみに、 なんですけど