JQ Blog

'vue-resource'とES6を使ってTodoを作成

環境

  • Rails
    • 5.1.1
  • Vue.js
    • 2.3.4

ES6について

Railsでwebpackerを使ってVue.jsを設置した場合、いろんなライブラリがdefaultでインストールされる。その中でbabel-loaderというライブラリがある。
Package.jsonを確認してみると、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

{
  "name": "todo_example",
  "private": true,
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "js-yaml": "^3.8.4",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.4",
    "precss": "^1.4.0",
    "rails-erb-loader": "^5.0.2",
    "resolve-url-loader": "^2.0.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "vue": "^2.3.4",
    "vue-loader": "^12.2.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^2.6.1",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  }
}

babel-loaderが置いてることが確認できる。
このbabel-loaderをconfig/webpack/loadersにあるbabel.jsで読み込んでES6をトランスパイルしてくれる。
safariはまだES6をサポートしてくれないのでsafariで試してみる。
まず下記のようにbabel.jsのloaderにbabel-loaderを指定したときは

1
2
3
4
5

module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}


画像のように正しくリストが表示されてる。 しかし、loaderのところを一回消してみると

1
2
3
4
5

module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  // loader: 'babel-loader'
}


JSをES6で書いたので何も表示されてないことを確認できる。

もう一つ試してみる。
ES6的なclassを定義してVueコンポーネントでそのclassの関数を呼び出してみる。

1
2
3
4
5
6
7

class TodoLog {
  constructor(log){
    this.log = log
  }

  printLog = () => console.log(this.log)
}

シンプルにこういうclassを定義してVueコンポーネントのmountedで呼び出すと

1
2
3
4
5

mounted: function() {
  console.log('TodoList is mounted.')
  const todoLog = new TodoLog('constructor is called.')
  todoLog.printLog()
}

TodoLogのprinLogという関数が呼び出されてブラウザにlogが出力されたのが確認できる。

アロー関数

vueでアロー関数を使うときは注意しなきゃいけないことがある。
アロー関数は既存のメソッドと違ってthisが変わる。関数自体が親コンテキストにバインディングされているためVueインスタンスにはならない。
thisでVueのコンポーネントを呼ぶ処理をしたいならアロー関数は使ってはならない。
Vueのコンポーネントのmountedをアロー関数を例にして試してみると既存のfunction()だとちゃんとVueコンポーネントが出力されるが

1
2
3
4
5
6
7
8

mounted: function() {
    console.log('TodoList is mounted.')
    console.log(this) # thisを出力してみる
    var that = this
    this.$http.get(this.url).then((response) => {
      that.todos = response.data
    })
},


アロー関数を使った場合はVueコンポーネントが出力されないし、$httpもエラーを出す。

1
2
3
4
5
6
7
8

mounted: () => {
    console.log('TodoList is mounted.')
    console.log(this) # thisを出力してみる
    var that = this
    this.$http.get(this.url).then((response) => {
      that.todos = response.data
    })
},

vue-resource

install

まずnpmでvue-resourceをインストールする。

1

$ npm install vue-resource --save

yarnを使ってもOK。

1

$ yarn add vue-resource

使い方

それからjsでimportして使う。

1
2
3
4
5
6
7
8
9
10

import Vue from 'vue/dist/vue.min'
import VueResource from 'vue-resource/dist/vue-resource.min'
Vue.use(VueResource)

var that = this
this.$http.get('何かのurl').then((response) => {
  that.todos = response.data
}, response => {
  // error callback
})

参考

Using ES6 arrow functions in Vue.js
ES6の新機能「class構文」 – 基礎編 –