E-Commerceから Conversational Commerceへ

ここ最近話題になることが多いAIやBotsですが、私の周りではConversational interface、Conversational UXなどという言葉が去年からたびたび使われるようになっているようです。

これはAmazon Alexaなどのデバイスや、Facebook Messengerなどチャットアプリケーションなどの対話型テクノロジーをいかに活用しその使い勝手をよくするか、ということなのですが、必ずしもアプリケーションのUIデザインそのものを述べているわけではなく、既存のサービスを延長することを指していることも多いでしょう。例えば、今まではモバイル上のアプリケーションのみで車を呼べていたUberが、Facebook Messenger のチャットからも車をを呼べるような機能を加えたり、Slack上でTaco BellからタコスをオーダーできるTacoBot、というのもが挙げられます。

Slack Botを書いてみよう

さて、というわけで何かBotを書いてみたいと思いませんか？ここはNode.jsでSlack botを作成する方法を紹介したいと思います。

このチュートリアルでは、ディベロッパー向けのHTTPステータスコードのルックアップができるスラッシュ・コマンドを作ってみます。ここでは私が５年ほど前に何気なく作って、Mashableなどで紹介され思わぬ反響を得てしまったHTTP Status Catsを使ってみます。具体的には、Slack上でユーザが、/httpstatus [code] （例えば /httpstatus 404）と入力すると、そのステータスコードの意味と猫が一緒に表示される、という簡単なbotです。

まず試してみたい方は、HTTP Status Cats command for Slackを自分がアドミン権限のあるのチャットチームにインストールしてみてください。

さて、このチュートリアルは２つのパートに分けられます。

1. スラッシュ・コマンドを書いて、自分のSlackチームにインストールする
2. OAuthを使ってボットをSlack’s App Directoryなどで誰もがインストールできるようにする

とりあえず動くbotを書いてみたい、と思う方は１だけ試してみてで十分ですが、botをみんなにシェアしたい方は２も読んでみてください。

ソースコードと実際のボットのインストールボタンは両方GitHubにあります。では始めましょう！

1 プライベートなスラッシュコマンドボットの作成

ここで作るのは、Slackの公式な用語でいうところのCustom Integrationsというもので、自分のチャットグループ専用のプライベートなbot、もしくはいわゆるAppとして発表する前にドライ・ランを行うことを指します。アカウントを持っていない方はまずサインアップしてから始めましょう。

1.1 スラッシュコマンドの設定

ログインして、my.slack.com/services/new/slash-commandsでコマンドを選びます。ここでは/httpstatusと入力しAdd Slash Command Integrationボタンをクリックして次のステップへ進みます。

Tokenなどの欄がありますが現時点では、(1) Command、 (2) URL、 (3) Method、の３つが必要になります。

(1)には、/httpstatus、(3)には、POST、そして(2)のURLは次のように設定してください。

開発中に使用するURLを取得するにはngrokを使ってみましょう。いろいろなツールがあるのですが、これは自分のローカルホストをパブリックURLとしてトンネルできるというとても便利なツールなので私のイチオシです。開発途中にデプロイすることなく、Webhookが手軽に使えます。自分のローカルホスト、たとえば http://localhost:3000/ をつかったままOAuthのテストもできるのです。（注：よく聞かれるのですが、ngrokはあくまでも開発ツールですのでプロダクションには適していません。デプロイメントに関しては最後の章を読んでください）

https://ngrok.com/から自分のマシンにngrokをインストールしたら、ターミナルで自分の使いたいポート番号（このチュートリアルでは 3000）を設定します。

$ ngrok http 3000

すると下のスクリーンショットのように、Forwardingアドレスが取得できるので、そのURL（例えばhttps://71f03962.ngrok.io/)をSlackセッティングの、上のスクリーンショットで示された(2)の欄で使います。

すべての設定が終えたらSaveボタンを押します。”Your settings have been saved!”のメッセージが画面上部に現れるのを確認してください。

1.2 Node.js を使ってレスポンスを書く

基本的にbotは、ユーザがSlackインターフェイス上でコマンドを実行した際HTTP POST（または設定次第では GET)によって指定先のURLにメッセージが届け、プログラムでその応答をユーザに返す、という作業になります。

たとえばそのユーザが/httpstatus 302というコマンドを送信した場合、指定URLに送られるデータは次のようになります。

command=/httpstatus
text=302
response_url=https://hooks.slack.com/commands/1234/5678
…

Botは、これに対する応答をユーザに返します。この場合はユーザが尋ねているステータス302の定義とこの猫を返しましょう。

ではそのコードを書いてみましょう。

まず、Express.jsとbody-parserをインストールします。

$ npm install express body-parser --save

index.jsで、expressのインスタンスを作り、先ほどngrokで設定したポート番号、3000でサーバを始動します。

'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const server = app.listen(3000, () => { 
console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);});

次はHTTP POSTルートメソッドで、コマンドを扱います。

app.post('/', (req, res) => {
 let text = req.body.text;
 // ここでbotを書きます
});

