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
700
FunctionalComponentの使い所を調べた件
VuejsOsaka#1にてLT発表した際の資料です。タイトル通りFunctionalComponentの使い所を調べました。以上です。
morimorikochan
May 24, 2019
Tweet
Share
More Decks by morimorikochan
See All by morimorikochan
TypeScriptでモジュラーモノリスやってみた
diggymo
0
290
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
790
過去のインプットとアウトプットを振り返る
diggymo
0
240
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2.2k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
960
Reactのuse()って何なん?
diggymo
1
2.2k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.3k
社内ツールを Rustに書き換えてみた件
diggymo
0
9.5k
細かすぎて伝わらないVue3RFC選手権
diggymo
0
790
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
230
5min GuardDuty Extended Threat Detection EKS
takakuni
0
130
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
110
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.5k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
860
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
700
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
170
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.2k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
140
AIのAIによるAIのための出力評価と改善
chocoyama
2
540
Postman AI エージェントビルダー最新情報
nagix
0
110
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualization
eitanlees
146
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to train your dragon (web standard)
notwaldorf
92
6.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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/ まとめ