Zenn
📝

ECMAScriptってなんぞや

2023/03/05に公開
TypeScript
tech

ECMAScript（エクマスクリプト）は、Webブラウザなどで動作するJavaScriptの標準仕様です。ECMAScriptは、ECMA Internationalという国際規格化団体によって管理されており、最初に発行されたのは1997年のことです。以来、ECMAScriptは毎年新しいバージョンがリリースされています。

ECMAScriptは、Web開発において欠かせない技術であり、Webブラウザだけでなく、サーバーサイドやデスクトップアプリケーションでも使われています。JavaScriptがどのように動作するかを理解するためには、ECMAScriptの基本的な仕様を知ることが必要です。

ECMAScriptのバージョン

ECMAScriptの最初のバージョンは、ECMAScript 1でした。以来、ECMAScript 2、ECMAScript 3、ECMAScript 4とバージョンがリリースされています。しかし、ECMAScript 4は発行前に取り下げられ、ECMAScript 5がリリースされました。

その後、ECMAScript 6（またはES6）が2015年にリリースされ、その後も毎年新しいバージョンがリリースされています。現在の最新バージョンはECMAScript 2022です。

新しいバージョンがリリースされるたびに、ECMAScriptに新しい機能や構文が追加され、JavaScriptの開発がより効率的になるようになっています。

ECMAScriptの機能

ECMAScriptには、多くの機能があります。以下に、代表的な機能をいくつか紹介します。

let/const

letやconstは、ECMAScript 6で追加された新しい変数宣言のキーワードです。letはブロックスコープを持つ変数を宣言するのに使用され、constは定数を宣言するのに使用されます。これにより、変数のスコープや値の変更をより明確にすることができます。

アロー関数

アロー関数は、ECMAScript 6で追加された新しい関数の構文です。従来のfunctionキーワードに比べて、より簡潔に関数を宣言することができます。また、thisの挙動が従来の関数と異なるため、クラスメソッドなどで便利に使われます。

変数と定数

ECMAScriptでは、var、let、constの3つのキーワードを使用して、変数と定数を定義できます。varは古い書き方で、letは再代入可能な変数、constは再代入不可能な定数を定義するために使用されます。

var x = 10; // 古い書き方
let y = 20; // 再代入可能な変数
const z = 30; // 再代入不可能な定数

テンプレート文字列

ECMAScript 6からは、テンプレート文字列を使用して文字列を作成できます。テンプレート文字列はバッククォート()で囲まれた文字列で、${}`の中にJavaScript式を埋め込むことができます。

const name = "John";
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // "My name is John and I'm 30 years old."

アロー関数

アロー関数は、より簡潔で読みやすいコードを書くことができます。アロー関数では、functionキーワードを省略できます。

// 通常の関数
function add(x, y) {
  return x + y;
}

// アロー関数
const add = (x, y) => x + y;

分割代入

ECMAScript 6からは、オブジェクトや配列から値を取り出して変数に代入するための分割代入がサポートされました。

// オブジェクトの分割代入
const user = { name: "John", age: 30 };
const { name, age } = user;

console.log(name); // "John"
console.log(age); // 30

// 配列の分割代入
const numbers = [1, 2, 3, 4, 5];
const [a, b, ...rest] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

クラス

ECMAScript 6から、クラスを定義するためのキーワードが導入されました。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = new Person("John");
person.sayHello();

ES6 Modules

ES6 Modulesは、ES6から導入されたモジュールシステムです。これにより、モジュールを分割し、インポートやエクスポートを使用して、異なるファイル間でコードを共有できるようになりました。

// モジュールのエクスポート
export function add(x, y) {
  return x + y;
}

// モジュールのインポート
import { add } from './math.js';
console.log(add(1, 2)); // 3

ES6 Modulesは、CommonJSやAMDなどの従来のモジュールシステムよりも静的であり、依存関係が静的に解決されるため、性能が向上します。

ES7, ES8, ES9, ES10, ES11
ES7以降も新しい機能が追加されています。以下にいくつかの例を挙げます。

ES7: Array.prototype.includes(), 指数演算子(**)など。
ES8: Async/Await, String.prototype.padStart(), String.prototype.padEnd()など。
ES9: Promise.prototype.finally(), Object spread operator, Rest parameters for tuples, RegExp improvementsなど。
ES10: Array.prototype.flat(), Array.prototype.flatMap(), String.prototype.trimStart(), String.prototype.trimEnd(), Object.fromEntries(), BigIntなど。
ES11: Optional Chaining Operator(?.), Nullish Coalescing Operator(??), String.prototype.matchAll(), Promise.allSettled() など。

まとめ

ECMAScriptは、Web開発において最も広く使用されているプログラミング言語の1つであり、常に進化を続けています。ES6以降、多くの新しい機能が追加され、プログラミングの効率性が向上しました。JavaScriptの進化はまだ続いており、今後も新しい機能が追加されることが期待されています。

ECMAScriptに関する情報を得るためのオンラインリソースは多数あります。以下は、ECMAScriptに関する情報を取得するための有用なウェブサイトの例です。

参考

MDN Web Docs: https://developer.mozilla.org/ja/docs/Web/JavaScript
Ecma International: https://www.ecma-international.org/publications-and-standards/standards/ecma-262/
TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
2ality - JavaScript and more: https://2ality.com/
V8 JavaScript Engine: https://v8.dev/

"ECMAScript 6 入門" 阮一峰
"JavaScript: The Good Parts" Douglas Crockford
"Understanding ECMAScript 6" Nicholas C. Zakas
"Exploring ES6" Axel Rauschmayer

Discussion