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
FunctionalComponentの使い所を調べた件
Search
morimorikochan
May 24, 2019
Technology
0
710
FunctionalComponentの使い所を調べた件
VuejsOsaka#1にてLT発表した際の資料です。タイトル通りFunctionalComponentの使い所を調べました。以上です。
morimorikochan
May 24, 2019
Tweet
Share
More Decks by morimorikochan
See All by morimorikochan
TypeScriptでモジュラーモノリスやってみた
diggymo
0
300
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
800
過去のインプットとアウトプットを振り返る
diggymo
0
240
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2.3k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
970
Reactのuse()って何なん?
diggymo
1
2.2k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.4k
社内ツールを Rustに書き換えてみた件
diggymo
0
9.5k
細かすぎて伝わらないVue3RFC選手権
diggymo
0
790
Other Decks in Technology
See All in Technology
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
190
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
780
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
300
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
5.5k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
400
AWS認定を取る中で感じたこと
siromi
1
160
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
120
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
430
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
200
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
330
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
0
190
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Code Review Best Practice
trishagee
69
18k
Thoughts on Productivity
jonyablonski
69
4.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Typedesign – Prime Four
hannesfritz
42
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Transcript
FunctionalComponentの 使い所を調べた件 morifuji kodai @marooon88
流れ • 誰? • FunctionalComponentとは? • 何が嬉しい? • まとめ
• 名前 ◦ morifuji ◦ twitter : @marooon88 • 仕事
◦ PHP/Nodejs サーバーサイドエンジニア • 趣味 ◦ kotlin ◦ switchのゲーム ▪ スマブラ ▪ cuphead 誰?
FunctionalComponentとは?
FunctionalComponentとは? 状態を持たないコンポーネント ※正確には状態を持つように振る舞うことはできる
<script> export default { functional: true, props: { url: {
type: String, default: null } }, render(createElement, { props, listeners, slots }) { // ごにょごにょ return createElement( "div", [slots().default] ); } }; <template functional> <b-button variant="outline-primary" pill v-bind="data.attrs" v-on="listeners" ><slot></slot ></b-button> </template>
<script> export default { functional: true, props: { url: {
type: String, default: null } }, render(createElement, { props, listeners, slots }) { // ごにょごにょ return createElement( "div", [slots().default] ); } }; <template functional> <b-button variant="outline-primary" pill v-bind="data.attrs" v-on="listeners" ><slot></slot ></b-button> </template>
何が嬉しい?
何が嬉しい? 例えば... • 動的にタグを変えたい • 表示するためだけのコンポーネントを高速・大量に作りたい • 既存コンポーネントをWrapしたいとき
何が嬉しい? • 動的にタグを変えたい 例えば propsにurlが存在する場合はaタグで表示したい propsにurlが存在しない場合はaタグなしで表示したい <template> <div> <a :href="url"
v-if="!!url"> <slot></slot> </a> <div v-else> <slot></slot> </div> </div> </template> <script> export default { props: { url: { type: String, default: null } } }; </script>
何が嬉しい? <script> export default { functional: true, props: { url:
{ type: String, default: null } }, render(createElement, { props, listeners, slots }) { if (props.url !== null) { return createElement( "a", { attrs: { href: props.url } }, [slots().default] ); } return createElement("div", [slots().default]); } }; • 動的にタグを変えたい 例えば propsにurlが存在する場合はaタグで表示したい propsにurlが存在しない場合はaタグなしで表示したい render()内でcreateElement()を呼び出し 動的にElementを自由自在に生成 しかもprops/data/childElementも自由自在
何が嬉しい? • 表示するためだけのコンポーネントを 高速・大量に作りたい 例えば tableタグの各Rowを大量に表示したい
何が嬉しい? • 表示するためだけのコンポーネントを 高速・大量に作りたい 例えば tableタグの各Rowを大量に表示したい 各Rowを FunctionalComponent にするこ とで高速に描画できる
体感だと1.7倍 <template > <tr> <td>{{ props.num }}</td> <td> <a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C." >Leicester City </a > <strong>(C)</strong> </td> <td>+32</td> <td>81</td> </tr> </template > <script> export default { props: { num: { type: Number, default: null } } }; </script>
何が嬉しい? • 既存コンポーネントをWrapしたいとき 例えば Bootstrap-vueのb-button(ボタン)を、プロジェクト内でアウトライ ン化・丸型化した状態でオリジナルのコンポーネントとして定義し たい。 <template > <b-button
variant="outline-primary" pill :active="active" :block="block" :size="size" @click="onClick"> <slot></slot> </b-button > </template > <script> export default { props: { active: { type: Boolean, default: false }, block: { type: Boolean, default: false }, size: { type: String, default: null } // 使われる可能性のある propsを全て付与しなければならない }, methods: { onClick(e) { this.$emit("click", e); } }
何が嬉しい? • 既存コンポーネントをWrapしたいとき 例えば Bootstrap-vueのb-button(ボタン)を、プロジェクト内でアウトライ ン化・丸型化した状態でオリジナルのコンポーネントとして定義し たい v-bind=”data.attrs”で全てのpropsを子供に移譲 v-on="listeners"で全てのlistner(Event)を子供に移譲
<template functional> <b-button variant="outline-primary" pill v-bind="data.attrs" v-on="listeners"> <slot></slot > </b-button> </template>
まとめ
• 動的にタグを変えたい • 表示するためだけのコンポーネントを高速・大量に作りたい • 既存コンポーネントをWrapしたいとき より柔軟なComponentが作成可能になり自由度が上がった Reactみたいに可読性が落ちないか心配 まとめ
ご静聴ありがとうございました 参考資料 • https://blog.cloudboost.io/functional-component-templates-in-vue-511b2c2b3647 • https://vuejs.org/v2/guide/render-function.html • https://itnext.io/whats-the-deal-with-functional-components-in-vue-js-513a31eb72b0 テスト・検証 •
gitリポジトリ:https://gitlab.com/morifuji/functional-component-survey • URL:https://upbeat-minsky-e6ff3b.netlify.com/ まとめ