ここでtextの値を取得します。HTTP Status botの場合、/httpstatus コマンドの値、例えば”404″が textの値になります。同時に、ユーザが数字以外を入力した際にエラーメッセージを送るなどのエラーチェックもしておきましょう。

if(! /^\d+$/.test(q.text)) { // not a digit
 res.send('Error: enter a valid status code, such as 200');   
 return;
}

このエラーは、ユーザだけにプライベートに送信されるメッセージでチャットそのものには表示されません。

エラーがない場合は、コマンドに対する応答をJSONとしてレスポンスします。

let data = {
 response_type: 'in_channel', 
 text: '302: Found',
 attachments:[{
   image_url: 'https://http.cat/302.jpg'
 }]
};
res.json(data);

response_typeをin_channelとすることで応答はチャットメンバー全員に見えるように送信されます。デフォルトはその逆のephemeralで、コマンドを送ったユーザのみに表示されます。

このコマンドと応答は次のようになります。

このサンプルコードでは、応答をわかりやすくハードコードで示してありますが、実際はストリングなどは別のファイルに定義しています。下のスクリーンショットのように存在しないHTTPステータスに対してのエラーメッセージも定義しましょう。実際のコードはソースコードを参照してください。

ディスプレイはボーダー色などのカスタマイズが可能です。詳しくはSlackドキュメンテーションのBasic message formattingを参照してください。

次のステップでは、このボットを自分のチャットグループ以外に配布するために必要な認証とコードのデプロイについてです。

2. Slack Botのディストリビューション

この「Custom Integration」をインストール可能な「App」にするには、コードのデプロイをして他のチャットにもインストールできるようにせねばならないのですが、そのためにはあといつくかのステップが必要になります。

2.1 Appセットアップ

まず、自分のAppを申請し、クライアントIDやシークレットなどのクレデンシャルを取得します。https://api.slack.com/appsでCreate an Appボタンをクリックしてください。

このフォームにはいくつもの欄があり少しわかりづらいのですが、スラッシュコマンドのbotには次の3つが最低必要になります。

