Slide 1

Slide 1 text

Nuxt.js のディレクトリ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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