JavaScript ES6の主要機能とモダンな記法ガイド

ブロックスコープと変数宣言

ES6で導入されたletとconstは、従来のvarが持つ関数スコープの課題を解決します。letはブロックスコープを提供し、ループ処理内でのクロージャに関する予期せぬバグを防ぐために非常に有用です。一方、constは再代入が不可能な定数を宣言するために使用され、値の意図しない変更を防ぎます。

const MAX_RETRY_COUNT = 3;
// MAX_RETRY_COUNT = 5; // エラー: 定数への再代入は不可

for (let i = 0; i < MAX_RETRY_COUNT; i++) {
    // letにより、各ループのiが独立したスコープを持つ
    setTimeout(() => console.log(i), 100); 
}

ブロック構文と式の評価

中括弧{}によるブロックは複数ネストさせることができます。通常、ブロック自体は値を返しませんが、do式を利用することで、ブロック内の処理結果を値として返すことが可能になります。

const calculateResult = do {
    let baseValue = fetchData();
    baseValue * baseValue + 10;
};

アロー関数と構文の注意点

アロー関数(=>)は匿名関数を簡潔に記述するための構文です。引数が一つの場合は括弧を省略でき、関数体が単一の式である場合はreturnキーワードと中括弧を省略して暗黙的に値を返すことができます。

ただし、オブジェクトリテラルを直接返す場合は、構文解析の曖昧さを避けるためにオブジェクトを括弧()で囲む必要があります。

// 暗黙的な戻り値
const addNumbers = (num1, num2) => num1 + num2;

// 単一の引数で括弧を省略
const doubleValue = val => val * 2;

// オブジェクトを直接返す場合は括弧が必須
const createUserProfile = (id) => ({ userId: id, status: 'active' });

分割代入(Destructuring)

分割代入を使用すると、配列やオブジェクト、文字列から値を抽出して、それぞれの変数に直感的に代入できます。

// 配列の分割代入
const [firstItem, secondItem, thirdItem] = [100, 200, 300];

// オブジェクトの分割代入
const { productName, price } = { productName: 'Laptop', price: 1500 };

// 文字列の分割代入
const [char1, char2, char3, char4] = 'code';
// char1: 'c', char2: 'o', char3: 'd', char4: 'e'

関数パラメータのデフォルト値

ES5以前では、論理和演算子(||)を用いてデフォルト値を設定するのが一般的でしたが、ES6では関数の引数定義の段階でデフォルト値を直接指定できるようになりました。

// ES5までのアプローチ
function processOrder(item, quantity) {
    item = item || 'default_item';
    quantity = quantity || 1;
    console.log(`Processing ${quantity} of ${item}`);
}

// ES6のアプローチ
function processOrderModern(item = 'default_item', quantity = 1) {
    console.log(`Processing ${quantity} of ${item}`);
}
processOrderModern(); // "Processing 1 of default_item"

文字列と配列の拡張機能

文字列はイテラブル(反復可能)オブジェクトとなったため、for...ofループでコードポイント単位で走査できます。また、配列に関しては、類似配列オブジェクトやイテラブルオブジェクトを真の配列に変換するArray.fromや、渡された引数をそのまま配列化するArray.ofが追加されました。

// 文字列のイテレーション
for (const codePoint of 'hello') {
    console.log(codePoint);
}

// Array.fromとArray.ofの活用
const nodeList = document.querySelectorAll('.item');
const trueArray = Array.from(nodeList);

const numbersArray = Array.of(10, 20, 30);

オブジェクトの省略記法とSymbol

オブジェクトのプロパティ名と変数名が同一の場合、キーの記述を省略できます。また、ES6では7番目のプリミティブ型であるSymbolが導入されました。Symbolは一意な値を生成するため、マジックストリング(コード内に散在する文字列リテラル)による強い結合を排除し、保守性を高めるために利用できます。

const title = 'ES6 Guide';
const author = 'TechWriter';

// プロパティの省略記法
const bookInfo = { title, author };

// Symbolによるマジックストリングの排除
const STATUS = {
    SUCCESS: Symbol('success'),
    FAILURE: Symbol('failure')
};

function handleResponse(status) {
    if (status === STATUS.SUCCESS) {
        console.log('Operation completed.');
    }
}

タグ: ECMAScript6 javascript アロー関数 分割代入 symbol

10月3日 11:37 投稿