Nuxt.js のディレクトリ

2019/03/20 v-kansai Vue.js/Nuxt.js meetup #4

Transcript

1. Nuxt.js のディレクトリ
   

   View Slide

2. ショウノシオリ
   @shosho_egg
   　・株式会社 chatbox　テックリード
   　・PHPカンファレンス関西2017&2018 実行委員長
   　・Laravel/Nuxt.js をよく使う
   　・「技術が好き」というより
   　　チームで何かを作り上げるのが好き
   

   View Slide

3. Nuxt.js って？
   ▷ Vue.js 製のフレームワーク
   ▷ App 開発に便利なツールが揃ってる
   ○ Vuex Store、Vue Router、SSR など
   ▷ npx コマンドで簡単に作れる
   

   View Slide

4. 個人的な Nuxt.js の使い心地
   ▷ ディレクトリ構成がわかりやすい
   ○ どこに何を書けばいいのかがすぐわかる
   ○ 複数人で開発していても破綻しにくい
   ○ 途中から参画した人、あまり使い慣れていない人
   にとっても構成が分かりやすいので、作業分担が
   比較的やりやすい
   （最初に各ディレクトリの説明は必要）
   

   View Slide

5. 各ディレクトリの役割について
   説明する機会が多かったので
   まとめてみました
   

   View Slide

6. 1.
   基本となるディレクトリ
   App を構築するのに最低限必要なもの
   

   View Slide

7. Pages
   Components
   Layouts
   Assets
   Static
   nuxt.config.js
   package.json
   1-1.
   リソース
   1-2.
   画面をつくるもの
   1-3.
   設定ファイル
   App をつくる
   3つの要素
   

   View Slide

8. 1-1. リソース
   ▷ Assets
   ○ Stylus、Sass、image、fonts といったコンパイルし
   ていないファイルを置く
   ▷ Static
   ○ 静的ページファイルなどを置く
   ○ 直接サーバーのルートに配置される。
   （/static/robots.txt は http://localhost:3000/robots.txt )
   ※画像については「部品っぽいものは Assets 、そのまま使うものは Static」
   のように分けて管理しても良い
   App で使う画像やフォントなどの置き場所
   

   View Slide

9. 1-2. 画面をつくるもの
   ▷ Layouts
   ○ App のレイアウトを決めるファイルを置く
   ○ ページ毎にレイアウトを指定することもできる
   見た目を作るファイルの置き場所
   

   View Slide

10. 1-2. 画面をつくるもの
    ▷ Pages
    ○ 各URLに対するファイルを置く
    ○ ここに .vue ファイルを作れば、Nuxt が勝手に
    ディレクトリ内の .vue ファイルを全て読み込み
    URL を自動生成してくれる
    見た目を作るファイルの置き場所
    

    View Slide

11. ▷ Components
    ○ コンポーネントファイルを置く
    ○ 使うときは import で読み込む＆コンポーネントと
    しての登録が必要
    1-2. 画面をつくるもの
    見た目を作るファイルの置き場所
    

    View Slide

12. ▷ package.json
    ○ Appの依存やスクリプトについて記述されたファイ
    ル。これをもとにして npm i で node_modules が出
    来上がる
    ○ npm 経由で新たにモジュールを追加した際などに
    自動的に更新されていく
    ※package.json が更新されている場合はnpm i し直すのを忘れないこと
    1-3. 設定ファイル
    Nuxt.js App の設定を行う重要なファイル
    

    View Slide

13. ▷ nuxt.config.js
    ○ App 全般の設定を行うとても重要なファイル
    ○ 各プロパティでカスタム可能
    ○ 設定は基本的にこのファイルで行う
    1-3. 設定ファイル
    Nuxt.js App の設定を行う重要なファイル
    

    View Slide

14. Pages
    Components
    Layouts
    Assets
    Static
    nuxt.config.js
    package.json
    この3つの要素を使えば
    基本的な App はつくれる！
    1-1.
    リソース
    1-2.
    画面をつくるもの
    1-3.
    設定ファイル
    のだけど...
    

    View Slide

15. ▷ 規模が大きくなってきた
    ▷ データの持ち回しが辛い
    ▷ JSプラグインを使ってみたい...
    ▷ 毎回ページを読み込む前にある処理を実
    行させたい ...
    作り出すと出てくる欲
    

    View Slide

16. 2.
    +αで使うと便利な
    ディレクトリ
    より良い App 開発を行うために
    

    View Slide

17. データを一箇所で管理したい
    ▷ Store
    ○ データを一括で管理できる Vuex Store ファイル
    を置く
    （データの受け渡しをpropsで頑張らなくてよくなる）
    ○ Nuxt.js の場合はここに index.js を置くだけで OK
    （Vue.js の場合は自分で入れる必要がある）
    ○ store のファイルは index.js 以外にもつくることが
    できる
    

    View Slide

18. JS プラグインを使いたい
    ▷ Plugins
    ○ App の root インスタンスができる前に実行した
    い JS プラグインを置く
    ○ nuxt.config.js で登録するのを忘れずに
    ○ コンポーネントの一括登録にも使える
    

    View Slide

19. 毎回同じ処理を最初に実行したい
    ▷ Middleware
    ○ アプリケーションのミドルウェア。ページがレンダ
    リングされる前に実行するカスタム関数を定義で
    きる
    ○ ファイル名がミドルウェア名となる
    ○ 全てのルートに実行する場合は nuxt.config.js に
    登録、特定のページで使いたい場合は ページコ
    ンポーネントの middleware で登録
    

    View Slide

20. Store
    Plugins
    Middleware
    4つの要素を組み合わせると
    より良い App 開発が可能に！
    nuxt.config.js
    package.json
    Pages
    Components
    Layouts
    Assets
    Static
    

    View Slide

21. ディレクトリの全体像がわかると...
    ▷ 影響範囲を考慮した作業振り分けができる
    ▷ 今まで困っていたことに対する解決手段が、実はFW
    に備わっていたことに気付けたりする
    ▷ 好きなようにカスタマイズしやすくなり、よりFWを柔
    軟に活用していくことができる
    （一部だけ利用したり、バックエンドFWと組み合わせたり）
    （Nuxt.js に限らず、FW全般）
    

    View Slide

22. まとめ
    ▷ Nuxt.js のディレクトリ構造はシンプルで分かり易く、
    便利なツールもたくさん揃っている
    ▷ FW の全体像を知っていると、App 開発をより良い方
    向に進めていく近道となる
    

    View Slide

23. Thanks!
    Any questions?
    You can find me at:
    @username
    user@mail.me
    

    View Slide