SFCで挑戦するFunctional Component/Functional Component Challenge at SFC

Transcript

1. SFCで挑戦する Fucntional Component Ռ෺Ϧϯ@FruitRiin גࣜձࣾελσΟετ 2020/7/31 Remote.vue #2

2. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • Twitter, Qiita, Github, Speakerdeck • גࣜձࣾελσΟετ

   • ϚχϡΞϧ࡞੒ϓϥοτϑΥʔϜʮTeachme Bizʯ • Vue+Railsͱ͍͏ελοΫ • Vue͸͍͍ͧ

3. ϏδϡΞϥΠζखॱॻͷ࡞੒ɾڞ༗ɾ؅ཧͷTeachme Biz

4. એ఻ʢͱ͍͏͔ࣗຫʣ

5. None

6. Functional Component ͱ͸ʁ

7. Functional Componentは思想及びVueの機能 • ঢ়ଶΛ࣋ͨͳ͍ίϯϙʔωϯτ • ϦΞΫςΟϒͳσʔλ͕ͳ͍ • ϥΠϑαΠΫϧϝιου΋ͳ͍ • props͚ͩΛ࣋ͭ

   • ຤୺ͷίϯϙʔωϯτ͸͋Γ͕ͪͰ͸ʁ • ͜Μͳίϯϙʔωϯτ͸ ໌ࣔ͢Δ͜ͱͰύϑΥʔϚϯεΛ޲্ͤ͞ΒΕΔ

8. 有効にする方法2通り • exportͯ͠ΔΦϒδΣΫτͰϚʔΫ • Vueͷ<template functional>ͰϚʔΫ(2.5Ҏ߱ͷΈʣ

9. υΩϡϝϯτ্ͷॴࡏ͕Ṗ • renderؔ਺ͱ΋JSXͱ΋ඞਢͷؔ܎Ͱ͸ͳ͍

10. ࠷ॳͷ αϯϓϧίʔυ͕SFC͡Όͳ͍ • ͦΕ͸ͦ͏ • ୹͗ͯ͢Α͘Θ͔Βͳ͍

11. Functional ComponentʴJSXඞਢʁ • ͦΜͳ͜ͱ͸ͳ͍ • <template functional> ͕͋Δ͜ͱ͔Β΋Θ͔Δ • ࠓ͸ӳޠͷهࣄ͕ͨ͘͞ΜҾ͔͔ͬΔͶ

12. Vue DevToolでチェック！ • σϞ͠·͢

13. Vue DevToolでチェック！ • ίϯϙʔωϯτ300ݸ͘Β͍Λ100msͰϨϯμϦϯάˠ34fps

14. Vue DevToolでチェック！ • ී௨ͷίϯϙʔωϯτ100msͰϨϯμϦϯά ʢύϑΥʔϚϯεܭଌதͷ਺஋ʣ

15. Vue Perfomance Toolでチェック！ • FunctionalίϯϙʔωϯτΛ100msͰϨϯμϦϯά ʢύϑΥʔϚϯεܭଌதͷ਺஋ʣ

16. ܭଌํ๏ͷ౎߹্ͱ͍͏࿩΋͋Δ͕… ʢϓϩϑΝΠϥಈ͔ͯ͠Δ͔ΒͶʣ

17. なんにせよ速い！ • උߟɿύϑΥʔϚϯεπʔϧͷνΣοΫͳ͠ͳΒ ௨ৗͷίϯϙʔωϯτͰ΋2000ݸ͘Β͍·Ͱ͸ଟ෼60fpsग़ͯΔ

18. Functional Component やっていき

19. Functional Componentにないもの • data • computed • watch • ϥΠϑαΠΫϧΠϕϯτશͯ

    • this • props͸ this Ͱ͸ͳ͘ propsͰΞΫηε͢Δ

20. propsを使うコード • ϛχϚϜͳܗ͸͜Μͳײ͡Ͱ͢

21. methodsを使うコード • $options.methods ͷத • propsΛҾ਺ʹͱΔ͜ͱ΋Մೳ

22. その他の違い • ΫϥεɺελΠϧ • ࣗಈͰ߹੒͞Εͳ͍ • ref • ࣗಈͰ͔ͭͳ͍ •

    HTMLҰൠଐੑ • ల։͠ͳ͍ͱͳ͍ • Πϕϯτ • this.$emit͕ͳ͍ɺlisteners https://blog.logrocket.com/how-to-use-stateless-components-in-vue-js/

23. ॏཁɿΑ͠ͳʹ΍ͬͯ͘Εͳ͍

24. メンテナンスコストも勘案すべき？ • Functional ComponentΛ࡞Δͱ͋ͱ͔Βར༻͢Δͱ͖ classɺstyleɺHTMLଐੑͷ߹੒ɾ෇༩ͰϋϚΔ͜ͱ΋ • ։ൃνʔϜͷϦςϥγ΍Χόʔྗ΋צҊ্ͨ͠Ͱ࢖͍͍ͨ • ύϑΥʔϚϯεΫϦςΟΧϧͰͳ͚Ε͹࢖Θͳ͍બ୒ࢶ΋͋Δ •

    ܭଌํ๏ͱ࣮૷ํ๏͸೺Ѳ͓͖͍ͯͨ͠

25. まとめ • Functional Component͸΍͍ • 1000ݸ2000ݸϨϯμϦϯά͢ΔͳΒͶ • AtomicσβΠϯͷAtomͱ͔࡞Δ࣌࢖͑ͦ͏ • ΠϯλʔϑΣʔε͕ͪΐͬͱҧ͏

    • ࢖͏͔࢖Θͳ͍͔ͷ൑அ΋࣮૷ऀʹҕͶΒΕΔ

26. Vue͸͍͍ͧ

27. ొஃޙͷิ଍ɿVue3Ͱ͸SFCͰ࢖͑ͳ͍ʁ • Functional Componentͦͷ΋ͷ͸͋Δ • SFCͰ͸࢖͑ͳ͍Β͍͠ • ؔ਺Ͱ͋Εʂͱͷ͜ͱ • renderؔ਺͔JSXΛॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠

    • (´ɾωɾʆ)