Nuxt.jsのComponent分割単位と，SSRをする上で気をつけること

Transcript

1. Nuxt.jsのComponentについて @omiend Store
2. 自己紹介 @omiend 恵比寿で働くプログラマー歴13年目のおじさん 一応フロントエンドからバックエンドまで一通り出来ると思い込んでいるダメェンジニア 時々パン売ってます。（次回予定３月横浜赤レンガ／４月新宿たかしまや） PeopleSoft,Java,Shell,MySQL,SQL,Salesforce(Force.com/ApexCode/VisualCode),GAE(Slim3),ABAP Scala(ScalaMatsuri Staff),Ruby on Rails,Docker,Angular(1.4…),React/Redux,Riot.js,Vue.js,Nuxt.js Musics,Movies,Joging,Walking,Drink Driven Development
3. 話すこと - Nuxt.js のComponent分割単位 - Nuxt.js SSRする時に気をつけること @omiend 今日も一日
4. @omiend Nuxt.jsのComponent分割単位
5. @omiend Nuxt.js は Vue アプリケーションを作成するフレームワークです。 ユニバーサルアプリケーション、静的に生成されるアプリケーショ ン、シングルページアプリケーションの中から作成するアプリケー ションを選ぶことができます。 はじめに - Nuxt.js https://ja.nuxtjs.org/guide/ Nuxt.jsとは
6. Nuxtは - Layouts - Pages - Components という単位でページを構成する。 @omiend Nuxt.jsのページ定義 layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
7. @omiend 右ののようなページを作成する場合、下記のようなディレクトリ構 造となる。 . ├── components │ ├── TheSideNavi.vue │ ├── TheFooter.vue │ ├── TheHeader.vue │ ├── SomeSection.vue │ └── UserCard.vue ├── layouts │ └── default.vue └── pages └── index.vue Nuxt.jsのページ定義 layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
8. Layoutsは全ページ共通のレイアウトを定 義するソースファイル。 Nuxtがデフォルトで用意するdefault.vue とは別のソースファイルを定義し、ページご とに適用を分けることもできる。 @omiend Layouts layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
9. Pagesは各ページ（トップページやアバウト ページなど）を定義するソースファイル。 定義したディレクトリによりNuxtがRouting を自動生成してくれる。 @omiend Pages layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
10. Componentsでは、再利用性の高い部品を 定義する。 例では、HeaderやFooter、または GlobalNaviなどを定義してLayoutで importしたり、ユーザ１人１人の情報を表 示するカードを定義している。 @omiend Components layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
11. このComponentsはHTMLの要素としてど の単位にも分割・定義をすることができる。 しかし、設計・再現無く分割・定義しまくると カオス化することが想定される。 では、Componentsはどの粒度で分割して 定義するのが良いか？ @omiend Componentsの分割単位 layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
12. ざっくりまとめると、弊社では - （HTML5の）Sectionタグ - 部品（Cardなど） の粒度で分割・定義することとした。 Blogに書きました： #Nuxt.jsのComponentをどの単位で分けるか悩んだ話 https://omiend.hatenablog.jp/entry/2018/12/27/203359 @omiend layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue Componentsの分割単位
13. @omiend その上で、書きのディレクトリ構造を少し変更して・・・ . ├── components │ ├── TheSideNavi.vue │ ├── TheFooter.vue │ ├── TheHeader.vue │ ├── SomeSection.vue │ └── UserCard.vue ├── layouts │ └── default.vue └── pages └── index.vue Componentsの分割単位 layouts/default.vue pages/index.vue components/TheFooter.vue components/TheHeader.vue components/SomeSection.vue components/ UserCard.vue components/ TheSideNavi.vue components/ UserCard.vue
14. このような感じにしました。 . ├── components │ ├── parts │ │ └── UserCard.vue │ └── sections │ ├── TheSideNavi.vue │ ├── TheFooter.vue │ └── TheHeader.vue ├── layouts │ └── default.vue └── pages └── index.vue @omiend Componentsの分割単位 layouts/default.vue pages/index.vue components/TheFooter.vue components/sections/TheHeader.vue components/sections/ SomeSection.vue components/ parts/ Card.vue components/ sections/ TheSideNavi.vue components/ parts/ Card.vue
15. 異論は認める。 @omiend Componentsの分割単位 layouts/default.vue pages/index.vue components/TheFooter.vue components/sections/TheHeader.vue components/sections/ SomeSection.vue components/ parts/ Card.vue components/ sections/ TheSideNavi.vue components/ parts/ Card.vue
16. ※SSR = Server Side Rendering SPAだと当該ページにアクセスしてから DOM（仮想DOM）を構築してページを構成するので、クローラーが巡回してきた時は「なにも無いページ」と解釈されてしまう。 そこでSSRにて対応する。 ※SPA = Single Page Application @omiend Nuxt.jsにおけるSSRのしかた
17. @omiend 日記はここで終わっている・・・ Nuxt.jsにおけるSSRのしかた
18. TL;DR - Componentsで利用するデータや機能は、 Components内部で完結させたい - Nuxt.jsでSSRをするときは、asyncData()とfetch()を利用する - ComponentsからはasyncData()を利用することが出来ない（ Nuxt.jsの仕様） - asyncData()はPagesで利用する必要があり、 Componentsにデータを渡す場合は Propsを利用する - Propsは利用したくない - Vuexを利用すれば良い - asyncData()からはVuexのStoreにアクセスできない - fetch()であれば、Storeにアクセスできる まとめ - SSRをしたい - Componentsにデータを渡すか？ - Yes - Pagesにfetch()を定義し、Storeにデータを格納 - ComponentsからはStoreのデータを参照する - No - PagesにasyncData()を定義し、Pagesのdata要素とマージさせる @omiend Nuxt.jsにおけるSSRのしかた
19. ソース https://github.com/omiend/omiend-my-api アプリ（firebase） https://omiend-my-api.firebaseapp.com/ssr @omiend Nuxt.jsにおけるSSRのしかた
20. @omiend ご清聴 ありがとうございました Store