おみくじアプリをES6で書いてみる

JavaScriptでおみくじを作ろうをES6で書いてみました。

概要

復習がてらドットインストールの「JavaScriptでおみくじを作ろう」をES6で書いてみました。

main.js

(() => {
  'use strict';

  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    const num = Math.random();

    if (num < 0.01) {
      btn.textContent = '大吉';
    } else if (num < 0.1) {
      btn.textContent = '末吉';
    } else {
      btn.textContent = '中吉';
    }
  });

  btn.addEventListener('mousedown', () => {
    btn.classList.add('pushed');
  });

  btn.addEventListener('mouseup', () => {
    btn.classList.remove('pushed');
  });
})();

今回のES6への書き換えポイント

変数宣言

ES6では「const」や「let」による変数宣言が可能です。再代入が必要な場合を除いて基本的には「const」を使う、というのが良いそうです。参考var, let, constの使い分けについて

• const　再代入不可
• let　　再代入可能

アロー関数

「function」式より短い構文で関数を書くことができます。

ES5

btn.addEventListener('mousedown', function() {
    this.classList.add('pushed');
  });

ES6

btn.addEventListener('mousedown', () => {
    btn.classList.add('pushed');
  });

アロー関数内のthisの扱い

通常の無名関数とは「this」の扱いが異なります。「this」の参照は関数の定義時に決定されます。その為、下記のようにアロー関数で「function」式のように「this」を扱うと「undefined」となります。

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {

    const num = Math.random();

    if (num < 0.01) {
      this.textContent = '大吉';
    } else if (num < 0.1) {
      this.textContent = '末吉';
    } else {
      this.textContent = '中吉';
    }
  });

上記の状態を回避するには、下記のようにします。

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {

    const num = Math.random();

    if (num < 0.01) {
      btn.textContent = '大吉';
    } else if (num < 0.1) {
      btn.textContent = '末吉';
    } else {
      btn.textContent = '中吉';
    }
  });

後書き

非常に簡単な内容ではありますが、細かいところからES6で書き直す様に社内でも共有していきたいと思います。
(モダンブラウザではほとんどのES6の構文が対応してきていますね。)

参考にさせていただきました

• var, let, constの使い分けについて
• JavaScriptの「this」は「4種類」？？

GitHub

GitHub