Nuxt.jsを使ったWebアプリ開発を始めてみよう【導入方法】

今のフロントエンド界隈で注目を集める Vue.js（jsライブラリの一つ）には Nuxt.js と呼ばれるフレームワークが存在します。普段Web制作に携わっている方ならば一度は聞いたことがあるのではないでしょうか？実はこの Nuxt.js は公式に提供されているものではなくサードパーティー（第三者）によって提供されています。

Nuxt.jsが人気を集める理由はSSR（サーバーサイドレンダリング）の機能をデフォルトで提供しており、SEO対策と初回表示の高速化を測ることができるという点にあると思われます。実際 Vue.js単体でもSSR（サーバーサイドレンダリング）が可能ですが自前で対応するにはかなりの労力を必要とします。公式でも実装速度を重視する場合はNuxt.jsの利用が推奨されています。

Vue.js サーバーサイドレンダリングガイドssr.vuejs.org

Nuxt.jsは 上記以外にも昨今のWeb開発で必要となる開発環境をコマンド一つで簡単に用意することができます。

• Babelによるトランスパイル
• Vue.jsに合わせたUIフレームワーク
• 開発ローカルサーバー
• ホットリローディング
• Sass、Less、Stylusなどのプリプロセッサ

前書きはほどほどにして早速Nuxt.jsを利用する環境を準備していきましょう。
以下のコマンドをプロジェクトを作成したいディレクトリに移動して実行します。ここではyarnを用いますがnpmでも可能です。
yarnのインストールはこちらのガイドにしたがってください。
yarnpkg.com

公式からも以下作業のガイドが出ています
インストール - Nuxt.js

$ yarn create nuxt-app (プロジェクト名)

プロジェクト名の確認と説明書きを入力します（任意）

サーバーサイドで利用するフレームワークを選択します。

LinterやPWAのサポートまでもここで設定することができます。

利用したいUIフレームワークを選択します。

セットアップの参考までに以下の記事がオススメです。
なんとなくVue.jsのUIフレームワークを紹介する
qiita.com

テストフレームワークを選択します。

SPAで開発するかSSR（サーバーサイドレンダリング）を行うか選択します。
SSR（サーバーサイドレンダリング）する場合はUniversalを指定します。

次にようにコマンドが提示されるので早速始めてみましょう。

To get started: 

    cd (プロジェクト名)
    yarn run dev

 To build & start for production:

    cd (プロジェクト名)
    yarn run build
    yarn start

では以下コマンドを打ってローカルサーバーを起動させて表示を確認してみます。
$ yarn run dev

ローカルサーバーが立ち上がるのでアクセスします。
http://localhost:3000/

以下のように表示されればOKです。

以上で開発準備は整いました。実際にルーティングを追加したり、コンポーネントを作成したりして機能面の確認をしてみてください。