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の中...


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

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


  • Vue.js FontAwesome5を導入する

    webpackを使ったvue.jsのプロジェクトにFontAwesomeを導入します。webpackなどの環境は作成済みとします。最初に、以下のパッケージをインストールします。以下のようにインストール...


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

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


  • Vue.jsにVuexを導入する

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


  • Vue.js フォルダ内のコンポーネントをまとめてグローバルコンポーネントに登録する

    特定のフォルダ内にあるシングルファイルコンポーネントを、他のコンポーネントからもグローバルに参照できるように設定します。webpackを使用している前提とします。sharedフォルダにあるコンポーネン...


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

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


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

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


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

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


  • vue-router 現在のパスによってスタイルを変更する

    vue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。vue-ro...