テクノロジーに敏感な読者ならECMAScript 6 (以下、ES6)が最近リリースされたのをご存知かもしれませんが、主要なブラウザーが対応するまでまだ利用することはできません(Babelのようなツールを使わなければ)。しかし開発者にとっては、次に何ができるのかを理解するよい機会ですので、知っておきたいES6の特徴をここでご紹介します。
(※編集註:ECMAScript 6はほかに「ECMAScript 2015」および「ES2015」という呼称が使われることもあります)
ファットアロー関数
別名「アロー関数」ですが、以下のようなコードを、
次のように記述することができます。
また、複数行の関数を波括弧を使って次のように記述することができます。
ネスト化している関数などロジックを追っていくのが難しい場合があり、今現在は「.bind(this)」や「var that = this」などの表現で回避していますよね。
しかしES6のアロー関数では、静的スコープで解決することができます。
ずっといいですよね!それではスコープについてご紹介しましょう。
letとconst宣言
letおよびconstは、全く新しい変数の宣言の形です。varは宣言された関数のブロックが有効範囲ですが(もしくは関数外で定義された場合はグローバルに有効)、letおよびconstは宣言されたブロック内でのみ有効です。
このため、一時的な変数を使う場合(例えば、ループの中でよく使われる一時的変数iを使う場合など)は少し面倒になります。
constでも同様です。唯一の違いは、constは値を変えることができません。
デフォルト引数
デフォルト引数は関数を作成するとき非常に便利です。これまで私達は次のように記述していました。
ES6では、デフォルト引数をPHPやRubyと同じような構文で定義できます。
テンプレートリテラル
テンプレートリテラルは、プレースホルダーを含むことのできる効果的な文字列です。またJavaScript表現を含むこともできます。
ありがたいことに、現在JavaScriptで複数行の文字列を扱える便利な方法があります。
正直に言って、ES5の記述は少し見苦しいですね。
結論
この記事は著者の気に入ったES6の特徴を紹介したものですが、これ以外にも多くの新機能(例えば、ブロックスコープ、レストパラメータなど)があります。それらに興味のある方は、ES6のウェブサイトを確認してみてください。
(※本稿は「The Next Version of JavaScript」を翻訳・再編集したものです)