Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
年末年始に「chibivue」で Vueヂカラをつけた
Search
ツノ
January 13, 2024
0
250
年末年始に「chibivue」で Vueヂカラをつけた
ツノ
January 13, 2024
Tweet
Share
More Decks by ツノ
See All by ツノ
エンジニア達の_完全に理解した_-コードでの契約ってなんだ_.pdf
2nofa11
1
91
Vite完全に理解した その1
2nofa11
1
160
「世界一流のエンジニアの思考法」 を完全に理解した
2nofa11
1
170
書籍「プログラマー脳」を完全に理解した
2nofa11
0
33
VuexからPinia移行に向けて
2nofa11
0
310
一か月半かけて、TypeScript本を写経した話
2nofa11
0
590
VueTestUtilbrのキホンの『キ』
2nofa11
0
130
Featured
See All Featured
RailsConf 2023
tenderlove
28
810
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
In The Pink: A Labor of Love
frogandcode
139
22k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Speed Design
sergeychernyshev
22
430
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
The Cult of Friendly URLs
andyhume
76
6k
Why Our Code Smells
bkeepers
PRO
334
56k
Building Adaptive Systems
keathley
36
2.1k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Building Applications with DynamoDB
mza
90
6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Transcript
ツノ @2nofa11 年末年始に「chibivue」で Vueヂカラをつけた
自己紹介
ツノ 8 BtoB SaaSのフロントエンドエンジニ 8 銭湯とサウナを愛する205 8 今年の目標:朝ランを続ける→翌日骨折 自己紹介 @2nofa11
LT内容
LT内容 推しのオンラインブック「chibivue」で学んだ内容のアウトプット ▪chibivueとは Vueを作ることで「Vue とは何なのか?」 を学べるオンラインブックです。 ▪一言感想 フロントエンドFWの仕組みが学べる 学習密度が高い! Zennで先ほど記事を公開しました。
後ほど共有します。
01 createApp で何が起きているのか? 02 Vue ではどうやって HTML をレンダリングしているのか 03 ReactivitySystem
の内部構造 04 仮想 DOM の内部構造 05 コンポーネント同士のやり取りの仕組み 06 Vue のコンパイラ(template SFC)の仕組み 目次 chibivueの基礎編で学習した内容
01 createApp で何が起きているのか?
年末年始に「chibivue」でVueヂカラをつけた creatAppとは? ▪Vue利用者なら一度は書くはず ・Vueアプリケーションを起動する関数 ・今までなんとなく使っていた
年末年始に「chibivue」でVueヂカラをつけた creatAppの内部構造 ▪右図 chibivueに記載の資料 ▪構成要素 ・runtime-dom:ブラウザ用処理 ・runtime-core:環境非依存ロジック
▪createApp関数の処理の流れ ①ブラウザ用のrender関数を作成 ②createApp実行時にrenderを設置 ③mount処理にてrender実行
03 ReactivitySystem の内部構造
年末年始に「chibivue」でVueヂカラをつけた VueのReactivity Systemって? ▪OptionsAPI時代のDataオプション ・Vueやった方は聞いたことがるはず →reactive関数やref関数
年末年始に「chibivue」でVueヂカラをつけた Reactivity System の仕組み ▪reactive関数の内部構造 ・Proxy オブジェクトで処理をインターセプトする ▪値取得時[get]
・[track]という関数で、画面更新処理を登録 ▪値取得時[set] ・[trigger]という関数で、 [track]で登録した更新処理を実行
04 仮想 DOM の内部構造
年末年始に「chibivue」でVueヂカラをつけた 仮想 DOM ってそもそも何? ▪ChatGPTに聞いてみるも ・抽象度が高くイマイチわからん
年末年始に「chibivue」でVueヂカラをつけた 仮想DOMの本質は各ノードの差分検知 ▪レンダリングの際に実行される処理 ・変更による画面更新処理を効率化 →再帰的に変更があった箇所を検索
→変更箇所のみノードを更新 ▪chibivueで0→1で作ってみる ・GPTで書いてあるプロセスを理解できた
05 コンポーネント同士のやり取りの仕組み
年末年始に「chibivue」でVueヂカラをつけた そもそもコンポーネント同士ってどうやって情報のやり取りしている? ▪コンポーネント開発 ・Props/Emitsによる連携って どうやってやり取りしてる?
年末年始に「chibivue」でVueヂカラをつけた Props/Emitsの仕組み ▪コンポーネントのレンダリング インスタンスとして生成したのち、インスタンスのsetup関数を実行してレンダリング ▪Props(親→子) ①setup関数実行時の引数として、親からもらった引数をPropとして渡す ②子側のPropsオプションを定義
③1と2情報で一致したものをReactive化してレンダリング ▪Emits(子→親) ①親側にEmit時の処理を設定して、子コンポーネントに登録する ②子のイベント発生時に登録された名前の処理を発火する
EOL