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
310
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
460
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
470
LeacTion!について / About LeacTion!
mather
0
330
Rubyでワンライナー / One-liner on Ruby
mather
0
460
認知と思考パターン / 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
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
ソフトウェア設計とAI技術の活用
masuda220
PRO
18
4.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
410
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Designing Experiences People Love
moore
142
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Balancing Empowerment & Direction
lara
1
460
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
BBQ
matthewcrist
89
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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!ͷྑ͍σβΠϯΛߟ͍͑ͯͩ͘͞