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
240
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
290
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
390
LeacTion!について / About LeacTion!
mather
0
290
Rubyでワンライナー / One-liner on Ruby
mather
0
370
認知と思考パターン / Cognition and Pattern
mather
1
250
「モデル」を考える / Think about "model"
mather
0
360
Shall we make a speech?
mather
0
200
Elmでライフゲーム / LifeGame in Elm
mather
1
940
Elmで関数型を意識する / Think functionally with Elm
mather
0
360
Other Decks in Programming
See All in Programming
CSC307 Lecture 13
javiergs
PRO
0
150
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
CSC307 Lecture 14
javiergs
PRO
0
220
Introduction to GitOps
hwchiu
0
110
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Activities at Cairo Library
cairolibrary720
0
1.2k
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
【Go言語】golangci-lintの使い方
tomo1227
0
270
Featured
See All Featured
The Invisible Customer
myddelton
117
13k
Git: the NoSQL Database
bkeepers
PRO
423
64k
What's new in Ruby 2.0
geeforr
338
31k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Atom: Resistance is Futile
akmur
261
25k
Design by the Numbers
sachag
277
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
A better future with KSS
kneath
231
17k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Making Projects Easy
brettharned
111
5.7k
Clear Off the Table
cherdarchuk
89
320k
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!ͷྑ͍σβΠϯΛߟ͍͑ͯͩ͘͞