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 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
50
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
110
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
810
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
130
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
910
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
610
Microsoft の SSE の現在地
skmkzyk
0
180
AndroidアプリエンジニアもMCPを触ろう
kgmyshin
1
280
AIとSREで「今」できること
honmarkhunt
3
390
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
250
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
3
460
Dataverseの検索列について
miyakemito
1
130
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.8k
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
5.9k
ここはMCPの夜明けまえ
nwiizo
32
12k
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
1
770
Road to Go Gem #rubykaigi
sue445
0
990
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Typedesign – Prime Four
hannesfritz
41
2.6k
How to Ace a Technical Interview
jacobian
276
23k
Unsuck your backbone
ammeep
670
57k
We Have a Design System, Now What?
morganepeng
52
7.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Building Applications with DynamoDB
mza
94
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Automating Front-end Workflow
addyosmani
1370
200k
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Λॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠
• (´ɾωɾʆ)