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
720
FunctionalComponentの使い所を調べた件
VuejsOsaka#1にてLT発表した際の資料です。タイトル通りFunctionalComponentの使い所を調べました。以上です。
morimorikochan
May 24, 2019
Tweet
Share
More Decks by morimorikochan
See All by morimorikochan
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
110
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
290
TypeScriptでモジュラーモノリスやってみた
diggymo
0
340
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
870
過去のインプットとアウトプットを振り返る
diggymo
0
260
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2.4k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
1k
Reactのuse()って何なん?
diggymo
1
2.4k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.6k
Other Decks in Technology
See All in Technology
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
250
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
17
7.8k
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
450
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.3k
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
460
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
270
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
450
制約理論(ToC)入門
recruitengineers
PRO
9
3.7k
実運用で考える PGO
kworkdev
PRO
0
130
AWSで推進するデータマネジメント
kawanago
0
890
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
120
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
260
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
4 Signs Your Business is Dying
shpigford
184
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Music & Morning Musume
bryan
46
6.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Code Review Best Practice
trishagee
70
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Done Done
chrislema
185
16k
Thoughts on Productivity
jonyablonski
69
4.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/ まとめ