Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Nuxt.js本格導入で遠回りし ないためのTips
Slide 2
Slide 2 text
自己紹介 名前: Yamada Shinji (devneko) GitHub: dotneet (chromy, bpush)、Twitter: santa128bit ウェブアプリやスマホアプリの開発をするフリーランス。 小さいチームでの仕事が多くフロントもバックエンドも両方やることが多いです。 Nuxt.js歴: 半年くらい。個人でも業務でも積極的に活用中。
Slide 3
Slide 3 text
発表内容 ・業務でNuxt.jsを使ってみた感想 ・Nuxt.js本格導入で遠回りしないためのTips ・ちょっとした黒魔術のご紹介
Slide 4
Slide 4 text
業務で使用した感想① ・業務での活用 - 記事を読ませる系サイト - 会員機能やユーザー投稿もあるそこそこな規模のサイト(開発中) ・技術スタック - Nuxt.js - Ruby on Rails(api mode) - MySQL
Slide 5
Slide 5 text
業務で使用した感想② ・本当に簡単にSSRできる。 ・SSRならではの問題はあるていど起きる。しかし、回避できない致命的な問題は発生 していない。 ・Nuxt.js自体のバグで困っていることは特にない。現時点で十分な品質だと感じてい る。何度か問題は発生したが自分が遭遇したものは現時点ですべて修正済み。
Slide 6
Slide 6 text
TIPS 1. まずドキュメントを読む Vue/Nuxtの良いところのひとつは、全体をよく知らなくても少し ずつ利用の幅を拡げていけるところ。 でも、それなりに大きいアプリケーションを書くなら 最初にドキュメントを良く読みましょう 結局ほとんどの機能にお世話になります。ガイドだけでなくFAQも読みましょう。
Slide 7
Slide 7 text
TIPS 2. チェックしておきたいページ① ・nuxt-community/awesome-nuxt https://github.com/nuxt-community/awesome-nuxt テンプレートやサンプルなどの一覧
Slide 8
Slide 8 text
TIPS 2. チェックしておきたいページ② ・nuxt-community/modules https://github.com/nuxt-community/modules 便利な小粒のプラグインがたくさんある。 axios, pwa, analytics, firebase, toast 便利なライブラリへの橋渡し的なものがほとんど。敢えて自分で 書く必要がなければ使った方が楽。
Slide 9
Slide 9 text
TIPS 3. SSRで発生する問題と解決方法① SSR(初回レンダリング)のときだけこけることがある。 => だいたいwindowやdocumentオブジェクトへのアクセスが原 因 SSRを考慮していないVueのライブラリなどでよく発生する。importやVue.use()時の初 期化処理のときにwindowやdocumentにアクセスしてエラーとなる。
Slide 10
Slide 10 text
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で検索する。
Slide 11
Slide 11 text
TIPS 4. babel/eslint を適用させない方法① ・node_modules外のJSはすべてbabelとeslintが適用される ・npm管理外のライブラリなどを単純にコピーしたいとき困る => 設定ファイルでbabelやeslintの適用除外のディレクトリを作 成
Slide 12
Slide 12 text
TIPS 4. babel/eslint を適用させない方法② nuxt.config.js の build.extend で自由にwebpackの設定をカス タマイズできる。 vendorディレクトリを適用babelの対象外にする例
Slide 13
Slide 13 text
TIPS 4. babel/eslint を適用させない方法③ vendorディレクトリを適用eslintの対象外にする例 (excludeにvendorを追加)
Slide 14
Slide 14 text
TIPS 5. JSのサイズを小さくするために① ・何も考えずにライブラリをどんどん導入すると初期レンダリング に必要なJSのサイズが肥大化する ・導入するライブラリのファイルサイズを気にする ・UIライブラリは便利だがファイルサイズが大きい ・Nuxtは300KBで警告を出す。この基準は意外と厳しい
Slide 15
Slide 15 text
TIPS 5. JSのサイズを小さくするために② nuxt build --analyze コマンドをすると一目で大きいライブラリが わかる。
Slide 16
Slide 16 text
TIPS 5. JSのサイズを小さくするために③ pagesディレクトリの.vueファイルから読み込むライブラリに注 意。デフォルトでは各ページごとにライブラリが取り込まれてしま う nuxt.config.js の build.vendor に指定すると共通のJSファイルに取り込まれる。 build: { vendor: [‘axios’] }
Slide 17
Slide 17 text
TIPS 5. JSのサイズを小さくするために④ ・build.extractCSS を設定してCSSをJSから分離する ・非同期コンポーネントとWebpackのcode splittingを使う export default { components: { ‘el-select’: _ => import(‘element-ui/lib/select’) } }
Slide 18
Slide 18 text
TIPS 6. WebStormで型を使って楽をする① ・jsdoc形式で型を指定しておくと入力補完できる。 ・TypeScript用の型定義(index.d.ts)を置いておくとTypeScriptじゃなくても認識してく れる。vueや公式のライブラリのリポジトリから定義を持ってきてindex.d.tsにコピペし て、jsdocコメントで型指定しておくと補完が効いてちょっと嬉しい。 /** @param {ActionContext.} context */ async find(context) { }
Slide 19
Slide 19 text
TIPS 6. WebStormで型を使って楽をする② ・SFCのテンプレートでも下記のようにに書いておけば補完できる。 /** @property {Hoge} hoge */ ・Nuxtでは@や~がwebpackのエイリアスになっていてソースのルートを指定できる。 しかし、WebStormがこれを認識しないため、使うと入力補完が効かなくなる。何か回 避方法がありそうな気もするが分からなかったので、自分のプロジェクトでは@と~は 使わないことにした。最新版のWebStormはエイリアスに対応したらしいが@と~は認 識できない。
Slide 20
Slide 20 text
黒魔術のご紹介① Nuxtで不便に感じたところ 1.asyncData() はmixinでマージされない。 2.asyncData()内とmethods内でvuexのアクションの呼び出し 方が違う
Slide 21
Slide 21 text
黒魔術のご紹介② 1.asyncData() はmixinでマージされない。 const mixinA = { async asyncData() { return {a: ‘aaa’} } export default { mixins: [mixinA], async asyncData() { return {b: ‘bbb’} } => { a: ‘aaa’, b: ‘bbb’ } ってなって欲しい。
Slide 22
Slide 22 text
黒魔術のご紹介③ 黒魔術(nuxtend)で解決 https://github.com/dotneet/nuxtend ・mixinのasyncData()も呼ばれる ・結果はマージされる。(data()と同じ)
Slide 23
Slide 23 text
黒魔術のご紹介④ 2.asyncData()内とmethods内でvuexのアクションの呼び出し 方が違う ・asyncData(context)の場合 context.store.dispatch(‘books/findAll’) ・methodsの場合 this.findAllBooks() // mapActions() で定義しておく
Slide 24
Slide 24 text
黒魔術のご紹介⑤ 黒魔術(nuxtend)で解決 asyncData() から this を使って methodsの関数を呼べる
Slide 25
Slide 25 text
まとめ ・ドキュメントをまずしっかり読みましょう。FAQも見ましょう。 ・nuxt-community/modules を見ておきましょう ・nuxt.config.js を研究しておきましょう ・JSのサイズに気を配りましょう(build --analyzeが便利)