Vue.jsをサーバーサイドでレンダリングするNuxt.jsの環境構築方法

Nuxt.js 公式ドキュメント翻訳完了のお知らせと、結城浩さんへの謝辞

2017年3月26日にNuxt.jsの公式ドキュメントが日本語翻訳されたとのことなので早速触ってみました。日本語翻訳お疲れ様です。

Nuxt.jsとは?

Nuxt.js – ユニバーサル Vue.js アプリケーション

“Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。”

公式ドキュメントによると上記のように記載されていますが、サーバーサイドレンダリングがわからない方はちょっとわかりにくいかと思います。

サーバーサイドレンダリングとはJSなどを使ってブラウザ上で行っていたDOMの操作(HTMLの中身の操作)をサーバーで実行してから表示してしまいましょうということです。

Vue.jsやReact.jsを使ったことがあるかたならわかるかもしれませんが、Vue.jsなどを使う前提で構築されたサイトのソースコードを見ると中身が<div id=”app”></div>だけだったりしますが、サーバーサイドでレンダリングすると以下のようにソースコードが表示されます。

Nuxt.jsで構築したページのソースコード

サンプルデモ

ソースコードをみるとサーバーサイドでコードを作成してくれてるので、ソースコードにh1タグaタグなどが表示されているのがお分かりいただけるかと思います。

また、Nuxt.jsはvue-routerの登録も自動的にやってくれるし、WebpackやBabelの設定も不要、node.jsのサーバも不要。極力、コンポーネントを作成することだけに専念することができるようになっています。

メリット

では、そのNuxt.jsを使うとなにが便利なのでしょうか。

  • SEOに強い? → サーバーサイドレンダリングしてくれるため、クローラーはJS実行後のコードを評価してくれるとの話もありますが今回はその議論は省きます。
  • 初表示が速い → 初回にDOMの操作をしなくて良いため
  • コンポーネントの作成に注力できる → 面倒くさいルーティングの設定や環境のことはNuxt.jsがやってくれます
  • レンサバでも簡単に使用できる → npm run generateで作成したファイルをFTPでアップロードするだけ。

デメリット

またNuxt.jsを使うデメリットは以下のように考えられます。

  • 学習コストがかかる → Vue.jsやコンポーネントんの概念などを学ぶ必要があります
  • Vue.jsに依存する → 突発的な仕様や環境変更
  • Nuxt.jsの開発歴が短い → 2017年3月現在ver0.9.9のリリース

環境構築

それでは早速、開発環境を構築してみましょう。

ターミナル

# vue-cliをインストールしていない場合
$ npm install -g vue-cli # プロジェクト名は任意のものにして下さい。今回は"nuxt-sample"
$ vue init nuxt/starter nuxt-sample
$ cd nuxt-sample # 必要なnodeモジュールをインストール
$ npm install # プロジェクトを起動しましょう。
$ npm run dev # 起動が成功すると以下のように表示されます。Open~に書いてあるURLへアクセスしてみましょう。
DONE Compiled successfully in 4482ms
> Open http://127.0.0.1:3000
サンプルページ

上記のように表示されたら開発環境の構築は完了です。

また、Nuxt.jsでは以下のコマンドが用意されてます。変更する場合はpackage.jsonをいじって下さい。

ターミナル

# 開発サーバーを localhost:3000(環境によって違う) で起動
$ npm run dev # アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにminifyします
$ npm run build # プロダクションモードでサーバーを起動(nuxt build 後に実行)
$ npm run start # アプリケーションをビルドして、ルートごとに HTMLファイルを生成(静的ファイルのホスティングに用います)
$ npm run generate

jadeを使う場合

jadeを使う場合は以下のコマンドでnodeモジュールをインストールしておきましょう。

ターミナル

$ npm install --save-dev jade

SCSSを使う場合

SCSSを使う場合は以下のコマンドでnodeモジュールをインストールしておきましょう。

ターミナル

$ npm i --save-dev node-sass
$ npm i --save-dev sass-loader

以上がNuxt.jsの環境構築方法です。コピペですぐ環境構築ができたかと思います。ではWebアプリケーションを開発して下さい。

© 2011 - 2017 ShoYamane