初心者向け 1 時間ハンズオン
AI 生成による付録
この付録は chibivue 本編の内容をもとに GPT-5.5 で草案化したものです．学習ルートとして利用し，正確な実装や詳しい説明は本編と実装コードを参照してください．
このルートでは，本編の Minimum Example を全部吸収しようとしすぎず，大きな流れだけを 1 時間でなぞります．application API，renderer，reactivity，component，template compiler，SFC support に一度ずつ触ります．
ゴール
最後に，なぜ chibivue が package に分かれているのか，そして .vue file がどう DOM update につながるのかを説明できれば OK です．
0-8 分: project の形を見る
読む:
手を動かす:
book/impls以下の implementation snapshot で，packages/runtime-core，packages/runtime-dom，packages/reactivity，packages/compiler-core，packages/compiler-dom，packages/compiler-sfcを探す．- それぞれの package が何を担当しているか，1 文でメモする．
チェックポイント:
- runtime のコードと compiler のコードを見分けられる．
8-18 分: 最初の render
読む:
手を動かす:
createApp(...).mount(...)が renderer に届くまでを追う．- element が作られる場所を探す．
- props や event handler が反映される場所を探す．
チェックポイント:
- 1 つの button が render function から実 DOM になるまでを追える．
18-28 分: 最初の reactivity
読む:
手を動かす:
- active effect がどこに保存されているかを見る．
- property の read がどこで track されるかを見る．
- property の write がどこで effect を trigger するかを見る．
チェックポイント:
- reactive state には Proxy と effect function の両方が必要だと説明できる．
28-40 分: VNode と component
読む:
手を動かす:
- element VNode と component VNode を比べる．
- component の
setupが呼ばれる場所を探す． - props が component に入るところ，emit が外へ出るところを探す．
チェックポイント:
- component も VNode として表現される理由を説明できる．
40-52 分: template compiler
読む:
手を動かす:
- template string，parse result，generated render function の pipeline を追う．
のような interpolation がどこで code になるかを見る．
チェックポイント:
- compiler が何を生成し，なぜ runtime がそれを実行できるのかを説明できる．
52-60 分: SFC support
読む:
手を動かす:
- SFC の 3 つの block を見分ける．
- どの block が render code になるかを見る．
- どの block が component options になるかを見る．
- どの block が CSS になるかを見る．
チェックポイント:
.vuefile は，runtime が見る前に分解されて変換される authoring format だと説明できる．
ここで切り上げる
ここまでで骨格は見えています．次にやるべきことは，焦ってすべての advanced feature に進むことではありません．一番驚いた箇所を 1 つ選んで，本編の章をゆっくり読み直すのがおすすめです．