Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js のディレクトリ
Search
ショウノシオリ
March 20, 2019
Programming
0
2.9k
Nuxt.js のディレクトリ
2019/03/20 v-kansai Vue.js/Nuxt.js meetup #4
ショウノシオリ
March 20, 2019
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
210
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js で SSR 対応する
sshono1210
1
2.2k
array_merge と array_push の違いについて
sshono1210
0
510
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
220
Vue.js の methods と computed
sshono1210
0
100
すぐに使える ES2015 の基本構文3つ
sshono1210
0
72
肌で感じたディレクションとマネジメント
sshono1210
0
64
Vue.jsで遊んでみよう
sshono1210
0
81
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
650
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
860
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
RailsConf 2023
tenderlove
30
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
116
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Site-Speed That Sticks
csswizardry
10
690
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Being A Developer After 40
akosma
90
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Nuxt.js のディレクトリ
ショウノシオリ @shosho_egg ・株式会社 chatbox テックリード ・PHPカンファレンス関西2017&2018 実行委員長 ・Laravel/Nuxt.js をよく使う ・「技術が好き」というより チームで何かを作り上げるのが好き
Nuxt.js って? ▷ Vue.js 製のフレームワーク ▷ App 開発に便利なツールが揃ってる ◦ Vuex
Store、Vue Router、SSR など ▷ npx コマンドで簡単に作れる
個人的な Nuxt.js の使い心地 ▷ ディレクトリ構成がわかりやすい ◦ どこに何を書けばいいのかがすぐわかる ◦ 複数人で開発していても破綻しにくい ◦
途中から参画した人、あまり使い慣れていない人 にとっても構成が分かりやすいので、作業分担が 比較的やりやすい (最初に各ディレクトリの説明は必要)
各ディレクトリの役割について 説明する機会が多かったので まとめてみました
1. 基本となるディレクトリ App を構築するのに最低限必要なもの
Pages Components Layouts Assets Static nuxt.config.js package.json 1-1. リソース 1-2.
画面をつくるもの 1-3. 設定ファイル App をつくる 3つの要素
1-1. リソース ▷ Assets ◦ Stylus、Sass、image、fonts といったコンパイルし ていないファイルを置く ▷ Static
◦ 静的ページファイルなどを置く ◦ 直接サーバーのルートに配置される。 (/static/robots.txt は http://localhost:3000/robots.txt ) ※画像については「部品っぽいものは Assets 、そのまま使うものは Static」 のように分けて管理しても良い App で使う画像やフォントなどの置き場所
1-2. 画面をつくるもの ▷ Layouts ◦ App のレイアウトを決めるファイルを置く ◦ ページ毎にレイアウトを指定することもできる 見た目を作るファイルの置き場所
1-2. 画面をつくるもの ▷ Pages ◦ 各URLに対するファイルを置く ◦ ここに .vue ファイルを作れば、Nuxt
が勝手に ディレクトリ内の .vue ファイルを全て読み込み URL を自動生成してくれる 見た目を作るファイルの置き場所
▷ Components ◦ コンポーネントファイルを置く ◦ 使うときは import で読み込む&コンポーネントと しての登録が必要 1-2.
画面をつくるもの 見た目を作るファイルの置き場所
▷ package.json ◦ Appの依存やスクリプトについて記述されたファイ ル。これをもとにして npm i で node_modules が出
来上がる ◦ npm 経由で新たにモジュールを追加した際などに 自動的に更新されていく ※package.json が更新されている場合はnpm i し直すのを忘れないこと 1-3. 設定ファイル Nuxt.js App の設定を行う重要なファイル
▷ nuxt.config.js ◦ App 全般の設定を行うとても重要なファイル ◦ 各プロパティでカスタム可能 ◦ 設定は基本的にこのファイルで行う 1-3.
設定ファイル Nuxt.js App の設定を行う重要なファイル
Pages Components Layouts Assets Static nuxt.config.js package.json この3つの要素を使えば 基本的な App
はつくれる! 1-1. リソース 1-2. 画面をつくるもの 1-3. 設定ファイル のだけど...
▷ 規模が大きくなってきた ▷ データの持ち回しが辛い ▷ JSプラグインを使ってみたい... ▷ 毎回ページを読み込む前にある処理を実 行させたい ...
作り出すと出てくる欲
2. +αで使うと便利な ディレクトリ より良い App 開発を行うために
データを一箇所で管理したい ▷ Store ◦ データを一括で管理できる Vuex Store ファイル を置く (データの受け渡しをpropsで頑張らなくてよくなる)
◦ Nuxt.js の場合はここに index.js を置くだけで OK (Vue.js の場合は自分で入れる必要がある) ◦ store のファイルは index.js 以外にもつくることが できる
JS プラグインを使いたい ▷ Plugins ◦ App の root インスタンスができる前に実行した い
JS プラグインを置く ◦ nuxt.config.js で登録するのを忘れずに ◦ コンポーネントの一括登録にも使える
毎回同じ処理を最初に実行したい ▷ Middleware ◦ アプリケーションのミドルウェア。ページがレンダ リングされる前に実行するカスタム関数を定義で きる ◦ ファイル名がミドルウェア名となる ◦
全てのルートに実行する場合は nuxt.config.js に 登録、特定のページで使いたい場合は ページコ ンポーネントの middleware で登録
Store Plugins Middleware 4つの要素を組み合わせると より良い App 開発が可能に! nuxt.config.js package.json Pages
Components Layouts Assets Static
ディレクトリの全体像がわかると... ▷ 影響範囲を考慮した作業振り分けができる ▷ 今まで困っていたことに対する解決手段が、実はFW に備わっていたことに気付けたりする ▷ 好きなようにカスタマイズしやすくなり、よりFWを柔 軟に活用していくことができる (一部だけ利用したり、バックエンドFWと組み合わせたり)
(Nuxt.js に限らず、FW全般)
まとめ ▷ Nuxt.js のディレクトリ構造はシンプルで分かり易く、 便利なツールもたくさん揃っている ▷ FW の全体像を知っていると、App 開発をより良い方 向に進めていく近道となる
Thanks! Any questions? You can find me at: @username
[email protected]