メインコンテンツまでスキップ

BigInt：JavaScriptにおける任意精度整数

· 約12分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

BigIntはJavaScriptにおける新しい数値プリミティブで、任意精度の整数を表現できます。BigIntを使用すると、Numberで安全な整数制限を超える大きな整数を安全に保存し操作することができます。本記事ではいくつかの使用例を紹介し、JavaScriptのNumberと比較することでChrome 67における新機能を説明します。

オプションの`catch`バインディング

· 約1分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

try文のcatch句は以前はバインディングが必要でした:

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // バインディング名を付ける必要があります、たとえそれを使用しなくても！
  handleException();
}

ES2019では、catchがバインディングなしで使用可能になりました。この機能は、例外を処理するコードでexceptionオブジェクトが必要ない場合に便利です。

try {
  doSomethingThatMightThrow();
} catch { // → バインディングなし！
  handleException();
}

オプションのcatchバインディング対応状況​

`String.prototype.trimStart`と`String.prototype.trimEnd`

· 約1分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

ES2019はString.prototype.trimStart()とString.prototype.trimEnd()を導入しました。

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

この機能は以前は標準ではないtrimLeft()とtrimRight()メソッドを通じて利用可能でしたが、互換性のために新しいメソッドのエイリアスとして残っています。

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimLeft();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trimRight();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

動的`import()`

· 約6分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

動的import()は、静的importと比べて新しい可能性を引き出す、関数のような形式の新しいimportを導入します。この記事では両者を比較し、新しい内容の概要を説明します。

`Promise.prototype.finally`

· 約2分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Promise.prototype.finally を使用すると、Promise が 完了（成功または失敗が確定）した際に呼び出されるコールバックを登録できます。

ページに表示するデータを取得したいと想像してください。そして、リクエストが開始された際にローディングスピナーを表示し、リクエストが完了した際にスピナーを非表示にします。問題が発生した場合には、代わりにエラーメッセージを表示します。

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
      hideLoadingSpinner();
    })
    .catch((error) => {
      element.textContent = error.message;
      hideLoadingSpinner();
    });
};

`Intl.PluralRules`

· 約5分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

国際化（Iñtërnâtiônàlizætiøn）は難しいです。複数形を処理することは、一見簡単そうに見えますが、実際には言語ごとにそれぞれの複数形ルールがあります。

英語の複数形に関しては、可能な結果は2種類だけです。「猫（cat）」という言葉を例にしましょう：

  • 1 cat、すなわち英語で一つのものとされる 'one' 形式
  • 2 cats、そして 42 cats、0.5 cats など、つまり唯一のもう一つの形式となる 'other'（英語では複数形とされます）。

新しい Intl.PluralRules API を使用すると、指定された数に基づいて選択した言語にどの形式が適用されるかを判断できます。

const pr = new Intl.PluralRules('en-US');
pr.select(0);   // 'other' (例: '0 cats')
pr.select(0.5); // 'other' (例: '0.5 cats')
pr.select(1);   // 'one'   (例: '1 cat')
pr.select(1.5); // 'other' (例: '0.5 cats')
pr.select(2);   // 'other' (例: '0.5 cats')

オブジェクトの残余プロパティとスプレッドプロパティ

· 約3分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

オブジェクトの残余プロパティとスプレッドプロパティについて説明する前に、非常に似た機能を思い出してみましょう。

ES2015 配列の残余要素とスプレッド要素​

古き良きECMAScript 2015は、配列の分割代入における残余要素と配列リテラルにおけるスプレッド要素を導入しました。

// 配列の分割代入における残余要素:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// 配列リテラルにおけるスプレッド要素:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: オブジェクトの残余プロパティとスプレッドプロパティ 🆕​

それでは、何が新しいのでしょうか？ 提案により、オブジェクトリテラルにも残余プロパティとスプレッドプロパティが使用可能になります。

// オブジェクトの分割代入における残余プロパティ:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }