Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
それは残像だ
Search
yhara
June 29, 2019
Programming
4
4.1k
それは残像だ
http://regional-gh.rubykaigi.org/tochigi08/
yhara
June 29, 2019
Tweet
Share
More Decks by yhara
See All by yhara
静的型付けプログラミング言語Shiika
yhara
0
18k
スモートーク
yhara
0
2.8k
Ovto: Frontend web framework for Rubyists
yhara
0
7.1k
Ruby, Opal and WebAssembly
yhara
2
2.3k
Competitive Programming in Ruby (101)
yhara
0
660
Rubyで競技プログラミング(入門編)
yhara
0
1.7k
良いデバッグログはプロジェクトの資産である
yhara
54
18k
Let's make a functional language!
yhara
0
6.2k
Recent Updates (近況報告)
yhara
0
580
Other Decks in Programming
See All in Programming
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
100
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
200
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
130
Why Prism?
kddnewton
4
1.7k
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
4
930
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Jakarta EE meets AI
ivargrimstad
1
540
Patched fetch did not work
quramy
4
410
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
190
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Speed Design
sergeychernyshev
22
430
Producing Creativity
orderedlist
PRO
340
39k
Building Adaptive Systems
keathley
36
2.1k
Clear Off the Table
cherdarchuk
91
320k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
How to Think Like a Performance Engineer
csswizardry
16
960
Designing with Data
zakiwarfel
98
5k
Code Review Best Practice
trishagee
62
16k
Transcript
ͦΕ૾ͩ @yhara (Yutaka Hara) 2019/6/29 ͱͪ͗Rubyձٞ08
About me • @yhara (Yutaka Hara) • https://yhara.jp • NaCl
দߐຊࣾ
ʰRubyͰ࡞Δحົͳϓϩάϥϛϯάݴޠʱ
֓ཁ Zanzouͱ͍͏gemΛ࡞Γ·ͨ͠ɻ ZanzouɺΦϒδΣΫτͷʮҰ෦͚ͩॻ͖ ͑ͨͭʯΛ؆୯ʹ࡞ΔͨΊͷgemͰ͢ɻ
Agenda 1. Zanzouͱ 2. ZanzouͷΞϧΰϦζϜ 3. Zanzouͷ࣮ͱ
1. Zanzouͱ Zanzou4݄ͷRubyKaigiͰൃදͨ͠Ovtoͱ͍ ͏WebϑϨʔϜϫʔΫͷͨΊʹ࡞Γ·ͨ͠ɻ https://github.com/yhara/ovto
IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTZIBSBIUNM
ཁ • RubyͰϒϥβΞϓϦΛ࡞ΕΔϑϨʔϜϫʔ ΫΛ࡞ͬͨ • RubyͰը໘ͷఆٛΛॻ͘ˠOpalͰJavaScript ʹม͢Δˠϒϥβ্Ͱಈ͘
Ovtoͷ͘͠Έ • app.stateͱ͍͏ΦϒδΣΫτʹΞϓϦͷશঢ়ଶ͕ೖ͍ͬͯ Δ • state͕มԽͨ͠Βը໘Λߋ৽͢Δ • ʮมԽ͔ͨ͠ʯΛݕࠪ͢Δʹɺݩͷঢ়ଶ͕ඞཁ • ʮগ͠มߋͨ͠ͷʯΛ࡞Δͷ͕ͪΐͬͱ໘
• JSͰͲ͏ͳΜͩΖ͏ʁˠimmer.jsͱ͍͏ͷ͕͋ΔΒ͠ ͍ˠԿ͜Ε໘ന͍ɺRubyʹҠ২Ͱ͖ͳ͍͔ͳ
ྫ todos = [ {id: 1, title: "ཛΛങ͏", done: false},
{id: 2, title: "আػΛ͔͚Δ", done: false}, ] ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ
୯७ʹΔͱ͜͏ todos = [ {id: 1, title: "ཛΛങ͏", done: false},
{id: 2, title: "আػΛ͔͚Δ", done: false}, ] todos[1][:done] = true ͜͜ΛUSVFʹ͍ͨ͠ͱ͢Δ
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ʹ͍ͨ͠ͱ͢Δ
ཧɹɹɹɹݱ࣮ new_todos = todos.map{|x| if x[:id] == 2 x.merge(done: true)
else x end } todos[1][:done] = true
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ʹ͢Δʯ͕ͦͷ··ॻ͚Δ ͔ͭΦϦδφϧແࣄ
໊લͷ༝དྷ
None
͔ͬͨʂʁ
૾ͩʜ ͳʹͬ
ΦϒδΣΫτ ഁյతૢ࡞ ϓϩάϥϜ
ରΛૢ࡞͍ͯ͠ΔΑ͏͚ͩͲɺ ݩͷΦϒδΣΫτແࣄ (૾ͳͷͰ) ΦϒδΣΫτ ഁյతૢ࡞ ϓϩάϥϜ ࣮ߦ݁Ռ
2. ZanzouͷΞϧΰϦζϜ ͜ͷΑ͏ͳಈ࡞Λ࣮ݱ͢ΔʹͲ͏͢ΕΑ͍Ͱ͠ΐ͏͔ʁ ZanzouͷΈɺimmer.jsͱ͍͏JavaScriptͷϥΠϒϥ ϦΛࢀߟʹ͍ͯ͠·͢ɻ https://github.com/immerjs/immer
Ұ൪ʮ؆୯ʯͳΓํɹ • ΦϒδΣΫτશମΛෳ͢Δ • ෳͨ͠ͷΛมߋͤ͞Δ • ɿ͍
ྫɿશ෦ෳͯ͠͠·͑ಈ͚͘ Ͳ… UPEPT<> OFX@UPEPT<> 5PEPJE EPOFGBMTF
5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFUSVF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF
UPEPT<> OFX@UPEPT<> ڞ༗Ͱ͖Δͱ͜Ζڞ༗͍ͨ͠ 5PEPJE EPOFGBMTF 5PEPJE
EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFGBMTF 5PEPJE EPOFUSVF
खॱ̍ɿϧʔτShadowΛ࡞Δ "SSBZ ͱͷ ΦϒδΣΫτ ૾ 4IBEPX )BTI )BTI GBMTF
GBMTF "SSBZ 4IBEPX JE EPOF JE EPOF TIBEPX<><EPOF>USVF
ઓུ̎ɿࢀর͞ΕͨΒShadowΛฦ͢ "SSBZ ͱͷ ΦϒδΣΫτ ૾ 4IBEPX )BTI )BTI GBMTF
GBMTF "SSBZ 4IBEPX JE EPOF JE EPOF TIBEPX<><EPOF>USVF )BTI 4IBEPX
ઓུ̏ɿॻ͖͑ΒΕͨΒͦͷ͜ͱΛ ͓֮͑ͯ͘ "SSBZ ͱͷ ΦϒδΣΫτ ૾ 4IBEPX )BTI )BTI
GBMTF GBMTF "SSBZ 4IBEPX JE EPOF JE EPOF TIBEPX<><EPOF>USVF )BTI 4IBEPX EPOFΛ USVFʹ͢Δ
ઓུ̐ɿϑΝΠφϥΠζ "SSBZ ͱͷΦϒδΣΫτ )BTI )BTI GBMTF GBMTF
JE EPOF J EPOF ૾ "SSBZ )BTI EPOFΛ USVFʹ͢Δ "SSBZ ฦΓ )BTI USVF JE EPOF
ઓུ̐ɿϑΝΠφϥΠζ "SSBZ ͱͷΦϒδΣΫτ )BTI )BTI GBMTF GBMTF
JE EPOF J EPOF ૾ "SSBZ )BTI EPOFΛ USVFʹ͢Δ "SSBZ ฦΓ )BTI USVF JE EPOF
3. Zanzouͷ࣮ͱ Zanzou͓͓Αͦɺmethod_missingͰग़དྷͯ ͍·͢ɻ͍͍ͩͨಈ͖·͕͢ɺ·ͩ͋Γ ·͢ɻ BasicObject#method_missing
Zanzouͷ࣮ • method_missingΛଟ༻ • https://docs.ruby-lang.org/ja/latest/ method/BasicObject/i/ method_missing.html • ʮଘࡏ͠ͳ͍ϝιου͕ݺΕͨʯͱ͖ͷ ॲཧΛࢦఆͰ͖Δ
αϙʔτൣғ A. JSON࡞Δͷʹ͏Α͏ͳΦϒδΣΫτα ϙʔτ͍ͨ͠ • Hash, Array, String, , true,
false, nil B. ಠࣗΫϥεઃఆΛ͢Ε͑ΔΑ͏ʹ͍ͨ͠ C. ͲͷϝιουΛݺΜͰେৎʹ͍ͨ͠
αϙʔτқ 1. , true, false, nil • immutable(ঢ়ଶΛͨͳ͍ʹมߋ͢Δ͜ͱ͕Ͱ͖ͳ͍)ͷͰ༨༟ 2. String
• mutableͰ͋Δ͚ͲɺίϯςφͰͳ͍ͷͰ؆୯ 3. Hash • ίϯςφ(ଞͷΦϒδΣΫτΛࢠཁૉͱͯͭ͠)ͳͷͰগ͠େม 4. Array • ίϯςφ͔ͭɺΠϯσοΫε͕ͣΕΔέʔε͕͋ΔͷͰ࠷ѱ
Arrayͷ • ࢠཁૉΛഁյͨ͋͠ͱɺͲ͜ʹ͍͍ͤʁ • 3൪ͷཁૉ͕ͩͬͨͣɺdeleteͰ2൪ ʹͳ͍ͬͯΔ͔ • ͦͦԿ൪͔Θ͔Βͳ͍͜ͱ (Array#sample)
Կ͕ࠔΔͷ͔ • ྫɿTODOͷྻ͕͋Δͱ͢Δ • ͋ΔTODOΛมߋ͢Δ߹ɺҎԼ͕ඞཁ • ࢠཁૉΛdup͠ɺมߋ͢Δ͜ͱ • ৽چ2ͭͷྻ͕͋Δ͜ͱ •
৽ྻͷࢠཁૉ͚ͩɺ৽͍͠ͷʹஔ͖Θ͍ͬͯΔ͜ͱ • ↑͜ͷͱ͖ʹΠϯσοΫε͕ඞཁʹͳΔ
ͪͳΈʹimmer.jsͷ߹ • ES6 Proxyͱ͍͏ͷΛ͍ͬͯΔ • ΦϒδΣΫτʹର͢Δset/getΛϑοΫͰ͖ Δ • sort()ͱ͔શͯͷset/get͕ϑοΫ͞ΕΔ(͢ ͍͝)
TPSU ͕෦తʹߦͬͨಈ࡞͕શ෦ϑοΫͰ͖ͯΔˢ ʹࢠཁૉ͕ผͷΠϯσοΫεʹҠಈͨ͜͠ͱΛݕͰ͖Δ
·ͱΊ • ES6 Proxy͍͢͝ • Rubyͷsort()CͰ࣮͞Ε͓ͯΓɺͦͷ෦ಈ࡞ϑοΫͰ͖ ͳ͍ • جຊతͳέʔεͰಈ͍͍ͯΔ •
Δέʔεpending specʹͯ͋͠ΔͷͰ୭͔ઓͯ͠΄͍͠ • 200ߦ͘Β͍ͳͷͰಡΜͰΈΔͱ໘ന͍͔ • https://github.com/yhara/zanzou