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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 • Ռ෺Ϧϯ@FruitRiin • Twitter, Qiita, Github, Speakerdeck • גࣜձࣾελσΟετ • ϚχϡΞϧ࡞੒ϓϥοτϑΥʔϜʮTeachme Bizʯ • Vue+Railsͱ͍͏ελοΫ • Vue͸͍͍ͧ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

એ఻ʢͱ͍͏͔ࣗຫʣ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Functional Component ͱ͸ʁ

Slide 7

Slide 7 text

Functional Componentは思想及びVueの機能 • ঢ়ଶΛ࣋ͨͳ͍ίϯϙʔωϯτ • ϦΞΫςΟϒͳσʔλ͕ͳ͍ • ϥΠϑαΠΫϧϝιου΋ͳ͍ • props͚ͩΛ࣋ͭ • ຤୺ͷίϯϙʔωϯτ͸͋Γ͕ͪͰ͸ʁ • ͜Μͳίϯϙʔωϯτ͸ ໌ࣔ͢Δ͜ͱͰύϑΥʔϚϯεΛ޲্ͤ͞ΒΕΔ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Vue DevToolでチェック！ • σϞ͠·͢

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Functional Component やっていき

Slide 19

Slide 19 text

Functional Componentにないもの • data • computed • watch • ϥΠϑαΠΫϧΠϕϯτશͯ • this • props͸ this Ͱ͸ͳ͘ propsͰΞΫηε͢Δ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

その他の違い • ΫϥεɺελΠϧ • ࣗಈͰ߹੒͞Εͳ͍ • ref • ࣗಈͰ͔ͭͳ͍ • HTMLҰൠଐੑ • ల։͠ͳ͍ͱͳ͍ • Πϕϯτ • this.$emit͕ͳ͍ɺlisteners https://blog.logrocket.com/how-to-use-stateless-components-in-vue-js/

Slide 23

Slide 23 text

ॏཁɿΑ͠ͳʹ΍ͬͯ͘Εͳ͍

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

まとめ • Functional Component͸΍͍ • 1000ݸ2000ݸϨϯμϦϯά͢ΔͳΒͶ • AtomicσβΠϯͷAtomͱ͔࡞Δ࣌࢖͑ͦ͏ • ΠϯλʔϑΣʔε͕ͪΐͬͱҧ͏ • ࢖͏͔࢖Θͳ͍͔ͷ൑அ΋࣮૷ऀʹҕͶΒΕΔ

Slide 26

Slide 26 text

Vue͸͍͍ͧ

Slide 27

Slide 27 text

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