それは残像だ - Speaker Deck

それは残像だ

Slide 1

Slide 1 text

ͦΕ͸࢒૾ͩ @yhara (Yutaka Hara) 2019/6/29 ͱͪ͗Rubyձٞ08

Slide 2

Slide 2 text

About me • @yhara (Yutaka Hara) • https://yhara.jp • NaCl দߐຊࣾ

Slide 3

Slide 3 text

ʰRubyͰ࡞Δحົͳϓϩάϥϛϯάݴޠʱ

Slide 4

Slide 4 text

֓ཁ Zanzouͱ͍͏gemΛ࡞Γ·ͨ͠ɻ Zanzou͸ɺΦϒδΣΫτͷʮҰ෦͚ͩॻ͖׵ ͑ͨ΍ͭʯΛ؆୯ʹ࡞ΔͨΊͷgemͰ͢ɻ

Slide 5

Slide 5 text

Agenda 1. Zanzouͱ͸ 2. ZanzouͷΞϧΰϦζϜ 3. Zanzouͷ࣮૷ͱ໰୊఺

Slide 6

Slide 6 text

1. Zanzouͱ͸ Zanzou͸4݄ͷRubyKaigiͰൃදͨ͠Ovtoͱ͍ ͏WebϑϨʔϜϫʔΫͷͨΊʹ࡞Γ·ͨ͠ɻ https://github.com/yhara/ovto

Slide 7

Slide 7 text

IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTZIBSBIUNM

Slide 8

Slide 8 text

ཁ໿ • RubyͰϒϥ΢βΞϓϦΛ࡞ΕΔϑϨʔϜϫʔ ΫΛ࡞ͬͨ • RubyͰը໘ͷఆٛΛॻ͘ˠOpalͰJavaScript ʹม׵͢Δˠϒϥ΢β্Ͱಈ͘

Slide 9

Slide 9 text

Ovtoͷ͘͠Έ • app.stateͱ͍͏ΦϒδΣΫτʹΞϓϦͷશঢ়ଶ͕ೖ͍ͬͯ Δ • state͕มԽͨ͠Βը໘Λߋ৽͢Δ • ʮมԽ͔ͨ͠ʯΛݕࠪ͢Δʹ͸ɺݩͷঢ়ଶ͕ඞཁ • ʮগ͠มߋͨ͠΋ͷʯΛ࡞Δͷ͕ͪΐͬͱ໘౗ • JSͰ͸Ͳ͏ͳΜͩΖ͏ʁˠimmer.jsͱ͍͏΋ͷ͕͋ΔΒ͠ ͍ˠԿ͜Ε໘ന͍ɺRubyʹҠ২Ͱ͖ͳ͍͔ͳ

Slide 10

Slide 10 text

ྫ todos = [ {id: 1, title: "ཛΛങ͏", done: false}, {id: 2, title: "૟আػΛ͔͚Δ", done: false}, ] ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ

Slide 11

Slide 11 text

୯७ʹ΍Δͱ͜͏ todos = [ {id: 1, title: "ཛΛങ͏", done: false}, {id: 2, title: "૟আػΛ͔͚Δ", done: false}, ] todos[1][:done] = true ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ

Slide 12

Slide 12 text

todosΛॻ͖׵͑ͨ͘ͳ͍࣌͸ʁ todos = [ {id: 1, title: "ཛΛങ͏", done: false}, {id: 2, title: "૟আػΛ͔͚Δ", done: false}, ] new_todos = todos.map{|x| if x[:id] == 2 x.merge(done: true) else x end } ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ

Slide 13

Slide 13 text

ཧ૝ɹɹɹɹݱ࣮ new_todos = todos.map{|x| if x[:id] == 2 x.merge(done: true) else x end } todos[1][:done] = true

Slide 14

Slide 14 text

zanzouΛ࢖͏ͱ todos = [ {id: 1, title: "ཛΛങ͏", done: false}, {id: 2, title: "૟আػΛ͔͚Δ", done: false}, ] require 'zanzou' new_todos = Zanzou.with_updates(todos) do |shadow_todos| shadow_todos[1][:done] = true } ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ ˢʮ൪໨ͷEPOFΛUSVFʹ͢Δʯ͕ͦͷ··ॻ͚Δ ͔ͭΦϦδφϧ͸ແࣄ

