vue_component_from_composable

Vue.jsのコンポーザブル関数からコンポーネントを返して、見た目とロジックを分離するお話です。

Transcript

1. ίϯϙʔβϒϧؔ਺͔Β ίϯϙʔωϯτΛฦͯ͠ɺ ݟͨ໨ͱϩδοΫΛ෼཭͠Α͏ͥ
2. ੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
3. ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢ HTMLʹͪΐ͍଍͠ͰͰ͖Δʂ Vue.jsͰαΫοͱಈ͖Λ͚ͭΔํ๏ ؤுΒͳ͍3Dදݱʂ WebGLΛ࢖Θͣʹ ΢ΣϒαΠτͰ3DΛ࣮ݱ͢ΔCSSςΫχοΫ https://ics.media/entry/230519/ https://ics.media/entry/210908/ NEW!
4. ࠷ۙ͸๭ிͷσβΠϯγεςϜΛݸਓతʹVueͰ࣮૷͍ͯ͠·͢ ʢඇެೝʣ
5. ຊ೔͸ͪ͜ΒͷهࣄΛϕʔεʹ͓࿩͠͠·͢ rgba(b rgba(b https://zenn.dev/crayfisher_zari/articles/7946414921fe42
6. lue, 0.019) 88%, lue, 0) 100% ͞Βʹ͜ͷهࣄ͸ͪ͜ΒͷهࣄΛΠϯεύΠΞ͍ͯ͠·͢ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3
7. ίϯϙʔωϯτΛ ίϯϙʔβϒϧؔ਺͔Βఏڙ͢Δ ͱ͸ͳʹ͔ ʁ
8. ͍ͭ΋ͷίϯϙʔωϯτݺͼग़͠
9. ίϯϙʔβϒϧؔ਺͔Βͷίϯϙʔωϯτݺͼग़͠
10. useHoge͸ͲΜͳؔ਺͔ͱ͍͏ͱʜ ʁ
12. defineComponet()ʹ Ϩϯμʔؔ਺Λ౉ͯ͋͛͠Ε͹ɺ ؔ਺ͷΈͰίϯϙʔωϯτ͕࡞ΕΔ ʂ
13. ͲΜͳϝϦοτ͕ʁ
14. Ϩϯμʔؔ਺ͷୈ2Ҿ਺ʹpropsΛ౉ͤΔ
15. ίϯϙʔωϯτͷ஋΋ίϯϙʔβϒϧؔ਺͔ΒฦͤΔ
16. ਌ίϯϙʔωϯτ͸ɺ ਌ͷؔ৺ʹͳ͍ࢠίϯϙʔωϯτͷঢ়ଶ؅ཧΛ ίϯϙʔβϒϧؔ਺ʹ೚ͤΒΕΔ
17. ਌ίϯϙʔωϯτ ஌Γ͍ͨ஋ͱ഑ஔ ˠ ίϯϙʔωϯτ ίϯϙʔωϯτͷݟͨ໨ ˠ ίϯϙʔβϒϧؔ਺ ίϯϙʔωϯτͷ؅ཧ ˠ ͦΕͧΕͷ໾ׂ
18. ݟͨ໨ͱϩδοΫͷ෼཭͕Ͱ͖Δ
19. ྫ͑͹ɺ͜ΜͳσβΠϯ ໊͓લ ඞਢ߲໨Ͱ͢ ి࿩൪߸ ൒֯਺ࣈͰೖྗ͍ͯͩ͘͠͞
20. ྫ͑͹ɺ͜ΜͳσβΠϯ ໊͓લ ඞਢ߲໨Ͱ͢ ి࿩൪߸ ൒֯਺ࣈͰೖྗ͍ͯͩ͘͠͞ งғؾ͸ಉ͡ ৼΔ෣͍͕ҧ͏
21. ΍Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͠૷͢Δ
22. ΍Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͠૷͢Δ ίϯϙʔωϯτͷݟͨ໨͕มߋʹͳͬͨͱ͖ɺ શ෦௚͞ͳͪ͘Ό͍͚ͳ͍ ˣ
23. ΍Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠૷͠ɺ ৼΔ෣͍Λ਌ίϯϙʔωϯτʹॻ͘
24. ΍Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠૷͠ɺ ৼΔ෣͍Λ਌ίϯϙʔωϯτʹॻ͘ ਌ίϯϙʔωϯτͷίʔυ͕ංେԽ ˣ
25. ͦ͜Ͱɺίϯϙʔβϒϧؔ਺ͷग़൪
26. ڞ௨ͷίϯϙʔωϯτͰৼΔ෣͍Λίϯϙʔβϒϧؔ਺ʹهड़
27. ࢠίϯϙʔωϯτ͸ݟͨ໨͚ͩΛ୲౰ ಺༰΋ props ͔ΒΧελϚΠζՄೳͰɺ ΄΅΄΅࿮ͱελΠϧ͔͠ఏڙ͠ͳ͍
28. ਌ίϯϙʔωϯτ͸֤ίϯϙʔωϯτͱ஋͚ͩʹूதͰ͖Δ
29. ࣮ྫ
30. ͢΂ͯ 1 ͭͷΠϯϓοτίϯϙʔωϯτ͔Β࡞ΒΕ͍ͯΔ
31. ίϯϙʔβϒϧؔ਺΋Ҿ਺Λड͚औΔ͜ͱͰόϦΤʔγϣϯΛ૿΍ͤΔ
32. ·ͱΊ
33. Vueίϯϙʔωϯτ͸ී௨ͷ jsϑΝΠϧ͔Β΋ฦͤΔ ίϯϙʔωϯτ͔Βίϯϙʔβϒϧ΁ϩδοΫΛ੾Γग़͢͜ͱͰ ίϯϙʔωϯτ͸ݟͨ໨͚ͩΛ୲౰͢Δˠ࠶ར༻ੑ͕ߴ·Δ ίϯϙʔβϒϧ͸ؔ৺ͷ͋Δ஋͚ͩΛฦ͠ɺ ਌͸ؔ৺ࣄʹूதͰ͖Δ
34. ͏·͘ݟͨ໨ͱϩδοΫΛ෼཭ͯ͠ ָ͍͠ Vue.js ϥΠϑΛ ʂ
35. ࢀߟจݙ ʲLINE ূ݊ FrontEndʳίϯϙʔωϯτΛΧελϜϑοΫͰఏڙͯ͠Έͨ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3 ίϯϙʔωϯτΛখ͘͞ɾ͖Ε͍ʹઃܭ͠Α͏ Vue Composition API Λ׆༻ͨ͠ίϯϙʔωϯτ෼ׂज़ https://ics.media/entry/210929/