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
52
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
110
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
820
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
ゆるくはじめるSLI・SLO
yatoum
1
120
さくらのクラウド開発の裏側
metakoma
PRO
18
5.9k
RubyKaigi NOC 近況 2025
sorah
3
1.2k
PCNW20250514(情シスはAIとどう向き合う?事例から学ぶ活用法)
suguru0719
0
110
GPU 클라우드 환경에서의 회복탄력적 AI 운영 : 훈련 및 추론을 위한 견고한 아키텍처와 전략
inureyes
PRO
0
140
4社統合におけるマスタデータ管理に立ち向かう / Towards master data management in the four-company integration
carta_engineering
0
290
ITベンダーから見る内製化支援の本質/in-house-dev
slsops
1
180
木を見て森も見る-モジュールが織りなすプロダクトの森
kworkdev
PRO
0
300
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
1
660
Platform Engineering for Private Cloud
cote
PRO
0
110
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
800
Cline&CursorによるAIコーディング徹底活用―Live Vibe Coding付き
pharma_x_tech
1
260
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Automating Front-end Workflow
addyosmani
1370
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
122
52k
For a Future-Friendly Web
brad_frost
177
9.7k
BBQ
matthewcrist
88
9.6k
Adopting Sorbet at Scale
ufuk
76
9.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Scaling GitHub
holman
459
140k
Code Reviewing Like a Champion
maltzj
523
40k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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Λॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠
• (´ɾωɾʆ)