• Basic Information (at https://api.slack.com/apps/YOUR_APP_ID/general)
• OAuth & Permissions (at …/YOUR_APP_ID/oauth)
• Slash Commands (at …/YOUR_APP_ID/slash-commands)

2.1.1 API Keyを.envファイルに保管

ここで取得したClient ID、Client secret、Verification tokenは .env ファイルに別に保管してbotのメインのコードから切り離すことを推奨します。gitを使う場合は、このファイルを .gitignore ファイルに付け加えるのを忘れずに。

SLACK_CLIENT_ID=12345XXXXX.09876XXXXX 
SLACK_CLIENT_SECRET=535d2f9....
SLACK_VERIFICATION_TOKEN=42P829U...

2.1.2 Foremanを使う

他にも手段はありますが、Herokuにデプロイするために私はNode Foremanを使っています。Foremanを使うには、npmを使ってglobalフラッグでインストールしてください。

$ npm install -g foreman

アプリケーションの Root に .procfile を作成し、この一行を加えます。

web: node index.js

index.jsを実行するには node index.jsの代わりに次のコマンドを使います。

$ nf start

2.2 ユーザの認証

Slackは認証にはOAuthを使っています。実際には自分でOAuthを実装しなくても、Slack ボタンを使えば簡単に認証できるようになっています。

公式のドキュメンテーションのダイアグラムに手を加えて、流れをわかりやすくするためにGIFアニメーションにしてみました。

ここでの実際のフローは次のようになります。

1. ウェブページを作成し、認証ボタンを置く。ユーザがボタンをクリックするとパラメータがSlackに送信される(ユーザは認証ページにリダイレクトされる)。
2. Node appには、SlackからGETで10分だけ有効な仮のコードが送られる。
3. アクセストークンを得るために oauth.access API使い認証コードをPOSTする。Node app側から`200 OK`を受け取り次第、このプロセスが完了。
4. オプションとして、このトークンを使ってSlackの他のAPIにもアクセス。例えば、認証後、ユーザをhttps://team-name.slack.comにリダイレクトするなど。/

2.2.1 Slack ボタンの設定

Slackボタンを使うには、まずウェブページを作成してください。私の場合はこのNode Appとは切り離した別のHTMLページを作成し、GitHub Pagesにホストしました。

次にボタンを設定しましょう。 https://api.slack.com/docs/slack-button に行き、Add the Slack button までスクロールして下さい。

このボタン作成ツールのCommendsのチェックボックスをチェックします。

上で示したフローの４を実行したい場合は、このGETパラメータを下のように変更します。

<a href="https://slack.com/oauth/authorize?scope=commands+team%3Aread&client_id=your_client_id">

ここでscopeに着目してみてください。commandsの他にteam:read(コロンは%3Aとエスケープ)が必要になります。詳しくはOAuth scopes on the Slack API docsで。

2.2.2 トークンの発行

さて、Nodeコードに戻りましょう。仮のコード(req.query.code)をGETで取得するためにまたExpress.jsを使います。

何でもよいのですがここでは/slack routeを使いましょう。この場合ngrokのURL は http://71f03962.ngrok.io/slack のようになります。Slack App設定ページ（https://api.slack.com/apps/YOUR_APP_ID/oauth）の、OAuth & Permissions セクションにある、Redirect URLの欄にはこのURLを設定してください。

仮のcodeを取得されたら、それを自分のAPIクレデンシャルとともにPOSTで送って、トークンと交換します。POSTするためにここではNode.jsのHTTPリクエストクライアントである、Requestを使いましょう。

$ npm install request --save

仮のcodeを取得し、それをtokenと交換するコードが下になります。

const request = require('request');

app.get('/slack', function(req, res){
 let data = {form: {
   client_id: process.env.SLACK_CLIENT_ID,
   client_secret: process.env.SLACK_CLIENT_SECRET,
   code: req.query.code
 }};

 request.post('https://slack.com/api/oauth.access', data, function (error, response, body) {
   if (!error && response.statusCode == 200) {
     // おしまい！
     // ここからはオプションでチーム情報を取得
     let token = JSON.parse(body).access_token; // Auth token
   } ...

2.2.3 オプショナル： ユーザをチームURLにダイレクトする

認証が済んだらそこで終えてもよいのですが、この画面でユーザを置き去りにするのはあまりよいUXとはいえないので、チームページにリダイレクトしてみましょう。

リダイレクトURLのサブドメインとなるチーム名はteam.infoAPIで取得できます。

このAPIを使うにはトークンが必要なので前述のコードでの、トークンにアクセスする箇所に下のコードを追加します。

...
request.post('https://slack.com/api/team.info', {form: {token: token}}, function (error, response, body) {
 if (!error && response.statusCode == 200) {
   let team = JSON.parse(body).team.domain;
   res.redirect('http://' +team+ '.slack.com');
 }
});

これで API からチーム名(team.domain)が返されました。最終的にこれを使ってチームURLにリダイレクトしてできあがり！

このチュートリアルでは簡素化したコードを使いましたが、全ソースコードはGitHubで見てみてください。

2.3 サーバにデプロイする

最後にデプロイしておしまいです。APIクレデンシャルのenv vars設定を忘れないように！私はHerokuを使っているのですが、Herokuの場合、heroku configコマンドを使います。例えば、heroku config:set API_KEY=123456というふうに設定してください。

Slackの設定で画面で指定したngrok URLを、デプロイ先のURLに変更するのもお忘れなく。

さて、プロセスが少し面倒ですが、コード自体は簡単だったと思います。もし何か面白いボットを作った際にはぜひ教えてくださいね！

これまでの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に追加される機能の概要、主な機能の紹介をしました。次回は各ブラウザの実装状況や、実践導入に向けて抑えておくべき知識などを解説していきます。

わかめです。これから、TypeScriptを使ってECMAScript 2015スタイルのコードを書く方法を紹介します。連載の初回となる本稿では、ECMAScript 2015やTypeScriptの魅力について、TypeScript用エディタの案内をしていきます。

TypeScriptとは？

TypeScriptはMicrosoft社が開発しているAltJSの1つです。AltJSとは、ある言語Xから、JavaScriptへと変換（トランスパイル）して使う言語の総称です。Typeという名の通り、JavaScriptの世界に静的な型付けを持込み、JavaやC#のようにコンパイル時に整合性のチェックを行うことができるようにしたものです。

見事チェックにパスしたら、TypeScriptからJavaScriptへと変換され、JavaScriptとして実行できる、という按配です。

TypeScriptは全くの新言語、というわけではありません。ECMAScript 5のsupersetとして設計されているため、皆さんが慣れ親しんだJavaScriptの構文に少しの+αを加えた言語がTypeScriptです。ECMAScript 5のsupersetなのですが、設計当初よりクラスなどのECMAScript 2015の要素も含んでいました。ゆくゆくはECMAScript 2015のsupersetにもなっていくことでしょう。

また、多くのECMAScript 2015用の構文をECMAScript 5の構文に変換して出力することができるため、現在のECMAScript 5をサポートしている（つまりほとんどの）ブラウザで動作させることが可能です。ECMAScript 5を改良すべく生まれたECMAScript 2015の仕様を先取りし、既存のブラウザ上で使いはじめることができる環境として、TypeScriptは魅力的でしょう。

TypeScriptのECMAScript 5の範囲での説明は、型の国のTypeScriptなどを参照してください。

TypeScriptとECMAScript 2015

ECMAScriptというのは、JavaScriptの仕様の元になる仕様です。現在、多くのブラウザではECMAScript 5の仕様にもとづき実装が行われています。2015/06/18にECMAScript 6th editionとして、ECMAScript 2015が策定されました。ECMAScript 2015という名前よりも、ECMAScript 6や、もっと縮めてES6という名前のほうが目にする機会が多いかもしれません。

これにより、今後ブラウザでのECMAScript 2015のサポートの進みが早くなっていくものと考えられます。現在の各ブラウザでのES6の機能の実装状況はes6 compat tableで確認するのが便利でしょう。

ECMAScript 2015には、言語仕様に素敵な要素が多く追加されています。いくつかを確認していきましょう。コード例を見て、「え、これ今までできなかったの？」と思ってしまうかもしれません。TypeScriptなら、今使えます。

• letでブロックスコープ

let str = "外側の変数";
console.log(str); // 外側の変数 と表示される
{
  let str = "内側の変数"; // このブロックでだけ有効
  console.log(str); // 内側の変数 と表示される
}
console.log(str); // 外側の変数 と表示される！戻ってる！

• constも使える

const str = "test";
str = "re-assignment"; // 仕様上SyntaxErrorになる。ブラウザによっては未実装で単に無視される。

• prototypeの代わりにclass構文！

class SampleA {
  constructor() {
    this.name = "vvakame";
  }

  hi() {
    console.log("Hi! " + this.name);
  }
}

// 上記と等価なECMAScript 5なコード
function SampleB() {
  this.name = "vvakame";
}
Object.defineProperty(SampleB.prototype, "hi", {
  enumerable: false,
  configurable: true,
  writable: true,
  value: function () {
    console.log("Hi! " + this.name);
  }
});

// 実行結果は同じ
new SampleA().hi();
new SampleB().hi();

• アロー関数でわかりやすいthisの振る舞い

"use strict";

function Sample() {
  // this.name を設定する
  this.name = "vvakame";

  // 普通の関数とアロー関数で this の値を比べてみよう！
  var func1 = function() {
    console.log("func1: " + JSON.stringify(this));
  };
  var func2 = () => {
    console.log("func2: " + JSON.stringify(this));
  };

  // func1: undefined と表示される
  // 非直感的。いやわかるでしょ？という人はJavaScript慣れしています！
  func1();

  // func2: {"name":"vvakame"} と表示される
  // 直感的！
  func2();
}

new Sample();

• デフォルトパラメータ、便利です

function hello(word = "ECMAScript 2015") {
  // word が指定されなかった場合のデフォルト値を指定できる
  console.log("Hello, " + word + "!");
}
hello("JavaScript"); // Hello, JavaScript! と表示される
hello();             // Hello, ECMAScript 2015! と表示される

• 文字列連結もお手軽に！

let name = "vvakame";
let like = "cat";

console.log(`${name} ♥ ${like}`); // vvakame ♥ cat と表示される

なぜTypeScriptか？

さて、本記事ではタイトルの通り、TypeScriptを推していくわけですが、他の選択肢についても言及していきます。読者自身が何をほしいか、どうやって自由自在にコードを書きたいか、作りたいものがどれくらいの規模なのか、それぞれをよく考えて適切な選択をしていただけるといいなと考えています。もちろん、おすすめはTypeScriptですが、読者層別におすすめのツールを取り上げていきます。

Babel

Babelは旧名が6to5と呼ばれていたツールで、sebmck氏によって開発されています。Babelはソースコードのコンパイルが必要なツールで、通常foo.es6というファイルをfoo.jsに変換します。

現在ECMAScript 2015や、さらに次のECMAScript 7でコードを書くには一番進んでいて、将来のブラウザでもそのまま動く可能性が高いと言えます。現在のJavaScript(ECMAScript 5)に言語としての不満がない人や、Ruby on Railsなどの動的型付けの言語+フレームワークで十分に開発できている人に向いているでしょう。

Playgroundも用意されているため、まずはブラウザ上で試してみるとよいでしょう。

Flow

FlowはFacebookが開発しているツールで、JavaScriptに対して静的な型チェックを提供します。Flow自体の開発言語はOCamlです。Flowの型チェックは、型推論や段階的な型付けを前面に押し出しているようです。JavaScriptのコード自体、関数や変数のユースケースから型を推論させることや、TypeScriptと同様に手で型の指定を記述することもできます。制作元が同じだけあって、FacebookのReactと組み合わせて利用することも考慮されているようです。

もし、Reactを使うようであれば、利用を検討してみてもいいかもしれません。

TypeScript

さて、最後に我らがTypeScriptです。TypeScriptは、Microsoftが3年近く前から開発し続けているツールです。TypeScriptはソースコードのコンパイルが必要なツールで、通常foo.tsというファイルをfoo.jsに変換します。

TypeScriptは静的型付けの言語で、コンパイル時に多くの整合性のチェックを行うことができます。例えば「Personクラスには必ずnameプロパティがある」とか「mapメソッドは第一引数に関数を取る」などがソースコードの字面上から解析できれば、それに違反している（つまりは間違った）コードを実行するよりも前の段階で検出することができます。これは、JavaやC#といった言語と同じ性質であると言えます。

反対に、静的型付けではない、動的型付けである言語はJavaScriptやRubyなどです。これらの言語は実行時に必要なプロパティやメソッドなどが存在していればよい、という態度です。静的・動的な型付けのどちらが優れているということはありませんが、その言語を使う個人や組織毎に得手・不得手があるでしょう。

別な切り口として、IDEやエディタをどの程度使っているかも検討材料になります。静的型付けの言語では実行せずともどういうプロパティやメソッドがあるかがわかります。そのため、IDEによる強力な支援が得られやすいのです。

例えば、str.と打った時に利用可能なメソッドの一覧が提示されたり、変数やメソッドのリネームが一発でできたり、関数の参照元を全てリストアップするなどの作業を行うことができます。

反対に、動的にメソッドが増えたりする言語では正確なサジェストを行うのが大変難しいです。例えば、RubyのActiveRecord（ORマッパライブラリ）では、DBのテーブルのカラムに合わせて利用可能なメソッドが増えたりします。便利といえば便利ですが、IDEがライブラリのすること全てを把握してプログラムとして実行することなく呼び出し可能なメソッドの一覧を正しく提示することは現実としては不可能でしょう。

静的型付けな言語ではコンパイル時に検査されるおかげで、リファクタリングも抜け漏れなくできているという勇気が持てます。JavaScriptを書いている時に「テストを書き足りていないのではないか」「実行時にundefinedなプロパティを触ってしまいエラーになるのではないか」という恐怖を感じたことはありませんか？TypeScriptではこの恐怖をかなり減じ、勇気あるリファクタリングを行うことができます。常にきれいなコードを保つ足がかりをTypeScriptは提供してくれるのです。

Playgroundも用意されているため、まずはブラウザ上で試してみると良いでしょう。

なお、WebComponentsが流行ったほうが、Reactが主流の未来より僕は楽だよ派の筆者としては遺憾なのですが、TypeScript 1.6でJSXサポートが入る予定です。

エディタの紹介

TypeScriptはコンパイラ自身にLanguage Serviceという、まさにエディタのためのような機能が組み込まれています。TypeScriptを開発するための総本山（なにせMicrosoft製ですからね）であるVisual StudioでもこのLanguage Serviceから得た情報を元に処理しています。つまり、TypeScriptでは数多くのエディタでVisual Studio相当の入力補完や、フォーマットなどが得られるようになっているのです。

いくつか、箇条書きで紹介していきます。

• Visual Studio
  MicrosoftのIDEの最有力候補。NuGetなど独自の生態系があるが最近だいぶOSS側に歩み寄ってきた。残念ながらWindowsでしか動かない。
  
  
• Visual Studio Code
  最近新登場したIDE。Windows, Mac, Linuxで動作する。Previewなだけあってまだまだ機能が足りないが十分動く。Macユーザである筆者のメイン環境その1。余談だが、内部的にGitHub社製Atomが使っているElectronというフレームワークを使っていて、IDE全体がHTML+JavaScriptで作られている。
  
  
• atom-typescript
  GitHub社製のAtomエディタ用のプラグイン。筆者のメイン環境その2。
  
  
• eclipse-typescript
  Eclipse用プラグイン。かなり長期間開発が継続されている。Eclipseユーザなら検討の価値があるかも。
  
  
• TypEcs
  Eclipse用プラグイン。同上。
  
  
• typescript-tools
  エディタそのものではないが、TypeScriptのLanguage Serviceをツール化したもの。vimやemacs、Sublime Text 3用のプラグインから利用されている。
  
  
• WebStorm
  JetBrains社製のIDE。IntelliJ IDEAやPyCharm, PhpStormの仲間。ここに書いたが、WebStorm 10の時点ではLanguage Serviceを使っておらず、独自に解析しているためTypeScript用という観点で見た時は一歩劣る。筆者の旧メイン環境。

まとめ

TypeScriptの環境を作り、しばらくコードを書いてみて、あまりに窮屈すぎる！エディタの恩恵を感じない！と思ったらbabelを使ってみるとよいでしょう。

次回は開発環境の構築と、TypeScriptを取り巻く周辺ツールについて解説します。

2013年11月30日（土）に開催された「HTML5 Conference 2013」の、Mozilla Japan浅井智也さんによるセッション「進化を続ける JavaScript ～次世代言語のステキな機能と高速化の行方～」のセッション内容をご紹介します。

JavaScriptの課題と改良への動き

現在のJavaScriptには、次のような課題があります。

• 高速化がなかなかできない
• クラス、モジュールがない
• プロトタイプベースであるため、普段Javaなどでクラスを使っている人にとって、メソッド定義や継承がわかりにくい
• メソッドとして呼び出したときはthisがそのメソッドのオブジェクトになるが、間違って関数として呼び出すとthisがwindowオブジェクトになるなど、thisの挙動を捉えるのが難しい
• argumentsなど、ArrayのようでArrayでなくついarguments.slice()とかしてエラー原因になる、紛らわしいオブジェクトがある
• コールバック地獄
• 実行時エラーが多く、コンパイルエラーが少ないので、デバッグが非常に大変である

JavaScriptの歴史について詳しくは過去の講演資料をご覧ください。簡単に言えば次の資料の通りです。次期ECMAScript 6thでは大きく改定されるため、この改定内容はぜひ知っておく必要があります。

ECMAScript 6thの概要

目標

ECMAScript 6thの目標は、より開発・テストを行いやすくし、相互運用性を確保し、静的検証（コンパイルエラーの検出）を行える構文・言語仕様を提供することにあります。

実装・対応状況

FirefoxのSpiderMonkeyの実装範囲が比較的広く、V8がそれに続く状況になっています。機能によってはV8の方が先に入っていたり、上手く実装されているものもあります。IEは非常に安定した、広く使われている仕様が実装されており、加えて、グローバリゼーション、国際化といったビジネス系の仕様が積極的に提案、実装されています。TypeScriptは、対応範囲がクラスなどに絞られている印象があるのですが、比較的綺麗なコードが生成されます。その他にも、letやconstといったブロックスコープだけを使いたいのでしたらdefs.jsを、あるいはModuleのimport/export機能だけを使いたい場合はes6-module-loaderといったコンパイラも使うことができます。

Syntax Sugar

分割代入 (Destructuring)

これまでのJavaScriptでは代入文の左辺に変数を一つしか指定できませんでしたが、ECMAScript 6thでは左辺に配列やオブジェクトを指定することができるようになります。これにより、例えば、関数から配列やオブジェクトなどで複数の返り値を受け取り、それをそのまま変数に格納するといった処理を記述できるようになります。JSONから特定のデータを抜き出す、といったことを行うこともできます。

// 配列で受け取るサンプル: // 値の入れ替え
[a, b] = [b, a];

// 関数から複数の値を返して一気に変数に代入
var [c,d] = (function f() { return [1,2]; })(); // -> c=1, d=2

// 一部省略や入れ子も可能
var [e,,[x,y]] = (function f(){
  return [3,4,[10,20]]
})();

// オブジェクトで受け取るサンプル
var fx={ name:"Firefox", vendor:"Mozilla", ver:26 };
var ch={ name:"Chrome", vendor:"Google", ver:31 };
var browsers={ firefox: fx, chrome: ch }

// 欲しいプロパティだけ一括代入
var { name: n, ver: v } = fx;
// -> n="Firefox", v=26

// 関数の引数から必要なプロパティだけ受け取る
(function ({ vendor: ven }) {
  console.log(ven);
})(fx); // -> "Mozilla"

default & rest parameter

引数のデフォルト値を設定できたり（default parameter）、関数の残りの引数を配列で受け取ったり（rest parameter）することができます。

e = document.body; // 何か適当な要素
function setBackgroundColor(element, color='orange') {
  element.style.backgroundColor = color;
}
setBackgroundColor(e); // オレンジに
setBackgroundColor(e, 'blue'); // 青に
setBackgroundColor(e, undefined); // オレンジに

// デフォルト値は呼び出し毎に生成される
// 同一オブジェクトが渡される Python などとは違う
function getObject(o={}) { return o; }
getObject() == getObject() // -> false

function f(a, b, ...args) { return args; }
f("IE", "Chrome"); // -> []
f("IE", "Chrome", "Firefox"); // -> ["Firefox"] !

// rest arguments は Array のメソッドが使える
// [].slice.call(arguments) ハックとか不要に
function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

配列の内包表記 (Comprehensions)

for…ofなどを使って、直接、配列のリテラルを生成することができます。

// 配列のフィルタとマップ
[for (x of [1,-4,5,3,-7]) if (x > 0) x] // -> [1, 5, 3]
// ES5 なら次のように書く
// [1,-4,5,3,-7].filter(function(x) { return x > 0 });
[for (x of [2,4,6]) x*x] // -> [4, 16, 36]
// ES5 なら次のように書く:
// [2,4,6].map(function (x) { return x*x });

// 配列のデカルト積やラベル生成もシンプルに
[for (i of [0,2,4]) for (j of [5,3]) i*j]
// -> [0, 0, 10, 6, 20, 12]
[for (x of 'abc'.split(''))
 for (y of '123'.split('')) (x+y)];
// -> ["a1","a2","a3","b1","b2","b3","c1","c2","c3"]

Modularity

ブロックスコープ (let, const)

今までのJavaScriptにはブロックスコープがなく、グローバルスコープと関数スコープしかありませんでした。変数をブロックスコープに納めるために、今まではわざわざ関数を作らなければなりませんでしたが、ECMAScript 6thでは、let, constを指定するだけでブロックスコープ変数を作成することができます。

{
  // let 定義: ブロックスコープ
  let a = 1, b = 10;
  // let 式・文: let (...) に続く式・文中だけで有効
  let (a = 100, c = 300) console.log(a); // -> 100
  // for 文などでの let
  for (let a=0; a<3; a++) {
    console.log(a+b); // -> 10, 11, 12
  }
  console.log(a); // -> 1
}
console.log(a); // × ReferenceError: a is not defined

// 不変定数を定義
const browser = "Firefox";

// 再定義は TypeError となる
const browser = "Internet Explorer";
// TypeError: redeclaration of const browser !

// 定数への代入は単に無視される
browser = "Chrome";
console.log(browser); // -> "Firefox"

Class

待望のClassが使えるようになります。他のオブジェクト指向の言語と同じような形式でClassを記述することができます。constructorメソッドが初期化時の処理として使われます。

// クラスベース OOP でよく見る感じ
class Animal {
  constructor(name) {
    this.name = name;
    this.hungry = true;
  }
  eat() {
    this.hungry = false;
  }
  run() {
    this.hungry = true;
  }
}

// 派生クラスの定義がシンプル
class LesserPanda extends Animal {
  constructor(name, tail) {
    super(name);
    this.tail = tail;
  }
}

Module

今まで、モジュールをインポート・エクスポートする様々なライブラリが作られてきましたが、この機能が公式のものとして提供されることになりました。

module 'math' {
  export function sum(x, y) {
    return x + y;
  }
  export var hbar = 1.054571726e-34; // ディラック定数
}

import {sum, hbar} from 'math';
alert("2ħ = " + sum(hbar, hbar));

// オブジェクトのプロパティに読み込み
module Math from 'math';
alert("2ħ = " + Math.sum(Math.hbar, Math.hbar));

Readable Code

Arrow Function

今まで、コールバックとして関数を渡す際に「function(…){…}」と記述する必要があり、ソースコードが冗長で見にくくなっていましたが、Arrow Functionを使うことでこの関数をシンプルに記載できるようになります。

// return するだけのコールバックがシンプルに
[1,2,3].map(x => x * x);
// ES5 ではこう書く必要があった:
// [1,2,3].map(function (x) { return x * x; });

// n! (nの階乗) を求める関数もシンプルに
var factorial=((f=n=>n>1 ?n*f(n-1):1)=>(f))();
factorial(10); // 3628800

Arrow Functionには、簡潔に書けるということに加えて、もう一つ良いことがあります。それは、thisが保持・バインドされるということです。今まで、コールバック関数内で呼び出し元のオブジェクトを参照しようとすると、thisがwindowオブジェクトを参照するようになるため、コールバック関数の前で「self = this」などと記載し、この場合はコールバック関数内で「self」を参照しなければなりませんでした。Arrow Functionですと、Arrow Function内のthisが、その外側の関数のthisを参照し続けるという特性があり、このような記載が不要となります。

Generator

nextメソッドを持ち、繰り返し処理が実行される際にnextメソッドが呼ばれる特殊なオブジェクトをイテレータ(iterator)と呼びます。イテレータを簡単に生成できるジェネレータ関数によって生成されたイテレータをジェネレータ(generator)と呼びます。ジェネレータ関数では、yieldというキーワードがreturnの代わりに使われており、yieldが実行されるとその引数が返却されて関数の処理が一時停止します。そして、再度関数が実行されるとyieldの次の行から処理が再開し、またyieldが実行されると引数を返却して処理が一時停止する、という処理の流れになります。ジェネレータ関数を使うことで、関数の再起呼び出しを行うことなく、何かしらの繰り返しの処理を行うことができます。

// ジェネレータ関数 (ジェネレータのコンストラクタ)
function* fibonacci() {
  let [prev, curr] = [0, 1];
  for (;;) {
    [prev, curr] = [curr, prev + curr];
    yield curr; // 値を返して一時停止
  }
}
for (n of fibonacci()) {
  if (n > 20)
    break;
  console.log(n); // 順に 1, 2, 3, 5, 8, 13
}

先ほどのfor…ofの中でジェネレータ関数を使う方法以外にも、毎回明示的にイテレートする方法があります。こちらがイテレータの本来の使い方なのですが、例えば、カウンタを作成する場合、毎回一時停止して内部で保持している値をインクリメントするジェネレータ関数を定義すると、nextメソッドを呼ぶたびにインクリメントされた値を取得する処理を実装することができます。

function* counterGenerator() {
  let c = 0;
  for (;;) {
    yield c++; // 値を返して一時停止
  }
}
// ジェネレータを生成
let counter = counterGenerator();
// next() メソッドで {value, done} を得る
counter.next(); // -> {value: 0, done: false}
counter.next(); // -> {value: 1, done: false}
counter.next().value; // -> 2
counter.next().value; // -> 3

Promise

Promiseを使うことで、今までよりもコールバックを非常に簡潔に書けるようになります。また、catchなどの構文も今まで以上に書きやすくなります。Promiseを生成するときに引数として関数を渡し、そこでresolve関数とreject関数を指定します。このresolve関数が呼ばれたときにこのPromiseインスタンスが解決し、このインスタンスのthenメソッドが実行されます。

let p = new Promise(function (resolve, reject) {
  // 3 秒後に resolve 呼んでプロミスが解決する
  setTimeout(resolve, 3000);
});

// 解決した (resolve が呼ばれた) ときに実行:
p.then(function () {
  alert('3 秒たったよ!');
}).then(function () {
  // 解決済みなので即ここも実行される
  alert('既に 3 秒過ぎてるよ!');
});

p = new Promise(function (resolve, reject) {
  dream(); // 未定義の関数を呼ぶ (エラー発生)
});

// エラー発生時は then をスキップして catch へ
p.then(function (message) {
  // p は解決しないのでこのブロックは実行されない
  alert(message);
}).catch(function (error) {
  // p でエラーが発生するのでこのブロックを実行
  alert(error);
  // -> ReferenceError: dream is not defined
});

New Type & API

Collections

Set型、Map型が追加されます。Setを使うことで、集合に対して要素を追加したり参照したりすることができます。Mapは、キーとそれに対応する値を保持できるものです。配列やオブジェクトではキーとして文字列しか設定できませんでしたが、Mapではキーとしてオブジェクトを設定することができます。

var set = new Set();
// 集合に追加・確認・削除
set.add("Firefox");
set.add("Thunderbird");
set.add(+0);
set.add(NaN);
set.has("Firefox"); // -> true
set.has("Sunbird"); // -> false
set.delete("Firefox");
set.has("Firefox"); // -> false
// -0 と +0 は区別される, NaN は区別されない
set.has(-0); // -> false
set.has(NaN); // -> true

var map = new Map();
var str = "Mozilla", obj = {}, func = function(){};
// Map に値を格納
map.set(str, "Firefox");
map.set(obj, "Thunderbird");
map.set(func, "Japan");
// キーに対応する値を取得
map.get(str); // -> "Firefox"
map.get(obj); // -> "Thunderbird"
map.get(func); // -> "Japan"
// 設定したキーと引数の比較は == ではないので注意
map.get("Mozilla"); // -> "Firefox"
map.get({}); // -> undefined
map.get(function(){}) // -> undefined

ここまで次世代言語仕様の一部をご紹介してきましたが、このようにJavaScriptは構文や機能面でも大きな進化を遂げ、落とし穴が少なくシンプルな記法で書ける言語に進化するのです。
そして一方、広く使われる言語は書きやすいだけでなく高速でなければなりませんが、ここからは速度面の進化についてご紹介します。

Slow Parts & Fast Parts

JavaScriptが遅い原因として、JavaScriptが動的型付け言語であることや、JavaScriptにクラスと配列が存在しないことなどがありますが、これらの原因を回避して、JavaScriptエンジンが最適化しやすいコードだけを書くようにすることで、処理を高速化させることができます。例えば、型固定で変数を定義することや、一度定義したオブジェクトのプロパティの追加・削除を行わない、といったことなどに気をつければ、処理を高速化させることができます。このように、JavaScriptエンジンが最適化しやすく、高速化を図れるコードを、私の中で「JavaScript Fast Parts」と呼んでいます。

Typed Array

Fast Partsの代表的なものとして、Typed Arrayがあります。これを使うことで、今までJavaScriptではできなかった静的型付け・型の固定を行うことができます。

// 16 バイト長のバッファを確保
var buffer = new ArrayBuffer(16);
// 32bit 整数 x 4 として読み出すビューを定義
var int32View = new Int32Array(buffer);
// 32bit 整数として 0, 2, 4, 6 を格納
for (var i=0; i<int32View.length; i+ +) { int32View[i]=i*2; }
// 16bit 整数 x 8 として同じバッファを読み出すビュー
var int16View = new Int16Array(buffer); // 実際に読み出してみる
for (var i=0; i<int16View.length; i++) {
	console.log(int16View[i]);
}
// -> 0, 0, 2, 0, 4, 0, 6, 0

asm.js

以上のような高速化できる方法だけを使ってコードを書く、ということをあらかじめルールとして定めてしまい、JavaScriptエンジン側も最初から最適化された状態でコンパイルして高速に実行するようにしよう、という発想に基づいた高速化方法を、Mozillaがasm.jsとして提案しています。コードを自動生成するための様々なツールが存在していますが、これらは全て、JavaScriptエンジンが速く実行できるコードを生成しようとしています。このように、既存のエンジンにおける高速化のノウハウがある程度溜まっているため、それらのノウハウを結晶させたFast Partsを使って高速化を実現させるということが、asm.jsの発想です。

asm.jsの目的は、WebをNativeと同様の速度にすることです。Native同様の速度にするために、新しいコンパイルの方法を導入したりするわけではありません。現在のJavaScriptエンジンでも、最適化できるコードに関しては、既に型固定の高速なコードが生成されるようになっています。その際に、コード生成のためのオーバーヘッドや型変換時のチェックなどがあり、これらがなければNative並みの速度で実行されるようになりつつあります。このエンジンをそのまま利用して、今まで「このコードを最適化して良いか否か」をヒューリスティックに判別していたところを、asm.jsを利用すると、決め打ちで最適化できるようなります。

既存のJavaScriptエンジンでも、よく使われるコードを見つけて、それらを最適化することが幅広く行われています。しかし、簡単なコードは最適化できても、巨大なコードは最適化できない場合が多く、C言語よりも10倍、20倍遅い場合もあります。asm.jsを利用し、常に最適化するようにした場合は、asm.js導入直後の時点でもC言語の2倍の速度で済むレベルまで高速化されました。asm.jsでの高速化は、現在も改良が進められています。

結論：Always bet on JavaScript!

Webは非常に互換性を重視しており、既存のものを動作させ続けながら、機能を追加したり速度を改善したりする必要があります。本日ご説明しました通り、JavaScriptでは、必要な機能の追加や高速化が順次行われているため、JavaScriptはこれまで同様に生き続け、皆さんが勉強する価値のある言語になっていると思っており、これからもJavaScriptを愛して頂ければ嬉しいです。