zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.jsを学習する上で知っておきたいES2015の文法

Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。

Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。

変数のスコープ

従来のJavaScriptではforifの中でのみ使用可能なブロックスコープの変数が使えませんでした。

varをつけたりつけなかったりで、グローバル変数や関数内でのみ利用可能なローカル変数を定義していて、意外とあまり良くわからずになんとなく使われていた気がします。

ES2015では、他の言語で親しみがあるであろうブロックスコープの変数を定義できるようになります。

const foo = 'abc' // 再代入不可のconst変数を定義
foo = 'def' // 再代入できないためエラーになる
const obj = {
  bar: 123
}
// objectの要素の代入は可能
obj.bar = 456;
if (huga === 1) {
  let foo = 'abc' // ブロック変数を定義
  foo = 'def' // 再代入は可能
  console.log(foo); // defと出力される
}
console.log(foo); // 参照できないためエラーになる

これにより、他の言語と同じようにスコープがはっきりして、実装しやすくなります。

object

ショートハンドプロパティ

変数名とプロパティ名が同じ場合は省略できます。

const name = 'abc';
const age = 30;
const person = {
  name,
  age
};

// 従来の方法
var person = {
  name: name,
  age: age
};

functionの省略

objectの中にfunctionを定義する場合は「function」の文言を省略して簡潔に実装できるようになります。

これはコンポーネントを実装する上で欠かせないので特に覚えておく必要があります。

{
  methods: {
    update () {
      console.log('update');
    },
    insert () {
      console.log('insert');
    }
  }
}

// 従来の方法
{
  methods: {
    update: function () {
      console.log('update');
    },
    insert: function () {
      console.log('insert');
    }
  }
}

注意点

ES2015ではアローファンクションが使えますが、以下のようにコンポーネント内でアローファンクションを使ってしまうとthisのスコープが変わってしまうので、vueコンポーネントの中では注意が必要です。

{
  methods: {
    update () {
      this.foo // 正しい
    },
    update: function () {
      this.foo // 正しい
    },
    update: () => {
      this.foo // 間違い thisが想定された動きにならない
    }
  }
}

スプレッド演算子

Vuexを使う場合はmapStatemapMutationなどで使用することになります。

Vuex stateを作成して各コンポーネントで参照するで紹介したように、スプレッド演算子はstage-3なのでbabelの設定が必要です。

配列の中に配列を展開できます。下記のサンプルのように、展開というより「埋め込む」といったほうがわかりやすいかもしれません。

const array = [1, 2, 3];
const array2 = [...array, 4, 5, 6];
console.log(array2); // [1, 2, 3, 4, 5, 6]

// Vuex
// mapMutationのファンクションで取得した配列をmethodsの配列に埋め込む
{
  methods: {
    ...mapMutation({
      foo
    }),
    update () {
      console.log('update');
    }
  }
}

objectの引数の受け取り

主にVuexactionmutationで使われます。


const param = {
  message: 'foo',
  id: 123
}

update(param); // ファンクションをコール

function update ({ message }) { // objectの中で使用するもののみ受け取る
  console.log(message); // foo
  console.log(id); // undefined
};
// 従来の方法
function update (param) {
  console.log(param.message); // foo
  console.log(param.id); // 123
};

続きを表示

関連記事

  • gulpをES2015で実装する

    gulpをES2015で実装するための手順です。babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。


  • vueコンポーネントでvue-routerのページ制御を行う

    vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • vue-routerを導入してSPAを作成する

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...