Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SFCで挑戦するFunctional Component/Functional Compone...
Search
果物リン
July 31, 2020
Technology
3
1.5k
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
Functional Component、調べてみました。
果物リン
July 31, 2020
Tweet
Share
More Decks by 果物リン
See All by 果物リン
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
70
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
670
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
140
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
93
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
220
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
850
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
340
[社内LT]元窓使いで林檎教信者ですが窓使いに転生します/I'm an ex-windowman, a follower of the apple cult, but I'm turning into a windowman.
fruitriin
0
310
Other Decks in Technology
See All in Technology
学術機関におけるID連携とOpenID Connect
fujie
0
240
JTCや セキュリティチェックリストが夢の跡
nikinusu
0
620
リアルお遍路+SORACOM IoT
ozk009
1
140
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
130
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
6
1.4k
DevRelの始め方
moongift
PRO
1
390
自作Cコンパイラ 8時間の奮闘
soukouki
0
850
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
250
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
The Invisible Customer
myddelton
119
13k
Visualization
eitanlees
142
15k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Why Our Code Smells
bkeepers
PRO
334
56k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
How to Think Like a Performance Engineer
csswizardry
16
960
Web Components: a chance to create the future
zenorocha
308
42k
We Have a Design System, Now What?
morganepeng
48
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Transcript
SFCで挑戦する Fucntional Component ՌϦϯ@FruitRiin גࣜձࣾελσΟετ 2020/7/31 Remote.vue #2
自己紹介 • ՌϦϯ@FruitRiin • Twitter, Qiita, Github, Speakerdeck • גࣜձࣾελσΟετ
• ϚχϡΞϧ࡞ϓϥοτϑΥʔϜʮTeachme Bizʯ • Vue+Railsͱ͍͏ελοΫ • Vue͍͍ͧ
ϏδϡΞϥΠζखॱॻͷ࡞ɾڞ༗ɾཧͷTeachme Biz
એʢͱ͍͏͔ࣗຫʣ
None
Functional Component ͱʁ
Functional Componentは思想及びVueの機能 • ঢ়ଶΛ࣋ͨͳ͍ίϯϙʔωϯτ • ϦΞΫςΟϒͳσʔλ͕ͳ͍ • ϥΠϑαΠΫϧϝιουͳ͍ • props͚ͩΛ࣋ͭ
• ͷίϯϙʔωϯτ͋Γ͕ͪͰʁ • ͜Μͳίϯϙʔωϯτ ໌ࣔ͢Δ͜ͱͰύϑΥʔϚϯεΛ্ͤ͞ΒΕΔ
有効にする方法2通り • exportͯ͠ΔΦϒδΣΫτͰϚʔΫ • Vueͷ<template functional>ͰϚʔΫ(2.5Ҏ߱ͷΈʣ
υΩϡϝϯτ্ͷॴࡏ͕Ṗ • renderؔͱJSXͱඞਢͷؔͰͳ͍
࠷ॳͷ αϯϓϧίʔυ͕SFC͡Όͳ͍ • ͦΕͦ͏ • ͗ͯ͢Α͘Θ͔Βͳ͍
Functional ComponentʴJSXඞਢʁ • ͦΜͳ͜ͱͳ͍ • <template functional> ͕͋Δ͜ͱ͔ΒΘ͔Δ • ࠓӳޠͷهࣄ͕ͨ͘͞ΜҾ͔͔ͬΔͶ
Vue DevToolでチェック! • σϞ͠·͢
Vue DevToolでチェック! • ίϯϙʔωϯτ300ݸ͘Β͍Λ100msͰϨϯμϦϯάˠ34fps
Vue DevToolでチェック! • ී௨ͷίϯϙʔωϯτ100msͰϨϯμϦϯά ʢύϑΥʔϚϯεܭଌதͷʣ
Vue Perfomance Toolでチェック! • FunctionalίϯϙʔωϯτΛ100msͰϨϯμϦϯά ʢύϑΥʔϚϯεܭଌதͷʣ
ܭଌํ๏ͷ߹্ͱ͍͏͋Δ͕… ʢϓϩϑΝΠϥಈ͔ͯ͠Δ͔ΒͶʣ
なんにせよ速い! • උߟɿύϑΥʔϚϯεπʔϧͷνΣοΫͳ͠ͳΒ ௨ৗͷίϯϙʔωϯτͰ2000ݸ͘Β͍·Ͱଟ60fpsग़ͯΔ
Functional Component やっていき
Functional Componentにないもの • data • computed • watch • ϥΠϑαΠΫϧΠϕϯτશͯ
• this • props this Ͱͳ͘ propsͰΞΫηε͢Δ
propsを使うコード • ϛχϚϜͳܗ͜Μͳײ͡Ͱ͢
methodsを使うコード • $options.methods ͷத • propsΛҾʹͱΔ͜ͱՄೳ
その他の違い • ΫϥεɺελΠϧ • ࣗಈͰ߹͞Εͳ͍ • ref • ࣗಈͰ͔ͭͳ͍ •
HTMLҰൠଐੑ • ల։͠ͳ͍ͱͳ͍ • Πϕϯτ • this.$emit͕ͳ͍ɺlisteners https://blog.logrocket.com/how-to-use-stateless-components-in-vue-js/
ॏཁɿΑ͠ͳʹͬͯ͘Εͳ͍
メンテナンスコストも勘案すべき? • Functional ComponentΛ࡞Δͱ͋ͱ͔Βར༻͢Δͱ͖ classɺstyleɺHTMLଐੑͷ߹ɾ༩ͰϋϚΔ͜ͱ • ։ൃνʔϜͷϦςϥγΧόʔྗצҊ্ͨ͠Ͱ͍͍ͨ • ύϑΥʔϚϯεΫϦςΟΧϧͰͳ͚ΕΘͳ͍બࢶ͋Δ •
ܭଌํ๏ͱ࣮ํ๏Ѳ͓͖͍ͯͨ͠
まとめ • Functional Component͍ • 1000ݸ2000ݸϨϯμϦϯά͢ΔͳΒͶ • AtomicσβΠϯͷAtomͱ͔࡞Δ࣌͑ͦ͏ • ΠϯλʔϑΣʔε͕ͪΐͬͱҧ͏
• ͏͔Θͳ͍͔ͷஅ࣮ऀʹҕͶΒΕΔ
Vue͍͍ͧ
ొஃޙͷิɿVue3ͰSFCͰ͑ͳ͍ʁ • Functional Componentͦͷͷ͋Δ • SFCͰ͑ͳ͍Β͍͠ • ؔͰ͋Εʂͱͷ͜ͱ • render͔ؔJSXΛॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠
• (´ɾωɾʆ)