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

「ECMAScript」タグの記事が39件件あります

全てのタグを見る

適切に形成された`JSON.stringify`

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

JSON.stringifyは以前、入力に孤立したサロゲートペアが含まれている場合、不正な形式のUnicode文字列を返す仕様でした：

JSON.stringify('\uD800');
// → '"�"'

「適切に形成されたJSON.stringify」提案では、JSON.stringifyが孤立したサロゲートペアに対してエスケープシーケンスを出力するように変更され、その出力は有効なUnicode（UTF-8で表現可能）となります：

JavaScriptモジュール

· 約26分
Addy Osmani ([@addyosmani](https://twitter.com/addyosmani)) と Mathias Bynens ([@mathias](https://twitter.com/mathias))

JavaScriptモジュールは現在、すべての主要なブラウザでサポートされています!

この記事では、JSモジュールの使い方、責任を持ってデプロイする方法、そしてChromeチームが将来モジュールをさらに良くするために取り組んでいることについて説明します。

JSモジュールとは？​

JSモジュール（「ESモジュール」や「ECMAScriptモジュール」とも呼ばれる）は、主要な新機能、または新機能の集合です。過去に独自のJavaScriptモジュールシステムを使用していたことがあるかもしれません。Node.jsのようなCommonJSやAMDなど、もしくは別の何かを使ったかもしれません。これらのモジュールシステムには1つの共通点があります: インポートとエクスポートが可能です。

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();
    });
};

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

· 約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' }