Slide 15

Slide 15 text

໊લͷ༝དྷ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

΍͔ͬͨʂʁ

Slide 18

Slide 18 text

࢒૾ͩʜ ͳʹͬ

Slide 19

Slide 19 text

ΦϒδΣΫτ ഁյతૢ࡞ ϓϩάϥϜ

Slide 20

Slide 20 text

ର৅Λ௚઀ૢ࡞͍ͯ͠ΔΑ͏͚ͩͲɺ ݩͷΦϒδΣΫτ͸ແࣄ (࢒૾ͳͷͰ) ΦϒδΣΫτ ഁյతૢ࡞ ϓϩάϥϜ ࣮ߦ݁Ռ

Slide 21

Slide 21 text

2. ZanzouͷΞϧΰϦζϜ ͜ͷΑ͏ͳಈ࡞Λ࣮ݱ͢Δʹ͸Ͳ͏͢Ε͹Α͍Ͱ͠ΐ͏͔ʁ Zanzouͷ࢓૊Έ͸ɺimmer.jsͱ͍͏JavaScriptͷϥΠϒϥ ϦΛࢀߟʹ͍ͯ͠·͢ɻ https://github.com/immerjs/immer

Slide 22

Slide 22 text

Ұ൪ʮ؆୯ʯͳ΍Γํɹ • ΦϒδΣΫτશମΛෳ੡͢Δ • ෳ੡ͨ͠΋ͷΛมߋͤ͞Δ • ໰୊఺ɿ஗͍

Slide 23

Slide 23 text

ྫɿશ෦ෳ੡ͯ͠͠·͑͹ಈ͚͘ Ͳ… UPEPT<> OFX@UPEPT<> 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFUSVF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF

Slide 24

Slide 24 text

UPEPT<> OFX@UPEPT<> ڞ༗Ͱ͖Δͱ͜Ζ͸ڞ༗͍ͨ͠ 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFUSVF

Slide 25

Slide 25 text

खॱ̍ɿϧʔτShadowΛ࡞Δ "SSBZ ΋ͱͷ ΦϒδΣΫτ ࢒૾ 4IBEPX )BTI )BTI GBMTF GBMTF "SSBZ 4IBEPX JE EPOF JE EPOF TIBEPX<><EPOF>USVF

Slide 26

Slide 26 text

ઓུ̎ɿࢀর͞ΕͨΒShadowΛฦ͢ "SSBZ ΋ͱͷ ΦϒδΣΫτ ࢒૾ 4IBEPX )BTI )BTI GBMTF GBMTF "SSBZ 4IBEPX JE EPOF JE EPOF TIBEPX<><EPOF>USVF )BTI 4IBEPX

Slide 27

Slide 27 text

ઓུ̏ɿॻ͖׵͑ΒΕͨΒͦͷ͜ͱΛ ͓֮͑ͯ͘ "SSBZ ΋ͱͷ ΦϒδΣΫτ ࢒૾ 4IBEPX )BTI )BTI GBMTF GBMTF "SSBZ 4IBEPX JE EPOF JE EPOF TIBEPX<><EPOF>USVF )BTI 4IBEPX EPOFΛ USVFʹ͢Δ

Slide 28

Slide 28 text

ઓུ̐ɿϑΝΠφϥΠζ "SSBZ ΋ͱͷΦϒδΣΫτ )BTI )BTI GBMTF GBMTF JE EPOF J EPOF ࢒૾ "SSBZ )BTI EPOFΛ USVFʹ͢Δ "SSBZ ฦΓ஋ )BTI USVF JE EPOF

Slide 29

Slide 29 text

ઓུ̐ɿϑΝΠφϥΠζ "SSBZ ΋ͱͷΦϒδΣΫτ )BTI )BTI GBMTF GBMTF JE EPOF J EPOF ࢒૾ "SSBZ )BTI EPOFΛ USVFʹ͢Δ "SSBZ ฦΓ஋ )BTI USVF JE EPOF

Slide 30

Slide 30 text

3. Zanzouͷ࣮૷ͱ໰୊఺ Zanzou͸͓͓Αͦɺmethod_missingͰग़དྷͯ ͍·͢ɻ͍͍ͩͨಈ͖·͕͢ɺ·ͩ໰୊΋͋Γ ·͢ɻ BasicObject#method_missing

