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で発生する問題と解決方法② １．process.BROWSER_BUILDを使う(FAQに書いてある) if (process.BROWSER_BUILD) { import(‘hoge’) } ２．nuxtのプラグインの場合ssrオプションをfalseにする。
nuxt.config.js の plugins にて {src: '~/plugins/my-plugin.js', ssr: false}, … ] ３．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で不便に感じたところ１．asyncData() はmixinでマージされない。２．asyncData()内とmethods内でvuexのアクションの呼び出し方が違う

黒魔術のご紹介② １．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()と同じ)

黒魔術のご紹介④ ２．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が便利)

Nuxt.js本格導入で遠回りしないためのTips

Nuxt.js本格導入で遠回りしないためのTips

Shinji Yamada

Other Decks in Programming

Featured

Transcript