はじめに

Nuxtは、モダンな web アプリケーションを作成する Vue.js に基づいたプログレッシブフレームワークです。Vue.js 公式ライブラリ(vue、vue-router や vuex)および強力な開発ツール(webpack、Babel や PostCSS)に基づいています。 Nuxt の目標は、優れた開発者エクスペリエンスを念頭に置き、Web 開発を強力かつ高性能にすることです。

NuxtJS とは何か?

Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できます。

本質的に汎用性があり、さまざまなターゲット(サーバー、サーバーレス、または静的)をサポートし、サーバーサイドのレンダリングは切り替えることができます。

強力なモジュールエコシステムにより拡張可能で、REST や GraphQL エンドポイント、お気に入りの CMS や CSS フレームワークなどさまざまなものに簡単に接続できます。PWA および AMP のサポートは、Nuxt プロジェクトにはないモジュールのみになります。

NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。

主な機能

  • Vue ファイルで記述できること(*.vue
  • コードを自動的に分割すること
  • サーバーサイドレンダリング
  • 非同期データをハンドリングするパワフルなルーティング
  • 静的ファイルの配信
  • ES2015+ のトランスパイレーション
  • JS と CSS のバンドル及びミニファイ化
  • <head> 要素(<title><meta> など)の管理
  • 開発モードにおけるホットリローディング
  • プリプロセッサ: Sass, Less, Stylus など
  • HTTP/2 push headers ready
  • モジュール構造で拡張できること

どのように動作するか?

Nuxt.js はリッチなウェブアプリケーションを構築するために下記のものを含んでいます:

すべて合わせてもわずか 57kB min+gzip です。(Vuex 利用時は 60kB)

バンドルやソースコードの分割やミニファイ化するために内部で webpackvue-loaderbabel-loader を使います。

図解

下の図は、サーバーサイドで処理が実行されたときや、ユーザーが <nuxt-link> を通して遷移したときに Nuxt.js によって何が呼び出されるかを表しています:

nuxt-schema

サーバーサイドレンダリング(ユニバーサル SSR)

Nuxt.js をプロジェクトの UI レンダリング全体を担うフレームワークとして使うことができます。

nuxt コマンドを実行すると開発サーバーが起動します。このサーバーはホットリローディング及び Vue Server Renderer を備えており、アプリケーションが自動的にサーバーサイドレンダリングするよう設定されています。

シングルページアプリケーション(SPA)

もし何らかの理由でサーバーサイドレンダリングを使いたくない、あるいはアプリケーションを静的にホスティングする必要があるときは nuxt --spa を使って、シンプルに SPA モードを使うことができます。generate 機能と組み合わせて使うことで、Node.js ランタイムや特別なサーバー処理を利用する必要なしに、SPA のパワフルなデプロイを実現できます。

コマンドについてより深く理解するには コマンド を参照してください。

既にサーバーがあるならば Nuxt.js をミドルウェアとして追加することができます。ユニバーサルなウェブアプリケーションの開発に Nuxt.js を利用する際、制限は何ひとつありません。 Nuxt.js をプログラム的に使う ガイドを参照してください。

静的ファイルの生成

nuxt generate コマンドにより Nuxt.js に大きなイノベーションがやってきました。

アプリケーションをビルドする際、ルートやストアにあるファイル全てに対し HTML を生成します。

例えば、以下のファイル構成だった場合:

-| pages/
----| about.vue
----| index.vue

次のファイルが生成されます:

-| dist/
----| about/
------| index.html
----| index.html

この方法により、生成されたウェブアプリケーションをどの静的ウェブサイトホスティングにもホストできます!

最も良い例はこのウェブサイト自体です。このサイトは Netlify で生成されホストされています。ソースコードもしくは Vue School の Nuxt.js を Netlify にデプロイする方法を参照してください。

docs repository をアップデートするたびに手動でアプリケーションを生成したくないので、Netlify のフックへのトリガーにします:

  1. nuxtjs.org リポジトリをクローンする
  2. npm install で依存関係のあるパッケージをインストールする
  3. npm run generate を実行する
  4. dist ディレクトリに配置する

これで自動化された静的に生成されたウェブアプリケーションができます。:)

さらに nuxt generate で生成、CDN でホストされた E コマースのウェブアプリケーションを考えてみましょう。このアプリケーションは商品が在庫切れもしくは再入荷されるたびに再生成されます。ユーザーがアプリケーションを遷移している間に、在庫の状態が(再生成のおかげで)最新になるのです。もはや、サーバーで複数のインスタンスやキャッシュを持つ必要はないのです!

Netlify へデプロイする方法についての詳細は Netlify へデプロイするには? を参照してください。

Platinum Sponsors

Storyblok
Support Us