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.3k
それは残像だ
http://regional-gh.rubykaigi.org/tochigi08/
yhara
June 29, 2019
Tweet
Share
More Decks by yhara
See All by yhara
静的型付けプログラミング言語Shiika
yhara
0
19k
スモートーク
yhara
0
2.9k
Ovto: Frontend web framework for Rubyists
yhara
0
7.4k
Ruby, Opal and WebAssembly
yhara
2
2.5k
Competitive Programming in Ruby (101)
yhara
0
720
Rubyで競技プログラミング(入門編)
yhara
0
1.8k
良いデバッグログはプロジェクトの資産である
yhara
54
18k
Let's make a functional language!
yhara
0
6.4k
Recent Updates (近況報告)
yhara
0
620
Other Decks in Programming
See All in Programming
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.4k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.4k
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.5k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
260
ベクトル検索システムの気持ち
monochromegane
30
9.7k
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.3k
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3k
Chrome Extension Techniques from Hell
moznion
1
150
趣味全開のAITuber開発
kokushin
0
180
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
4
1k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
460
Being an ethical software engineer
xgouchet
PRO
0
200
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Speed Design
sergeychernyshev
28
870
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Building Adaptive Systems
keathley
41
2.5k
RailsConf 2023
tenderlove
29
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
730
How to Think Like a Performance Engineer
csswizardry
22
1.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
For a Future-Friendly Web
brad_frost
176
9.7k
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