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
570
FunctionalComponentの使い所を調べた件
VuejsOsaka#1にてLT発表した際の資料です。タイトル通りFunctionalComponentの使い所を調べました。以上です。
morimorikochan
May 24, 2019
Tweet
Share
More Decks by morimorikochan
See All by morimorikochan
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
440
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
460
Reactのuse()って何なん?
diggymo
1
1.1k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
5.9k
社内ツールを Rustに書き換えてみた件
diggymo
0
9.3k
細かすぎて伝わらないVue3RFC選手権
diggymo
0
680
vueのエラーハンドリングについて調べた件
diggymo
2
1.1k
Vue.jsのReactiveの中をのぞいてみた件
diggymo
0
1.6k
Other Decks in Technology
See All in Technology
Kubernetesって何? -大規模なKubernetesを運用するKubernetes as a Serviceチームの話を添えて-
lycorptech_jp
PRO
12
4.3k
静的サイトのCI/CDでも侮るなかれ!Docs as Codeに沿ったセキュアな開発プロセスの実践/secure-docsascode-cicd-for-static-sites
mhrtech
11
1.9k
OSTという文化を組織に根付かせてみた
sansantech
PRO
3
590
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
低コストで実現する社内文書RAG機能を搭載したAIチャットボット開発
takapy
2
150
負債あるモノリスのオブザーバビリティに組織で向き合う
recruitengineers
PRO
8
260
急拡大する開発組織を支えるナレッジワークの E2E テスト基盤
kworkdev
PRO
1
490
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
350
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
5
970
仕事を前に進めるためのコツ - 判断と決断と共有 / Aim for the goal
soudai
59
22k
Passkey Autofill に賭けるマネーフォワード ID - Money Forward Tech Day 2024
nov
1
830
GraphQLでの型渡しとデータフェッチの最適化
hayashikengo
1
130
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
The Pragmatic Product Professional
lauravandoore
31
6.2k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
6
530
Code Review Best Practice
trishagee
62
16k
Facilitating Awesome Meetings
lara
49
6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Happy Clients
brianwarren
96
6.6k
How to name files
jennybc
75
98k
How GitHub (no longer) Works
holman
310
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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/ まとめ