カテゴリー別アーカイブ: ES2015

ES2015 変数を直接プレインオブジェクトのキーにする

ECMAScript 5th までは変数を直接プレインオブジェクトのキーにすることはできませんでした.

var key = 'foo';

var bar = {key: 'bar'};  // キーが文字列「key」と解釈される => {key: 'bar'}

これを回避するには, ブラケットを使うしかありませんでした.

var bar = {};
var key = 'foo';

bar[key] = 'bar';

ES2015では, キーとなる変数をブラケットで囲むことで, 変数をプレインオブジェクトのキーにすることが可能です.

const key = 'foo';

const bar = {[key]: 'bar'};  // => {foo: 'bar'}

ES2015 ESLint no-case-declarationsを解決する方法

switchブロックの中で, letやconstで変数を定義すると, no-case-declarationsにひかかってしまいます.

switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    case 3:
        function f() {}
        break;
    default:
        class C {}
}

これを回避するには, ブロック内で変数を定義するようにします.

switch (foo) {
    case 1: {
        let x = 1;
        break;
    }
    case 2: {
        const y = 2;
        break;
    }
    case 3: {
        function f() {}
        break;
    }
    default: {
        class C {}
    }
}

gulpでES2015 Modulesを利用可能にする

まずは, 必要なモジュールのインストール

$ npm install --save-dev browserify babelify vinyl-source-stream

gulpfile

var gulp       = require('gulp');
var browserify = require('browserify');
var babelify   = require('babelify');
var source     = require('vinyl-source-stream');

gulp.task('compile', function() {
    return browserify('src/main.js', {debug: true})
               .transform(babelify)
               .bundle()
               .on('error', function(error) {
                   console.error(error.message);
               })
               .pipe(source('bundle.js'))
               .pipe(gulp.dest('build/'));
});

試してみます.

src/main.js

import Greeter from './Greeter.js';

const greeter = new Greeter('Hello World');

console.log(greeter.greet());  // Hello World

src/Greeter.js

class Greeter {
    constructor(message) {
        this.message = message;
    }

    greet() {
        return this.message;
    }
}

export default Greeter;
$ node build/bundle.js
Hello World

以上です

gulpでeslint できる環境をつくる

eslintでリンティングできる環境を作成します.

1. gulp-eslintのインストール

$ npm install --save-dev gulp-eslint babel-eslint

2. .eslintrcの作成

{
  "parser": "babel-eslint",
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  },
  "extends": [
    "eslint:recommended"
  ]
}

3. gulpfileにタスクを追加

var gulp   = require('gulp');
var eslint = require('gulp-eslint');

gulp.task('lint', function() {
    return gulp.src('src/*.js')
               .pipe(eslint())
               .pipe(eslint.format())
               .pipe(eslint.failAfterError());
});

gulp + Babel で ES2015を利用できる環境をつくる

1. gulpとgulp-babel, babel-preset-es2015をインストールします

$ npm install --save-dev gulp gulp-babel babel-core babel-preset-es2015

2. gulpfile.jsの作成

var gulp   = require('gulp');
var babel = require('gulp-babel');

gulp.task('compile', function() {
    gulp.src('src/*.js')
        .pipe(babel())
        .pipe(gulp.dest('build/'));
});

3. プロジェクトのルートに.babelrcを作成

{
  "presets": ["es2015"]
}

以上で, ES2015を利用できる環境ができました.
試してみましょう.

src/test.js

  let greet = () => 'Hello World !!';

console.log(greet());

これをコンパイルします.

$ gulp compile

build/test.js

'use strict';

var greet = function greet() {
  return 'Hello World !!';
};

ES2015 Generators で遊んでみた

ES2015のGeneratorsで階乗を算出するコードを書いてみた.

ES2015のコード (Chromeであればそのまま動作します)

let factorial = {
  [Symbol.iterator]: function*(max) {
    let current = 1;

    for (let counter = 1; counter <= max; counter++) {
      current *= counter;
      yield current;
    }
  }
};

let f = factorial[Symbol.iterator](5);

for (let e = f.next(); !e.done; e = f.next()) {
    console.log(e.value);
} 

ES2015 Iterators で遊んでみた

ES2015のIteratorsで階乗を算出するコードを書いてみた.

まずは, ES2015のコード (Babel)

let factorial = {
  [Symbol.iterator](max) {
    let current = 1;
    let counter = 1;

    return {
      next() {
        current *= counter;
  
        if (counter > max) {
          return {done: true, value: current}
        } else {
          counter++;

          return {done: false, value : current}
        }
      }
    }
  }
};

let f = factorial[Symbol.iterator](5);

for (let e = f.next(); !e.done; e = f.next()) {
  console.log(e.value);
}

ES5で出力されたコード

"use strict";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var factorial = _defineProperty({}, Symbol.iterator, function (max) {
  var current = 1;
  var counter = 1;

  return {
    next: function next() {
      current *= counter;

      if (counter > max) {
        return { done: true, value: current };
      } else {
        counter++;

        return { done: false, value: current };
      }
    }
  };
});

var f = factorial[Symbol.iterator](5);

for (var e = f.next(); !e.done; e = f.next()) {
  console.log(e.value);
}

for..of を使って無限に階乗を出す場合 (当然打ち切る処理は入る).

ES2015

let factorial = {
  [Symbol.iterator]() {
    let current = 1;
    let counter = 1;

    return {
      next() {
        current *= counter;
        counter++;

        return {done: false, value : current}
      }
    }
  }
};

for (let e of factorial) {
    if (e > 10000) {
        break;
    }

    console.log(e);
}

ES5

"use strict";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var factorial = _defineProperty({}, Symbol.iterator, function () {
  var current = 1;
  var counter = 1;

  return {
    next: function next() {
      current *= counter;
      counter++;

      return { done: false, value: current };
    }
  };
});

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = factorial[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var e = _step.value;

    if (e > 10000) {
      break;
    }

    console.log(e);
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}