動的 & 非同期コンポーネント

UV Study Vue.js

Transcript

1. 動的& 非同期コンポーネント

2. - はじめに
 - 非同期コンポーネント
 - 動的コンポーネント
 - 動的 & 非同期コンポーネント
 - まとめ

3. - はじめに
 - 非同期コンポーネント
 - 動的コンポーネント
 - 動的 & 非同期コンポーネント
 - まとめ

4. はじめに
 - 沖田まさし
 - ユニークビジョン株式会社
 
 - バック・フロント・インフラ
 - 特にフロントが好き

5. はじめに
 この内容では以下を
 使っています
 
 - Node.js 20.11.1
 - Vue3 + Vite + TypeScript
 - <script setup>
 

6. - はじめに
 - 非同期コンポーネント
 - 動的コンポーネント
 - 動的 & 非同期コンポーネント
 - まとめ

7. 非同期コンポーネント
 SPA としてつくられたフロント
 

8. 非同期コンポーネント
 SPA としてつくられたフロント 例：𝕏
 

9. 非同期コンポーネント
 SPA としてつくられたフロント 例：𝕏
 ホーム画面

10. 非同期コンポーネント
 SPA としてつくられたフロント 例：𝕏
 ホーム画面
 ポスト画面

11. 非同期コンポーネント
 SPA としてつくられたフロント 例：𝕏
 
 - ホーム画面とポスト画面は別のコンポーネント

12. 非同期コンポーネント
 SPA としてつくられたフロント 例：𝕏
 
 - ホーム画面とポスト画面は別のコンポーネント
 - ホーム画面を表示するときはポスト画面のコンポーネ ントは不要

13. 非同期コンポーネント
 SPA としてつくられたフロント 例：𝕏
 
 - ホーム画面とポスト画面は別のコンポーネント
 - ホーム画面を表示するときはポスト画面のコンポーネ ントは不要
 - 表示で不要ならロードも不要？

14. - 表示で不要ならロードも不要！
 非同期コンポーネント
 ホーム画面
 ポスト画面

15. 非同期コンポーネント
 - 表示で不要ならロードも不要！
 
 - Vue.js でコンポーネントのロードを
 管理するには...

16. 非同期コンポーネント
 - 表示で不要ならロードも不要！
 
 - Vue.js でコンポーネントのロードを
 管理するには...
 - 非同期コンポーネントが使えます！

17. 非同期コンポーネント
 実装
 同期コンポーネント
 
 非同期コンポーネント

18. 利点：
 - 不要なロードを減らせる
 - ファーストビューが早くなる
 
 - 欠点：
 - ページ移動時にロードが入る
 - キャッシュ機構など最適化が必要
 非同期コンポーネント

19. - はじめに
 - 非同期コンポーネント
 - 動的コンポーネント
 - 動的 & 非同期コンポーネント
 - まとめ

20. 動的コンポーネント
 似た要素を持つコンポーネントを並べたい
 

21. 動的コンポーネント
 似た要素を持つコンポーネントを並べたい
 
 例：𝕏のタイムライン
 -> ポスト・リポスト・広告が並ぶ
 

22. 動的コンポーネント
 似た要素を持つコンポーネントを並べたい
 
 例：𝕏のタイムライン
 -> ポスト・リポスト・広告が並ぶ
 例：slackの投稿
 -> 文字・画像・コードブロックが並ぶ

23. 動的コンポーネント
 似た要素を持つコンポーネントを並べたい
 
 どうやって実装しよう？

24. 動的コンポーネント
 v-for と v-if と v-else-if
 でやる？

25. 動的コンポーネント
 v-for と v-if と v-else-if
 でやる？
 
 効率悪い、追加が大変、
 コードが膨れてメンテが大変

26. 動的コンポーネント
 
 そうだ、動的コンポーネント、使おう！

27. 動的コンポーネント
 
 そうだ、動的コンポーネント、使おう！
 
 

28. 動的コンポーネント

29. 利点：
 - コードが短くなる
 
 
 欠点：
 - キャッシュ機構など最適化が必要
 動的コンポーネント

30. 動的コンポーネント
 - はじめに
 - 非同期コンポーネント
 - 動的コンポーネント
 - 動的 & 非同期コンポーネント
 - まとめ

31. 動的 & 非同期コンポーネント
 動的コンポーネントと非同期コンポーネントは
 組み合わせると相性がいいです
 
 

32. 動的 & 非同期コンポーネント
 動的コンポーネントと非同期コンポーネントは
 組み合わせると相性がいいです
 
 デモします！

33. 動的 & 非同期コンポーネント
 非同期コンポーネントとして読み込んで、
 動的コンポーネントとして表示する

34. 動的 & 非同期コンポーネント

35. - はじめに
 - 非同期コンポーネント
 - 動的コンポーネント
 - 動的 & 非同期コンポーネント
 - まとめ

36. まとめ
 
 - 非同期コンポーネントで必要なコンポーネントだけを 読み込む

37. まとめ
 
 - 非同期コンポーネントで必要なコンポーネントだけを 読み込む
 - 動的コンポーネントでコードの重複を避ける

38. まとめ
 
 - 非同期コンポーネントで必要なコンポーネントだけを 読み込む
 - 動的コンポーネントでコードの重複を避ける
 - 動的コンポーネントと非同期コンポーネントで
 効率的に読み込んで表示する

39. 参考:
 https://ja.vuejs.org/guide/components/async#basic-us age
 
 https://ja.vuejs.org/guide/essentials/component-basics .html#dynamic-components