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

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

• 基盤は安定期

  • 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

• Next.js

  • ReactアプリケーションをSSRするためのフレームワーク
  • ミニマル

• Nuxt.js

  • Next.jsと同じことをVue.jsでやろうぜ

    • Next.js発表の数時間後
  • Next.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使え