年末年始に「chibivue」で Vueヂカラをつけた

Transcript

1. ツノ
 @2nofa11 年末年始に「chibivue」で Vueヂカラをつけた
2. 自己紹介
3. ツノ 8 BtoB SaaSのフロントエンドエンジニ 8 銭湯とサウナを愛する205 8 今年の目標：朝ランを続ける→翌日骨折 自己紹介 @2nofa11
4. LT内容
5. LT内容 推しのオンラインブック「chibivue」で学んだ内容のアウトプット ▪⁩chibivueとは Vueを作ることで「Vue とは何なのか？」 を学べるオンラインブックです。 ▪⁩一言感想
 フロントエンドFWの仕組みが学べる
 学習密度が高い！ Zennで先ほど記事を公開しました。 後ほど共有します。
6. 01 createApp で何が起きているのか？ 02 Vue ではどうやって HTML をレンダリングしているのか 03 ReactivitySystem の内部構造 04 仮想 DOM の内部構造 05 コンポーネント同士のやり取りの仕組み 06 Vue のコンパイラ（template SFC）の仕組み 目次 chibivueの基礎編で学習した内容
7. 01 createApp で何が起きているのか？
8. 年末年始に「chibivue」でVueヂカラをつけた creatAppとは？ ▪Vue利用者なら一度は書くはず 　 ・Vueアプリケーションを起動する関数 　 ・今までなんとなく使っていた
9. 年末年始に「chibivue」でVueヂカラをつけた creatAppの内部構造 ▪右図 　 chibivueに記載の資料 ▪構成要素 　 ・runtime-dom：ブラウザ用処理 　 ・runtime-core：環境非依存ロジック ▪createApp関数の処理の流れ 　 ①ブラウザ用のrender関数を作成 　 ②createApp実行時にrenderを設置 　 ③mount処理にてrender実行
10. 03 ReactivitySystem の内部構造
11. 年末年始に「chibivue」でVueヂカラをつけた VueのReactivity Systemって？ ▪OptionsAPI時代のDataオプション 　 ・Vueやった方は聞いたことがるはず 　 　 →reactive関数やref関数
12. 年末年始に「chibivue」でVueヂカラをつけた Reactivity System の仕組み ▪reactive関数の内部構造 　 ・Proxy オブジェクトで処理をインターセプトする ▪値取得時[get] 　 ・[track]という関数で、画面更新処理を登録 ▪値取得時[set] 　 ・[trigger]という関数で、
 　 　 [track]で登録した更新処理を実行
13. 04 仮想 DOM の内部構造
14. 年末年始に「chibivue」でVueヂカラをつけた 仮想 DOM ってそもそも何？ ▪ChatGPTに聞いてみるも 　 ・抽象度が高くイマイチわからん
15. 年末年始に「chibivue」でVueヂカラをつけた 仮想DOMの本質は各ノードの差分検知 ▪レンダリングの際に実行される処理 　 ・変更による画面更新処理を効率化 　 　 →再帰的に変更があった箇所を検索 　 　 →変更箇所のみノードを更新 ▪chibivueで0→1で作ってみる 　 ・GPTで書いてあるプロセスを理解できた
16. 05 コンポーネント同士のやり取りの仕組み
17. 年末年始に「chibivue」でVueヂカラをつけた そもそもコンポーネント同士ってどうやって情報のやり取りしている？ ▪コンポーネント開発 　 ・Props/Emitsによる連携って 　 　 どうやってやり取りしてる？
18. 年末年始に「chibivue」でVueヂカラをつけた Props/Emitsの仕組み ▪コンポーネントのレンダリング 　 インスタンスとして生成したのち、インスタンスのsetup関数を実行してレンダリング ▪Props（親→子） 　 ①setup関数実行時の引数として、親からもらった引数をPropとして渡す 　 ②子側のPropsオプションを定義 　 ③1と2情報で一致したものをReactive化してレンダリング ▪Emits（子→親） 　 ①親側にEmit時の処理を設定して、子コンポーネントに登録する 　 ②子のイベント発生時に登録された名前の処理を発火する
19. EOL