「結局Nuxt.jsって何がいいの?」

に対する回答

2018.05.23 #vuejs_meetup7 HANATANI Takuma(potato4d)

Hanatani Takuma

  • @potato4d の名前で活動
  • フリーランスのWebエンジニア
  • Vue.js jp Docs core maintenance member
  • Vue.js Japan UserGroup スタッフ
  • nuxt/docs en & ja contributor
  • Nuxt tech book 著者

Nuxt tech book

JSLounge ハンズオン

https://jslounge.connpass.com/event/88523/

今日話すこと

「結局Nuxt.jsってなにがいいの?」

に、答える

アジェンダ

  • Nuxt.js とは
  • Nuxt.jsってなにがいいの?
  • Nuxt.jsを使うべき技術ともうひとつの理由
  • 「規約」の話 メリットとデメリット
  • Nuxt.jsと「規約」で変わるフロントエンド

What's Nuxt?

知ってる人 🙋

趣味で使ってる人 🙋

仕事で使ってる人 🙋

流行ってますね😋

携わっているNuxt事例(一部)

Nuxt + WP-APIでのWebサイト

Nuxt(SSR on Lambda)なWeb App

他もSPA/SSRなWebアプリケーションから

いわゆる「Web制作」なWebサイト系の構築まで

Productionでも増えてます 👍

おさらい

Nuxt.js

The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. A few hours after the announcement, the idea of creating server-rendered Vue.jsapplications the same way as Next.js was obvious: Nuxt.js was born.

https://nuxtjs.org/guide

inspired by Next.js

SSRツール "ではなく"

統合開発ツールの側面を持つ

Nuxt.jsってなにがいいの?

よくあるコメント

  • 「別にSSRしたくないし……」

  • 「webpackはつらいけど作ったらそれっきりだし」

  • 「PWA対応正直大体しなくない?」

  • 「俺の秘伝のオレオレアーキテクチャを喰らえ」

わかる

それでも実は使ったほうが良い理由がある

Nuxt.jsを使うべき

技術ともうひとつの理由

Nuxt.jsを使うべき理由

「開発の足回りを楽するため」

「例えば」

vue-server-renderer

$ yarn run generate

「あれが」

「これが」

「それが」

「できる」

一つの側面としては正しい

「技術的側面」

技術的側面 ”でない” ポイント

概念

「規約」 🔜 フロントエンド

Nuxtに限らない規約の話へ ✂

そもそも「規約」とは

設定より規約

「ここにこう配置したらうまくいきますよ」

の塊

What's 規約

  • MVC2時代のサーバーサイドにおいて流行った設計
  • 「これを書くならこれが欲しいやろ」をフレームワークがブラックボックスで提供
  • 開発者はアプリケーションの本質だけに目を向けることができる
  • 要するに「仕組み化」
  • 少し古いかもしれないが今のフロントエンドにはちょうどいい

ベストプラクティス

勝手にやってくれるマン

要は

「規約」の3つのメリット

オレオレアーキテクチャ排除

規約のメリット ①

Vue.jsでの開発でありがちなこと

オレオレアーキテクチャ排除

  •  「VueRouterで特定のルーティングやカテゴリだけで〜〜を走らせたい」
  • 「Vueのエコシステムを使ったカスタマイズは〜〜を〜〜して使おう」
  • 「Vuex入れる?入れない?面倒だからStoreパターンにする?」
  • 「ルーティング周りの命名規則がバラバラやけどどうすんねん」

オレオレアーキテクチャ排除

……などなど、Vue.jsが自由すぎることによって起こる問題がたくさん

オレオレアーキテクチャ排除

「それNuxtで解決できますよ」

オレオレアーキテクチャ排除

オレオレアーキテクチャの排除

オレオレアーキテクチャ排除

オレオレアーキテクチャ排除

「みんな似たようなことやってるけど煩雑」

が人の手を離れる

オレオレアーキテクチャ排除

コード品質の最低ラインを担保

規約のメリット ②

Vue.js ユーザーは

特にレベル感がまちまち

コード品質の最低ラインを担保

皆がエキスパート

とは限らない現実

コード品質の最低ラインを担保

というか全くそうではない現実

コード品質の最低ラインを担保

 「この便利機能、あんまり使われなさそうだし適当にこの辺においちゃお!」

コード品質の最低ラインを担保

コード品質の最低ラインを担保

🔥

🔥

🔥

🔥

🔥

🔥

肥大化 ☠

コード品質の最低ラインを担保

\(^o^)/

コード品質の最低ラインを担保

「components大きくなりすぎて区別がわからん」

コード品質の最低ラインを担保

\(^o^)/

コード品質の最低ラインを担保

Nuxtだと 🔜

コード品質の最低ラインを担保

  • 便利機能をどう扱うか

    • plugins / middlewareなどを正しく使うことで「使う人自身が楽できる設計に」

コード品質の最低ラインを担保

  • コンポーネント設計をどうするか

    • layouts / pages / components で分かれており、それぞれの構造によってNuxt.jsの独自拡張があるため、最低限の知識があれば「ルーティングや非同期が関わる悩みどころを楽する」ことができる

エコシステムで楽したいなら

pluginsをちゃんと使いましょう

コード品質の最低ラインを担保

ページ特有処理で楽したいなら

asyncData()やmiddleware: を使いましょう

コード品質の最低ラインを担保

「ラク」という餌

