勉強日記

チラ裏

Nuxt.js ビギナーズガイド ch.1 Nuxt.jsの概要

JavaScript Nuxt.js 勉強メモ

nuxt-beginners-guide.elevenback.jp

「モダンフロントエンド」のイマ

いわゆる「モダンフロントエンド」について

  • 基盤は安定期
    • SPA + APIのWebアプリケーションはデファクト
    • 技術は寡占状態・十分枯れてきている
      • React
      • Vue
      • Angular
  • 先進的な技術はいろいろ動いてる
    • Web Worker領域へのロジックの移植
    • Web AssemblyによるハイパフォーマンスなWeb開発

安定したフロントエンドJavaScriptに求められるもの

  • 現在の技術をより高い生産性のもと扱える
    • 開発のエッセンスとベストプラクティスが固まりつつある
    • 技術の寡占が進み、選定と運用が退屈・無駄に
    • アプリケーションの本質に集中したい。技術側で良しなにやってくれ
  • 将来を見据えた拡張性
    • 陳腐化の回避
      • PWAが徐々に浸透
      • REST API -> GraphQL

Nuxt.jsとこれからのWebアプリケーション開発

  • Nuxt.jsは↑を満足する
  • Vue.jsベース
    • 知識・資産を活用できる
    • 負債となりやすい箇所をカバー
  • いろいろすごいフルスタックフレームワーク(p.17)
    • 今後いっぱい出てくるだろうから略
  • NPMのダウンロード数も右肩上がり
    • 注目が見て取れる
  • Vue.js公認
    • Vue.jsコアとも連携できる体制に期待が持てる

Nuxt.jsとは

Next.jsをリスペクトして生まれたNuxt.js

Nuxt.jsの特徴と機能

  • ビルドプロセスの隠蔽
    • webpack意識させない
      • 意識するのは、カスタマイズしたローダーやプラグインを追加するときくらい
  • Vueのエコシステムとのインテグレーション
    • Vueのエコシステム
      • Vue Router
      • Vuex
      • Vue Server Renderer
      • vue-meta
    • これらを良しなに設定して使いやすくしてくれる
    • Facadeみたいな感じ
  • 独自レイヤの実装
    • middleware
      • アクセス時hook
    • plugins

多くの企業に愛されるNuxt.js

  • Nuxt.jsをすこれ

Nuxt.jsがもたらすもの

Nuxt.jsがフロントエンドにもたらす「規約」

  • レールを敷いてくれる
  • レールに乗っかる = 規約を守ることに対する明確な優位性
    • 「どっちでもいいじゃん」を決めなくていい(決めてくれる)
    • コード記述減る
      • 定型パターンをいちいち書かなくていい

Nuxt.jsがマッチするプロジェクトやシチュエーション

Nuxt.jsを採用すべきシチュエーション

  • Vue.jsのSPAプロジェクト
  • Vue.jsの中級者以上が1人でもいる
  • Vue.js柔軟すぎてつらい
    • 設計上悩んだりする
    • 汎用性のないオレオレアーキテクチャを作るくらいなら、Nuxt.jsはどうですか
      • Nuxt.jsは、良しなにいろいろ決めてくれる一方、拡張性もちゃんとある
    • チームのレベル差が激しい時にも
  • Vue.jsのベストプラクティスまだ見えてない

Nuxt.jsを採用すべきでないシチュエーション

  • そもそもSPAじゃない
  • Vue.js初心者しかいない
    • Nuxt.jsの学習コストは決して低くはない
    • Vue.js自体の学習から必要なら、Vue-CLI使え