Days on the Moon

Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。

---

自己紹介

• nanto_vi
• 情報規格調査会SC 22/ECMAScript Ad hoc委員会
  • editional issueの報告

ECMAScript 2015 (ECMA-262 6th Edtition)

• クラス構文
• アロー関数
• ブロックスコープ
• Promise
• etc...

2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。

Unicodeの符号位置

// 🍣

'\uD83C\uDF63';  // ES5
'\u{1F363}';     // ES6

String.fromCharCode(0xD83C, 0xDF63);  // ES5
String.fromCodePoint(0x1F363);        // ES6

JavaScriptの文字列はUTF-16符号化形式で表現されます。絵文字などBMP(基本多言語面)外の文字はサロゲートペアと呼ばれるふたつの符号単位の組み合わせで表現されるため、これまでエスケープシーケンスを使うときなどには符号単位(16ビット符号なし整数)ごとに指定する必要がありました。ES2015ではUnicodeの符号位置(U+0～U+10FFFFまでの値)を直接指定できるようになります。

Unicode正規化

'㍿　１００ﾊﾟｰｾﾝﾄ'.normalize('NFKC');
// => '株式会社 100パーセント'

'神 森鷗外'.normalize('NFC')
// => '神 森鷗外'

Unicodeには結合文字などの表現形式をそろえる「正規化」という手順が定義されています。ES2015では文字列にnormalizeメソッドが追加され、NFCやNFKCといった複数種類の正規化を適用できるようになりました。

NFKCで文字列を正規化すると、組文字が個々の文字に展開されたり、全角英数字が半角に、半角カタカナが全角にそろえられたりします。正規化を行うことで「神」が「神」になるなど字体が変わってしまうこともあるので注意してください。

正規表現の/uフラグ(unicodeオプション)

/^..$/.test('🍣');  // => true
/^.$/u.test('🍣');  // => true

/\p/.test('p');   // => true
/\p/u.test('p');  // => SyntaxError

これまで正規表現は符号単位ごとにマッチしていましたが、/uフラグを指定することで符号位置ごとにマッチするようになります。

また、未定義のメタ文字があったとき、これまでは\が無視されていましたが、/uフラグ下では構文エラーになります。これにより、将来新たなメタ文字を導入しても、既存の正規表現パターンの挙動が変わってしまうということがなくなります。将来の拡張性確保のためには重要な変更です。

正規表現の/yフラグ(stickyオプション)

let re = /bar/y;

re.test('foobar');  // => false

re.lastIndex = 3;
re.test('foobar');  // => true

通常正規表現マッチは部分一致ですが、/yフラグを付けると前方一致になります。/bar/.test('foobar')はマッチ成功となりますが/bar/y.test('foobar')はbarが先頭にないのでマッチ失敗となります。

前方一致といいましたが、より正確に言うと正規表現オブジェクトのlastIndexプロパティで指定した位置からの一致になります。上の例ではlastIndexに3を指定したので、fooの直後からマッチを試みることになり、マッチが成功しています。

これが役に立つ場面として字句解析があげられます。文字列からトークンを切り出した後、次のトークンを探すときには前回のトークンの終了位置直後から探索できると便利でしょう。

正規表現の挙動の上書き

let regExpLike = {
    [Symbol.match]()   { return 42; },
    [Symbol.replace]() { return 23; },
    [Symbol.search]()  { return 12; },
};
'foo'.match(regExpLike);           // => 42
'foo'.replace(regExpLike, 'bar');  // => 23
'foo'.search(regExpLike);          // => 12

文字列のmatchメソッドなどは、引数として渡されたオブジェクトに処理を委譲するようになりました。Symbol.matchメソッドを持つオブジェクトを引数に渡すことで、そのメソッドの返り値がそのまま文字列のmatchメソッドの返り値となります。

RegExpを継承するオブジェクトなら、execメソッドを上書きするだけでも大丈夫です。

class MyRegExp extends RegExp {
   exec(str) { return [42]; }
}
let re = new MyRegExp;
'foo'.match(re); // => [42]

この挙動の変更は、XRegExpのような正規表現を拡張するライブラリの作成に有用だと思われます。

数学関数の追加

Math.sinh(1);   // => 1.1752011936438014
Math.expm1(1);  // => 1.718281828459045

双曲線関数や常用対数・二進対数関数など、多くの数学関数が追加されています。

Math.expm1(x)はMath.exp(x) - 1と同じですが、xが0に近い値のときにより精度の高い結果を返します。

数値に限定した判別関数

isNaN('foo');         // => true
Number.isNaN('foo');  // => false

isFinite('42');         // => true
Number.isFinite('42');  // => false

従来のグローバル関数isNaN / isFiniteは引数を数値に変換してから非数・有限値かどうかを判定していました。ES2015で追加されたNumber.isNaN / Number.isFiniteは引数が数値でなければその時点で偽を返します。

整数の扱い

Math.trunc(3.1);   // => 3
Math.trunc(-3.1);  // => -3

Math.imul(0xFFFFFFFF, 0xFFFFFFFF);  // => 1

Number.isInteger(Math.pow(2, 53));      // => true
Number.isSafeInteger(Math.pow(2, 53));  // => false

Number.MAX_SAFE_INTEGER;
// => 9007199254740991 (2 ** 53 - 1)
Number.MIN_SAFE_INTEGER;
// => -9007199254740991 (- (2 ** 53 - 1))

Math.truncは引数が正の数なら切り下げ(Math.floor)を、負の数なら切り上げ(Math.ceil)を行います。

Math.imulはふたつの32ビット符号なし整数値を乗算し、その結果の下位32ビットの値を返します。単に*演算子を使うと64ビット浮動小数点数の有効桁数を超えたときに不正確な値になってしまいます。

