前回はChatGPTと挑戦するJavaScript宝探しについて紹介しました。
今回はアロー関数 × コールバック関数の実践テクニックについて紹介していきます。
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
アロー関数 × コールバック関数で使える実践テクニック5選！
皆さん、アロー関数 (arrow function) と コールバック関数 (callback function) をうまく活用できていますか？forEachやmapといった配列メソッドの使い方がピンとこない場合、アロー関数やコールバック関数の理解は難しいかもしれません。
本記事では、まずそれぞれの基本的な特徴や違いを整理し、その後、forEach、map、filter、sort、setTimeoutで活用できる5つの実践テクニックをコード例付きで紹介します。アロー関数をコールバックとして使うことで得られるメリット（コードの短縮や可読性の向上）にも触れ、最後に応用のヒント（イベントハンドラへの活用など）も解説します。
それでは、アロー関数とコールバック関数の基礎を見ていきましょう。
アロー関数とコールバック関数の基礎知識
アロー関数はES6（ES2015）で導入された新しい関数の記法です。functionキーワードの代わりに=>（矢印）を使って関数を定義でき、コードを簡潔に記述できます。また、1行で書ける処理であれば{}やreturnを省略して値を返すことも可能です。従来のfunctionと異なり、自身のthisを持たずに定義されたスコープのthisを引き継ぐという特徴もあります。
コールバック関数は、別の関数に引数として渡される関数のことです。処理が終わったタイミングで呼び出されるため「呼び出し側（呼び出されるのを待つ）関数」という意味でこう呼ばれます。非同期処理（タイマーやイベント処理）や配列操作（後述のforEachやmapなど）で広く使われる仕組みです。なお、コールバック関数の概念自体は古くからあり、通常の関数でも利用できます。
- コード短縮:
functionキーワードを書かずに済み、無名関数を直接記述できるため、コード量を減らせます。 - 可読性アップ: 処理の内容を呼び出し箇所で直接記述できるので、コードの意図が明確になり読みやすくなります。
- レキシカルな
thisの利点: アロー関数内のthisが外側のスコープのthisをそのまま参照するため、コールバック関数内でthisを扱う際の混乱が少なくなります（例: オブジェクトのメソッド内でタイマーやイベント処理を行う場合）。
テクニック1：forEachで配列をループ処理
forEachは、配列の各要素に対して指定した処理（コールバック関数）を一度ずつ実行するメソッドです。このコールバックにアロー関数を使うことで、ループ処理を簡潔に書くことができます。
const fruits = ["りんご", "みかん", "ぶどう"]; fruits.forEach((fruit, index) => { console.log(index + "番: " + fruit); }); // 0番: りんご // 1番: みかん // 2番: ぶどう 上記のコードでは、文字列の配列fruitsの各要素に対してforEachを呼び出し、要素ごとにコールバック関数を実行しています。コールバックの引数fruit（各要素の値）とindex（インデックス）を使って、各フルーツの名前をコンソールに出力します。その結果、コンソールには上記のように番号付きで要素が表示されます。
このように、アロー関数を使えばその場で関数を定義できるため、従来のforループを書くよりも簡潔で読みやすいコードになります。
テクニック2：mapで配列を変換（マッピング）
mapは、配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を生成して返すメソッドです。このmapにアロー関数を使うことで、各要素の変換処理を簡潔に表現できます。
const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8] 上記コードでは、数値配列numbersの各要素を2倍にする関数（num => num * 2）をmapに渡し、その戻り値から新しい配列を作成しています。結果として、元の[1, 2, 3, 4]から[2, 4, 6, 8]という新しい配列が得られ、これをdoubled変数に保持しています。
この例では、アロー関数の省略記法（処理が1行の場合は{}とreturnを省略可能）を活用し、functionを使った場合よりも短く書けています。例えば従来の書き方ではnumbers.map(function(num) { return num * 2; })のように記述しますが、アロー関数ならそのような冗長な記述をせずに済みます。
テクニック3：filterで配列を絞り込む
filterは、配列の各要素に対してコールバック関数を実行し、その結果がtrueとなった要素だけを新しい配列として返すメソッドです。このfilterでもアロー関数を使えば、簡潔な条件式で配列の絞り込み処理を実装できます。
const scores = [82, 47, 100, 68, 55]; const passed = scores.filter(score => score >= 60); console.log(passed); // [82, 100, 68] 上記の例では、点数の配列scoresから、score >= 60という条件を満たす要素（60以上）だけを抽出し、新しい配列passedにしています。結果として、[82, 47, 100, 68, 55]から[82, 100, 68]のみが残りました（47や55は条件を満たさないため除外）。
アロー関数によって条件判定をそのまま関数の戻り値として書けるため、処理の意図が明確で読みやすくなっています。同様の処理をfunction構文で書く場合と比べても、コード量が少なくて済みます。
テクニック4：sortでカスタム順に並び替え
sortは、配列を並び替えるメソッドです。引数に比較用のコールバック関数を渡すことで、独自の順序でソートできます（指定しない場合は要素を文字列として比較して並び替えます）。この比較関数にもアロー関数を使用すれば、カスタムな並び替えロジックを簡潔に記述できます。
const points = [40, 100, 1, 5]; points.sort((a, b) => a - b); console.log(points); // [1, 5, 40, 100] 上記では、数値配列pointsを昇順にソートしています。(a, b) => a - bというアロー関数を渡すことで、aとbを比較した際に返す値が負ならaを先、正ならbを先にするというルールを指定しています。これにより、1行のコードで数値の昇順ソートが実現できました。結果は[1, 5, 40, 100]となります。
ちなみに、コールバックを渡さずにpoints.sort()とすると、要素を文字列として比較するため[1, 100, 40, 5]のような意図しない並びになってしまいます。上記のようにアロー関数で比較関数を書けば、function(a, b) { return a - b; }と記述するよりもスッキリと実装できます。
テクニック5：setTimeoutで遅延実行
setTimeoutは、指定したミリ秒後にコールバック関数を1度だけ実行するタイマー関数です。遅延させたい処理をアロー関数で直接記述することで、コードを短くわかりやすくできます。
setTimeout(() => { console.log("Hello!"); }, 2000); // 2秒後に "Hello!" と表示 上記では、setTimeoutに対して() => { ... }というアロー関数を直接渡し、2秒後に"Hello!"というメッセージをコンソールに出力しています。従来であればsetTimeout(function() { ... }, 2000)と書くところを、アロー関数を使うことで短く記述できています。
また、アロー関数はthisを外側のスコープから引き継ぐため、例えばオブジェクトのメソッド内でsetTimeoutを使う際にも、コールバック関数内でthisがそのオブジェクトを指したままになります（通常のfunctionだとthisが変わってしまう問題があります）。
まとめ：アロー関数×コールバック関数活用のメリットと応用
ここまで、forEachからsetTimeoutまで、アロー関数をコールバックとして活用する5つの場面を紹介してきました。いずれの例でも、コールバック関数をアロー関数で記述することで処理内容をその場で簡潔に表現でき、冗長なコードを減らすことができました。その結果、コード短縮や可読性アップといったメリットが得られます。
今回取り上げた場面以外にも、イベントハンドラ（例：button.addEventListener('click', e => { ... })）や繰り返しタイマーのsetInterval、Promiseの.then()など、コールバック関数を使うケースは多く存在します。こうした場合でも積極的にアロー関数を活用することで、同様にコード短縮・可読性アップにつなげることができます。ぜひ、アロー関数を活用してコールバック処理をスマートに記述してみてください！
以上がアロー関数 × コールバック関数の実践テクニックの紹介になります。
次回はアロー関数とコールバックをChatGPTに変換について紹介します。
