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.8k
Nuxt.js本格導入で遠回りしないためのTips
Nuxt.jsを本格的に使ってみようと考えている人のための資料です
Shinji Yamada
October 04, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
750
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
QA x AIエコシステム段階構築作戦
osu
0
240
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Balancing Empowerment & Direction
lara
1
530
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Designing for Performance
lara
610
69k
How to train your dragon (web standard)
notwaldorf
96
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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が便利)