Vue or Nuxt
2018.10.18 NuxtMeetup #5 @masaakikunsan
お前は誰だ?
・石岡 将明 (@masaakikunsan)
・今月から株式会社SCOUTER!!!!!!
・フロントエンドエンジニア
・Vue Fes Japn staff
・自称フロント界隈1の加藤恵オタク
![](https://pbs.twimg.com/profile_images/1035000536666230784/vBPH3T6c_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373478/Dh-Nz8sVMAAcWqS.jpg)
Vuexの話書きました(boothで買って)
今回話さないこと
・VueとNuxtの細かい機能について
・VueかReactについて
みなさんNuxtを使ってますか?
使っている人はなんでNuxtにしたか答えられますか?
実はVueでも良かったってことないですか?
アジェンダ
・VueとNuxtの動向について
・Vueを導入するメリット
・Nuxtを導入するメリット
・どっちを導入するか
・まとめ
VueとNuxtの動向について
Vueの動向
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373512/スクリーンショット_2018-10-17_15.52.44.png)
npm trends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373537/スクリーンショット_2018-10-17_16.04.18.png)
Vue CLI 3の登場
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373607/スクリーンショット_2018-10-17_16.13.33.png)
Vue Project Roadmap
![](https://images-na.ssl-images-amazon.com/images/I/41qzgSLFQwL._SX395_BO1,204,203,200_.jpg)
Vue.js 入門 発売
Nuxtの動向
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373623/スクリーンショット_2018-10-17_16.18.53.png)
npm trends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373630/スクリーンショット_2018-10-17_16.20.40.png)
Nuxt v2登場
![](https://images-na.ssl-images-amazon.com/images/I/51e7wzl91RL._SX350_BO1,204,203,200_.jpg)
Nuxt.js ビギナーズガイド 発売
VueもNuxtもどんどんバージョンアップし
便利に使いやすくなっていっている
どちらを導入すればいいか
Vue.jsを導入するメリット
JSでロジックを頑張る必要があるけど
jQueryは導入したくない時に気軽に導入できる
公式のエコシステムの豊富さ
・Vue Router
・Vuex
・Vue Loader
etc...
比較的に学習コストが低い
公式日本語ドキュメント
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373718/スクリーンショット_2018-10-17_16.46.43.png)
Nuxt.jsを導入するメリット
WebpackやBabelが隠蔽されてるのでその辺を知らなくても良い
SSRを比較的簡単にできる
ルーティングの自動生成で効率アップ
静的サイトジェネレーターとしての側面のおかげでSPAモードでもSEOなどを気にしなくていい
規約があることによりプロジェクトを破壊しにくい
どっちを導入する?
ここまでの話だとNuxtを使っておけば良さそうに見える
Nuxtを選んだ方がいいケースと
選ばない方がいいケースの紹介をします!
選んだ方がいいケース
SSRする必要がある
SEOを気にしないといけない
Vue.jsに精通してる人が多い
静的サイトを作成したい
選ばない方がいいケース
SEOを気にしなくていい
設計は自分でやりたい!
Vue.js初心者が多い
TSを使いたい
たまに聞く声
「Nuxtじゃないといけない理由は特にないけどルーティングを自動でやって欲しい」
それktsnさんが解決してますよ!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/945112/images/5373855/スクリーンショット_2018-10-17_17.30.22.png)
vue-cli-plugin-auto-routing
ちなみに...
僕は基本Nuxtしか書きません
まとめ
SEO・SSR以外の時はNuxtじゃないとダメって理由は基本ない
規約が欲しい時
SEOを気にしないといけない時
SSRする必要がある時は
Nuxtを選ぶ
初心者が多い時は書いているものがNuxtかVueなのかわからず検索に時間がかかりすぎることがあるのでその場合はVueを選んだ方が生産性が高くなる
Nuxtが便利だからって思考停止してませんか?
よく考えてVue/Nuxtでハッピーライフを!
株式会社SCOUTERでは全てのプロダクトでVue,Nuxtを使っています!
フロントエンドエンジニアを募集しているので気になる方は僕のところまで来てください!
Vue or Nuxt
By masaakikunsan
Vue or Nuxt
- 2,893