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

関連記事

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

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • Vuex actionでの非同期処理をasync/awaitの実装をする

    Vuexのactionではajaxなどの非同期処理を実装しますが、非同期処理をasync,awaitで実装する方法を紹介します。特別な制御はいりません。ファンクションを定義する箇所にasyncを追加し...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • Electronとvue-routerを併用するときの注意点

    Electronとvue-routerを使うときに、ページ制御がうまく行かないときはrouterの設定を確認します。modeがhistoryになっているとなぜかうまく行かなかったのでhashに変更しま...


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

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


  • Vue.jsにVuexを導入する

    Vuexを導入する手順の作業メモです。Vuexを利用することにより、各コンポーネントで保持していたデータをstateにまとめられるので、ある程度規模が大きくなっても耐えられるプログラムを作成できます。...


  • Vuex stateを作成して各コンポーネントで参照する

    実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。


  • Vuex mutationでstateの値を変更する

    stateはmutationの処理でしか変更できません。コンポーネントからmutationを実行し、stateの値を更新する方法を紹介します。mutationを作成するにあたって、最初にmutatio...


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

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