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

Nuxt.js のディレクトリ

Nuxt.js のディレクトリ

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

ショウノシオリ

March 20, 2019
Tweet

More Decks by ショウノシオリ

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Thanks!
    Any questions?
    You can find me at:
    @username
    [email protected]

    View full-size slide