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
260
年末年始に「chibivue」で Vueヂカラをつけた
ツノ
January 13, 2024
Tweet
Share
More Decks by ツノ
See All by ツノ
エンジニア達の_完全に理解した_-コードでの契約ってなんだ_.pdf
2nofa11
1
130
Vite完全に理解した その1
2nofa11
1
200
「世界一流のエンジニアの思考法」 を完全に理解した
2nofa11
1
200
書籍「プログラマー脳」を完全に理解した
2nofa11
0
47
VuexからPinia移行に向けて
2nofa11
0
350
一か月半かけて、TypeScript本を写経した話
2nofa11
0
660
VueTestUtilbrのキホンの『キ』
2nofa11
0
140
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
Designing for humans not robots
tammielis
250
25k
Optimising Largest Contentful Paint
csswizardry
33
3k
Rails Girls Zürich Keynote
gr2m
94
13k
GitHub's CSS Performance
jonrohan
1030
460k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
The Invisible Side of Design
smashingmag
299
50k
A better future with KSS
kneath
238
17k
A Philosophy of Restraint
colly
203
16k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Adopting Sorbet at Scale
ufuk
74
9.2k
Building Applications with DynamoDB
mza
93
6.2k
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