SolidjsでLeacTion!を作り直しました / Rebuilt LeacTion! in Solid.js

Webナイト宮崎 vol.18 でのLT資料です。
発表会で使っているLeacTion!というサービスは以前Vue3で実装していましたが、Solid.jsを使って再構築したという話です。

Transcript

1. Solid.jsͰ LeacTion!Λ࡞Γ௚͠·ͨ͠ WebφΠτٶ࡚ vol.18 2023-07-14 ܂ാӳࢿ
2. ࣗݾ঺հ • ͘Θ͸͍͚ͨ͑͢(40) • ϑϦʔϥϯεΤϯδχΞ • ϝϯλʔɺ։ൃ • อҭԂͷࣄ຿ ← New! • झຯɿεΩϡʔόμΠϏϯάɺΧϝϥɺυϩʔϯɺetc • ؔ਺ܕϓϩάϥϛϯάษڧձ Miyazaki FP ࢝Ί·ͨ͠
3. ւͷதͰ΋଴ͬͯ·͢ʂ
4. LeacTion! (= Reaction! For LT) • WebφΠτٶ࡚Ͱ͸͓ͳ͡Έͷษڧձ༻ͷίϝϯτ౤ߘπʔϧ • ϩάΠϯෆཁͰ͙͢࢖͑Δ • ϦχϡʔΞϧޙ͸Πϕϯτ؅ཧऀ͚ͩϩάΠϯඞਢ • ޿ࠂͳ͠ˍແྉͰఏڙ • ·ͩϚχϡΞϧ౳͕੔උͰ͖ͯͳ͍͚ͲɺେମΘ͔ΔΑͶʁ • ͥͻΠϕϯτͰ࢖ͬͯײ૝Λ͍ͩ͘͞
5. LeacTion!Λ࡞ͬͨͱ͖ • 2020೥10݄͝Ζ • Vue3Λ৮ͬͯΈ͔ͨͬͨʢͦͷޙ Vue3.2 ͷษڧʹ΋ͳͬͨʣ • Firebaseͷ࢖͍ํΛؚΊɺͱͯ΋ษڧʹͳͬͨ • ҰํͰɺFirestoreͷੑೳΛ׆͔͢࢖͍ํ͕Ͱ͖͍ͯͳ͍ͳͲ՝୊΋Θ ͔͖ͬͯͨɻ • Α͘ߟ͑ͨΒ Functions ͱ͔࢖Θͳͯ͘΋͍͍ͷͰ͸ʁ
6. ػೳ͸͜ͷ͘Β͍Ͱ͍͍
7. ಺෦ઃܭΛ΍Γͳ͓͍ͨ͠
8. Ͳ͏ͤͳΒ৽͍͜͠ͱΛֶͼ͍ͨ
9. ࢖ͬͯΈ͍ͨϑϨʔϜϫʔΫ͸ʁ
11. Solid.js • ॻ͖ํ͸΄ͱΜͲReact • Ծ૝DOMΛ࢖Θͳ͍ͷͰඇৗʹߴ଎ʢSvelte΋ಉ͡ʣ • ϦΞΫςΟϒ͕పఈ͞Ε͍ͯΔʢ޷ΈͷϙΠϯτʣ • ·ͩར༻ऀ͕গͳ͍ͷͰϥΠϒϥϦ΍஌ݟ͕ཷ·͍ͬͯͳ͍ • ReactΛࢀߟʹ͠ͳ͕Β࡞ͬͯΔ෦෼΋ • Svelte΋ީิʹ͕͋ͬͨɺݸਓతʹผͷͱ͜ΖͰ৮ͬͯͨ
12. State of JS 2022 ͰΈΔར༻཰ Ref: https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/
13. State of JS 2022 ͰΈΔຬ଍౓ Ref: https://2022.stateofjs.com/ja-JP/libraries/front-end-frameworks/
14. Solid.jsΛ࢖ͬͯΈͨײ૝ɿे෼ͳඪ४ػೳ • σʔλ؅ཧͷઃܭ • ෳࡶͳσʔλ(store)ͷ෦෼ߋ৽ʹؔ͢Δඪ४ػೳ͕͋Γɺ͘͢͜͝ ͳΕ͍ͯΔ • ඇಉظॲཧ • ֎෦σʔλͷऔಘʹؔ͢Δ࢓૊ΈͳͲ͕ඪ४Խ͞Ε͍ͯΔ • ϦΞΫςΟϒͳઃܭ͕ͱͯ΋ྑ͍
15. ྫɿreconcile • ༩͑ΒΕͨσʔλͷʮࠩ෼ʯ͚ͩʹ஫໨ͯ͠ϨϯμϦϯάΛ཈͑Δ
16. ·ͱΊ • ࡞Γ௚͢ͷ͕ͱͯ΋ָ͔ͬͨ͠ˍֶͼ͕͋ͬͨ • ڠྗͯ͘͠ΕͨࡾӜ͘Μʹײँʂ • طଘͷϑϨʔϜϫʔΫ΍ΤίγεςϜͷྑ͍ͱ͜Ζ΍ෆධͳϙΠϯτ ΛऔΓೖΕͯ࡞ΒΕ͍ͯΔ࢓૊Έ͸ྑֶ͍ͼΛಘΒΕΔ • ຊ൪Ͱ࢖͏͔͸ผͱͯ͠ɺ࣮ࡍʹ৮ΕͯΈΔͷ͸ͱͯ΋େࣄ • ୭͔LeacTion!ͷྑ͍σβΠϯΛߟ͍͑ͯͩ͘͞