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
SolidjsでLeacTion!を作り直しました / Rebuilt LeacTion! in Solid.js
Search
mather
July 16, 2023
Programming
0
200
SolidjsでLeacTion!を作り直しました / Rebuilt LeacTion! in Solid.js
Webナイト宮崎 vol.18 でのLT資料です。
発表会で使っているLeacTion!というサービスは以前Vue3で実装していましたが、Solid.jsを使って再構築したという話です。
mather
July 16, 2023
Tweet
Share
More Decks by mather
See All by mather
Webフレームワークの功罪 / Advantages and considerable point of Web Frameworks
mather
0
260
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
350
LeacTion!について / About LeacTion!
mather
0
280
Rubyでワンライナー / One-liner on Ruby
mather
0
340
認知と思考パターン / Cognition and Pattern
mather
1
250
「モデル」を考える / Think about "model"
mather
0
350
Shall we make a speech?
mather
0
200
Elmでライフゲーム / LifeGame in Elm
mather
1
930
Elmで関数型を意識する / Think functionally with Elm
mather
0
350
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
910
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
エンターテイメント業界で利用されるAWS
demuyan
0
210
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
380
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
270
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
460
Goのmultiple errorsについて (2024年4月版)
syumai
4
1k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Practical Orchestrator
shlominoach
182
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Clear Off the Table
cherdarchuk
84
310k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
The Cult of Friendly URLs
andyhume
74
5.7k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Code Review Best Practice
trishagee
55
15k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Transcript
Solid.jsͰ LeacTion!Λ࡞Γ͠·ͨ͠ WebφΠτٶ࡚ vol.18 2023-07-14 ܂ാӳࢿ
ࣗݾհ • ͘Θ͍͚ͨ͑͢(40) • ϑϦʔϥϯεΤϯδχΞ • ϝϯλʔɺ։ൃ • อҭԂͷࣄ ←
New! • झຯɿεΩϡʔόμΠϏϯάɺΧϝϥɺυϩʔϯɺetc • ؔܕϓϩάϥϛϯάษڧձ Miyazaki FP ࢝Ί·ͨ͠
ւͷதͰͬͯ·͢ʂ
LeacTion! (= Reaction! For LT) • WebφΠτٶ࡚Ͱ͓ͳ͡Έͷษڧձ༻ͷίϝϯτߘπʔϧ • ϩάΠϯෆཁͰ͙͑͢Δ •
ϦχϡʔΞϧޙΠϕϯτཧऀ͚ͩϩάΠϯඞਢ • ࠂͳ͠ˍແྉͰఏڙ • ·ͩϚχϡΞϧ͕උͰ͖ͯͳ͍͚ͲɺେମΘ͔ΔΑͶʁ • ͥͻΠϕϯτͰͬͯײΛ͍ͩ͘͞
LeacTion!Λ࡞ͬͨͱ͖ • 202010݄͝Ζ • Vue3Λ৮ͬͯΈ͔ͨͬͨʢͦͷޙ Vue3.2 ͷษڧʹͳͬͨʣ • Firebaseͷ͍ํΛؚΊɺͱͯษڧʹͳͬͨ •
ҰํͰɺFirestoreͷੑೳΛ׆͔͍͢ํ͕Ͱ͖͍ͯͳ͍ͳͲ՝Θ ͔͖ͬͯͨɻ • Α͘ߟ͑ͨΒ Functions ͱ͔Θͳ͍͍ͯ͘ͷͰʁ
ػೳ͜ͷ͘Β͍Ͱ͍͍
෦ઃܭΛΓͳ͓͍ͨ͠
Ͳ͏ͤͳΒ৽͍͜͠ͱΛֶͼ͍ͨ
ͬͯΈ͍ͨϑϨʔϜϫʔΫʁ
None
Solid.js • ॻ͖ํ΄ͱΜͲReact • ԾDOMΛΘͳ͍ͷͰඇৗʹߴʢSvelteಉ͡ʣ • ϦΞΫςΟϒ͕పఈ͞Ε͍ͯΔʢΈͷϙΠϯτʣ • ·ͩར༻ऀ͕গͳ͍ͷͰϥΠϒϥϦݟ͕ཷ·͍ͬͯͳ͍ •
ReactΛࢀߟʹ͠ͳ͕Β࡞ͬͯΔ෦ • Svelteީิʹ͕͋ͬͨɺݸਓతʹผͷͱ͜ΖͰ৮ͬͯͨ
State of JS 2022 ͰΈΔར༻ Ref: https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/
State of JS 2022 ͰΈΔຬ Ref: https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/
Solid.jsΛͬͯΈͨײɿेͳඪ४ػೳ • σʔλཧͷઃܭ • ෳࡶͳσʔλ(store)ͷ෦ߋ৽ʹؔ͢Δඪ४ػೳ͕͋Γɺ͘͢͜͝ ͳΕ͍ͯΔ • ඇಉظॲཧ • ֎෦σʔλͷऔಘʹؔ͢ΔΈͳͲ͕ඪ४Խ͞Ε͍ͯΔ
• ϦΞΫςΟϒͳઃܭ͕ͱͯྑ͍
ྫɿreconcile • ༩͑ΒΕͨσʔλͷʮࠩʯ͚ͩʹͯ͠ϨϯμϦϯάΛ͑Δ
·ͱΊ • ࡞Γ͢ͷ͕ͱָ͔ͯͬͨ͠ˍֶͼ͕͋ͬͨ • ڠྗͯ͘͠ΕͨࡾӜ͘Μʹײँʂ • طଘͷϑϨʔϜϫʔΫΤίγεςϜͷྑ͍ͱ͜ΖෆධͳϙΠϯτ ΛऔΓೖΕͯ࡞ΒΕ͍ͯΔΈྑֶ͍ͼΛಘΒΕΔ • ຊ൪Ͱ͏͔ผͱͯ͠ɺ࣮ࡍʹ৮ΕͯΈΔͷͱͯେࣄ
• ୭͔LeacTion!ͷྑ͍σβΠϯΛߟ͍͑ͯͩ͘͞