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

ベストプラクティス

勝手にやってくれるマン

要は

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

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

規約のメリット ①

▼

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

🙌 🙌 🙌

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

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

魔法のツールではない

規約の注意事項 ①

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

Made with Slides.com

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

  • 19,131