Nuxt.jsプロジェクトの内容
create-nuxt-appで生成できるプロジェクトの内容を、以下で説明します。
プロジェクトで利用できるコマンド
生成されたプロジェクトでは、表8のコマンドが利用できます。
| No. | コマンド | 内容 |
|---|---|---|
| 1 | npm run dev | 開発用にプロジェクトを実行 |
| 2 | npm run build | 本番用にプロジェクトをビルド |
| 3 | npm run start | ビルドされた本番用プロジェクトを実行 |
| 4 | npm run generate | 静的ファイルを生成する |
No.1は開発用の実行コマンドで、実行中にファイルを変更すると、Webページを更新して変更を反映します。No.2は本番用にビルドするコマンドで、ビルド結果はNo.3のコマンドで実行できます。No.4は静的ファイルを生成するコマンドで、詳細は後述します。
プロジェクトに含まれるファイルやフォルダー
プロジェクトに含まれる、Nuxt.js固有のファイルやフォルダーの概要を表9に示します。詳細は本連載で順次説明していきます。
| 項目名 | 種類 | 説明 |
|---|---|---|
| nuxt.config.js | ファイル | Nuxt.jsの設定ファイル |
| pages | フォルダー | ページのファイル（*.vue）を配置 |
| components | フォルダー | コンポーネントのファイル（*.vue）を配置 |
| assets | フォルダー | アセット（CSSや画像ファイルなど）を配置 |
| layouts | フォルダー | レイアウト（Webページのテンプレート）を配置 |
| middleware | フォルダー | ミドルウェア（ページレンダリング前に実行される処理）を配置 |
| plugins | フォルダー | プラグイン（Webページ初期化時に実行される処理）を配置 |
| static | フォルダー | 静的ファイル（robots.txt、favicon.icoなど）を配置 |
| store | フォルダー | Vuexストア（状態を保持するオブジェクト）を配置 |
デフォルトで生成されるページやコンポーネントの内容
生成されたプロジェクトに含まれるページと、ページの一部分に対応するコンポーネントのファイルについて、以下で説明します。pages/index.vueが、最初に表示されるインデックスページのファイルです。
<template><!-- テンプレート …（1）-->
<section class="container">
<div>
<logo /><!-- コンポーネント …（1a）-->
（略）
</div>
</section>
</template>
<script><!-- スクリプト …（2）-->
import Logo from '~/components/Logo.vue' // 参照 …（2a）
export default {
components: {
Logo // 公開 …（2b）
}
}
</script>
<style><!-- スタイル …（3）-->
（略）
</style>
*.vueファイルでは、<template>タグ（1）内にテンプレート（表示内容のHTML）、<script>タグ（2）内にスクリプト（JavaScript）、<style>タグ（3）内にスタイル（CSS）を、それぞれ記述します。（1a）の<logo>タグは、ロゴを表示するコンポーネントに対応します。コンポーネントを実装したcomponents/Logo.vueを（2a）で参照して（2b）で利用できるようにしています。
コンポーネントは、ページと同じ形式の*.vueファイルで記述します。ロゴを表示するコンポーネントのファイル（components/Logo.vue）をリスト4に示します。ここでは、ロゴを構成する三角形に対応するdiv要素が<template>に、それらのスタイルやアニメーションの指定が<style>に記述されています。詳細はサンプルコードを参照してください。
<template>
<div class="VueToNuxtLogo">
<div class="Triangle Triangle--two" />
<div class="Triangle Triangle--one" />
<div class="Triangle Triangle--three" />
<div class="Triangle Triangle--four" />
</div>
</template>
<style>
（略）
</style>
Nuxt.jsのページやコンポーネントの概要をまとめると、以下の通りになります。
- ページやコンポーネントは*.vueファイルに記述する
- ページのファイルはpages、コンポーネントのファイルはcomponentsの各フォルダーに配置する
- *.vueファイルは<template>、<script>、<style>の部分に分かれる
Vue.jsの基本的な実装方法
*.vueファイルの基本的な実装方法を、図4のサンプルで説明します。このサンプルは、テキストボックスに入力した内容をそのまま画面に表示します。テキストボックスの内容を変更すると、リアルタイムで画面に反映されます。
このサンプルのindex.vueは、リスト5の通りです。
<template>
<div>
<h1>Hello {{name}}!</h1> <!-- nameの表示 …（1） -->
<input v-model="name"><!-- nameの入力 …（2）-->
</div>
</template>
<script>
export default {
data() { // ページに表示するデータの指定 …（3）
return {
name: 'World' // nameの初期値 …（4）
}
}
}
</script>
テンプレートの「{{name}}」（1）は、name変数の内容を表示することを表します。（2）では、<input>タグに「v-model="name"」と指定して、name変数の値とテキストボックスの内容が双方向に同期（バインディング）されるようにしています。「v-model」のように、要素の属性に指定して機能を設定する記述を、ディレクティブと呼びます。
スクリプトでは、「export default」記述で、テンプレートで利用する実装をエクスポートします。このサンプルでは、画面に表示するデータを指定するdata関数（3）で、name変数の初期値を設定します（4）。
より詳細なVue.jsの実装方法は、本連載の次回以降で説明します。
