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本格導入で遠回りしないためのTips
Search
Shinji Yamada
October 04, 2017
Programming
7
2.7k
Nuxt.js本格導入で遠回りしないためのTips
Nuxt.jsを本格的に使ってみようと考えている人のための資料です
Shinji Yamada
October 04, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
490
ミリしらMCP勉強会
watany
4
770
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
830
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
180
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.8k
Thank you <💅>, What's the Next?
ahoxa
1
490
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
450
AI Agents with JavaScript
slobodan
0
250
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
170
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
Featured
See All Featured
It's Worth the Effort
3n
184
28k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Music & Morning Musume
bryan
47
6.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
What's in a price? How to price your products and services
michaelherold
245
12k
Site-Speed That Sticks
csswizardry
5
500
Being A Developer After 40
akosma
91
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
The Language of Interfaces
destraynor
157
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Transcript
Nuxt.js本格導入で遠回りし ないためのTips
自己紹介 名前: Yamada Shinji (devneko) GitHub: dotneet (chromy, bpush)、Twitter: santa128bit
ウェブアプリやスマホアプリの開発をするフリーランス。 小さいチームでの仕事が多くフロントもバックエンドも両方やることが多いです。 Nuxt.js歴: 半年くらい。個人でも業務でも積極的に活用中。
発表内容 ・業務でNuxt.jsを使ってみた感想 ・Nuxt.js本格導入で遠回りしないためのTips ・ちょっとした黒魔術のご紹介
業務で使用した感想① ・業務での活用 - 記事を読ませる系サイト - 会員機能やユーザー投稿もあるそこそこな規模のサイト(開発中) ・技術スタック - Nuxt.js -
Ruby on Rails(api mode) - MySQL
業務で使用した感想② ・本当に簡単にSSRできる。 ・SSRならではの問題はあるていど起きる。しかし、回避できない致命的な問題は発生 していない。 ・Nuxt.js自体のバグで困っていることは特にない。現時点で十分な品質だと感じてい る。何度か問題は発生したが自分が遭遇したものは現時点ですべて修正済み。
TIPS 1. まずドキュメントを読む Vue/Nuxtの良いところのひとつは、全体をよく知らなくても少し ずつ利用の幅を拡げていけるところ。 でも、それなりに大きいアプリケーションを書くなら 最初にドキュメントを良く読みましょう 結局ほとんどの機能にお世話になります。ガイドだけでなくFAQも読みましょう。
TIPS 2. チェックしておきたいページ① ・nuxt-community/awesome-nuxt https://github.com/nuxt-community/awesome-nuxt テンプレートやサンプルなどの一覧
TIPS 2. チェックしておきたいページ② ・nuxt-community/modules https://github.com/nuxt-community/modules 便利な小粒のプラグインがたくさんある。 axios, pwa, analytics, firebase,
toast 便利なライブラリへの橋渡し的なものがほとんど。敢えて自分で 書く必要がなければ使った方が楽。
TIPS 3. SSRで発生する問題と解決方法① SSR(初回レンダリング)のときだけこけることがある。 => だいたいwindowやdocumentオブジェクトへのアクセスが原 因 SSRを考慮していないVueのライブラリなどでよく発生する。importやVue.use()時の初 期化処理のときにwindowやdocumentにアクセスしてエラーとなる。
TIPS 3. SSRで発生する問題と解決方法② 1.process.BROWSER_BUILDを使う(FAQに書いてある) if (process.BROWSER_BUILD) { import(‘hoge’) } 2.nuxtのプラグインの場合ssrオプションをfalseにする。
nuxt.config.js の plugins にて {src: '~/plugins/my-plugin.js', ssr: false}, … ] 3.OSSのライブラリならIssueをssrやnuxtで検索する。
TIPS 4. babel/eslint を適用させない方法① ・node_modules外のJSはすべてbabelとeslintが適用される ・npm管理外のライブラリなどを単純にコピーしたいとき困る => 設定ファイルでbabelやeslintの適用除外のディレクトリを作 成
TIPS 4. babel/eslint を適用させない方法② nuxt.config.js の build.extend で自由にwebpackの設定をカス タマイズできる。 vendorディレクトリを適用babelの対象外にする例
TIPS 4. babel/eslint を適用させない方法③ vendorディレクトリを適用eslintの対象外にする例 (excludeにvendorを追加)
TIPS 5. JSのサイズを小さくするために① ・何も考えずにライブラリをどんどん導入すると初期レンダリング に必要なJSのサイズが肥大化する ・導入するライブラリのファイルサイズを気にする ・UIライブラリは便利だがファイルサイズが大きい ・Nuxtは300KBで警告を出す。この基準は意外と厳しい
TIPS 5. JSのサイズを小さくするために② nuxt build --analyze コマンドをすると一目で大きいライブラリが わかる。
TIPS 5. JSのサイズを小さくするために③ pagesディレクトリの.vueファイルから読み込むライブラリに注 意。デフォルトでは各ページごとにライブラリが取り込まれてしま う nuxt.config.js の build.vendor に指定すると共通のJSファイルに取り込まれる。
build: { vendor: [‘axios’] }
TIPS 5. JSのサイズを小さくするために④ ・build.extractCSS を設定してCSSをJSから分離する ・非同期コンポーネントとWebpackのcode splittingを使う export default {
components: { ‘el-select’: _ => import(‘element-ui/lib/select’) } }
TIPS 6. WebStormで型を使って楽をする① ・jsdoc形式で型を指定しておくと入力補完できる。 ・TypeScript用の型定義(index.d.ts)を置いておくとTypeScriptじゃなくても認識してく れる。vueや公式のライブラリのリポジトリから定義を持ってきてindex.d.tsにコピペし て、jsdocコメントで型指定しておくと補完が効いてちょっと嬉しい。 /** @param {ActionContext.<any,any>}
context */ async find(context) { }
TIPS 6. WebStormで型を使って楽をする② ・SFCのテンプレートでも下記のように<script>に書いておけば補完できる。 /** @property {Hoge} hoge */ ・Nuxtでは@や~がwebpackのエイリアスになっていてソースのルートを指定できる。
しかし、WebStormがこれを認識しないため、使うと入力補完が効かなくなる。何か回 避方法がありそうな気もするが分からなかったので、自分のプロジェクトでは@と~は 使わないことにした。最新版のWebStormはエイリアスに対応したらしいが@と~は認 識できない。
黒魔術のご紹介① Nuxtで不便に感じたところ 1.asyncData() はmixinでマージされない。 2.asyncData()内とmethods内でvuexのアクションの呼び出し 方が違う
黒魔術のご紹介② 1.asyncData() はmixinでマージされない。 const mixinA = { async asyncData() {
return {a: ‘aaa’} } export default { mixins: [mixinA], async asyncData() { return {b: ‘bbb’} } => { a: ‘aaa’, b: ‘bbb’ } ってなって欲しい。
黒魔術のご紹介③ 黒魔術(nuxtend)で解決 https://github.com/dotneet/nuxtend ・mixinのasyncData()も呼ばれる ・結果はマージされる。(data()と同じ)
黒魔術のご紹介④ 2.asyncData()内とmethods内でvuexのアクションの呼び出し 方が違う ・asyncData(context)の場合 context.store.dispatch(‘books/findAll’) ・methodsの場合 this.findAllBooks() // mapActions() で定義しておく
黒魔術のご紹介⑤ 黒魔術(nuxtend)で解決 asyncData() から this を使って methodsの関数を呼べる
まとめ ・ドキュメントをまずしっかり読みましょう。FAQも見ましょう。 ・nuxt-community/modules を見ておきましょう ・nuxt.config.js を研究しておきましょう ・JSのサイズに気を配りましょう(build --analyzeが便利)