Nuxt.jsでWebサイト制作 [1] 導入編

つっちー

2018.08.28

こんにちは。フロントエンドエンジニアのつっちーです。

これまで4回にわたってVue.jsについて取り上げましたが、今回からはVue.jsを利用したフレームワーク、Nuxt.jsについて書いていきたいと思います。

第1回目は、Nuxt.jsがどのようなフレームワークであるか確認したあと、実際に動作させることでその機能を体験してみましょう。

このシリーズでは、「Nuxt.jsをWebサイト制作に活用できる状態までいち早く到達すること」を目的に進めていきます。ドキュメントとしては、もちろん公式がもっとも詳細です。日本語化もされていますので、そちらも合わせてご参照ください。

Nuxt.jsとは
Nuxt.jsのメリット
Nuxt.jsを動かしてみる
- Node.jsのバージョンを確認
- プロジェクト作成〜開発サーバー起動
機能を確認してみよう
- JavaScript関連機能
- CSS関連機能
まとめ

Nuxt.jsとは

Nuxt.jsを短く言いあらわすと、Vue.jsアプリケーションを静的に生成することができるフレームワークです。

このフレームワークは、Vue.jsアプリケーションの構築に必要とされるさまざまな機能が束になってできています。その中に、Vue.jsアプリケーションを静的に生成する機能、つまりVue.jsアプリケーションの実行結果であるHTML/CSS/JavaScriptを出力する機能が含まれており、これがNuxt.jsの最大の特徴です。

この機能により、検索エンジン対策と初回表示高速化を目的としたサーバーサイドレンダリング（SSR）を実現し、さらに、ファイル出力によって静的Webページの生成までも可能としています。

Nuxt.jsのメリット

Nuxt.jsを利用する最大のメリットは、自分で揃えるには多すぎるさまざまな機能を一括で用意できること。これに尽きると思います。

前述のとおり機能を束にしたような作りなので、自分でも似たような環境は作成可能です。が、実際にやろうとするととてつもなく大変です……。でもNuxt.jsならコマンド一発！モダンな開発環境が手軽に手に入ります。

Webサイト制作関連の機能の一部だけとっても、これだけあります。

最新文法の解決（Transpile）
依存関係の解決（Bundle）
文法確認（Lint）
最小化（Minify）
開発用ローカルサーバー
変更検知と即時反映（Hot Module Replacement）
接頭辞の自動付与（Auto Prefix）

Nuxt.jsなら、以上の機能が使用可能な状態をかんたんに作れるというわけです。

Nuxt.jsを動かしてみる

ではさっそくNuxt.jsを準備し、実際に動かしてみましょう。

Node.jsのバージョンを確認

お使いの環境のNode.jsのバージョンが8以上であることを確認してください。Node.jsのインストールについてこの記事では触れませんが、これからインストールされる場合はNodebrewやNodistの利用をおすすめします。

プロジェクト作成〜開発サーバー起動

以下のコマンドを実行してください。

# Nuxt.jsプロジェクト作成パッケージをインストール
$ npm i -g create-nuxt-app

# プロジェクトのファイルを展開するディレクトリまで移動
$ cd path/to/project-directory

# Nuxt.jsプロジェクト作成
# “Use eslint”にはyesを選択。設定は変更可能なのでEnter連打でもOK
$ create-nuxt-app

# 開発用ローカルサーバー起動（停止は Control + C）
$ npm run dev

ブラウザを立ち上げ、http://localhost:3000 にアクセスしてみてください。下の画像と同じ画面が表示されていれば、Nuxt.jsプロジェクトの作成は成功です！

create-nuxt-app

機能を確認してみよう

すべては紹介しきれませんが、Nuxt.jsのおかげで有効となっている機能をいくつか確認してみましょう。

JavaScript関連機能

まずはJSから見ていきます。

以下はpages/index.vueのscriptタグ部分です。最新文法、依存関係が解決されていることを確認できます。

<script>
// 別ファイルとの依存関係が有効となっている（Bundle）
import Logo from '~/components/Logo.vue'

export default {
  components: {
    // ES2015で追加されたオブジェクトの省略記法が有効となっている（Transpile）
    Logo
  }
}
</script>

ここに新たなコードを追記し、保存してみてください。

サーバーが起動したままであれば、リロードせずとも自動的に更新が反映されていることが確認できるかと思います。

<!-- リロードしなくても、5秒後、コンソールにfoobarと出力される（Hot Module Replacement） -->

<script>
import Logo from '~/components/Logo.vue'

// [追記部分]
// 関数のアロー記法が有効となっている（Transpile）
setTimeout(() => { console.log('foobar') }, 5000)
// [追記部分ここまで]

export default {
  /* 省略 */
}
</script>

CSS関連機能

続いてCSSも見てみましょう。

以下はpages/index.vueのstyleタグの一部です。ここにも新しいコードを追記し、保存してみてください。最新文法の解決が確認できると同時に、JSと同様、リロードせずとも自動的に更新が反映されていることがわかるかと思います。

<!-- リロードしなくても、タイトル文字列が更新される（Hot Module Replacement） -->

<style>
/* 省略 */
/* [追記部分] */
:root {
  --exclamation: '!'
}
/* [追記部分ここまで] */
.title
{
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
  /* [追記部分] */
  /* ネスト記法が有効となっている（Transpile） */
  &::before {
    content: 'Happy ';
  }
  /* 古いブラウザでも有効となるよう、変数が予め解決されている（Transpile） */
  &::after {
    content: var(--exclamation);
  }
  /* [追記部分ここまで] */
}
/* 省略 */
</style>

また、下記の部分では接頭辞が自動付与されていることも確認できます。

<style>
/* 省略 */
.container
{
  min-height: 100vh;
  display: flex;
  /* ブラウザの開発者ツールで以下のスタイルを確認すると、接頭辞付きの設定が自動で追加されている（Auto Prefix） */
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* 省略 */
</style>