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

by konkarin

Slide 1

Slide 1 text

Vueで学ぶデータ構造⼊⾨リンクリストとキューでリアクティビティを捉える Vue Fes Japan 2025 After Talk 2025.11.11

Slide 2

Slide 2 text

SPEAKER 株式会社ヤプリプロダクト開発本部フロントエンドグループマネージャーこんてぃらのという猫と暮らしています。かわいい

Slide 3

Slide 3 text

INDEX ⽬次 1. はじめに 2. リアクティビティの仕組みとデータ構造

Slide 4

Slide 4 text

はじめに

Slide 5

Slide 5 text

今⽇のターゲット ● Vue使い慣れてアプリ作れるようになった⼈、Vue1〜3年⽬くらいの⼈ ● Vueを探求したい⼈ ● Chibivue（https://book.chibivue.land/ja/）やった⼈できるだけ簡単に、概念に触れながら詳細は省くので、厳密には違う部分もあります。後⽇ブログで補完する予定です🙏

Slide 6

Slide 6 text

今⽇扱う内容

Slide 7

Slide 7 text

https://roadmap.sh/computer-science

Slide 8

Slide 8 text

https://roadmap.sh/computer-science 👉

Slide 9

Slide 9 text

⾔語選択の次がデータ構造 👇

Slide 10

Slide 10 text

今⽇扱うVueのバージョン ● 現⾏の3.5 ● 絶賛alphaの3.6

Slide 11

Slide 11 text

今⽇のお題コード

Slide 12

Slide 12 text

リアクティビティの仕組みとデータ構造

Slide 13

Slide 13 text

リアクティビティの仕組みを知ろうおれ（たち？）は雰囲気でリアクティビティAPIを使っている。リアクティビティAPI同⼠がどうつながっているか知ろう！ ❓

Slide 14

Slide 14 text

今⽇のお題コード（再掲）

Slide 15

Slide 15 text

それぞれのAPIの特性 refとcomputedは値を持ち、誰かに参照される computedとwatchEffectとtemplateは値を参照する →依存元（Dep） →購読者（Sub）

Slide 16

Slide 16 text

それぞれのAPIの特性 refとcomputedは値を持ち、誰かに参照される computedとwatchEffectとtemplateは値を参照する →依存元（Dep） →購読者（Sub） computedはどちらの特性も持つ

Slide 17

Slide 17 text

例えばこのコードなら、watchEffectがrefを参照したときにLinkができる⼀対のDepとSubでLinkが作られる ref x watchEffect Link

Slide 18

Slide 18 text

Linkはいっぱいあってお互い繋がってる Link2 Link1 Link3 Link4 広がるリアクティブの輪

Slide 19

Slide 19 text

Linkのデータ構造

Slide 20

Slide 20 text

Linkのデータ構造前後のDepが持つLinkがわかる前後のSubが持つLinkがわかる

Slide 21

Slide 21 text

Linkのデータ構造前後のDepが持つLinkがわかる前後のSubが持つLinkがわかる前後がわかる＝双⽅向これが双⽅向リンクリスト (Doubly-Linked List)

Slide 22

Slide 22 text

補⾜）リンクリストの種類次だけわかる単⽅向リンクリスト前後がわかる双⽅向リンクリスト

Slide 23

Slide 23 text

次はリアクティビティの輪が作られる過程を⾒ましょう☝

Slide 24

Slide 24 text

とても雑なVueの処理の流れ 1. setup ()が実⾏ 2. コンポーネントが画⾯に描画（=mount） 3. なんやかんやでリアクティブな状態が更新 4. コンポーネントが画⾯に再描画

Slide 25

Slide 25 text

今⽇のお題コード（再掲）

Slide 26

Slide 26 text

setupで起きること 1 1. refが宣⾔される。

Slide 27

Slide 27 text

setupで起きること 1 2. computedが宣⾔される。（計算はまだしない）

Slide 28

Slide 28 text

setupで起きること 1 3. watchEffectが実⾏されてrefを参照してLink1が作られる。（watchEffectの引数は即実⾏される） ref x watchEffect Link1

Slide 29

Slide 29 text

1. templateの描画が開始。 templateの描画で起きること 2 ref x watchEffect Link1

Slide 30

Slide 30 text

2 2. templateがrefを参照してLink2が作られる。 Link1から⾒てLink2のtemplateはnextSub、逆はprevSub。 ref x watchEffect Link1 ref x template Link2 nextSub prevSub templateの描画で起きること

Slide 31

Slide 31 text

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の描画で起きること

Slide 32

Slide 32 text

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の描画で起きること

Slide 33

Slide 33 text

これでsetupとtemplateの初期化終わり次はリアクティブの更新！

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

再描画で起きること 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

Slide 41

Slide 41 text

再描画で起きること 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

Slide 42

Slide 42 text

再描画で起きること 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

Slide 43

Slide 43 text

再描画で起きること 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

Slide 44

Slide 44 text

再描画で起きること 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

Slide 45

Slide 45 text

めでたしめでたし🎉

Slide 46

Slide 46 text

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)の計算量でリンクの追加削除ができる。

Slide 47

Slide 47 text

仕組みがわかると⾯⽩いこれからVueを書くとき、「ここでLinkが作られてLinkを通してDepに通知されてSubが実⾏されてリアクティブになってるんだなぁ‧‧‧☺」とVueの暖かみを感じられるはず。

Slide 48

Slide 48 text

今⽇扱ったデータ構造リンクリストもキューも⾊んなフレームワークで使われてるよ。React, Svelte, Preact, … キューは割と使うと思いますが、リンクリストは普通のWebフロントエンド開発ではほぼ使わないと思います。

Slide 49

Slide 49 text

FOLLOW ME!! Yappli Tech Blog Yappli Developers カジュアル⾯談 @yappli_dev https://tech.yappli.io/ https://open.talentio.com/r/1/c/yappli/pages/59642