Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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Λॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠ • (´ɾωɾʆ)