Vueで学ぶデータ構造入門 リンクリストとキューでリアクティビティを捉える / Vue Data Structures: Linked Lists and Queues for Reactivity

Vue Fes Japan 2025 After Talk https://yappli.connpass.com/event/368396/

Transcript

1. Vueで学ぶデータ構造⼊⾨ リンクリストとキューで リアクティビティを捉える Vue Fes Japan 2025 After Talk 2025.11.11
2. SPEAKER 株式会社ヤプリ プロダクト開発本部 フロントエンドグループ マネージャー こん てぃらの という猫と暮らしています。 かわいい
3. INDEX ⽬次 1. はじめに 2. リアクティビティの仕組みとデータ構造
4. はじめに
5. 今⽇のターゲット • Vue使い慣れてアプリ作れるようになった⼈、Vue1〜3年⽬くらいの⼈ • Vueを探求したい⼈ • Chibivue（https://book.chibivue.land/ja/）やった⼈ できるだけ簡単に、概念に触れながら詳細は省くので、厳密には違う部分もあり ます。後⽇ブログで補完する予定です🙏
6. 今⽇扱う内容
7. https://roadmap.sh/computer-science
8. https://roadmap.sh/computer-science 👉
9. ⾔語選択の次がデータ構造 👇
10. 今⽇扱うVueのバージョン • 現⾏の3.5 • 絶賛alphaの3.6
11. 今⽇のお題コード
12. リアクティビティの仕組みと データ構造
13. リアクティビティの仕組みを知ろう おれ（たち？）は雰囲気でリアクティビティAPIを使っている。 リアクティビティAPI同⼠がどうつながっているか知ろう！ ❓
14. 今⽇のお題コード（再掲）
15. それぞれのAPIの特性 refとcomputedは値を持ち、誰かに参照される computedとwatchEffectとtemplateは値を参照する →依存元（Dep） →購読者（Sub）
16. それぞれのAPIの特性 refとcomputedは値を持ち、誰かに参照される computedとwatchEffectとtemplateは値を参照する →依存元（Dep） →購読者（Sub） computedはどちらの特性も持つ
17. 例えばこのコードなら、watchEffectがrefを参照したときにLinkができる ⼀対のDepとSubでLinkが作られる ref x watchEffect Link
18. Linkはいっぱいあってお互い繋がってる Link2 Link1 Link3 Link4 広がるリアクティブの輪
19. Linkのデータ構造
20. Linkのデータ構造 前後のDepが持つLinkがわかる 前後のSubが持つLinkがわかる
21. Linkのデータ構造 前後のDepが持つLinkがわかる 前後のSubが持つLinkがわかる 前後がわかる＝双⽅向 これが双⽅向リンクリスト (Doubly-Linked List)
22. 補⾜）リンクリストの種類 次だけわかる単⽅向リンクリスト 前後がわかる双⽅向リンクリスト
23. 次はリアクティビティの輪が 作られる過程を⾒ましょう☝
24. とても雑なVueの処理の流れ 1. setup (<script setup>)が実⾏ 2. コンポーネントが画⾯に描画（=mount） 3. なんやかんやでリアクティブな状態が更新 4. コンポーネントが画⾯に再描画
25. 今⽇のお題コード（再掲）
26. setupで起きること 1 1. refが宣⾔される。
27. setupで起きること 1 2. computedが宣⾔される。（計算はまだしない）
28. setupで起きること 1 3. watchEffectが実⾏されてrefを参照してLink1が作られる。 （watchEffectの引数は即実⾏される） ref x watchEffect Link1
29. 1. templateの描画が開始。 templateの描画で起きること 2 ref x watchEffect Link1
30. 2 2. templateがrefを参照してLink2が作られる。 Link1から⾒てLink2のtemplateはnextSub、逆はprevSub。 ref x watchEffect Link1 ref x template Link2 nextSub prevSub templateの描画で起きること
31. 2 3. templateがcomputedを参照してLink3が作られる。computedはここで算出 Link2から⾒てLink3のcomputedはnextDep、逆はprevDep。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 nextSub prevSub prevDep nextDep templateの描画で起きること
32. 2 4. computedがrefを参照してLink4が作られる。 Link2から⾒てLink4のcomputedはnextSub、逆はprevSub ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link 4 nextSub prevSub nextSub prevSub prevDep nextDep templateの描画で起きること
33. これでsetupとtemplateの初期化終わり 次はリアクティブの更新！
34. refの更新で起きること 3 1. ボタンクリックでrefが更新される。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 nextSub prevSub nextSub prevSub prevDep nextDep
35. 2. refの更新が末尾のLink4のSubに通知される。 refの更新で起きること 3 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link 4 nextSub prevSub nextSub prevSub prevDep nextDep
36. 3. Link4からprevSubを辿って、先頭のLink1のSubが 実⾏する処理をキューに⼊れる。 refの更新で起きること 3 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue Link1の処理 nextSub prevSub nextSub prevSub prevDep nextDep ref ref ref
37. 3. Link4からprevSubを辿って、先頭のLink1のSubが 実⾏する処理をキューに⼊れる。 refの更新で起きること 3 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue Link1の処理 nextSub prevSub nextSub prevSub prevDep nextDep ref ref ref 満を持してキューが登場
38. refの更新で起きること 3 4. Link2のSubが実⾏する処理をキューに⼊れる。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Link2の処理 Queue Link1の処理 nextSub prevSub nextSub prevSub prevDep nextDep
39. refの更新で起きること 3 5. Link4のSubはcomputedなので後で実⾏する。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link 4 Queue Link2の処理 Link1の処理 nextSub prevSub nextSub prevSub prevDep nextDep
40. 再描画で起きること 4 1. ⾮同期でキューを順番に実⾏する。 まずはwatchEffectが実⾏。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue Link2の処理 Link1の処理 nextSub prevSub nextSub prevSub prevDep nextDep
41. 再描画で起きること 4 2. 次にtemplateの描画が再実⾏。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue Link2の処理 nextSub prevSub nextSub prevSub prevDep nextDep
42. 再描画で起きること 4 3. templateがLink2のDepのrefを参照する。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue nextSub prevSub nextSub prevSub prevDep nextDep
43. 再描画で起きること 4 4. templateがLink3のDepのcomputedを参照する。 ここでcomputedが再計算！ ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue nextSub prevSub nextSub prevSub prevDep nextDep
44. 再描画で起きること 4 5. なんやかんやでtemplateの再描画が終わる。 ref x watchEffect Link1 ref x template Link2 computed x template Link3 ref x computed Link4 Queue nextSub prevSub nextSub prevSub prevDep nextDep
45. めでたしめでたし🎉
46. Link（リンクリスト）の何が嬉しいのか • Linkのデータ構造はVue 3.5から登場しました。3.6でも使われる予定。 ◦ Refactor reactivity system to use version counting and doubly-linked list tracking #10397 ◦ ↑3.5でメモリ効率とパフォーマンスがめっちゃ良くなったPR。3.6で更に良くなる！ • 誰がどこにどの順番で依存しているかわかる。 • リアクティブな状態の依存関係は変わりうるので、変わったときでもO(1)の 計算量でリンクの追加削除ができる。
47. 仕組みがわかると⾯⽩い これからVueを書くとき、 「ここでLinkが作られてLinkを通してDepに通知されてSubが実⾏されて リアクティブになってるんだなぁ‧‧‧☺」 とVueの暖かみを感じられるはず。
48. 今⽇扱ったデータ構造 リンクリストもキューも⾊んなフレームワークで使われてるよ。React, Svelte, Preact, … キューは割と使うと思いますが、 リンクリストは普通のWebフロントエンド開発ではほぼ使わないと思います。
49. FOLLOW ME!! Yappli Tech Blog Yappli Developers カジュアル⾯談 @yappli_dev https://tech.yappli.io/ https://open.talentio.com/r/1/c/yappli/pages/59642