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
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
140
Improving my own Ruby thereafter
sisshiki1969
1
150
Testing Trophyは叫ばない
toms74209200
0
590
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
230
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.7k
AIコーディングAgentとの向き合い方
eycjur
0
250
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
330
RDoc meets YARD
okuramasafumi
4
160
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
820
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
RailsConf 2023
tenderlove
30
1.2k
BBQ
matthewcrist
89
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Visualization
eitanlees
147
16k
A better future with KSS
kneath
239
17k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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!ͷྑ͍σβΠϯΛߟ͍͑ͯͩ͘͞