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! i...
Search
mather
July 16, 2023
Programming
0
320
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
470
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
480
LeacTion!について / About LeacTion!
mather
0
330
Rubyでワンライナー / One-liner on Ruby
mather
0
470
認知と思考パターン / Cognition and Pattern
mather
1
280
「モデル」を考える / Think about "model"
mather
0
380
Shall we make a speech?
mather
0
240
Elmでライフゲーム / LifeGame in Elm
mather
1
1k
Elmで関数型を意識する / Think functionally with Elm
mather
0
420
Other Decks in Programming
See All in Programming
CSC509 Lecture 03
javiergs
PRO
0
330
CSC509 Lecture 02
javiergs
PRO
0
400
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
550
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
900
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
590
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
110
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
360
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
170
明日から始めるリファクタリング
ryounasso
0
110
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
510
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
160
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Automating Front-end Workflow
addyosmani
1371
200k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A designer walks into a library…
pauljervisheath
209
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Documentation Writing (for coders)
carmenintech
75
5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
RailsConf 2023
tenderlove
30
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Orchestrator
shlominoach
190
11k
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!ͷྑ͍σβΠϯΛߟ͍͑ͯͩ͘͞