2018.03.24

Vue.jsコンポーネント入門 (1) 環境設定

前提

PC	ブラウザ	Node	npm	Vue
macOS 10.12	Firefox Quantum	9.3.0	5.5.1	2.5

Nodeはインストールされているものとします。
npmについても利用したことがある前提で説明を進めます。

また、記事中ではES2015以降のJavaScriptを利用します。
まだあまり馴染みのない方には以下の参考書籍がオススメです。

Webpack で環境設定

はじめに

SFA を利用した開発を行うためには、Webpack などのモジュールバンドルや Babel によるトランスパイルが必要です。後ほど紹介しますが .vue という独自拡張子・独自構成のファイルを使用するため、最終的には実行可能な JavaScript ファイルにビルドする必要があります。

本格的なバンドラーの設定作業は複雑なので、本来であれば自分で設定ファイルを書く手間を省くためにvue-cliなどのツールを活用することをお勧めします。

ただ今回は説明内容を Vue コンポーネントの基本的な機能に絞りたいので、Webpack で必要最小限の設定を用意します。

まずは任意の場所にプロジェクトディレクトリを作成してください。

$ mkdir vue-component-tutorial # もちろんディレクトリ名はなんでも構いません
$ cd vue-component-tutorial # 作成したディレクトリに移動します

Webpack の設定は書いておきましたので、clone して使ってください。リポジトリはこちらです。

$ git clone git@github.com:MasahiroHarada/vue-components-starter-kit.git chapter-1
$ cd chapter-1

以下のディレクトリ構成になっているはずです。

.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── components
│   └── index.js
└── webpack.config.js

必要なパッケージをインストールします。

$ npm install

WebpackやBabel自体についての説明や webpack.config.js の説明は割愛します。説明してくれているサイトはたくさんあるので、初めて聞いたという人は調べてみてください。

ここまでで設定作業は完了です。JavaScript と HTML を用意して動作を確認していきましょう。

JavaScript & Vue

まず src というディレクトリの中に index.js を作成します。

src/index.js

import Vue from 'vue'

// Components
import Hello from './components/Hello.vue'

new Vue({
  el: '#app',
  components: {
    hello: Hello
  }
})

（詳しい説明は次回以降の記事で行います。本記事ではとりあえず環境設定して動くまでを見ていきます。）

続いてvueファイルは src/components ディレクトリに作成してください。

src/components/Hello.vue

<template>
  <p>Hello, {{ name }}</p>
</template>

<style scoped>
h1 {
  color: teal;
}
</style>

<script>
export default {
  data () {
    return {
      name: 'world'
    }
  }
}
</script>

.vue という、.js でも .jsxでも .html でもない独自の拡張子を持つファイルが登場しました。.vueファイルは一つのVueコンポーネントを表します。

内容を見ていただくと、一見HTMLのような感じで、template と style と script という3部構成になってますね。一つのファイルでコンポーネントのマークアップ（テンプレート）と見た目（スタイル）と挙動（スクリプト）を記載できるということです。単一のファイルで完結したコンポーネントを表現できるため、単一ファイルコンポーネントと呼ばれるわけです。

詳しい説明はまた次回以降の記事に譲るとして、次はHTMLファイルを作成しましょう。

HTML

HTML ファイルに <hello></hello> を追記します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Tutorial</title>
</head>
<body>
  <div id="app">
    <hello></hello>
  </div>
  <script src="/bundle.js"></script>
</body>
</html>

index.js でVueインスタンスを作成した際に、el: '#app' と記述したため、<div id="app"> の中がVueアプリケーションとして認識されます。

そして <hello></hello> というタグが登場していますが、その正体は Hello.vue で作ったコンポーネントです。コンポーネントはつまり「独自定義タグ」と表現して差し支えないでしょう。

もう一点注意していただきたいのは、JavaScriptファイルを指定している箇所です。

bundle.js というファイルは今はまだありませんが、あとで Webpack で JavaScript ファイル（＋ vue ファイル）をバンドルした結果、bundle.js が出力されます。

動作確認

準備が整ったので、ビルドを実行しましょう。

$ npm run build

ビルドが成功したら public/bundle.js が生成されているはずです。

ブラウザで HTML ファイルを見てみましょう。

$ npm run serve

http://localhost:9000 でローカルサーバーが立ち上がります。

緑色で「Hello, world」と表示されていれば問題なくコンポーネントがレンダリングできています

npm スクリプト

最後に、リポジトリから clone した環境に用意してある npm スクリプトの一覧を掲載します。次回以降の記事で本環境を使用してサンプルアプリを作成する際も、以下のスクリプトを使用してください。

コマンド	処理
`npm run build`	Webpack ビルド実行
`npm run serve`	ローカル Web サーバー起動
`npm run start`	ビルドしてからサーバー起動

今回は単一ファイルコンポーネントを利用したVueアプリケーション開発のための環境設定を説明しました。

次回以降でコンポーネントについて説明を進めます。