先ほどのレベル別演習問題を アロー関数版 に書き換えて解説付きでまとめます。
アロー関数は function を短く書けるだけでなく、this の挙動が異なる点も特徴です。今回は基本的な例なので this はあまり関係しません。
レベル1：入門（アロー関数版）
問1-1：挨拶関数
let greet = (name) => console.log("こんにちは、" + name + "！");
greet("花子"); // → こんにちは、花子！
解説：function(name) {...} を (name) => {...} に置き換え。1行の場合は {} と return 省略可能。
問1-2：足し算（戻り値）
let sum = (a, b) => a + b;
console.log(sum(3, 7)); // → 10
解説：1行で return を自動で返す短縮形。
問1-3：偶数判定
let isEven = n => n % 2 === 0;
console.log(isEven(4)); // → true
解説：引数1つなら丸括弧省略可能。
問1-4：即時呼び出し風
let printer = msg => console.log(msg);
printer("今すぐ実行"); // → 今すぐ実行
解説：1行で書ける短縮形。
レベル2：中級（コールバック／配列操作）
問2-1：operate（引き算）
function operate(a, b, func) {
return func(a, b);
}
let result = operate(8, 3, (x, y) => x - y);
console.log(result); // → 5
解説：渡す無名関数をアロー関数 (x, y) => x - y に変更。
問2-2：自作 filter
function filterWith(arr, predicate) {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (predicate(arr[i])) res.push(arr[i]);
}
return res;
}
let nums = [1,2,3,4,5];
let evens = filterWith(nums, n => n % 2 === 0);
console.log(evens); // → [2, 4]
解説：無名関数 function(n){...} を n => ... に置き換え。
問2-3：成功／失敗コールバック
function fetchMock(successCallback, errorCallback) {
let isSuccess = true;
if (isSuccess) successCallback("OK");
else errorCallback("NG");
}
fetchMock(
data => console.log("成功: " + data),
err => console.log("失敗: " + err)
);
// → 成功: OK
解説：両方の無名関数をアロー関数で簡潔化。
問2-4：自作 map
function mapWith(arr, transform) {
let res = [];
for (let i = 0; i < arr.length; i++) {
res.push(transform(arr[i]));
}
return res;
}
let tripled = mapWith([2,5,10], n => n * 3);
console.log(tripled); // → [6, 15, 30]
解説：無名関数 function(n){ return n*3 } を短く n => n*3 に変更。
レベル3：上級（応用／イベント・再帰・デコレータ）
問3-1：イベント風コールバック
let events = {};
function on(eventName, handler) {
if (!events[eventName]) events[eventName] = [];
events[eventName].push(handler);
}
function emit(eventName, data) {
let handlers = events[eventName] || [];
for (let i = 0; i < handlers.length; i++) {
handlers[i](data);
}
}
on("greet", name => console.log("こんにちは、" + name + "！"));
emit("greet", "太郎"); // → こんにちは、太郎！
解説：登録する無名関数をアロー関数に置き換え。
問3-2：名前付き関数式の再帰
名前付き関数式はアロー関数では再帰に使えないため、ここは普通の関数を維持します。
let fact = function inner(n) {
if (n <= 1) return 1;
return n * inner(n - 1);
};
console.log(fact(6)); // → 720
補足：アロー関数は自分の名前を参照できないため、再帰には不向き。
問3-3：デコレータ（時間測定）
function timeIt(func) {
return (...args) => {
let start = Date.now();
let result = func(...args);
let end = Date.now();
console.log("Elapsed: " + (end - start) + " ms");
return result;
};
}
function slow(n) {
let s = 0;
for (let i = 0; i < n; i++) s += i;
return s;
}
let timedSlow = timeIt(slow);
console.log("Result:", timedSlow(100000)); // 結果と時間
解説：返す無名関数をアロー関数 (...args) => {...} に変更。apply の代わりにスプレッド構文で引数を渡せる。
問3-4：部分適用（partial）
function partial(func, ...fixedArgs) {
return (...restArgs) => func(...fixedArgs, ...restArgs);
}
function add(a, b, c) {
return a + b + c;
}
let add10 = partial(add, 10);
console.log(add10(7, 8)); // → 25
解説：無名関数をアロー関数に置き換え。...args で引数を簡単にまとめて渡せる。
💡ポイントまとめ：
- 短く書ける：
function(a,b){ return ... }→(a,b) => ... - 引数が1つなら
()省略可能。 {}とreturnは1行式なら省略できる。- 再帰や
thisを使う場合は通常の関数式の方が安全。