ES6/TypeScriptで矢印関数とアンダースコア変数を使いこなして、コードをもっと読みやすくしよう
JavaScript、TypeScript、および ECMAScript-6 における「_ (アンダースコア) 変数」と矢印関数の使用
このチュートリアルでは、JavaScript、TypeScript、および ECMAScript-6 における矢印関数と「_ (アンダースコア) 変数」の使用について詳しく説明します。
矢印関数とは？
矢印関数は、従来の匿名関数よりも簡潔で読みやすい構文で関数を定義する方法です。
// 従来の匿名関数
function add(a, b) {
return a + b;
}
// 矢印関数
const add = (a, b) => a + b;
_ (アンダースコア) 変数とは？
_ (アンダースコア) 変数は、未使用または無効な変数を表すために使用される慣習です。これは、コードの可読性と理解しやすさを向上させるのに役立ちます。
矢印関数と _ (アンダースコア) 変数の組み合わせ
矢印関数と _ (アンダースコア) 変数を組み合わせることで、簡潔で読みやすいコードを書くことができます。
// 例：未使用の引数を処理する
function processData(data) {
// ... データ処理
}
const processedData = data.map(item => {
// ... 処理
return item.processedValue;
});
// _ を使用して未使用の引数を無視する
const processedData = data.map((_, item) => {
// ... 処理
return item.processedValue;
});
例：未使用の引数を処理する
上記の例では、processData 関数は単一の引数 data を受け取ります。この関数は、データ処理を実行し、処理されたデータを返します。
processedData 変数は、data 配列の各要素を処理するために map 関数を使用します。map 関数は、各要素に対してコールバック関数を呼び出し、コールバック関数の戻り値を新しい配列に格納します。
最初のコールバック関数では、item 変数のみを使用してデータ処理を実行します。_ 変数は未使用なので、無視されます。
_ (アンダースコア) 変数は、以下のようなさまざまな状況で使用できます。
- コードの可読性を向上させる
- ループの反復回数など、未使用の変数を示す
- エラー処理時に未使用のエラーオブジェクトを無視する
注意点
_ (アンダースコア) 変数は、常に未使用であるとは限らないことに注意することが重要です。場合によっては、将来の使用のために変数を保持する必要がある場合があります。
// データ配列
const data = [
{ id: 1, name: "John Doe", processedValue: 10 },
{ id: 2, name: "Jane Doe", processedValue: 15 },
{ id: 3, name: "Peter Jones", processedValue: 20 },
];
// _ を使用して未使用の引数を無視する
const processedData = data.map((_, item) => {
// 処理された値を 2 倍にする
item.processedValue *= 2;
// 処理されたデータを返す
return item;
});
console.log(processedData);
出力
[
{ "id": 1, "name": "John Doe", "processedValue": 20 },
{ "id": 2, "name": "Jane Doe", "processedValue": 30 },
{ "id": 3, "name": "Peter Jones", "processedValue": 40 }
]
説明
コールバック関数では、_ 変数を使用して未使用のインデックスを無視し、item 変数を使用してデータオブジェクトにアクセスします。
次に、item.processedValue を 2 倍にして、処理された値を更新します。
const processedData = data.map(item => {
// ... 処理
return item.processedValue;
});
この方法では、_ 変数を使用する必要はありません。ただし、コードの可読性が若干低下する可能性があります。
デフォルト値を使用する
未使用の引数にデフォルト値を設定することで、明示的に無視する必要がなくなります。
const processedData = data.map(item => {
// ... 処理
return item.processedValue || 0; // デフォルト値 0 を使用
});
この方法では、未使用の引数が undefined である場合でも、処理が継続されます。
ES2015 の省略記法を使用する
ES2015 以降では、オブジェクトリテラルと関数定義において、引数名と変数名を省略することができます。
const processedData = data.map(item => ({
processedValue: item.processedValue * 2,
}));
この方法では、コードがより簡潔になりますが、可読性が若干低下する可能性があります。
解構代入を使用する
ES2015 以降では、解構代入を使用して、オブジェクトプロパティを直接変数に割り当てることができます。
const processedData = data.map(({ processedValue }) => ({
processedValue: processedValue * 2,
}));
この方法は、コードがより簡潔で読みやすくなります。
javascript typescript ecmascript-6