整数かどうかの判定メソッドNumber.isIntegerも追加されました。Number.isSafeIntegerは整数であるかどうかに加えて、64ビット浮動小数点数で一の位まで正確に表せる範囲内かどうかも見ます。新たな定数を使って言うと、Number.MIN_SAFE_INTEGER以上Number.MAX_SAFE_INTEGER以下の整数に対してNumber.isSafeIntegerは真を返します。

completion valueの変化

eval('42; if (true) {}');  // ES5 => 42
eval('42; if (true) {}');  // ES6 => undefined

ECMAScript仕様では、式や文の評価結果(返り値や制御フロー)を表すcompletion recordという値が定義されています。これは概念的なものであり、各JavaScriptエンジンがcompletion recordという値を実装しているとは限りません。completion recordに基づく文の評価結果、いわば「文の返り値」は通常触れることはできませんが、eval関数の結果としてその値を確かめられます。

ES2015ではif文やfor文といった制御構文におけるcompletion recordの扱いが少し変更されました。ES5までは制御構文の本体が空だったとき、プログラム全体の返り値はその制御構文の直前の文の返り値を引き継いでいました。ES2015からは制御構文の本体が空ならundefinedが返るようになります。

この変更は主にJavaScriptエンジンの実装の都合によるものです。これまでは制御構文の評価に移ってもそれ以前の文の返り値を保持しておく必要がありました。ES2015に沿った実装なら制御構文の評価に移った時点でそれ以前の文の返り値を破棄してもよく、実装に最適化の余地が生まれると考えられます。

HTMLのようなコメント (付属書B: Webブラウザのための追加機能)

<!--
doSomething();
-->

HTMLのscript要素内にJavaScriptを書くときなど、要素の内容全体を<!-- -->で囲むことがあります。このとき<!--も-->も単一行コメントとみなされますが、この挙動はECMAScriptで定義されたものではなく、あくまで各Webブラウザの独自拡張という扱いでした。

ES2015では(仕様本文ではなく)付属書において<!-- -->をコメントとして扱う構文を定義しています。ただし、あくまでWebブラウザが後方互換性を確保するために実装するものであり、ブラウザと直接関係ない実装(Node.jsなど)がこの構文に対応することは推奨されていません。プログラマもこうしたレガシーな機能を使うべきでないとされています。

たまに漢字にマッチする正規表現パターンを書きたいときがあります。Perl の正規表現だと Unicode のスクリプト名を使って \p{Han} で漢字にマッチさせられるのですが、JavaScript ではそうはいきません。JavaScript の正規表現には以下のふたつの問題があります。

1. Unicode スクリプト名の指定 (\p{...}) に対応していない。
2. そもそも Unicode の符号位置に対してマッチさせられない (UTF-16 における符号単位に対するマッチになる)。
   • BMP 外の文字にマッチさせたいときは、サロゲートペアの符号単位を記述する必要がある。
   • これに関しては ECMAScript 2015 で導入された /u フラグで解決する見込み。

とはいえ、解決不能な問題というわけでもないので、Perl の \p{Han} を JavaScript に移植してみましょう。\p{Han} の範囲は以下のコマンドで参照できます。

perl -MUnicode::UCD -MData::Dumper -E 'say Dumper Unicode::UCD::charscript("Han");'

Perl 5.20.2 (Unicode 6.3.0) では以下の範囲が含まれるとわかりました。

• U+2E80 - U+2E99
• U+2E9B - U+2EF3
• U+2F00 - U+2FD5
• U+3005 - U+3005
• U+3007 - U+3007
• U+3021 - U+3029
• U+3038 - U+303B
• U+3400 - U+4DB5
• U+4E00 - U+9FCC
• U+F900 - U+FA6D
• U+FA70 - U+FAD9
• U+20000 - U+2A6D6 (\uD840\uDC00 - \uD869\uDED6)
• U+2A700 - U+2B734 (\uD869\uDF00 - \uD86D\uDF34)
• U+2B740 - U+2B81D (\uD86D\uDF40 - \uD86E\uDC1D)
• U+2F800 - U+2FA1D (\uD87E\uDC00 - \uD87E\uDE1D)

サロゲートペアが [\uD800-\uDBFF][\uDC00-\uDFFF] であることを踏まえると、BMP 外の範囲はそれぞれ以下の部分的な範囲に展開できます。

• \uD840\uDC00 - \uD869\uDED6
  • [\uD840-\uD868][\uDC00-\uDFFF]
  • \uD869[\uDC00-\uDED6]
• \uD869\uDF00 - \uD86D\uDF34
  • \uD869[\uDF00-\uDFFF]
  • [\uD86A-\uD86C][\uDC00-\uDFFF]
  • \uD86D[\uDC00-\uDF34]
• \uD86D\uDF40 - \uD86E\uDC1D
  • \uD86D[\uDF40-\uDFFF]
  • \uD86E[\uDC00-\uDC1D]
• \uD87E\uDC00 - \uD87E\uDE1D
  • \uD87E[\uDC00-\uDE1D]

これらを整理して組み合わせると、最終的に以下のパターンが得られます。

/(?:[\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u3005\u3007\u3021-\u3029\u3038-\u303B\u3400-\u4DB5\u4E00-\u9FCC\uF900-\uFA6D\uFA70-\uFAD9]|[\uD840-\uD868][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|[\uD86A-\uD86C][\uDC00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]|\uD87E[\uDC00-\uDE1D])/

というわけで「漢字 1 文字にマッチする JavaScript の正規表現パターン」でした。よいお年を。