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

Transcript

1. Nuxt.jsのComponentについて
   @omiend
   Store
   

   View Slide

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
   

   View Slide

3. 話すこと
   - Nuxt.js のComponent分割単位
   - Nuxt.js SSRする時に気をつけること
   @omiend
   今日も一日
   

   View Slide

4. @omiend
   Nuxt.jsのComponent分割単位
   

   View Slide

5. @omiend
   Nuxt.js は Vue アプリケーションを作成するフレームワークです。
   ユニバーサルアプリケーション、静的に生成されるアプリケーショ
   ン、シングルページアプリケーションの中から作成するアプリケー
   ションを選ぶことができます。
   はじめに - Nuxt.js
   https://ja.nuxtjs.org/guide/
   Nuxt.jsとは
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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の分割単位
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. ※SSR = Server Side Rendering
    SPAだと当該ページにアクセスしてから
    DOM（仮想DOM）を構築してページを構成するので、クローラーが巡回してきた時は「なにも無いページ」と解釈されてしまう。
    そこでSSRにて対応する。
    ※SPA = Single Page Application
    @omiend
    Nuxt.jsにおけるSSRのしかた
    

    View Slide

17. @omiend
    日記はここで終わっている・・・
    Nuxt.jsにおけるSSRのしかた
    

    View Slide

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のしかた
    

    View Slide

19. ソース
    https://github.com/omiend/omiend-my-api
    アプリ（firebase）
    https://omiend-my-api.firebaseapp.com/ssr
    @omiend
    Nuxt.jsにおけるSSRのしかた
    

    View Slide

20. @omiend
    ご清聴
    ありがとうございました
    Store
    

    View Slide