それは残像だ

26e1ba9a02729b2d6013604135221aae?s=47 yhara
June 29, 2019

 それは残像だ

26e1ba9a02729b2d6013604135221aae?s=128

yhara

June 29, 2019
Tweet

Transcript

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

  2. About me • @yhara (Yutaka Hara) • https://yhara.jp • NaCl

    দߐຊࣾ
  3. ʰRubyͰ࡞Δحົͳϓϩάϥϛϯάݴޠʱ

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

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

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

  7. IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTZIBSBIUNM

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

  9. Ovtoͷ͘͠Έ • app.stateͱ͍͏ΦϒδΣΫτʹΞϓϦͷશঢ়ଶ͕ೖ͍ͬͯ Δ • state͕มԽͨ͠Βը໘Λߋ৽͢Δ • ʮมԽ͔ͨ͠ʯΛݕࠪ͢Δʹ͸ɺݩͷঢ়ଶ͕ඞཁ • ʮগ͠มߋͨ͠΋ͷʯΛ࡞Δͷ͕ͪΐͬͱ໘౗

    • JSͰ͸Ͳ͏ͳΜͩΖ͏ʁˠimmer.jsͱ͍͏΋ͷ͕͋ΔΒ͠ ͍ˠԿ͜Ε໘ന͍ɺRubyʹҠ২Ͱ͖ͳ͍͔ͳ
  10. ྫ todos = [ {id: 1, title: "ཛΛങ͏", done: false},

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

    {id: 2, title: "૟আػΛ͔͚Δ", done: false}, ] todos[1][:done] = true ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ
  12. 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ʹ͍ͨ͠ͱ͢Δ
  13. ཧ૝ɹɹɹɹݱ࣮ new_todos = todos.map{|x| if x[:id] == 2 x.merge(done: true)

    else x end } todos[1][:done] = true
  14. 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ʹ͢Δʯ͕ͦͷ··ॻ͚Δ ͔ͭΦϦδφϧ͸ແࣄ
  15. ໊લͷ༝དྷ

  16. None
  17. ΍͔ͬͨʂʁ

  18. ࢒૾ͩʜ ͳʹͬ

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

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

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

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

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

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

     EPOFGBMTF 5PEPJE  EPOFGBMTF 5PEPJE  EPOFGBMTF 5PEPJE  EPOFUSVF
  25. खॱ̍ɿϧʔτShadowΛ࡞Δ "SSBZ ΋ͱͷ ΦϒδΣΫτ ࢒૾ 4IBEPX )BTI )BTI  GBMTF

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

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

    GBMTF  GBMTF "SSBZ 4IBEPX   JE EPOF JE EPOF TIBEPX<><EPOF>USVF )BTI 4IBEPX EPOFΛ USVFʹ͢Δ
  28. ઓུ̐ɿϑΝΠφϥΠζ "SSBZ ΋ͱͷΦϒδΣΫτ )BTI )BTI  GBMTF  GBMTF 

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

     JE EPOF J EPOF ࢒૾ "SSBZ )BTI EPOFΛ USVFʹ͢Δ "SSBZ ฦΓ஋ )BTI USVF   JE EPOF
  30. 3. Zanzouͷ࣮૷ͱ໰୊఺ Zanzou͸͓͓Αͦɺmethod_missingͰग़དྷͯ ͍·͢ɻ͍͍ͩͨಈ͖·͕͢ɺ·ͩ໰୊΋͋Γ ·͢ɻ BasicObject#method_missing

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

  32. αϙʔτൣғ A. JSON࡞Δͷʹ࢖͏Α͏ͳΦϒδΣΫτ͸α ϙʔτ͍ͨ͠ • Hash, Array, String, ਺஋, true,

    false, nil B. ಠࣗΫϥε΋ઃఆΛ͢Ε͹࢖͑ΔΑ͏ʹ͍ͨ͠ C. ͲͷϝιουΛݺΜͰ΋େৎ෉ʹ͍ͨ͠
  33. αϙʔτ೉қ౓ 1. ਺஋, true, false, nil • immutable(ঢ়ଶΛ΋ͨͳ͍ʹมߋ͢Δ͜ͱ͕Ͱ͖ͳ͍)ͷͰ༨༟ 2. String

    • mutableͰ͸͋Δ͚ͲɺίϯςφͰ͸ͳ͍ͷͰ؆୯ 3. Hash • ίϯςφ(ଞͷΦϒδΣΫτΛࢠཁૉͱͯ͠΋ͭ)ͳͷͰগ͠େม 4. Array • ίϯςφ͔ͭɺΠϯσοΫε͕ͣΕΔέʔε͕͋ΔͷͰ࠷ѱ
  34. Arrayͷ໰୊ • ࢠཁૉΛഁյͨ͋͠ͱɺͲ͜ʹ໭ͤ͹͍͍ʁ • 3൪໨ͷཁૉͩͬͨ͸͕ͣɺdeleteͰ2൪໨ ʹͳ͍ͬͯΔ͔΋ • ͦ΋ͦ΋Կ൪໨͔Θ͔Βͳ͍͜ͱ΋ (Array#sample)

  35. Կ͕ࠔΔͷ͔ • ྫɿTODOͷ഑ྻ͕͋Δͱ͢Δ • ͋ΔTODOΛมߋ͢Δ৔߹ɺҎԼ͕ඞཁ • ࢠཁૉΛdup͠ɺมߋ͢Δ͜ͱ • ৽چ2ͭͷ഑ྻ͕͋Δ͜ͱ •

    ৽഑ྻͷࢠཁૉ͚ͩɺ৽͍͠΋ͷʹஔ͖׵Θ͍ͬͯΔ͜ͱ • ↑͜ͷͱ͖ʹΠϯσοΫε͕ඞཁʹͳΔ
  36. ͪͳΈʹimmer.jsͷ৔߹ • ES6 Proxyͱ͍͏΋ͷΛ࢖͍ͬͯΔ • ΦϒδΣΫτʹର͢Δset/getΛϑοΫͰ͖ Δ • sort()ͱ͔΋શͯͷset/get͕ϑοΫ͞ΕΔ(͢ ͍͝)

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

  38. ·ͱΊ • ES6 Proxy͸͍͢͝ • Rubyͷsort()͸CͰ࣮૷͞Ε͓ͯΓɺͦͷ಺෦ಈ࡞͸ϑοΫͰ͖ ͳ͍ • جຊతͳέʔεͰ͸ಈ͍͍ͯΔ •

    ࢒Δέʔε͸pending specʹͯ͋͠ΔͷͰ୭͔௅ઓͯ͠΄͍͠ • 200ߦ͘Β͍ͳͷͰಡΜͰΈΔͱ໘ന͍͔΋ • https://github.com/yhara/zanzou