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
動的 & 非同期コンポーネント
Search
okm-uv
April 25, 2024
0
26
動的 & 非同期コンポーネント
UV Study Vue.js
okm-uv
April 25, 2024
Tweet
Share
Featured
See All Featured
Bash Introduction
62gerente
613
210k
The Invisible Side of Design
smashingmag
301
51k
A designer walks into a library…
pauljervisheath
207
24k
Into the Great Unknown - MozCon
thekraken
40
1.9k
For a Future-Friendly Web
brad_frost
179
9.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
動的& 非同期コンポーネント
- はじめに - 非同期コンポーネント - 動的コンポーネント - 動的 & 非同期コンポーネント
- まとめ
- はじめに - 非同期コンポーネント - 動的コンポーネント - 動的 & 非同期コンポーネント
- まとめ
はじめに - 沖田まさし - ユニークビジョン株式会社 - バック・フロント・インフラ - 特にフロントが好き
はじめに この内容では以下を 使っています - Node.js 20.11.1 - Vue3 +
Vite + TypeScript - <script setup>
- はじめに - 非同期コンポーネント - 動的コンポーネント - 動的 & 非同期コンポーネント
- まとめ
非同期コンポーネント SPA としてつくられたフロント
非同期コンポーネント SPA としてつくられたフロント 例:𝕏
非同期コンポーネント SPA としてつくられたフロント 例:𝕏 ホーム画面
非同期コンポーネント SPA としてつくられたフロント 例:𝕏 ホーム画面 ポスト画面
非同期コンポーネント SPA としてつくられたフロント 例:𝕏 - ホーム画面とポスト画面は別のコンポーネント
非同期コンポーネント SPA としてつくられたフロント 例:𝕏 - ホーム画面とポスト画面は別のコンポーネント - ホーム画面を表示するときはポスト画面のコンポーネ ントは不要
非同期コンポーネント SPA としてつくられたフロント 例:𝕏 - ホーム画面とポスト画面は別のコンポーネント - ホーム画面を表示するときはポスト画面のコンポーネ ントは不要
- 表示で不要ならロードも不要?
- 表示で不要ならロードも不要! 非同期コンポーネント ホーム画面 ポスト画面
非同期コンポーネント - 表示で不要ならロードも不要! - Vue.js でコンポーネントのロードを 管理するには...
非同期コンポーネント - 表示で不要ならロードも不要! - Vue.js でコンポーネントのロードを 管理するには... - 非同期コンポーネントが使えます!
非同期コンポーネント 実装 同期コンポーネント 非同期コンポーネント
利点: - 不要なロードを減らせる - ファーストビューが早くなる - 欠点: - ページ移動時にロードが入る
- キャッシュ機構など最適化が必要 非同期コンポーネント
- はじめに - 非同期コンポーネント - 動的コンポーネント - 動的 & 非同期コンポーネント
- まとめ
動的コンポーネント 似た要素を持つコンポーネントを並べたい
動的コンポーネント 似た要素を持つコンポーネントを並べたい 例:𝕏のタイムライン -> ポスト・リポスト・広告が並ぶ
動的コンポーネント 似た要素を持つコンポーネントを並べたい 例:𝕏のタイムライン -> ポスト・リポスト・広告が並ぶ 例:slackの投稿 -> 文字・画像・コードブロックが並ぶ
動的コンポーネント 似た要素を持つコンポーネントを並べたい どうやって実装しよう?
動的コンポーネント v-for と v-if と v-else-if でやる?
動的コンポーネント v-for と v-if と v-else-if でやる? 効率悪い、追加が大変、 コードが膨れてメンテが大変
動的コンポーネント そうだ、動的コンポーネント、使おう!
動的コンポーネント そうだ、動的コンポーネント、使おう!
動的コンポーネント
利点: - コードが短くなる 欠点: - キャッシュ機構など最適化が必要 動的コンポーネント
動的コンポーネント - はじめに - 非同期コンポーネント - 動的コンポーネント - 動的 &
非同期コンポーネント - まとめ
動的 & 非同期コンポーネント 動的コンポーネントと非同期コンポーネントは 組み合わせると相性がいいです
動的 & 非同期コンポーネント 動的コンポーネントと非同期コンポーネントは 組み合わせると相性がいいです デモします!
動的 & 非同期コンポーネント 非同期コンポーネントとして読み込んで、 動的コンポーネントとして表示する
動的 & 非同期コンポーネント
- はじめに - 非同期コンポーネント - 動的コンポーネント - 動的 & 非同期コンポーネント
- まとめ
まとめ - 非同期コンポーネントで必要なコンポーネントだけを 読み込む
まとめ - 非同期コンポーネントで必要なコンポーネントだけを 読み込む - 動的コンポーネントでコードの重複を避ける
まとめ - 非同期コンポーネントで必要なコンポーネントだけを 読み込む - 動的コンポーネントでコードの重複を避ける - 動的コンポーネントと非同期コンポーネントで 効率的に読み込んで表示する
参考: https://ja.vuejs.org/guide/components/async#basic-us age https://ja.vuejs.org/guide/essentials/component-basics .html#dynamic-components
None
None
None