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
40
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
86
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
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
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
4
780
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
130
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1k
短縮URLをお手軽に導入しよう
nakasho
0
140
OPENLOGI Company Profile
hr01
0
60k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
デスクトップだけじゃないUbuntu
mtyshibata
0
770
Active Directory攻防
cryptopeg
PRO
8
5.3k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
120
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
180
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
470
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
210
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Designing Experiences People Love
moore
140
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
69
4.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Docker and Python
trallard
44
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Documentation Writing (for coders)
carmenintech
67
4.6k
GitHub's CSS Performance
jonrohan
1030
460k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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Λॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠
• (´ɾωɾʆ)