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
23
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
79
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
720
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
100
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
870
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
13k
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
The Role of Developer Relations in AI Product Success.
giftojabu1
0
130
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
180
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Practical Orchestrator
shlominoach
186
10k
Typedesign – Prime Four
hannesfritz
40
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
A Philosophy of Restraint
colly
203
16k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
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Λॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠
• (´ɾωɾʆ)