これまでのJavaScriptでは、複雑な文字列処理はテンプレートエンジンを使うことが一般的でした。しかしECMAScript 2015（ECMAScript 6）では、パワフルなTemplate literalが標準で利用できるようになりました。この新たに追加されたTemplate literalについて、概要とサンプルコードを紹介します。

これまでの文字列組み立て

ES6で追加されたTemplate literalを使うと、文字列をより柔軟に、シンプルに組み立てることができます。例えば、これまでのJavaScriptでは、文字列を組み立てるために、例えば以下のような方法を取る必要がありました。

var name = 'john';
var country = 'japan';

var str1 = 'Hello! My name is ' + name + '. I live in ' + country + '.';

var str2 = [
  'Hello! My name is ',
  name,
  '. I live in ',
  country,
  '.'
].join('');

console.log(str1); // "Hello! My name is john. I live in japan."
console.log(str2); // "Hello! My name is john. I live in japan."

文字列の断片を複数作り、+やconcatでつなぎ合わせたり、配列に突っ込んでjoinしたりなどといった方法です。単純なテキスト結合であればことたりますが、ある程度複雑な処理を行う場合、可読性の欠如や、複数行に渡る文字列を簡潔に表現できないというような点が問題になってきます。

Template literalを使った文字組み立て

Template literalを使えば、上記の文字組み立てを、以下のように書くことができます。

var name = 'john';
var country = 'japan';

var str1 = `Hello! My name is ${name}. I live in ${country}.`;

console.log(str1); // "Hello! My name is john. I live in japan."

``で囲まれた部分がTemplate literalです。この中で${name}、${country}という部分がありますが、ここはそれぞれ、"john"、"japan"と、変数の内容に置き換わります。このように、Template literal内の${}部分は、その内容が評価された結果に置き換えられ、最終的な処理結果が文字列として変数str1に格納されます。

式の展開

${}の中には、変数だけでなく、式を入れることができます。例えば、以下の例を見て下さい。

var str1 = `今月: ${(new Date).getMonth()+1}月`;

console.log(str1); // "今月: 10月"

上記例では、Dateを利用し、現在の月を表示させています。(new Date).getMonth()+1の結果は現在の月で、例えばこの原稿執筆時では10となりますが、このような計算結果を、あらかじめ変数に入れておかずとも、${}内で展開させることも可能です。

JavaScriptを用いて複雑なテキストの組み立て処理を行いたい場合、Handlebarsやmustacheといった、文字列処理を抽象化したテンプレートエンジンが利用されてきました。

• Handlebars.js: Minimal Templating on Steroids
• {{ mustache }}

このようなライブラリを利用すれば、今解説したような、テンプレート的な文字列処理を行えるのですが、そういった処理がある程度、素のJavaScriptでできるようになります。

タグ付テンプレート

Template literalにはタグという機能（Tagged template strings）があります。タグを利用すると、テンプレートの処理内容を、functionで具体的に指定することができます。その仕組みを理解するため、まずは単純な例を見てみます。

var marginVal = '30px';
var paddingVal = '40px';

function tag(strings, ...values) {
  console.log(strings); // ["marginは", "で、paddingは", "です"]
  console.log(values);  // ["30px", "40px"]
  return 'returned strings!';
};

var str1 = tag `marginは${marginVal}で、paddingは${paddingVal}です`;

console.log(str1); // "returned strings!"

ここで使われているTemplate literalの頭には、tagという文字があります。これがタグの指定で、tagというfunctionで、テンプレートの処理内容を定義していることを示します。タグとして指定されたfunctionは、テンプレート内の文字列、変数を受け取ることができます。そして、このfunctionの返す値が、Template literalの処理結果となります。

もし、このTemplate literalにタグが指定されていない場合、コンソールに表示される結果は「marginは30pxで、paddingは40pxです」となりますが、タグが指定されているため、そのようにはなりません。

以降は、この例で登場しているfunction、tagを眺めながらご確認下さい。

タグとして指定されたfunctionは、第一引数に、テンプレート内で使われている文字列が、登場する順に格納された配列を受け取ります。この場合ですと、処理する対象は「marginは${marginVal}で、paddingは${paddingVal}です」で、この中で使われている文字列は、以下の3つです。

• “marginは”
• “で、paddingは”
• “です”

これらが配列になって渡ってくるのが第一引数。第二引数以降で、これら文字列の間に挟まっている${}で展開される式の結果が渡されます。ここでは、以下の値をvaluesとして受け取っています。(※1)

• “30px”
• “40px”

そして最終的にfunctionが返した値が、テンプレートの処理結果となります。この場合ですと、"returned strings!"という文字列を返しているので、str1に入るのは"returned strings!"という文字列となり、これがコンソールに表示される結果となります。

こんなふうにして、受け取った値を好きに加工してくださいというのがタグ付きテンプレートです。この例では、最終的に返した値が、受け取った値を一切使っていませんが、ひとまずのタグの仕組みの理解のためそうしています。

ちなみに、以下例のように、${}と${}の間に何も文字がない場合、空文字が渡されます。いきなり${}から始まる場合はその前に空文字が、${}で終わる場合はその後に空文字があるものとして扱われます。

var val1 = 'value1';
var val2 = 'value2';

function tag(strings, ...values) {
  console.log(strings, values);
};

var str1 = tag `${val1}`;        // ["", ""], ["value1"]
var str1 = tag `${val1}${val2}`; // ["", "", ""], ["value1", "value2"]

※1: ...valuesと引数に書かれていますが、これは、残りの引数を配列にまとめて受け取ることのできる、ES6のRest parametersという機能を利用しています。

タグを利用して大文字に変換する例

このタグを利用し、テンプレート内に埋め込まれた文字列を大文字にしてみたのが、以下の例です。

var charsToUpper = function(strings, ...values) {
  var res = '';
  for(var i=0, l=strings.length; i<l; i+=1) {
    res += strings[i];
    if(i < values.length) {
      res += values[i].toUpperCase();
    }
  }
  return res;
};

var name = 'john';
var country = 'japan';

var str1 = charsToUpper `Hello! My name is ${name}. I live in ${country}.`;
var str2 = charsToUpper `${name} ${country}`;

console.log(str1); // "Hello! My name is JOHN. I live in JAPAN."
console.log(str2); // "JOHN JAPAN"

テンプレート内で利用されている変数name、countryにはそれぞれ、"john"、"japan"と、小文字の文字列が入っていますが、テンプレートの処理結果は、"Hello! My name is JOHN. I live in JAPAN."と、大文字に置き換わっています。タグとして指定されたcharsToUpperの内容を見ると、登場する順に文字列と変数の内容を結合し、その中で、${}で埋め込まれた文字列に関しては、.toUpperCase()で大文字にしているのが確認できます。

ブログ記事用のHTMLを展開する例

最後に、ちょっと長いですが、ブログ記事のようなものをHTMLとして出力するようなケースを想定した例を紹介します。

var data = {
  title: '<探検>！ECMAScript',
  author: '佐藤鈴木&田中太郎',
  tags: [ 'HTML', 'JavaScript', 'CSS' ],
  links: [
    { 
      title: 'Mozilla Developer Network',
      href: 'https://developer.mozilla.org/ja/'
    },
    {
      title: 'Web Hypertext Application Technology Working Group',
      href: 'https://whatwg.org/'
    }
  ],
  entryBody: '<p>This is a blog post!</p>'
};