コード品質の最低ラインを担保

誰かの主観によって生まれた「ルール」

得てして破壊されるものである

コード品質の最低ラインを担保

「規約」としての拡張は

決まった設計に則ることによる”報酬”をもたらす

コード品質の最低ラインを担保

平和

コード品質の最低ラインを担保

ドキュメンテーションコスト削減

規約のメリット ③

Officialに日本語訳が存在

セルフメンテナンスを必要とせず

基本的に正確

規約のメリット ③

「規約」の良さとは

Q

開発において避けられない

レベル感格差 吸収

A

🙌 🙌 🙌

「規約」を採用するときの2つの注意事項

「何も知らない人が書けるようになる」

魔法のツールではない

規約の注意事項 ①

Nuxtならルールがあるから

誰でも適当に書ける

規約の注意事項 ①

🙅

規約の注意事項 ①

規約の注意事項 ①

  • 全くの初心者だけで書けるわけではない

    • 少なくともチームに一人は、最低限 Vue / Vuex / VueRouter を使ったことがあるSPA開発者がいて、リードしていく必要はある

  • 「うまくやってくれる」から「知らなくても良い」わけではない

    • webpackなどの設定は最低限の知識があれば良いが、「VuexストアやVueRouterをNuxt.jsがどのようにラップしているか」などは具体的にはわからずともイメージできていないと事故につながる

必ず「守破離」は存在する

規約の注意事項 ②

規約は単なるベストプラクティス集

規約の注意事項 ②

Nuxt.jsの範囲だけで書いてたら

Nuxt.jsで書けるものしか出来上がらない

規約の注意事項 ②

「NuxtだからNuxtのエコシステムで戦おう」

規約の注意事項 ②

あくまでも頻出設計を楽にしてくれるモノ

規約の注意事項 ②

もし「ない」場合は自分でエコシステムを作る

規約の注意事項 ②

できない場合はNuxt wayから逸脱することも重要

規約の注意事項 ②

ルールとマナーを守って楽しくNuxt.jsしよう

規約自体の話終わり ✂

Nuxt.jsと「規約」で変わる

フロントエンド

これまでのフロントエンドの話

いつものテンプレの話

これまでのフロントエンドの話

これまでのフロントエンドの話

  • React

    • やその派生系統は、思想にミニマリズムが見え隠れしている

  • Vue

    • 小規模から使えて取り回しが良いが、設計にクセがある

  • Angular

    • 要求される技術水準と良さが活きてくるアプリケーションサイズが大きめ

みたいなことがよく言われている

皆の頭のなかにあるもの

小規模 中規模 大規模 超大規模
React
Vue ×
Angular

みたいな風潮

(自分はあんまり一概にこうとは思わないけど)

なんでVue.jsが中小規模向けと

考えられているのか

「とりあえず書く」

ハードルが低い

Vueの印象の話

双方向バインディングや

ウォッチャなどの存在

Vueの印象の話

フロントエンドにおける

「ちゃんとしてないPHP」の印象

Vueの印象の話

=自由過ぎる

Vueの印象の話

まぁわかる

Vueの印象の話

なんでAngularが大規模向けと考えられているのか

界隈に対する言及であって

Angular自体は詳しいわけではないです

AngularはAngular wayに

乗るとラクできる

Angularの印象の話

敷居は高い

Angularの印象の話

固定されたスタック

Angularの印象の話

Angularの印象の話

敷居は高いが

人員をスケールさせやすい

Angularの印象の話

歪でないほうで

Angularの印象の話

まぁわかる

何かに似てない?

「強い」規約じゃん

だいたい

「規約」によって

スケールするVue.js

「統一規格」は

レベル差を吸収する

「規約」によってスケールするVue.js

「規約」は

レベル差を吸収する

「規約」によってスケールするVue.js

=人員をスケールさせやすい

Nuxtで変わる領域

=ルールに乗るとラクできる

Nuxtで変わる領域

=Vueの手軽さに堅牢性

Nuxtで変わる領域

Nuxtで変わる領域

小規模 中規模 大規模 超大規模
React
Nuxt ×
Angular

(主観だけど)

Angular系の人に触ってみてもらうと割りと好印象

Nuxtで変わる領域

Vue.jsの活躍の場を

広げていこう

まとめ

  • Nuxt.jsの埋もれがちな魅力に「規約」が存在する
    • MVC2時代に大きく羽ばたいた「規約」の概念は大きなメリットと小さなデメリットをもたらす
    • 正解の見えないフロントエンド開発で作られてきた独自資産・負債は「規約」というレールによって解消される

 

  • ただ、理解せずに使えるものではない
    • JavaScript / Vue.js に詳しい人が少しでもいる環境下で、全員の生産性を底上げするときにこそ真価を発揮する

まとめ①

  • 「規約」とフロントエンド
    • 「規約」は、Angularが近い概念だがこれまでなかった
    • Nuxt.jsが導入されたことによって、Vue.js開発は従来以上の規模感にスケールするように
    • それに伴い、ルール遵守の世界観の影響力が強くなる
    • Nuxt.jsと規約によって、もっと幅広くVue.jsが使われる世界になるかもしれない

まとめ②

宣伝

https://potato4d.booth.pm/items/824745

Thanks!

「結局Nuxt.jsって何がいいの?」に対する回答

By potato4d

「結局Nuxt.jsって何がいいの?」に対する回答

  • 18,540