Slide 31

Slide 31 text

Zanzouͷ࣮૷ • method_missingΛଟ༻ • https://docs.ruby-lang.org/ja/latest/ method/BasicObject/i/ method_missing.html • ʮଘࡏ͠ͳ͍ϝιου͕ݺ͹Εͨʯͱ͖ͷ ॲཧΛࢦఆͰ͖Δ

Slide 32

Slide 32 text

αϙʔτൣғ A. JSON࡞Δͷʹ࢖͏Α͏ͳΦϒδΣΫτ͸α ϙʔτ͍ͨ͠ • Hash, Array, String, ਺஋, true, false, nil B. ಠࣗΫϥε΋ઃఆΛ͢Ε͹࢖͑ΔΑ͏ʹ͍ͨ͠ C. ͲͷϝιουΛݺΜͰ΋େৎ෉ʹ͍ͨ͠

Slide 33

Slide 33 text

αϙʔτ೉қ౓ 1. ਺஋, true, false, nil • immutable(ঢ়ଶΛ΋ͨͳ͍ʹมߋ͢Δ͜ͱ͕Ͱ͖ͳ͍)ͷͰ༨༟ 2. String • mutableͰ͸͋Δ͚ͲɺίϯςφͰ͸ͳ͍ͷͰ؆୯ 3. Hash • ίϯςφ(ଞͷΦϒδΣΫτΛࢠཁૉͱͯ͠΋ͭ)ͳͷͰগ͠େม 4. Array • ίϯςφ͔ͭɺΠϯσοΫε͕ͣΕΔέʔε͕͋ΔͷͰ࠷ѱ

Slide 34

Slide 34 text

Arrayͷ໰୊ • ࢠཁૉΛഁյͨ͋͠ͱɺͲ͜ʹ໭ͤ͹͍͍ʁ • 3൪໨ͷཁૉͩͬͨ͸͕ͣɺdeleteͰ2൪໨ ʹͳ͍ͬͯΔ͔΋ • ͦ΋ͦ΋Կ൪໨͔Θ͔Βͳ͍͜ͱ΋ (Array#sample)

Slide 35

Slide 35 text

Կ͕ࠔΔͷ͔ • ྫɿTODOͷ഑ྻ͕͋Δͱ͢Δ • ͋ΔTODOΛมߋ͢Δ৔߹ɺҎԼ͕ඞཁ • ࢠཁૉΛdup͠ɺมߋ͢Δ͜ͱ • ৽چ2ͭͷ഑ྻ͕͋Δ͜ͱ • ৽഑ྻͷࢠཁૉ͚ͩɺ৽͍͠΋ͷʹஔ͖׵Θ͍ͬͯΔ͜ͱ • ↑͜ͷͱ͖ʹΠϯσοΫε͕ඞཁʹͳΔ

Slide 36

Slide 36 text

ͪͳΈʹimmer.jsͷ৔߹ • ES6 Proxyͱ͍͏΋ͷΛ࢖͍ͬͯΔ • ΦϒδΣΫτʹର͢Δset/getΛϑοΫͰ͖ Δ • sort()ͱ͔΋શͯͷset/get͕ϑοΫ͞ΕΔ(͢ ͍͝)

Slide 37

Slide 37 text

TPSU ͕಺෦తʹߦͬͨಈ࡞͕શ෦ϑοΫͰ͖ͯΔˢ ʹࢠཁૉ͕ผͷΠϯσοΫεʹҠಈͨ͜͠ͱΛݕ஌Ͱ͖Δ

Slide 38

Slide 38 text

·ͱΊ • ES6 Proxy͸͍͢͝ • Rubyͷsort()͸CͰ࣮૷͞Ε͓ͯΓɺͦͷ಺෦ಈ࡞͸ϑοΫͰ͖ ͳ͍ • جຊతͳέʔεͰ͸ಈ͍͍ͯΔ • ࢒Δέʔε͸pending specʹͯ͋͠ΔͷͰ୭͔௅ઓͯ͠΄͍͠ • 200ߦ͘Β͍ͳͷͰಡΜͰΈΔͱ໘ന͍͔΋ • https://github.com/yhara/zanzou