// HTMLの特殊文字を実体参照にするタグ
function htmlEscape(strings, ...values) {
  var handleString = function(str) {
    return str.replace(/&/g, '&amp;')
              .replace(/>/g, '&gt;')
              .replace(/</g, '&lt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#039;')
              .replace(/`/g, '&#096;');
  };
  var res = '';
  for(var i=0, l=strings.length; i<l; i+=1) {
    res += handleString(strings[i]);
    if(i < values.length) {
      res += handleString(values[i]);
    }
  }
  return res;
};

var html = `
  <section class="entry">
    <header>
      <h1>${htmlEscape `${data.title}`}</h1>
      <div class="author">Author: ${htmlEscape `${data.author}`}</div>
      <ul class="tags">
        ${data.tags.map(function(tag) { return `<li>${tag}</li>` }).join('\n')}
      </ul>
    </header>
    ${data.entryBody}
    <hr>
    <dl>
      <dt>関連リンク</dt>
      ${data.links.map(function(link) { return `<dd><a href="${link.href}">${link.title}</dd>` }).join('\n')}
    </dl>
  </section>
`;

console.log(html);

このコードで出力されるのは、以下の文字列です。（見やすさのためにインデントを調節しています）

<section class="entry">
  <header>
    <h1>&lt;探検&gt;！ECMAScript</h1>
    <div class="author">Author: 佐藤鈴木&amp;田中太郎</div>
    <ul class="tags">
      <li>HTML</li>
      <li>JavaScript</li>
      <li>CSS</li>
    </ul>
  </header>
  <p>This is a blog post!</p>
  <hr>
  <dl>
    <dt>関連リンク</dt>
    <dd><a href="https://developer.mozilla.org/ja/">Mozilla Developer Network</dd>
    <dd><a href="https://whatwg.org/">Web Hypertext Application Technology Working Group</dd>
  </dl>
</section>

このサンプルでは、コードの頭で用意しているオブジェクトdataの内容を、テンプレートに展開しています。

その処理内容の中で、タグhtmlEscapeを使っています。このfunctionは、受け取った値の中に含まれるHTMLの特殊文字を実体参照に変換し、ひとつに結合して返します。ここでは、タイトル部分と著者名部分に使われており、出力結果には“、&がそれぞれ実体参照に置き換わっているのが確認できます。

このほか、タグやリンクからリストを作っている箇所では、${}の中でmap(※2)を使い、配列をli要素の繰り返しに変換しています。単純な処理であれば、このようにテンプレート内で何らかの処理を行わせてしまってもよいですし、ある程度複雑な処理であれば、別途functionとして分け、${}内でそのfunctionを呼び出すというような方法を取るのもよさそうです(※3)。

※2: Array.prototype.mapは、配列の各要素それぞれに対して、渡されたfunctionを実行し、その結果から新しい配列を作る機能です。

※3: ES6で追加されたArrow functionを使えば、このテンプレート内でmapが使用されている箇所を、以下のように簡潔に書くことができます。

${data.tags.map(tag => `
${tag}
`).join('\n')}

${data.links.map(link => `
${link.title}
`).join('\n')}

• ECMAScript 6 compatibility table

まとめ

以上、Template literalについて、その概要を解説しました。Template literalを用いれば、文字列の結合処理をとても簡潔に書くことができるようになります。複雑なテンプレート処理の場合ははやり、テンプレートエンジンのような仕組みを利用したほうが良いケースが多いように筆者は感じますが、ちょっとした文字列処理の際には、基本、Template literalを使っていくようになるのではないでしょうか。

Template literalについてより詳しく知りたい場合、以下が参考になります。

• Template strings – JavaScript | MDN
• ES6 Template Literals in Depth
• ES6 for Now: Template Strings

ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。

これまでのJavaScriptにおけるクラス

多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。

それは例えば、こんなふうにです。

/* Cat雛形の作成 */

function Cat(name) {
  this.setName(name);
};
Cat.prototype = {
  setName: function(name) {
    this._name = name;
  },
  getName: function() {
    return this._name;
  },
  walk: function() {
    console.log(this._name + 'が歩いてます');
  }
};

/* Catからオブジェクトを作成 */

var cat1 = new Cat('タマ');
var cat2 = new Cat('コタロー');
cat1.walk(); // タマが歩いています
cat2.walk(); // コタローが歩いています

コンストラクタであるfunction Catを宣言し、そのprototypeにインスタンスメソッド群を定義したオブジェクトを指定します。すると、new Catした時、作成されたオブジェクトのプロパティは、そのオブジェクト自身に直接定義されていない場合、Cat.prototypeに定義されている同名のプロパティを参照するという具合です。

このように、単純なオブジェクトの雛形を作るだけならまだよいのですが、あるクラスを継承し、別のクラスを作る、いわゆる「クラスの継承」を表現するのはちょっと複雑です。その実装方法についてはここでは割愛しますが、例えばこのCatであれば、より上位の概念を表現したクラスAnimalを用意し、CatはAnimalを継承して作られる……というような場合です。複雑と言っても、よく使われる概念ではあるので、これまでは多くのライブラリやトランスパイラがこの機能を担っていました。

このような、prototypeを利用した「クラス」的な振る舞いの実装は、JavaScript初学者のひとつのハードルになっていたと言ってもよいのではないでしょうか。

ES6のclass構文

そんな「クラス」を実現するclass構文が、ES6では用意されました。

• Classes – JavaScript | MDN
• ECMAScript 2015 Language Specification – Class Definitions

class構文を使えば、クラスの継承も簡単に行えます。その仕様の実態は、prototypeベースの継承であり、単なる糖衣構文に過ぎませんが、複雑な実装をすることなく誰でも簡単にクラスを扱えるようになったことは大きな意味があると言ってよいでしょう。

先ほどのCatを、ES6のclass構文で書くと、以下のようになります。

/* Catクラス */

class Cat {
  constructor(name) {
    this.name = name;
  }
  set name(name) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  walk() {
    console.log(this._name + 'が歩いてます');
  }
}

/* Catクラスのインスタンス作成 */

var cat1 = new Cat('タマ');
var cat2 = new Cat('コタロー');
cat1.walk(); // タマが歩いています
cat2.walk(); // コタローが歩いています

これで先ほどと同様の実行結果になります。

※ ここで使っているsetはsetter、getはgetterとしてES5で定義されている構文、walkメソッドを定義しているのはMethod definitionで、ES6で定義されている構文です。class構文とはまた別なので注意して下さい。

• setter – JavaScript | MDN
• getter – JavaScript | MDN
• Method definitions – JavaScript | MDN

静的メソッド

class構文は、静的メソッド※の定義方法も用意しています。先ほどのCatに、作成した猫の数を返すcountメソッドを実装してみたのが以下です。

※クラスのインスタンスを作らずとも呼べるメソッドのことを言います。

var catCount = 0; // 作った猫の数

/* Catクラス */

class Cat {
  constructor(name) {
    this.name = name;
    catCount += 1; // 作った猫の数を+1
  }
  set name(name) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  walk() {
    console.log(this._name + 'が歩いてます');
  }
  /* 静的メソッド */
  static count() {
    return catCount;
  }
}

/* Catクラスのインスタンス作成 */

console.log(Cat.count()); // 0
var cat1 = new Cat('タマ');
console.log(Cat.count()); // 1
var cat2 = new Cat('コタロー');
console.log(Cat.count()); // 2

Catのconstructorが実行されると猫の匹数を示すcatCountがインクリメントされ、静的メソッドのcount()が呼ばれると、このcatCountを返します。

※ ちなみに、メソッド以外の静的なプロパティを設定すること（ここだと例えばCat.catCountに猫の数を格納するようなこと）は、class構文には今のところ用意されていないようです。これについては2015年10月現在、proposalが出ているだけの状態で、今後どうなるかはまだ分かりません。

• GitHub – jeffmo/es-class-static-properties-and-fields
• javascript – ES6 class variable alternatives – Stack Overflow

クラスの継承

クラスを継承し、別のクラスを作るには、extendsを使います。以下は、Animalを継承したCatクラスを定義した例です。

/* Animalクラス */

class Animal {
  constructor(name) {
    this.name = name;
  }
  set name(name) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  walk() {
    console.log(this.name + 'が歩いてます');
  }
}

/* Catクラス */

class Cat extends Animal { // Animalを継承したCatクラスを定義
  mew() {
    console.log(this.name + 'がニャーと鳴いてます');
  }
}

/* Catクラスのインスタンス作成 */

var cat1 = new Cat('タマ');
console.log(cat1.name); // タマ
cat1.walk(); // タマが歩いてます
cat1.mew();  // タマがニャーと鳴いてます

var cat2 = new Cat('コタロー');
console.log(cat2.name); // コタロー
cat2.walk(); // コタローが歩いてます
cat2.mew();  // コタローがニャーと鳴いてます

Catのインスタンスオブジェクトであるcat1、cat2は、Catに定義されているメソッドが利用できるだけではなく、Animalに定義されているconstructorで初期化され、Animalで定義されているメソッドを利用できていることが分かります。

継承元のメソッド呼び出し

クラスを継承した場合、継承元のメソッドを呼びたいことがあります。その場合、以下のようにsuperを使います。

/* Catクラス */

class Cat extends Animal {
  constructor(name, color) {
    super(name); // Animalクラスのconstructor呼び出し
    this.color = color;
  }
  get color() {
    return this._color;
  }
  set color(color) {
    this._color = color;
  }
  mew() {
    console.log(this.color + '色の' + this.name + 'がニャーと鳴いてます');
  }
  walk() {
    super.walk(); // Animalクラスのwalkメソッド呼び出し
    console.log('忍び足です');
  }
}

/* Catクラスのインスタンス作成 */

var cat1 = new Cat('タマ', '茶');
console.log(cat1.name); // タマ
cat1.walk(); // タマが歩いてます
             // 忍び足です
cat1.mew();  // 茶色のタマがニャーと鳴いてます

var cat2 = new Cat('コタロー', '黒');
console.log(cat2.name); // コタロー
cat2.walk(); // コタローが歩いてます
             // 忍び足です
cat2.mew();  // 黒色のコタローがニャーと鳴いてます

constructor内で、super(name)と、Animalのconstructorを実行し、walk()内でsuper.walk()と、Animalのwalkを実行しています。

class構文を使わない場合、Animal.prototype.walk.apply(this, arguments)などと、継承元のメソッドをprototype経由で直接参照し、applyでコンテキストを自分にして実行するなどというような実装が必要です。superを使えば、同じ内容をとてもシンプルに書くことができます。

その他注意点

他、筆者がclass構文を使ってみて気になったこととして、インスタンスのプロパティをprototype直下に直接指定できないという点が気になりました。例えば、はじめに挙げたCatでインスタンス作成時にnameを受け取らない場合、以下のように書けば、setNameする前にgetNameが呼ばれた場合、'名無しの猫'が名前として返ります。

/* Cat雛形の作成 */

function Cat() {};
Cat.prototype = {
  _name: '名無しの猫', /* _nameの初期値として指定 */
  setName: function(name) {
    this._name = name;
  },
  getName: function() {
    return this._name;
  },
  walk: function() {
    console.log(this._name + 'が歩いてます');
  }
};

しかし、ES6のclass構文では、class宣言時に設定できるのはメソッドのみです。上記例のように_nameをprototypeに指定することができません。インスタンスのプロパティの初期値を設定したい場合、constructor内で設定する必要があります。

※prototype直下にオブジェクトを指定した場合、全てのインスタンスで同一のオブジェクトを参照してしまい、思わぬバグの原因になったりすることもありえるため、このような書き方をそもそもしないほうがよいという見解もあります。

ブラウザ対応状況

class構文の対応状況は、2015年10月現在、まだまだといった状況です。

• ECMAScript 6 compatibility table

筆者が確認したタイミングで対応しているのは、Safari9 (Webkit)だけです。デベロッパー版や設定フラグなど考慮すると Chrome45 (enable-javascript-harmonyをオンにし、strict modeのみで動作)、Firefox nightly (v44)、Microsoft Edge（experimental featureをオンにして使用）などで利用できます。一般的な閲覧環境を想定する場合、class構文を使用するのはまだ先だと考えておいてよいでしょう。bableやtraceur等のトランスパイラは対応しています。ただし、まだclass構文の全ての機能に対応しているわけではないようです。

ちなみに筆者は、本稿を書くためのサンプルを、Chrome canaryで動作することを確認しています。

まとめ

以上、ES6のclass構文について、その概要を簡単に紹介しました。筆者は、好きでよくCoffeeScriptを使っていたのですが、CoffeeScriptを使う大きな理由の一つとして、CoffeeScript独自のclass構文が使えるようになっているというところがありました。そういったコードの設計の根幹部分が言語として用意された状態だと、コードの見通しがよくなるなぁと感じていまして。しかし、ES6にてclass構文が実装されたとなれば、自分がCoffeeScriptを選択する理由が一つ、なくなった感じがします。

ほか、class構文を使って書かれたコードは、そのコードで表現したいことが、同様の内容をclass構文を使わないで書いた場合よりも、よりシンプルに表現できているように感じます。これは、チーム間でのコミュニケーション効率を高め、開発をスムーズにするかもしれません。

class構文がやってくれることは、これまでJavaScriptで書かれてきたいわゆる「クラス」的なものの実装そのものであるため、class構文を使ったからといって、これまで書いてきたJavaScriptと根本的に設計が変わってしまうということはないでしょう。ブラウザの対応はまだまだのようですが、babelをお供に、開発に採用できるケースはかなり多いのではないかと思います。

前回に引き続き、ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。今回は後編です。

前回のおさらい

前回は、こんなふうにPromiseを使うという例を紹介しました。それは、以下のようにAjaxでAPIにアクセスする例でした。

var fetchSomething1 = function() {
  return new Promise(function(resolve, reject) {
    // API1にアクセス
    doAjaxStuff(someOptions1, {
      success: function(data) { // 成功した場合
        resolve();
      },
      fail: function() { // 何かしらエラーが発生した場合
        reject({ message: 'APIにアクセスできませんでした' });
      }
    });
  });
};

fetchSomething1().then(function() { // A: fetchSomething1の成功時に実行される
  alert('API1よりデータを取得しました');
}, function(error) { // B: fetchSomething1の失敗時に実行される
  alert('API1よりデータを取得できませんでした。エラーメッセージ: ' + error.message);
});

ここで定義しているfetchSomething1は、Promiseオブジェクトを返します。AjaxでAPIにアクセスするのが成功した場合、thenの第一引数に指定したfunctionが、失敗した場合、thenの第二引数に指定したfunctionが実行されるのでした。

以降、便宜上、thenの第一引数に指定されたfunctionのことをonFulfilledハンドラ、第二引数に指定されたfunctionのことをonRejectedハンドラと呼ぶことにします。

Promiseインターフェイスの実装例: Fetch API

このPromise、今後はJavaScriptを書いていく上での基本的な知識となっていくことが、ほとんど確実と言ってよいだろうと筆者は考えます。

例えば、WHATWGで策定されているFetch APIは、Promiseをベースに作られています。以下の例では、同階層にあるmemo.txtの内容をFetch APIを利用して取得、そのファイルの内容をconsole.logしています。

fetch('./memo.txt')
  .then(function(response) {
    response.text().then(function(text) {
      console.log(text); // memo.txtの内容
    });
  }, function(error) {
    console.log(error);
  });

Fetch APIについての知識がなかったとしても、Promiseに慣れていれば、上記コードがどのような意味を持っているかを想像するのは容易でしょう。今後、ブラウザやECMAScript自体が実装していく非同期に処理を行うAPIについても、Promiseをベースとしていくであろうと想像されます。

なお、このコード内では、response.text()でレスポンス内容のテキストを取得しています。この処理自体も非同期で実装されており、その結果をthenで受け取るようになっています。

インターフェースを統一できるのもPromiseのメリット

初めに挙げたAjaxする例ですが、コレ、thenを使って、Ajaxの成功時、失敗時に指定したfunctionを実行させているわけですが、前編で紹介したコールバックを使っても実装可能です。例えばこんなふうにしたっていいじゃないですか。

fetchSomething1(function() {
  // 成功時の処理
}, function() {
  // エラー時の処理
});

第一引数に成功時の処理を、第二引数にエラー時の処理を。これでも問題ないです。はたまた、こんなのはどうでしょう。各種オプションを渡せるようにしました。

fetchSomething1(params, method, noCache, {
  success: function() {
    // 成功時の処理
  },
  fail: function() {
    // エラー時の処理
  }
});

やりかたはいろいろとあります。どの方法が一番良いのでしょう？それぞれメリット、デメリットがあるかもしれませんが、ひとつ言えることは、各々が、それぞれの方法でバラバラな書き方をしてしまうことがあり得るということです。

Promiseを利用すれば、非同期処理の書き方を統一できます。成功か失敗か。結果が単純にその2つに分かれる非同期処理において、それを担うfunctionがPromiseオブジェクトを返してくれるのであれば、結果を受け取った方は、以降の処理をthenで書くものと理解することができます。

これはあくまで、そのように書くよう統一しておけば、多くの人が理解しやすいコードにできますというだけのことではあるのですが、PromiseがES6に採用されたことで、非同期処理の扱いには、Promiseをベースにしていくのが基本となっていくことはほとんど確実と言えるのではないでしょうか。

順次処理を行わせる

前回、コールバックを使いAPIに順番にアクセスすると、以下のようになってしまうという例を挙げました。

/* 順番に実行 */

fetchSomething1(function() {
  fetchSomething2(function() {
    fetchSomething3(function() {
      fetchSomething4(doSomethingFinally); // 全部終わったら doSomethingFinally()
    });
  });
});

そして先ほど、このfetchSomething1を、Promiseをベースにした書き方にしてみたわけですが、他のfunctionも同様にPromiseベースで書き直し、それぞれがPromiseオブジェクトを返すようにすると、上記コードは以下のように書き直せます。

fetchSomething1()
  .then(fetchSomething2)
  .then(fetchSomething3)
  .then(fetchSomething4)
  .then(doSomethingFinally);

何段階にも入れ子になってしまうfunctionよりも、こちらのほうがコードの見通しがよいのではないでしょうか。

fetchSomething1〜fetchSomething4はそれぞれ、Promsieオブジェクトを返します。thenに指定されたfunction内でPromiseオブジェクトが返された場合、thenの返す値自体が、そのPromiseオブジェクトとなります。上記を一つずつ分けて書くと、以下のようになります。

var promise1 = fetchSomething1();
var promise2 = promise1.then(fetchSomething2);
var promise3 = promise2.then(fetchSomething3);
var promise4 = promise2.then(fetchSomething4);
promise4.then(doSomethingFinally);

各functionはそれぞれのPromiseを返し、続けて書いた処理は、前のPromiseがfulfilledになった時に初めて実行されます。fetchSomething2はfetchSomething1の返すPromiseがfulfilledになった時に実行され、fetchSomething3はfetchSometing2の返すPromiseがfulfilledになった時に実行され……と、非同期処理が連鎖するように動作します。

Promiseを使えば、このように連続した非同期処理を簡潔に記述することが可能になります。

同期的な処理も混ぜる

そのように非同期処理をうまく扱えるようにするPromiseですが、その途中に同期的な処理を挟むこともできます。

以下で用意した各functionはそれぞれ、非同期的に扱う必要のない処理たちですが、渡された数値を2倍にして返すdoubleと、渡された数値を3倍にして返すtrebleは、Promiseオブジェクトを返し、計算が終わったらその結果を後続する処理に渡すようにしています。

また、渡された数値をコンソールに表示するだけのfunction、dumpは、console.logで渡された値を表示したあとは、そのままその数値を返しています。

/* 2倍にする */

var double = function(number) {
  return new Promise(function(resolve) {
    resolve(number * 2);
  });
};

/* 3倍にする */

var treble = function(number) {
  return new Promise(function(resolve) {
    resolve(number * 3);
  });
};

/* 表示する */

var dump = function(number) {
  console.log(number);
  return number;
}

/* 実行 */

double(10)       // 10*2 -> 20
  .then(dump)    // コンソールに表示: 20
  .then(treble)  // 20*3 -> 60
  .then(dump)    // コンソールに表示: 60
  .then(double)  // 60*2 -> 120
  .then(dump);   // コンソールに表示: 120

resolveに渡した値は、後続する処理で受け取ることができるため、double(10)の結果は後続するdumpに渡されます。function dumpの内容は、console.logした後、渡された数値を返すだけです。このように、onFulfilledハンドラ内でPromiseオブジェクト以外が返された場合、新しくPromiseオブジェクトが作成され、返した値ですぐにresolveされます。例えば、上記コードで最初にdumpしている箇所は、処理内容的には以下と同じです。

double(10)       // 10*2 -> 20
  .then(function(number) {
    return new Promise(function(resolve) {
      console.log(number); // コンソールに表示: 20
      resolve(number);
    });
  })    
  .then(treble)  // 20*3 -> 60
  .then(dump)    // コンソールに表示: 60
  .then(double)  // 60*2 -> 120
  .then(dump);   // コンソールに表示: 120

このような仕組みが用意されているため、Promiseを使うことで、同期処理と非同期処理を自然に混ぜて記述することが可能になっています。

※ ちなみに、ここで用意したfunctiondoubleも、trebleも、処理内容的には同期的なものですが、Promiseを介すと、非同期な処理として扱われます。

並列処理

非同期処理を扱う時、一つずつ順番に処理するのではなく、いくつかの処理を並列に走らせたい場合があります。例えば、何回か例に出している、AjaxでAPIにアクセスするfunction、fetchSomething1〜fetchSomething4であれば、これらを同時に実行し、すべての処理が終わったタイミングを知りたいというようなケースを考えてみます。そのような並列処理は、Promise.allを使うことで簡単に実装できます。以下にそのコード例を挙げます。

var promises = [
  fetchSomething1(),
  fetchSomething2(),
  fetchSomething3(),
  fetchSomething4()
];

Promise.all(promises)
  .then(function(results) {
    console.log(results[0]); // fetchSomething1のresolveに渡された値
    console.log(results[1]); // fetchSomething2のresolveに渡された値
    console.log(results[2]); // fetchSomething3のresolveに渡された値
    console.log(results[3]); // fetchSomething4のresolveに渡された値
    doSomethingFinally();
  }, function(error) {
    console.log(error); // 最初にrejectに渡された値
  });

Promise.allにPromiseオブジェクトの配列を渡すと、渡された全てのPromiseオブジェクトがfulfilledになった時、後続するthenにて登録された処理が実行されます。このとき、各Promiseオブジェクト内でresolveに渡された値は、それぞれの結果をまとめた配列として受け取ることができます。上記コードだと、thenのonFulfilledハンドラで受け取っているresultsがその配列です。

また、いずれかのPromiseオブジェクトがrejectedになった場合、thenのonRejectedハンドラが実行されます。この時、rejectedにされたPromiseオブジェクト内で、rejectに渡された値を受け取ることができます。

このような処理をPromise.allなしで書くには、コールバックのように一筋縄で済ませることはできません。各処理が終わったかどうかをフラグを立ててチェックしたりなど、なかなか地味な処理を書く必要がありそうです。しかし、Promiseがあれば簡潔に処理を記述することができます。

エラーをまとめてキャッチ

thenのonRejectedハンドラは、Promiseオブジェクトがrejectedになったときに実行されます。この時、thenにonRejectedハンドラが指定されていない場合、後続するthenのonRejectedハンドラが実行されます。例えば以下のような例を見てみます。

fetchSomething1()
  .then(fetchSomething2) // A
  .then(doSomethingFinally, handleError); // B

今までの例と同様、fetchSomethingXは、AjaxでAPIにアクセスする、非同期で、Promiseオブジェクトを返すfunctionです。ここで、fetchSomething1の中でエラーが発生し、fetchSomething1が返すPromiseオブジェクトがrejectedになったとします。すると、上記コメントAで示したthenに指定されたonRejectedハンドラが実行されるのですが、AにはonRejectedハンドラが指定されていません。その場合は、続きのthenに指定されたonRejectedハンドラが実行されます。この結果、上記コメントBにて指定されているonRejectedハンドラhandleErrorが実行される結果となります。

これはエラーの発生をまとめて扱いたい際に便利な機能です。同様に順次AjaxでAPIにいくつもアクセスする場合、以下のようにエラー処理をまとめて行うことができます。

fetchSomething1()
  .then(fetchSomething2)
  .then(fetchSomething3)
  .then(fetchSomething4)
  .then(fetchSomething5)
  .then(doSomethingFinally, handleError);

上記のように書けば、fetchSomething1〜fetchSomething5のどこかでPromiseがrejectされた場合、後続するthenに指定されたonFulfilledハンドラは実行されず、handleErrorが実行されます。

thenの第二引数は省略可能なため、onFulfilledハンドラだけを指定することが可能ですが、このようにエラー処理だけを個別に書きたい場合、例えば以下のように書くことで、onRejectedハンドラだけを指定することができます。

fetchSomething1()
  .then(fetchSomething2)
  .then(doSomethingFinally)
  .then(null, handleError); // 第一引数にnull

上記のように書いてもよいですが、Promiseは、上記と同様の動作をするcatchというメソッドを用意しています。このような場合、catchを使い、以下のように書いたほうが簡潔なコードとなるでしょう。

fetchSomething1()
  .then(fetchSomething2)
  .then(doSomethingFinally)
  .catch(handleError);

ライブラリやPolyfill

Promiseは、2015年9月現在、一般的に普及しているブラウザに十分対応されているという状況ではありません（caniuse – Promise）。しかし、ブラウザの対応を待ってからでないと利用できないと類の機能ではありません。Promiseオブジェクトと同様の挙動が実現できればよいわけで、既に様々なライブラリ、Polyfillが存在し、広く使われています。ES6のPromiseが使えない環境であっても、これらライブラリを利用すれば、様々なプロジェクトに活用することができるでしょう。

• petkaantonov/bluebird
• tildeio/rsvp.js
• getify/native-promise-only
• calvinmetcalf/lie
• kriskowal/q
• paulmillr/es6-shim

最後に

以上、2回に渡り、Promiseの機能概要を紹介しました。普段からJavaScriptを使って開発をしている者としては、Promiseっていう機能がECMAScriptに追加されたぞ！と言うより、ついに標準仕様となったか…！と感じる人がほとんどなのではないでしょうか。筆者も、jQueryのDeferredや、AngularJSの$qを日常的に使っていたので、Promiseのインターフェイスには馴染みがあります。これからは、これまで以上に当たり前のようにPromiseが使われるようになっていくでしょうから、この機会に正しく仕様を理解しておきたいところです。

Promiseについてより詳しく知りたい場合、以下を参考にすることをおすすめします。

• JavaScript Promiseの本
• Exploring ES6 – 25. Promises for asynchronous programming

ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。

ひとつずつ処理されるJavaScript

まず、Promiseについて解説する前に、基礎的なことではありますが、JavaScriptのコードがどのようにJavaScriptエンジンに処理されるかについて、軽く解説しておきましょう。例えば以下の様なコードがあったとします。

var result1 = 1 + 2; // 3
var result2 = result1 + 100; // 103

/* functionらを準備 */

var doSomething1 = function() {
  document.getElementById('price').value = result2;
};
var doSomething2 = function() {
  alert('計算結果: ' + result2);
};
var doSomething3 = function() {
  console.log('計算結果: ' + result2);
};

/* 実行 */

doSomething1();
doSomething2();
doSomething3();

このコードを実行すると、まず、

var result1 = 1 + 2;

が実行され、resultには3が入ります。そして次に、

var result2 = result1 + 100;

が実行され、result2には103が入ります。その後、3つのfunctionが準備され、doSomething1()、doSomething2()、doSomething3()と、準備したfunction群が順番に実行されます。JavaScriptは基本的にシングルスレッドであり、一つの処理が完了するまで次の処理が実行されないようになっています。

2行目のresult1 + 100が実行できるのも、1行目でresult1に1 + 2の結果が入っているからですし、3つのfunctionが実行できるのも、それよりも前に各functionが準備されたからです。そして、各function内で使用されているresult2には、2行目で計算された103が入っています。当たり前と言えば当たり前ですが。

また、function doSomething2内にはalertがあり、実行されると「計算結果: 103」とダイアログが出現します。ここで、ユーザーがそのダイアログを閉じなければ、処理は先に進みません。ほか、非常に複雑な計算をしたりなどし、一つの処理にとても時間がかかる場合などでも、その処理が終わるまでは、次の処理が始まりません。

非同期な処理

そんなJavaScriptですが、後から任意の処理をさせる方法がもちろんありますし、普段から利用しているでしょう。その方法の一つとして、イベントの利用が挙げられます。

document.getElementById('img1').addEventListener('click', function() {
  alert('画像がクリックされました');
}, false);

このように、addEventListenerを使えば、img要素がクリックされたタイミングで任意の処理を走らせることができます。

ほか、setTimeoutのような、処理の実行をスケジュールする組み込み関数を利用すれば、後から任意の処理を実行させることができます。例えば、setTimeoutを以下のように使えば、指定したfunctionは5秒後に実行されることになります。

setTimeout(function() {
  alert('5秒経ったみたいです');
}, 5000);

当然、このコードが実行された時、ブラウザが5秒間固まったままになってしまうわけではありません。imgのクリックについても同様、もちろん画像がクリックするまでブラウザが固まってしまうわけではありません。addEventListenerやsetTimeoutは、functionを受け取り、時が来たらそのfunctionを実行するように作られています。渡したfunctionは、即座に実行されるわけではないため、非同期に処理されるといえます。

コールバック

JavaScripで書かれたプログラムでは、そのような非同期処理を行いたい場合、functionの受け渡しをを利用して実現されてきました。今例に挙げたaddEventListenerもsetTimeoutも、関数を受け取っている点に注目して下さい。このように、なにかしらの処理が完了したら渡したfunctionを実行させるという実装手法は、「コールバック」と呼ばれています。このコールバックを使って非同期処理を書くというスタイル、単純なケースであればシンプルで分かりやすいのですが、問題もあります。

以下は、決められた順番でアクセスしなければならないAPI4つを順に叩き、その結果を使って何か最終的に処理を行ったという想定の例です。この中で使われているdoAjaxStuffは、XMLHttpRequestを使ってGETなりPOSTなりのリクエストを送る、いわゆるAjaxを行うfunctionであると想像して下さい。リクエストしたいパラメーターなり、リクエストの成功時、失敗時に実行したいfunctionを受け取れるものとします。

var fetchSomething1 = function(done) {
  // API1にアクセス
  doAjaxStuff(someOptions, {
    success: function(data) {
      done(); // 成功したら渡されたfunctionを実行
    }
  });
};

// fetchSomething1と同じようにそれぞれ別のAPIにアクセスするfunction群
var fetchSomething2 = function(done) { /* 省略 */ };
var fetchSomething3 = function(done) { /* 省略 */ };
var fetchSomething4 = function(done) { /* 省略 */ };

var doSomethingFinally = function() {
  // APIにアクセスして取得してきたデータを使って何かする
};

/* 順番に実行 */

fetchSomething1(function() {
  fetchSomething2(function() {
    fetchSomething3(function() {
      fetchSomething4(doSomethingFinally); // 全部終わったら doSomethingFinally()
    });
  });
});

それぞれの動作はすぐに終わるものではなく、時間がかかるもの。そしてその処理が終わった時に別の処理を行わせるために今のコールバックを利用するとすると、functionの中にfunction、その中にまたfunction…と、マトリョーシカみたいな入れ子functionを作ることになってしまうことがあります。

コールバックの仕組みを利用する以上、仕方のないことなのですが、複雑な処理の場合、この書き方はなかなかに読みづらいものです。ここにエラー処理を加えた場合、さらにややこしくなります。第二引数にエラー時に実行させたいfunctionを指定できるようにした……というような実装をしたとすると、例えば以下の様な形になるでしょうか。

fetchSomething1(function() {
  fetchSomething2(function() {
    fetchSomething3(function() {
      fetchSomething4(doSomethingFinally, function() {
        // fetchSomething4のエラー処理
      });
    }, function() {
      // fetchSomething3のエラー処理
    });
  }, function() {
    // fetchSomething2のエラー処理
  });
}, function() {
  // fetchSomething1のエラー処理
});

これだとどこにどのエラー処理を書けばいいのか、なかなかに解読が困難です。

ブラウザ上で動作させるJavaScriptの場合、APIにアクセスしたりなどするためにAjaxを利用することが多いでしょう。複雑なWebアプリケーションの場合、いくつものAPIにアクセスし、返ってきたデータ群からDOMを生成し、ページを作ったりするかもしれません。そんな時、このように複雑なコールバックの入れ子になってしまうことは珍しいことではありません。ほか、複数の非同期処理が全て完了したい時に何か処理をさせたいというケースもよくあります。時代の流れとともにとでも言いましょうか、JavaScriptには、非同期処理をより柔軟に行える機能が求められてきたと言ってしまって間違いはないでしょう。

Promise!

そんな時代に登場した非同期処理の救世主？が、Promiseです。Promiseを使えば、実行と完了に遅延がある処理をうまい具合に扱うことができます。いろいろと説明するよりも、コードを見ながら理解していきましょう。以下がPromiseを使った非同期処理の例です。この例では、先ほど例として挙げた、APIにアクセスするfunction fetchSomething1を、Promiseを使って書いてみたサンプルを例とします。

var fetchSomething1 = function() {
  return new Promise(function(resolve, reject) {
    // API1にアクセス
    doAjaxStuff(someOptions, {
      success: function(data) { // 成功した場合
        resolve();
      },
      fail: function() { // 何かしらエラーが発生した場合
        reject({ message: 'APIにアクセスできませんでした' });
      }
    });
  });
};

fetchSomething1().then(function() {
  alert('API1よりデータを取得しました');
}, function(error) {
  alert('API1よりデータを取得できませんでした。エラーメッセージ: ' + error.message);
});

function fetchSomething1は、Promiseオブジェクトを作り、返します。

ここで何が起こっているかざっと解説してみます。

Promiseオブジェクトの状態

Promiseを理解するためにはまず、Promiseオブジェクトの「状態」について理解することが必要です。

何はともあれ、最初にすることは、Promiseオブジェクトの作成です。Promiseオブジェクトを作るには、コンストラクタであるPromiseをnewすればよいだけです。このPromiseオブジェクトを経由し、処理がうまくいった場合、いかなかった場合の処理を続けて書くことができます。それをどう書くのかは後述するとして、まずはPromiseオブジェクトの状態についてです。

Promiseオブジェクトには状態があります。それは以下の3種類です。

• pending: 未解決
• fulfilled: 無事完了した
• rejected: 棄却された

最初はpendingになっていますが、無事完了するとfulfilled、棄却されるとrejectedになります。pendingからは、fulfilled、rejectedのいずれかの状態に変化することができますが、一度状態が変化したら、それ以上状態を変化させることはできません。一方通行です。

コンストラクタであるPromiseには、newする時、functionを引数として渡します。このfunction内にPromiseがラップしたい処理を書きます。

このfunctionには、2つの引数を指定することができます。まずは第一引数として指定しているresolve。これは必ず指定する必要があります。このresolveはfunctionで、処理結果が正常だった場合に実行させます。ここでは、APIへのアクセスに成功した時に実行させています。resolveを実行すると、Promiseオブジェクトの状態がfulfilledになります。「無事完了した」ことにするfunctionです。

第二引数であるrejectもfunctionですが、このrejectはresolveとは逆で、処理結果がエラーであった場合に実行させます。ここではAPIへのアクセスが失敗に終わった時に実行させています。rejectを実行すると、Promiseオブジェクトの状態がrejectedになります。「棄却された」ことにするfunctionです。この第二引数は省略可能です。

このようにして、Promiseコンストラクタに渡したfunction内で、Promsieオブジェクトの状態をpendingからfulfilled及びrejectedに変化させます。

まとめると、以下のようになります。

• function fetchSomething1を実行すると、Promiseオブジェクトが返ってくる
• APIへのアクセスに成功するとPromiseオブジェクトの状態がpendingからfulfilledになる
• APIへのアクセスに失敗するとPromiseオブジェクトの状態がpendingからrejectedになる

APIへのアクセス成功可否によりPromiseオブジェクトの状態が変化しますが、このfunction fetchSomething1を実行した側からすれば、ただひとつのPromiseオブジェクトが返ってくるだけです。

then

このようにして作ったPromiseオブジェクトのメソッドを呼ぶことで、状態変化が起こった時に実行されるfunctionを登録することができます。それを行うのがthenです。以下のように使います。

fetchSomething1().then(function() {
  alert('API1よりデータを取得しました');
}, function(error) {
  alert('API1よりデータを取得できませんでした。エラーメッセージ: ' + error.message);
});

thenには二つの引数を渡すことができます。第一引数として渡したfunctionは、Promiseオブジェクトの状態がfulfilledになった時、第二引数として渡したfunctionは、Promiseオブジェクトの状態がrejectedになった時に実行されます。thenの第二引数は省略可能です。

結果として、fetchSomething1のメインの処理が無事完了すれば、「API1よりデータを取得しました」と、棄却されたら、「API1よりデータを取得できませんでした。エラーメッセージ: APIにアクセスできませんでした」とalertが出ます。

このthenに渡したfunctionは、resolve及びrejectが実行された時に渡された値を受け取ることができます。ここでは、reject時に渡されているオブジェクトを受け取り、エラーメッセージとして利用しています。

次回に続く

今回は、JavaScriptにおいて非同期処理を扱う方法と、Promiseのごく基礎的な書き方について紹介しました。今回の内容だけでは、Promiseを使って何が嬉しいのかよく分からないかもしれません。次回は、複数の非同期処理を順次処理する方法、並列に処理する方法、エラーを効率的にハンドリングする方法等を紹介していきます。

この記事は「ECMAScript2015/ES6特集」の第3回目です。この特集ではJavaScriptの次世代仕様であるECMAScript 2015（ECMAScript 6）を取り上げ、歴史や経緯から追加された機能や文法の詳細など、複数回に渡って解説していきます。

ここではECMAScriptの新仕様を先取りできるトランスパイラ、Babelの紹介を行います。

Babelとは

Babelとは、2014/9から開発が始まっているECMAScriptコンパイラです。

機能としては、ECMAScript2015 (ES6)やECMAScript7などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に出力することができます。

const obj = (() => {
  return {
    method() {
      alert('Hello Babel!');
    }
  };
})();

'use strict';

var obj = (function () {
  return {
    method: function method() {
      alert('Hello Babel!');
    }
  };
})();

Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。
（実際にはIE9以降から使用することを推奨します）

当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。

Babelの特徴

Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。

それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。

(*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。

このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同じような標準仕様を扱うツールがあれば乗り換えできる」といった利点があります。

簡単に始める方法

それでは早速Babelを使ってみましょう。

お手軽に始める場合、Babelの公式サイトで公開されているオンライン上のトランスパイルサービスが便利でしょう。

これは左側にコードを書くとトランスパイルした結果を右側に出力してくれます。

もちろんこのまま開発を行うのは難しいため、実際には手元にツールをインストールして使うことになります。

Babelのインストール

Babelはnpm経由で以下のようにインストールします。

$ npm install --global babel

これでbabelコマンドが使用できるようになりました。

CLIを使った変換方法

それではまずはbabelコマンド経由で変換してみましょう。

babelコマンドでは以下のようにファイル名を引数に与えるか、標準入力にソースを渡すことによって標準出力へ変換結果を出力します。

$ cat sample.js () => {} $ babel sample.js "use strict";

$

この方法でも変換はできますが、実際の現場では次で紹介するような別のコマンド経由で変換されることが一般的です。

gulpを使った変換方法

では次にgulpを使った変換方法を紹介します。

gulpを使って変換するためには、gulpとBabelを繋げるためのgulp-babelというパッケージをインストールします。

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

それでは変換してみましょう。

まずgulpfile.jsに以下のように記述します。

var gulp = require('gulp');
var babel = require('gulp-babel');
 
gulp.task('default', function () {
    return gulp.src(['src/*.js', 'src/**/*.js'])
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

この状態でgulpコマンドを実行することで、src/以下のjsファイルをBabelで変換してdist以下に書き出すことができます。

gruntを使った変換方法

次はgruntを使った変換方法を紹介します。

gruntを使って変換するためには、gulpの場合と同様にgrunt-babelというパッケージをインストールします。

$ npm install --global grunt-cli $ npm install --save-dev grunt grunt-babel

それでは変換してみましょう。

Gruntfile.jsに以下のように記述します。

module.exports = function(grunt) {
  grunt.initConfig({
    babel: {
      dist: {
        files: [{
          "expand": true,
          "cwd": "src/",
          "src": ["*.js", "**/*.js"],
          "dest": "dist/",
          "ext": ".js"
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-babel');

  grunt.registerTask('default', ['babel']);
};

この状態でgruntコマンドを実行することで、src/以下のjsファイルをBabelで変換してdist/以下に書き出すことができます。

Browserifyを使った変換方法

ここまではタスクランナー経由での使い方を紹介しましたが、最後にBrowserify経由での変換方法もご紹介します。

Browserifyとは、以下のようにNode.jsで使える外部ライブラリを読み込むrequire構文（CommonJS）をブラウザ上でも使えるように変換するためのツールです。自動的に外部ライブラリの参照先のファイルを結合してひとつのファイルにまとめてくれます。

module.exports = function () {
  console.log('Hello browserify!');
};

var exportsCode = require('./exports.js');
exportsCode(); // console.log('Hello browserify!');

Babelは、同じように外部ライブラリを読み込むECMAScritpt2015 (ES6)のmodule構文を上記のようなrequire構文）に変換してくれますが、ひとつのファイルにまとめてくれる機能はありません。そのため、実際の実行ではエラーになってしまいます。

export default function () {
  console.log('Hello ES2015 exports!');
};

import exportsCode from './exports.js';
exportsCode(); // console.log('Hello ES2015 exports!');

これを解決するには、Babelだけでなく、Browserifyを組み合わせてrequire構文をブラウザでも実行できるようにする必要があります。これらを組み合わせた場合、ES2015のmodule構文で書いたものが、Babelによってrequire構文に変換され、require構文の（ブラウザでの）実行に必要なファイルの結合処理をBrowserifyが行う形となります。

このようにWebフロントエンドの開発の場合、BrowserifyとBabelはセットで使われることが多いです。

BrowserifyとBabelの連携方法は、単純にBabelの出力結果をBrowserifyに渡すだけでなく、Browserifyのもつプラグイン機構でBabelを呼び出すこともできます。

では、Browserify経由でBabelを実行するためのbabelifyというパッケージをインストールします。

$ npm install --global browserify $ npm install --save-dev babelify

Browserifyはgruntやgulp経由で起動する方法もありますが、以下のようにコマンドラインからでも起動できます。

$ browserify src/app.js -t babelify -o dist/app.js

-tでbabelifyを指定することで変換時にBabelを呼び出しています。

ここまで変換方法を紹介してきましたが、これ以外にも様々な方法でコードを変換することができます。

他のツールとの親和性はBabelの大きな特徴で、さまざまなツールを使用している状態でもスムーズに導入することができます。

オプション

ここまで紹介してきた内容でも最低限Babelでの変換は行えますが、細かい挙動を制御する場合オプションの指定が必要になる場合があります。

Babelにはさまざまなオプションがありますが、ここではその中から主要なものを取り上げて紹介します。

• stage

BabelはECMAScript2015 (ES6), ECMAScript7をECMAScript5に変換しますが、ECMAScript2015 (ES6), ECMAScript7の仕様でもまだ議論中のものもあり、安定度はまちまちです。

そこで、ECMAScriptの中でもまだ議論しきれていない仕様に関しては、stageという概念を使って安定度を示しています。

Babelはこのstageを指定する機能を備えており、stageを指定することでまだ議論の進んでいない仕様も使うことができます。

各stageでどういった機能が使えるようになるかは、こちらをご覧ください。

初期値は2が指定されており、草案（Draft）レベルのものが使用できます。

基本的には初期値で構いませんが、どうしても先取りしたい仕様がある場合には仕様が変わってしまうリスクを踏まえた上で、より新しい仕様を使うこともできます。

• sourceMaps

JavaScriptのコンパイラは性質上、元のソースコードと違った形式で出力されるため、実行時に何か問題があった場合にデバッグが困難になるという性質があります。

この問題に関しては標準仕様としてSourceMapという仕様が存在し、モダンブラウザではこの機能をサポートしています。

SourceMapを使うことで変換前のコードと変換後のコードを対応付けることができるため、実行時に問題が発生しても元のソース上でどこに問題があったのかを容易に把握することができます。

BabelのsourceMapsオプションはソースコードと同時にsourceMapファイルを出力することができ、trueを指定した場合変換後のソースとは別にsourceMapファイルを、”inline”を指定した場合変換後のソースファイルにsourceMapファイルを埋め込んで出力できます。

オプションの指定方法

さまざまなツールと連携できる点が魅力のBabelですが、連携する場合に問題になるのがBabel自体に対するオプションの指定方法です。

連携するツールによってはBabelに対してのオプションを指定する方法を提供している場合もありますが、場合によってはドキュメントに書かれていなかったり提供されていないこともあります。

そこで便利なのが設定を独立して記述できる.babelrcファイルです。

このファイルをBabelを実行するフォルダ（基本的にpackage.jsonと同じ場所）へ設置することで、連携ツール毎のオプション指定の方法を気にすることなく一括でオプションを指定することができます。

$ cat .babelrc { "stage": 1 }

最後に

駆け足でしたがここまでBabelの紹介をしてきました。

Babelを使った開発はすでに一般的に行われており、公開されている製品での使用もよく見るものになっています。

皆様もこれまでブラウザがサポートしなければ使えなかったECMAScriptの最新仕様を、自由に使える環境での開発を是非体験してみてください。

　この記事は「ECMAScript2015/ES6特集」の第2回目です。第1回ではECMAScriptの歴史やES2015の新機能について紹介しましたが、今回は各ブラウザの対応状況や、実戦投入に向けて踏まえておくべき知識を解説します。

ECMAScript 2015の対応状況

　ECMAScript 2015（ECMAScript 6th edition）は、2015年の6月に無事策定されました。しかし、実際にES2015の機能を使っていくには、ブラウザなどに搭載されているJavaScriptエンジンが対応していなくてはなりません。

　ブラウザの実装状況についてはECMAScript 6 compatibility tableが参考になります。Chrome 46・Firefox 42・Edgeは既に多くの機能を実装してあり、DevToolsなどでも試すことができます。WebKitも順調に実装が進んでおり、Safari 9ではES2015の機能の大半を使えるようになる見込みです。同じV8エンジンを使っているNode.js/io.jsも、Chromeに近い対応状況と見てよいでしょう。

　各ブラウザベンダーの正確な実装状況については以下を参照してください。

• WebKit Web Platform Status
• Chrome Platform Status
• ECMAScript 6 support in Mozilla
• Microsoft Edge | Dev

　Chrome・Firefox・Edgeなどのモダンブラウザのみをターゲットにする場合は、近いうちにES2015を存分に使っていけるかもしれません。しかし実際には、IE11やそれ以前のブラウザのシェアを考慮すると互換性は無視できないのが現実です。

トランスパイラの利用

　ブラウザが対応しないとES2015を実行できないのは事実ですが、ブラウザ対応を待っていてはいつまでもES2015を導入できません。今のうちから導入していくためには、ES2015で書かれたJavaScriptを対応していないブラウザでも実行できる形（ES5）に変換するトランスパイラを使うという手段があります。ES2015を取り入れビルドプロセスでトランスパイラを適用することで、いざサーバーから配信する際にはES5に変換、あるいはポリフィルがバンドルされた形にします。

　トランスパイラには今最も普及しているBabelやGoogleが開発するTraceur Compilerがあります。

　BabelとTraceur CompilerはES2015のトランスパイルだけでなく、ES7以降で提案されている実験的な機能（async・await・デコレータ等…）のトランスパイルもサポートしています。更にBabelはReactで採用されているJSXなどのビルドもサポートしています。Facebookが公式で開発していたReact Toolsは非推奨となり、Babelを使うように薦められています。

• Deprecating JSTransform and react-tools

TypeScriptを使う

　先日バージョン1.6がリリースされたTypeScriptでもES2015の機能を使っていくことができます。TypeScriptは、もともとJavaScriptのスーパーセットとして設計されているAltJSということもあり、ES2015の機能もどんどん取り込まれています。また、ReactのJSXのサポートも追加されているようなので興味のある方は試してみるとよいでしょう。

　プレーンなES2015とは異なり、仮に全てのブラウザがES2015の仕様を実装してもTypeScriptのビルドが前提にはなります。しかし、ソースコードに事前処理を加えることはもはや当たり前になっていますし、そうこうしているうちにES2016などの新たな仕様が登場してくることを考えれば、トランスパイラなしにES2015を書いていくのはあまり現実的ではないのかもしれません。

　TypeScriptでES2015を試していく方法については、わかめさんの「TypeScriptを使ってECMAScript 2015時代のJavaScriptを先取りしよう！」という記事が大変参考になります。

限定された環境で試してみる

　ES2015を導入していくためには、トランスパイラの他に、実行環境を限定して取り入れていくという手段もあります。WebアプリケーションであればURLがわかれば対応・非対応に関わらずブラウザからアクセスできてしまうため、ユーザー体験を損ねる可能性があります。しかし、書いたプログラムの実行環境が限定されれば、トランスパイルを介すことなく導入していくことも可能です。

　ひとつはNode.js環境で使うことです。Node.jsはブラウザとは異なり、こちらで実行環境を選定できる他、NPMパッケージとして配信するモジュールでもpackage.jsonのengines属性にバージョンを指定することで、実行環境をある程度制限できます。

{
  "name": "node-sample-module",
  "version": "0.1.0",
  "description": "Node Sample Module",
  "license": "MIT",
  "repository": "1000ch/node-sample-module",
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Node.jsはつい先日v4.1.1がリリースされました。v0.12系やiojsでも--harmonyフラグ無しで次の機能を使うことができます。

• ブロックスコープ（let・const）
• class
• データコレクション（Map・Set・WeakMap・WeakSet）
• Promise
• Symbol
• ジェネレータ関数（Generator Function）
• テンプレート文字列（Template String）
• etc…

　なので、サーバープログラムはもちろん、NPMモジュール、あるいはElectronのアプリを書いていく中でこれらを試すのもひとつです。ES2015の機能を全て試すことができるわけではありませんが、V8の実装状況に応じて徐々に充実していくでしょう。さらに、先程紹介したBabelには、ES2015のコードも逐次コンパイルしてシームレスに実行するbabel-nodeというコマンドもあります。これを使えばBabelのコンパイルでフォールバックできる機能全てを使っていくことも可能です。

　ChromeやFirefoxの拡張機能にES2015を使っていくのも良いでしょう。インストールされる先は必然的に限定されますし、ChromeやFirefoxは積極的にサポートを進めているので、試すには持ってこいの環境とも言えます。ES2015のどの機能を使えるかについては、前述のECMAScript 6 compatibility tableのChromeとFirefoxがそのまま対応します。

まとめ

　ブラウザなどの対応状況はまだ充分とは言えませんが、仕様が策定された今、使わずに踏みとどまっているのは勿体ないと言えます。ES2015が当たり前になる未来に備えて、積極的に試していきましょう。

　この記事は「ECMAScript2015/ES6特集」の第1回目です。この特集ではJavaScriptの次世代仕様であるECMAScript 2015（ECMAScript 6）を取り上げ、歴史や経緯から追加された機能や文法の詳細など複数回に渡って解説していきます。

ECMAScriptとJavaScript

　そもそもECMAScriptとはなんでしょうか？JavaScriptとは一体何が違うのでしょうか？ECMAScriptとJavaScriptの関係は、JavaScriptが生まれた1995年まで遡ります。

　JavaScriptは1995年、当時Netscape CommunicationsにいたBrendan Eich氏がWebで実行できるスクリプト言語として開発しました。その後Internet Explorerに搭載されWebの普及と共に浸透していきますが、当初はブラウザベンダーによる独自の拡張が多く互換性は低いものでした。そこで、Ecmaインターナショナルが中心となり、JavaScriptの中核仕様を抜き出して標準化したのがECMAScriptです。

　つまり、ECMAScriptはJavaScriptの言語仕様であり、JavaScriptはECMAScriptの仕様に基づいた言語のひとつということになります。他のECMAScriptを実装している言語としては、ActionScriptやJScriptなどがあります。

ECMAScript 2015とECMAScript 6

この連載で解説していくのは、先日策定されたECMAScript（ECMA-262）の6th editionです。ECMAScript 6th editionの6を取ってECMAScript 6（ES6）と呼ばれていますが、正確な呼称をECMAScript 2015（ES2015）とし、今後は年単位のより細かいリリースを計画しているようです。

　以降、本記事ではES2015と統一して表記しますが、リンク先がES6になっていたりすることもあります。

ES2015に追加される仕様

　ES2015には、非力であったこれまでのJavaScriptに対して文法や機能が多く追加されており、より安全で便利なプログラム言語に進化しています。ES2015の仕様は公式ホームページに掲載されていますのでチェックしてみましょう。

• ECMAScript® 2015 6th edition (June 2015) PDF
• ECMAScript® 2015 6th edition (June 2015) HTML

　ES2015から追加された機能を確認するには次のリソースが参考になります。特に後者は、ES6の機能とそれをES5以前で実装した場合にどうなるかのサンプルが比較されており、とても参考になります。

• ECMAScript 6
• ECMAScript 6 — New Features: Overview & Comparison

　今回はこの中から主な新機能を、シンタックスとオブジェクトの2つに分けて紹介していきますので、「ES5でこのように書いていたものが、ES2015ならこう書ける！」というのを感じてもらえればと思います。

ES2015の新たなシンタックス

　ES2015には、変数や関数の宣言・変数の代入・引数の展開・ジェネレータ関数など、実に多くの新しい文法が追加されています。

• let・constキーワードによる変数宣言
• classキーワードによるクラス宣言
• 関数の引数のデフォルトパラメータ（Default Parameters）
• 関数の可変長引数（Rest Parameters）
• アロー関数（Arrow Functions）
• ジェネレータ関数（Generator Functions）
• 配列展開（Array Spread）
• 分割代入（Destructing Assignment）
• 文字列のテンプレートリテラル（Template Strings）
• importとexportによるモジュール構文（Module）

letとconstによる変数宣言

　ES5以前のJavaScriptには関数スコープしか存在せず、馴染みの深いvarによる宣言はしばし事故を招き、関数スコープを利用するために、無名関数を使ったスコープ作成の記述を用いることがしばしばありました。これに対し、letやconstによる変数宣言ではブラケット{}によるブロックスコープが有効になります。

let foo = [1, 2, 3];
{
  let foo = [4, 5, 6];
  console.log(foo);
  // => 4, 5, 6
}
console.log(foo);
// => 1, 2, 3

　constは定数を宣言したいときに使うキーワードであり、宣言された変数には、宣言時を除いて値の代入が不可能であるという性質を持ちます。varによって宣言した変数は命名などで工夫していても常に値が書き換わるリスクを孕んでいます。しかしconstで宣言された定数に値を再代入しようとすると、例外が発生しプログラムの実行はストップし、値の不変性がプログラムレベルで保証されます。

{
  const PI = 3.14;
  const circleArea = function (radius) {
    return radius * radius * PI;
  };
  console.log(circleArea(3));
  // => 28.26

  // PI = 3.1415;のような再代入はできない
}
console.log(PI);
// => undefined

classによるクラス構文

　JavaScriptでnewを伴うオブジェクトの作成をするには、以下のように関数を宣言することで「クラスのようなもの」を実現してきました。このES5を使ったクラス表現はnewを使わずとも関数として呼び出すことが可能であるため、グローバル変数を書き換えてしまうリスクを常にはらんでいます。これをES2015のclassを使って書き直してみます。

// これまでのクラスのようなもの
function Human(name) {
  this.name = name;
}

Human.prototype.hello = function () {
  console.log('My name is ' + this.name);
};

// ES2015のclassを使って書き直す
class Human {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log('My name is ' + this.name);
  }
}

　ES2015のclassを使って宣言されたHumanはnewキーワードなしで使うことはできないので、より副作用がない形でクラスを宣言可能になっています。

アロー関数による関数宣言

　functionを使った関数の定義に加えて、ES2015からはアロー関数が使えるようになります。functionというキーワードを使わずに=>を使って宣言することが可能になります。さらに、関数本体が単一式である場合はブラケット{}とreturnも省略できます。

// 従来のfunctionを使った書き方
let plus = function(x, y) {
  return x + y;
};

// アロー関数でfunctionを省く
let plus = (x, y) => {
  return x + y;
};

// 単一式の場合はブラケットやreturnを省略できる
let plus = (x, y) => x + y;

　functionが省略可能になることでよりシンプルに書けますが、アロー関数は宣言しているスコープのthisを引き継ぐという特徴があります。もちろんこの機能も魅力のひとつですが、気にせずに使っていると思わぬミスをしてしまうかもしれません。

// ブラウザのグローバル空間に於いて以下を実行すると
// グローバルのthisであるwindowがアロー関数内のthisになる
window.setTimeout(e => {
  console.log(this === window); // => true
}, 1000);

ES2015に追加されるオブジェクト

　シンタックス以外にも、様々な機能を備えたオブジェクトが追加されます。新たに追加されるオブジェクトの他にも、ArrayやObjectといった既存のオブジェクトに対して様々な関数が追加されており、機能が強化されています。

• Promise: 非同期処理を抽象化するデザインパターン
• Symbol: ユニークな値を表現する新たなプリミティブ型
• Reflect / Proxy: オペレーションに処理を介入させる機能
• Set / WeakSet: 一意なデータスタックを表すオブジェクト
• Map / WeakMap: Key-Valueのデータ構造を表すオブジェクト

Promise

　Promiseは既にお馴染みの人も多いでしょう。JavaScriptのコールバック地獄に対する解決策のひとつとしてJavaScriptの世界に持ち込まれたPromiseは、需要も高くライブラリ実装も多かったですがES2015からはついにネイティブに組み込まれます。

// ES5
asyncFunc1(function () {
  asyncFunc2(function () {
    asyncFunc3(function () {
      // asyncFunc1 → asyncFunc2 → asyncFunc3
      // という実行順をコールバックの入れ子で実現する
    });
  });
});

// Promiseを使ってコールバックの入れ子を避ける
// asyncFuncはそれぞれがPromiseオブジェクトを返却している
asyncFunc1().then(function () {
  return asyncFunc2();
}).then(function () {
  return asyncFunc3();
});

　最近ではService WorkerやFetchなどの様々なブラウザAPIがPromiseベースで設計されており、今後もPromiseは多く使われていくでしょう。今のうちにマスターしておきたいところです。

Symbol

　Symbolはユニークな値を表現するプリミティブな新しい型です。Symbol型の値はStringのようにプロパティのキーとして使うことができますが、文字列とは異なりSymbolのインスタンスを使わないと参照することができません。

const key1 = Symbol('foo');
let object = {};
object[key1] = 'Value for key1';

console.log(object['foo']); // => undefined
console.log(object[key1]); // => Value for key1

ProxyとReflect

　Proxyはオブジェクトへのアクセス時に処理を割り込ませる機能を提供するオブジェクトです。Proxyを使うと、値の参照時（get）や代入時（set）、プロパティの削除時などのタイミングで処理を介入させることが可能です。

let person = {
  name: '1000ch'
};

let proxied = new Proxy(person, {
  get: (target, name, receiver) => `${name} is ${target[name]}`,
  set: (target, name, value, receiver) => {
    console.log(name + ' is changed.');
    Reflect.set(target, name, value, receiver);
  }
});

console.log(proxied.name); // => name is 1000ch

　Proxyを使ってインターセプトすると、デフォルトの振る舞いを邪魔することになります。そこで、デフォルトの挙動を再現するためにReflectというオブジェクトがあります。Reflectにはインターセプトできるハンドラ（ここでいうgetやset）に対応したメソッドが用意されているので、それを呼び出してやることでデフォルトの挙動を再現することができます。

MapとSet、WeakMapとWeakSet

　SetとMapは、これまで配列やオブジェクトを使って表現していたデータスタックやKey-Valueといったデータ構造化をサポートします。Setのインスタンスには同一の値を追加できず、ユニークな値がスタックされていることが保証されます。MapはObjectのようにキーとそれに対する値を保持しますが、Objectと異なるのはキーに文字列以外のオブジェクトを指定できる点です。これによって様々なオブジェクトに対して値を関連付けることができます。

let map = new Map();
let set = new Set();

let object = {};
let array = [];

set.add(object);
set.add(array);
set.add(window);
set.add(window); // => 追加されない
set.has(window); // => true
set.delete(window);
set.has(window); // => false

map.set(object, 100);
map.set(array, 'Value for Array');
map.set(window, {});
map.get(array); // => Value for Array
map.has(object); // => true
map.delete(window);
map.get(window); // => undefined

　WeakSetとWeakMapはその名の通り、弱いSetとMapです。SetとMapに比べて参照が弱くなっており、値への参照が存在しなくなるとエントリが自動で削除されるという特徴があります。例えばDOMのオブジェクトに対してWeakMapを使って値を関連付けます。そこでキーに指定したDOMオブジェクトを削除すると、関連付けた値を参照する手段はなくなるため関連付けたKey-Valueのエントリは自動で削除されるのです。Objectで表現していた場合はどこからも参照されないエントリが残ることになるのでメモリリークの要因になりますが、WeakMapを使うことでそのリスクを減らしていけるでしょう。

まとめ

　第一回ではECMAScriptとJavaScriptの歴史、ES2015に追加される機能の概要、主な機能の紹介をしました。次回は各ブラウザの実装状況や、実践導入に向けて抑えておくべき知識などを解説していきます。