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
730
FunctionalComponentの使い所を調べた件
VuejsOsaka#1にてLT発表した際の資料です。タイトル通りFunctionalComponentの使い所を調べました。以上です。
morimorikochan
May 24, 2019
Tweet
Share
More Decks by morimorikochan
See All by morimorikochan
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
460
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
350
TypeScriptでモジュラーモノリスやってみた
diggymo
0
360
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
900
過去のインプットとアウトプットを振り返る
diggymo
0
270
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2.5k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
1.1k
Reactのuse()って何なん?
diggymo
1
2.5k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.7k
Other Decks in Technology
See All in Technology
いまさら聞けない ABテスト入門
skmr2348
1
210
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
280
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
260
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
20250929_QaaS_vol20
mura_shin
0
130
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
220
How to achieve interoperable digital identity across Asian countries
fujie
0
120
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
110
スタートアップにおけるこれからの「データ整備」
shomaekawa
1
240
Where will it converge?
ibknadedeji
0
190
KMP の Swift export
kokihirokawa
0
340
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building Applications with DynamoDB
mza
96
6.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Music & Morning Musume
bryan
46
6.8k
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/ まとめ