Nuxt.js で始める Webサイト制作

セットアップ

動画講座はこちら

Node.js の実行環境を用意して、Nuxt.js 利用するためのセットアップを行いましょう。

今回、サイト制作では、Twitter Bootstrapを利用しますので、 Twitter Bootstrapの設定も同時に行い、画面にHello Worldを出力してみましょう。

# Node環境のセットアップ

Nuxt.jsの環境構築にはNode.jsを利用します。

PC上にNode.jsの実行環境がセットアップ済みかを確認するには、 ターミナル上から node -v コマンドを実行します。

$ node -v

コマンドを実行して、バージョン番号が正常に表示されたら、Node.jsの実行環境はセットアップ済みです。

以下のような形で command not found と表示される場合、 新しくNode.jsのセットアップが必要です。

$ node
-bash: node: command not found

Node.jsの最新版は、以下のURLからファイルをダウンロードして、インストールすることが出来ます。

https://nodejs.org/ja/download/

TIP

手元のNode.jsのバージョンが上記のサイトで配布されているバージョンよりも 大幅に低い場合、同様に上記のサイトからダウンロードを行い、最新版のNode.jsへのセットアップを行ってください。

# Nuxt.js環境のセットアップ

Node.js環境のセットアップが完了したら、Nuxt.jsのプロジェクトをセットアップを始めていきましょう。

Nuxt.jsのプロジェクトは npx コマンドを利用して、 以下のようなコマンドで、すすめることが出来ます。

$ npx create-nuxt-app nuxtjs_website

コマンドを実行すると以下のように ? マークとともにいくつかの質問が展開されます。 Enterキーを押して進めると、nuxtjs_website フォルダが作成され、 開発に必要なファイル群の一式がダウンロードされます。

$ npx create-nuxt-app nuxtjs_website
create-nuxt-app v2.15.0
   Generating Nuxt.js project in sample_nuxtjs_website
? Project name (nuxtjs_website)

TIP

手元にyarnのセットアップを行っていない場合、 Choose the package manager の質問では、npm を選択するようにしてください。

ダウンロードが完了したら、cd コマンドで作成されたフォルダに移動し、 npm run dev コマンドで開発用のサーバを起動します。

$ cd nuxtjs_website
$ npm run dev

表示されるアドレス http://localhost:3000 にブラウザでアクセスして、 Nuxt.jsの初期画面が表示されれば準備は完了です。

# Nuxt.jsを利用したサイト制作

実際にサイトのコーディングを進めるにあたって、 まずは作成されたフォルダ nuxtjs_website を適当なエディタで開いてみましょう。

Nuxt.jsでプロジェクトのセットアップを行った場合、 いくつかのファイルやフォルダ群が用意されますが、主に利用するのは以下の3つです。

  • layout : サイト全体で利用する共通のテンプレート
  • pages : 個々のページで利用するサイト情報
  • nuxt.config.js : プロジェクト全体の設定ファイル

まずは、サイト上でTwitter Bootstrapを利用するために、 head要素で、Bootstrapの読み込みを行います。

Nuxt.jsのプロジェクトでは、head要素の中身はnuxt.config.jsで管理されるため、 nuxt.config.jsの head.link のセクションに以下のような形でBootstrapの記述を追加します。

module.exports = {
  // ...
  head: {
    // ...
    link: [
      { rel: 'stylesheet', href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" },
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
}

次に、画面に表示するページのコーディングを進めましょう。 デフォルトで表示されているNuxt.jsの初期画面は、以下の2つのファイルから出力されています。

  • layout/default.vue
  • pages/index.vue

まずは共通のレイアウトとして機能している layout/default.vue を以下のように書き換えましょう。

<template>
  <div>
    <nuxt />
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

TIP

layout はページ全体の共通レイアウトを記述するファイルです。

次に、 pages/index.vue を以下のように変更します。

<template>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
}
</script>

<style>

</style>

TIP

pages は個々のページ要素を記述するファイルです。

画面の中央に、 Hello Worldの文字が表示されれば、準備は完了です。

実際のWebサイトのコーディングを進めていきましょう。

# Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

  • 開発用のサーバは正しく起動していますか？ pages/index.vue 上での変更が、即座にブラウザに反映されることを確認しておきましょう。
  • Bootstrapのセットアップは正しく行えていますか？ pages/index.vue 上で .btn.btn-light などの要素を配置して、Bootstrapの装飾が適用されることを確認しておきましょう。

# 関連リンク

Nuxt.js のセットアップ

https://ja.nuxtjs.org/guide/installation

vue ファイルとページの作成 →