JavaScript
vue.js

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

本記事ではVue.jsコンポーネント入門の初回として、開発環境を設定します。

Vue.jsでコンポーネントを開発する方法は大きく2種類あります。

  • Vue.componentで作成する方法
  • 単一ファイルコンポーネント(SFC = Single File Component)と呼ばれる手法

本記事では、実際の開発現場で主流と思われる単一ファイルコンポーネントについて扱います。

前提

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

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

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

Webpackで環境設定 :package:

はじめに

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

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

ただ今回は説明内容をできるだけVueコンポーネントに絞りたいので、Webpackで必要最小限の設定を書くことにします。

設定ファイルの作成

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

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

npmの初期化コマンドを実行します。

$ npm init -y

そうすると package.json ファイルが生成されますので、以下の内容に書き換えてください。

package.json
{
  "name": "vue-component-tutorial",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

devDependenciesdependencies に記載されたパッケージをインストールします。

$ npm install

さて、続いて以下の内容で webpack.config.js ファイルを作成してください。

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

また、以下の内容で .babelrc ファイルを作成してください。

.babelrc
{
  "presets": [ "env" ]
}

この時点でプロジェクトディレクトリはこんな感じになっているはずです。

vue-component-tutorial
├─ node_modules
├─ .babelrc
├─ package.json
└─ webpack.config.js

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
  }
})

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

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

src/components/Hello.vue
<template>
  <p>Hello, {{ name }}</p>
</template>

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

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

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

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

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

HTML

HTMLファイルは以下の内容で作成します。

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="./dist/main.js"></script>
</body>
</html>

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

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

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

"./dist/main.js" というファイルは今はまだありませんが、あとでWebpackでJavaScriptファイル(+vueファイル)をバンドルした結果、main.js が出力されます。dist ディレクトリも自動的に生成されます。

ここまででプロジェクトディレクトリはこんな感じになっているはずです。

vue-component-tutorial
├─ node_modules
│
├─ src
│  ├─ components
│  │  └─ Hello.vue
│  └─ index.js
│
├─ index.html
│
├─ .babelrc
├─ package.json
└─ webpack.config.js

動作確認

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

$ ./node_modules/.bin/webpack --mode=development

Hash: 95732735633bed210a9e
Version: webpack 4.2.0
Time: 1836ms
Built at: 2018-3-25 02:13:36
  Asset     Size  Chunks             Chunk Names
main.js  355 KiB    main  [emitted]  main
Entrypoint main = main.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
[./src/index.js] 531 bytes {main} [built]
    + 18 hidden modules

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

ブラウザでHTMLファイルを見てみましょう。
ちなみにローカルWebサーバーの立ち上げ方はこちらの記事も参考にしてください。

スクリーンショット 2018-03-25 2.17.00.png

問題なくコンポーネントがレンダリングされていますね :open_hands: :tada:


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

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

関連記事

Vue.jsコンポーネント入門

Vue.js入門