Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

omiend
January 26, 2019

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

omiend

January 26, 2019
Tweet

More Decks by omiend

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 自己紹介
    @omiend
    恵比寿で働くプログラマー歴13年目のおじさん
    一応フロントエンドからバックエンドまで一通り出来ると思い込んでいるダメェンジニア
    時々パン売ってます。(次回予定3月横浜赤レンガ/4月新宿たかしまや)
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  10. Componentsでは、再利用性の高い部品を
    定義する。
    例では、HeaderやFooter、または
    GlobalNaviなどを定義してLayoutで
    importしたり、ユーザ1人1人の情報を表
    示するカードを定義している。
    @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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide