「結局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
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って何がいいの？」 に対する回答 2018.05.23 #vuejs_meetup7 HANATANI Takuma(potato4d)
「結局Nuxt.jsって何がいいの？」に対する回答
By potato4d
「結局Nuxt.jsって何がいいの？」に対する回答
- 19,148