Upgrade to Pro — share decks privately, control downloads, hide ads and more …

vue_component_from_composable

 vue_component_from_composable

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

nishihara

July 27, 2023
Tweet

More Decks by nishihara

Other Decks in Programming

Transcript

  1. ίϯϙʔβϒϧؔ਺͔Β
    ίϯϙʔωϯτΛฦͯ͠ɺ
    ݟͨ໨ͱϩδοΫΛ෼཭͠Α͏ͥ

    View full-size slide

  2. ੢ݪ ཌྷ
    גࣜձࣾ ICS
    ϑϩϯτΤϯυΤϯδχΞ
    @crayfisher_zari
    @t.nishihara710
    @crayfisher-zari.bsky.social

    View full-size slide

  3. ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢
    HTMLʹͪΐ͍଍͠ͰͰ͖Δʂ
    Vue.jsͰαΫοͱಈ͖Λ͚ͭΔํ๏
    ؤுΒͳ͍3Dදݱʂ WebGLΛ࢖Θͣʹ
    ΢ΣϒαΠτͰ3DΛ࣮ݱ͢ΔCSSςΫχοΫ
    https://ics.media/entry/230519/ https://ics.media/entry/210908/
    NEW!

    View full-size slide

  4. ࠷ۙ͸๭ிͷσβΠϯγεςϜΛݸਓతʹVueͰ࣮૷͍ͯ͠·͢
    ʢඇެೝʣ

    View full-size slide

  5. ຊ೔͸ͪ͜ΒͷهࣄΛϕʔεʹ͓࿩͠͠·͢
    rgba(b
    rgba(b
    https://zenn.dev/crayfisher_zari/articles/7946414921fe42

    View full-size slide

  6. lue, 0.019) 88%,
    lue, 0) 100%
    ͞Βʹ͜ͷهࣄ͸ͪ͜ΒͷهࣄΛΠϯεύΠΞ͍ͯ͠·͢
    https://engineering.linecorp.com/ja/blog/line-securities-frontend-3

    View full-size slide

  7. ίϯϙʔωϯτΛ
    ίϯϙʔβϒϧؔ਺͔Βఏڙ͢Δ
    ͱ͸ͳʹ͔
    ʁ

    View full-size slide

  8. ͍ͭ΋ͷίϯϙʔωϯτݺͼग़͠

    View full-size slide

  9. ίϯϙʔβϒϧؔ਺͔Βͷίϯϙʔωϯτݺͼग़͠

    View full-size slide

  10. useHoge͸ͲΜͳؔ਺͔ͱ͍͏ͱʜ
    ʁ

    View full-size slide

  11. defineComponet()ʹ
    Ϩϯμʔؔ਺Λ౉ͯ͋͛͠Ε͹ɺ
    ؔ਺ͷΈͰίϯϙʔωϯτ͕࡞ΕΔ
    ʂ

    View full-size slide

  12. ͲΜͳϝϦοτ͕ʁ

    View full-size slide

  13. Ϩϯμʔؔ਺ͷୈ2Ҿ਺ʹpropsΛ౉ͤΔ

    View full-size slide

  14. ίϯϙʔωϯτͷ஋΋ίϯϙʔβϒϧؔ਺͔ΒฦͤΔ

    View full-size slide

  15. ਌ίϯϙʔωϯτ͸ɺ
    ਌ͷؔ৺ʹͳ͍ࢠίϯϙʔωϯτͷঢ়ଶ؅ཧΛ
    ίϯϙʔβϒϧؔ਺ʹ೚ͤΒΕΔ

    View full-size slide

  16. ਌ίϯϙʔωϯτ ஌Γ͍ͨ஋ͱ഑ஔ
    ˠ
    ίϯϙʔωϯτ ίϯϙʔωϯτͷݟͨ໨
    ˠ
    ίϯϙʔβϒϧؔ਺ ίϯϙʔωϯτͷ؅ཧ
    ˠ
    ͦΕͧΕͷ໾ׂ

    View full-size slide

  17. ݟͨ໨ͱϩδοΫͷ෼཭͕Ͱ͖Δ

    View full-size slide

  18. ྫ͑͹ɺ͜ΜͳσβΠϯ
    ໊͓લ
    ඞਢ߲໨Ͱ͢
    ి࿩൪߸
    ൒֯਺ࣈͰೖྗ͍ͯͩ͘͠͞

    View full-size slide

  19. ྫ͑͹ɺ͜ΜͳσβΠϯ
    ໊͓લ
    ඞਢ߲໨Ͱ͢
    ి࿩൪߸
    ൒֯਺ࣈͰೖྗ͍ͯͩ͘͠͞
    งғؾ͸ಉ͡
    ৼΔ෣͍͕ҧ͏

    View full-size slide

  20. ΍Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͠૷͢Δ

    View full-size slide

  21. ΍Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͠૷͢Δ
    ίϯϙʔωϯτͷݟͨ໨͕มߋʹͳͬͨͱ͖ɺ
    શ෦௚͞ͳͪ͘Ό͍͚ͳ͍
    ˣ

    View full-size slide

  22. ΍Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠૷͠ɺ
    ৼΔ෣͍Λ਌ίϯϙʔωϯτʹॻ͘

    View full-size slide

  23. ΍Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠૷͠ɺ
    ৼΔ෣͍Λ਌ίϯϙʔωϯτʹॻ͘
    ਌ίϯϙʔωϯτͷίʔυ͕ංେԽ
    ˣ

    View full-size slide

  24. ͦ͜Ͱɺίϯϙʔβϒϧؔ਺ͷग़൪

    View full-size slide

  25. ڞ௨ͷίϯϙʔωϯτͰৼΔ෣͍Λίϯϙʔβϒϧؔ਺ʹهड़

    View full-size slide

  26. ࢠίϯϙʔωϯτ͸ݟͨ໨͚ͩΛ୲౰
    ಺༰΋ props ͔ΒΧελϚΠζՄೳͰɺ
    ΄΅΄΅࿮ͱελΠϧ͔͠ఏڙ͠ͳ͍

    View full-size slide

  27. ਌ίϯϙʔωϯτ͸֤ίϯϙʔωϯτͱ஋͚ͩʹूதͰ͖Δ

    View full-size slide

  28. ͢΂ͯ 1 ͭͷΠϯϓοτίϯϙʔωϯτ͔Β࡞ΒΕ͍ͯΔ

    View full-size slide

  29. ίϯϙʔβϒϧؔ਺΋Ҿ਺Λड͚औΔ͜ͱͰόϦΤʔγϣϯΛ૿΍ͤΔ

    View full-size slide

  30. Vueίϯϙʔωϯτ͸ී௨ͷ jsϑΝΠϧ͔Β΋ฦͤΔ
    ίϯϙʔωϯτ͔Βίϯϙʔβϒϧ΁ϩδοΫΛ੾Γग़͢͜ͱͰ
    ίϯϙʔωϯτ͸ݟͨ໨͚ͩΛ୲౰͢Δˠ࠶ར༻ੑ͕ߴ·Δ
    ίϯϙʔβϒϧ͸ؔ৺ͷ͋Δ஋͚ͩΛฦ͠ɺ
    ਌͸ؔ৺ࣄʹूதͰ͖Δ

    View full-size slide

  31. ͏·͘ݟͨ໨ͱϩδοΫΛ෼཭ͯ͠
    ָ͍͠ Vue.js ϥΠϑΛ
    ʂ

    View full-size slide

  32. ࢀߟจݙ
    ʲLINE ূ݊ FrontEndʳίϯϙʔωϯτΛΧελϜϑοΫͰఏڙͯ͠Έͨ
    https://engineering.linecorp.com/ja/blog/line-securities-frontend-3
    ίϯϙʔωϯτΛখ͘͞ɾ͖Ε͍ʹઃܭ͠Α͏
    Vue Composition API Λ׆༻ͨ͠ίϯϙʔωϯτ෼ׂज़
    https://ics.media/entry/210929/

    View full-size slide