- Day 13：アロー関数（前半）で「関数をより短く、より読みやすく」書く力を身につける
- 関数式とは何かを理解する
- アロー関数の基本形を理解する
- アロー関数の書き換えをステップバイステップで理解する
- 実践：通常関数をアロー関数に変換する
- 初心者がつまずきやすいポイントを深掘りする
- Day 13 前半の練習テンプレート
- Day 13 前半のまとめ
- Day 13：アロー関数（後半）で「書き換えのパターン」を体に覚えさせる
- 通常の関数 → 関数式 → アロー関数の「3ステップ変換」を身につける
- 例題1：挨拶関数をアロー関数に変換する
- 例題2：足し算関数をアロー関数に変換する
- 例題3：割引計算関数をアロー関数に変換する
- 例題4：BMI計算関数をアロー関数に変換する
- 例題5：条件分岐を含む関数をアロー関数に変換する
- 初心者向け「書き換えの型」をまとめておく
- Day 13 後半の練習テンプレート
- Day 13 後半のまとめ
- Day 13：アロー関数の「深い特徴」を理解して、使いどころを見極める
- 関数式とアロー関数の関係をもう一度整理する
- アロー関数の「深い特徴」1：this を持たない
- アロー関数の「深い特徴」2：arguments を持たない
- アロー関数を「使うべき場面」
- アロー関数を「使わないほうがよい場面」
- 具体例で「使う場面・使わない場面」を比較する
- Day 13：アロー関数の深い特徴をまとめた練習テンプレート
- Day 13：アロー関数の深い特徴のまとめ
Day 13：アロー関数（前半）で「関数をより短く、より読みやすく」書く力を身につける
Day 13前半では、JavaScriptのモダンな書き方である アロー関数（Arrow Function） を学びます。 アロー関数は ES6（2015年）で導入された新しい関数記法で、 短く書ける・読みやすい・関数式と相性が良い という特徴があります。
ここでは、
- 関数式とは何か
- アロー関数の基本形
- 通常の関数をアロー関数へ書き換える
- 初心者がつまずきやすいポイントの深掘り
を、ステップバイステップで丁寧に解説していきます。
関数式とは何かを理解する
関数式は「関数を値として扱う書き方」
まず、アロー関数を理解するために、関数式（function expression） を押さえておきます。
通常の関数定義はこうでした。
function greet() {
console.log("こんにちは！");
}
これに対して 関数式 は、関数を「変数に代入する形」で書きます。
const greet = function() {
console.log("こんにちは！");
};
関数式のポイント
function()を「値」として扱い、変数に代入しているgreet()と呼び出す点は同じ- 関数式は「関数を変数として扱う」場面で便利
アロー関数は、この 関数式の書き方をもっと短くしたもの です。
アロー関数の基本形を理解する
アロー関数の基本構文
関数式：
const greet = function() {
console.log("こんにちは！");
};
アロー関数：
const greet = () => {
console.log("こんにちは！");
};
アロー関数の構造
()は引数を入れる場所=>が「アロー（矢印）」{ ... }が関数の処理内容
つまり、
function() { ... }
を
() => { ... }
に置き換えた形です。
アロー関数の書き換えをステップバイステップで理解する
Step 1：引数なしの関数
通常の関数式：
const greet = function() {
console.log("こんにちは！");
};
アロー関数：
const greet = () => {
console.log("こんにちは！");
};
Step 2：引数ありの関数
通常の関数式：
const greet = function(name) {
console.log(`こんにちは、${name}さん！`);
};
アロー関数：
const greet = (name) => {
console.log(`こんにちは、${name}さん！`);
};
Step 3：引数が1つなら、かっこを省略できる
const greet = name => {
console.log(`こんにちは、${name}さん！`);
};
Step 4：処理が1行なら、{} と return を省略できる
通常：
const add = (a, b) => {
return a + b;
};
省略形：
const add = (a, b) => a + b;
これがアロー関数の最大の魅力です。 短くて読みやすい。
実践：通常関数をアロー関数に変換する
ここでは、Day 12で扱った関数をアロー関数に書き換えていきます。
足し算関数の書き換え
通常の関数：
function add(a, b) {
return a + b;
}
関数式：
const add = function(a, b) {
return a + b;
};
アロー関数（基本形）：
const add = (a, b) => {
return a + b;
};
アロー関数（省略形）：
const add = (a, b) => a + b;
割引計算関数の書き換え
通常の関数：
function calcDiscount(price, discountRate) {
const discountAmount = price * discountRate;
return price - discountAmount;
}
アロー関数：
const calcDiscount = (price, discountRate) => {
const discountAmount = price * discountRate;
return price - discountAmount;
};
処理が複数行なので {} と return は省略できません。
BMI計算関数の書き換え
通常の関数：
function calcBMI(weightKg, heightCm) {
const heightM = heightCm / 100;
return weightKg / (heightM * heightM);
}
アロー関数：
const calcBMI = (weightKg, heightCm) => {
const heightM = heightCm / 100;
return weightKg / (heightM * heightM);
};
初心者がつまずきやすいポイントを深掘りする
1. アロー関数は「function」の短縮形ではない
アロー関数は短く書けますが、 this の扱いが通常の関数と違うという特徴があります。
Day 13前半では深掘りしませんが、 「アロー関数は this を持たない」という点は後半で扱います。
2. 処理が1行なら {} と return を省略できる
const add = (a, b) => a + b;
これはアロー関数の最大のメリットです。 ただし、複数行になる場合は省略できません。
3. 引数が1つなら () を省略できる
const greet = name => console.log(name);
ただし、引数が0個または2個以上の場合は () が必要です。
4. アロー関数は「関数式」で使うもの
アロー関数は、
const func = () => { ... };
のように「変数に代入する形」で使うのが基本です。
Day 13 前半の練習テンプレート
ブラウザで動かせる練習用テンプレートを用意しました。 通常関数とアロー関数の違いを確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 13 前半：アロー関数 練習テンプレート</title>
</head>
<body>
<h1>Day 13 前半：アロー関数の基本と書き換え練習</h1>
<p>ブラウザのコンソールを開いて結果を確認してください。</p>
<script>
console.log('--- 足し算関数（通常 → アロー） ---');
// 通常の関数
function addNormal(a, b) {
return a + b;
}
// アロー関数（省略形）
const addArrow = (a, b) => a + b;
console.log(`通常関数：3 + 5 = ${addNormal(3, 5)}`);
console.log(`アロー関数：3 + 5 = ${addArrow(3, 5)}`);
console.log('--- 割引計算関数（通常 → アロー） ---');
function calcDiscountNormal(price, rate) {
const discount = price * rate;
return price - discount;
}
const calcDiscountArrow = (price, rate) => {
const discount = price * rate;
return price - discount;
};
console.log(`通常関数：1000円の20%割引 = ${calcDiscountNormal(1000, 0.2)} 円`);
console.log(`アロー関数：1000円の20%割引 = ${calcDiscountArrow(1000, 0.2)} 円`);
console.log('--- BMI計算関数（通常 → アロー） ---');
function calcBMINormal(weight, heightCm) {
const heightM = heightCm / 100;
return weight / (heightM * heightM);
}
const calcBMIArrow = (weight, heightCm) => {
const heightM = heightCm / 100;
return weight / (heightM * heightM);
};
console.log(`通常関数：BMI = ${calcBMINormal(60, 170)}`);
console.log(`アロー関数：BMI = ${calcBMIArrow(60, 170)}`);
console.log('--- Day 13 前半の練習が完了しました ---');
</script>
</body>
</html>
Day 13 前半のまとめ
Day 13前半では、次のことを学びました。
- 関数式は「関数を変数に代入する書き方」であること
- アロー関数は関数式を短く書くためのモダンな記法であること
- 引数が1つなら
()を省略できる - 処理が1行なら
{}とreturnを省略できる - 通常関数をアロー関数に書き換える練習を通して、 「短く・読みやすく・再利用しやすい」関数の書き方を体験したこと
後半では、アロー関数のより深い特徴（this の扱いなど）を学び、 「アロー関数を使うべき場面・使わないほうがよい場面」を理解していきます。
Day 13前半の内容をしっかり身につけて、 アロー関数を自然に使えるようになっていきましょう。
Day 13：アロー関数（後半）で「書き換えのパターン」を体に覚えさせる
Day 13後半では、前半で学んだ 関数式・アロー関数・基本的な書き換え を、 より実践的なコードに当てはめていきます。
ここでは、
- 通常の関数定義から関数式への書き換え
- 関数式からアロー関数への書き換え
- いくつかのパターンをまとめて練習するテンプレート
という流れで、初心者向けにかみ砕いて説明していきます。
通常の関数 → 関数式 → アロー関数の「3ステップ変換」を身につける
基本の変換ステップを整理する
- 通常の関数定義（function宣言）javascript
function add(a, b) { return a + b; } - 関数式（functionを値として変数に代入）javascript
const add = function(a, b) { return a + b; }; - アロー関数（functionを
=>に置き換え）javascriptconst add = (a, b) => { return a + b; }; - 1行処理なら省略形javascript
const add = (a, b) => a + b;
この「3ステップ＋省略形」を、いろいろな関数で繰り返し練習していきます。
例題1：挨拶関数をアロー関数に変換する
通常の関数定義
function greet(name) {
console.log(`こんにちは、${name}さん！`);
}
関数式への書き換え
const greet = function(name) {
console.log(`こんにちは、${name}さん！`);
};
アロー関数への書き換え（基本形）
const greet = (name) => {
console.log(`こんにちは、${name}さん！`);
};
アロー関数への書き換え（省略形）
処理が1行なので、{} と return は不要ですが、 ここでは console.log だけなので、そのまま1行で書けます。
const greet = name => console.log(`こんにちは、${name}さん！`);
例題2：足し算関数をアロー関数に変換する
通常の関数定義
function add(a, b) {
return a + b;
}
関数式への書き換え
const add = function(a, b) {
return a + b;
};
アロー関数（基本形）
const add = (a, b) => {
return a + b;
};
アロー関数（省略形）
const add = (a, b) => a + b;
この形は、「2つの引数＋1行の戻り値」という、 アロー関数の典型的なパターンとして覚えておくと便利です。
例題3：割引計算関数をアロー関数に変換する
通常の関数定義
function calcDiscount(price, discountRate) {
const discountAmount = price * discountRate;
const discountedPrice = price - discountAmount;
return discountedPrice;
}
関数式への書き換え
const calcDiscount = function(price, discountRate) {
const discountAmount = price * discountRate;
const discountedPrice = price - discountAmount;
return discountedPrice;
};
アロー関数への書き換え
const calcDiscount = (price, discountRate) => {
const discountAmount = price * discountRate;
const discountedPrice = price - discountAmount;
return discountedPrice;
};
ここでは処理が複数行なので、{} と return は省略できないことがポイントです。
例題4：BMI計算関数をアロー関数に変換する
通常の関数定義
function calcBMI(weightKg, heightCm) {
const heightM = heightCm / 100;
const bmi = weightKg / (heightM * heightM);
return bmi;
}
関数式への書き換え
const calcBMI = function(weightKg, heightCm) {
const heightM = heightCm / 100;
const bmi = weightKg / (heightM * heightM);
return bmi;
};
アロー関数への書き換え
const calcBMI = (weightKg, heightCm) => {
const heightM = heightCm / 100;
const bmi = weightKg / (heightM * heightM);
return bmi;
};
こちらも複数行の処理なので、省略形にはしません。 「複数行の処理は基本形で書く」と覚えておくと安全です。
例題5：条件分岐を含む関数をアロー関数に変換する
通常の関数定義（BMI判定）
function judgeBMI(bmi) {
if (bmi < 18.5) {
return '低体重';
} else if (bmi < 25) {
return '普通体重';
} else if (bmi < 30) {
return '肥満（1度）';
} else {
return '肥満（2度以上）';
}
}
関数式への書き換え
const judgeBMI = function(bmi) {
if (bmi < 18.5) {
return '低体重';
} else if (bmi < 25) {
return '普通体重';
} else if (bmi < 30) {
return '肥満（1度）';
} else {
return '肥満（2度以上）';
}
};
アロー関数への書き換え
const judgeBMI = (bmi) => {
if (bmi < 18.5) {
return '低体重';
} else if (bmi < 25) {
return '普通体重';
} else if (bmi < 30) {
return '肥満（1度）';
} else {
return '肥満（2度以上）';
}
};
条件分岐がある場合も、 基本的には「function」を「(引数) =>」に置き換えるだけでOKです。
初心者向け「書き換えの型」をまとめておく
引数なしの関数
// 通常
function hello() {
console.log('こんにちは');
}
// 関数式
const hello = function() {
console.log('こんにちは');
};
// アロー関数
const hello = () => {
console.log('こんにちは');
};
引数1つ・1行処理の関数
// 通常
function square(x) {
return x * x;
}
// 関数式
const square = function(x) {
return x * x;
};
// アロー関数（基本形）
const square = (x) => {
return x * x;
};
// アロー関数（省略形）
const square = x => x * x;
引数2つ・1行処理の関数
// 通常
function add(a, b) {
return a + b;
}
// アロー関数（省略形）
const add = (a, b) => a + b;
Day 13 後半の練習テンプレート
複数の通常関数をアロー関数に変換したコードを、 ブラウザでまとめて動かせるテンプレートとして用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 13 後半：アロー関数 書き換え練習テンプレート</title>
</head>
<body>
<h1>Day 13 後半：通常関数をアロー関数に変換する練習</h1>
<p>ブラウザのコンソールを開いて、各関数の結果を確認してください。</p>
<script>
console.log('--- 挨拶関数（通常 → アロー） ---');
// 通常の関数
function greetNormal(name) {
console.log(`こんにちは、${name}さん！`);
}
// アロー関数
const greetArrow = name => console.log(`こんにちは、${name}さん！`);
greetNormal('太郎');
greetArrow('花子');
console.log('--- 足し算関数（通常 → アロー） ---');
function addNormal(a, b) {
return a + b;
}
const addArrow = (a, b) => a + b;
console.log(`通常関数：3 + 5 = ${addNormal(3, 5)}`);
console.log(`アロー関数：3 + 5 = ${addArrow(3, 5)}`);
console.log('--- 割引計算関数（通常 → アロー） ---');
function calcDiscountNormal(price, rate) {
const discount = price * rate;
const discountedPrice = price - discount;
return discountedPrice;
}
const calcDiscountArrow = (price, rate) => {
const discount = price * rate;
const discountedPrice = price - discount;
return discountedPrice;
};
console.log(`通常関数：1000円の20%割引 = ${calcDiscountNormal(1000, 0.2)} 円`);
console.log(`アロー関数：1000円の20%割引 = ${calcDiscountArrow(1000, 0.2)} 円`);
console.log('--- BMI計算関数（通常 → アロー） ---');
function calcBMINormal(weight, heightCm) {
const heightM = heightCm / 100;
const bmi = weight / (heightM * heightM);
return bmi;
}
const calcBMIArrow = (weight, heightCm) => {
const heightM = heightCm / 100;
const bmi = weight / (heightM * heightM);
return bmi;
};
const bmiNormal = calcBMINormal(60, 170);
const bmiArrow = calcBMIArrow(60, 170);
console.log(`通常関数：BMI = ${bmiNormal}`);
console.log(`アロー関数：BMI = ${bmiArrow}`);
console.log('--- BMI判定関数（通常 → アロー） ---');
function judgeBMINormal(bmi) {
if (bmi < 18.5) {
return '低体重';
} else if (bmi < 25) {
return '普通体重';
} else if (bmi < 30) {
return '肥満（1度）';
} else {
return '肥満（2度以上）';
}
}
const judgeBMIArrow = (bmi) => {
if (bmi < 18.5) {
return '低体重';
} else if (bmi < 25) {
return '普通体重';
} else if (bmi < 30) {
return '肥満（1度）';
} else {
return '肥満（2度以上）';
}
};
console.log(`通常関数：判定 = ${judgeBMINormal(bmiNormal)}`);
console.log(`アロー関数：判定 = ${judgeBMIArrow(bmiArrow)}`);
console.log('--- Day 13 後半の練習が完了しました ---');
</script>
</body>
</html>
Day 13 後半のまとめ
Day 13後半では、次のことを意識して学びました。
- 通常の関数定義 → 関数式 → アロー関数という「3ステップ変換」の型
- 足し算・割引計算・BMI計算・判定など、具体的な関数をアロー関数に書き換える練習
- 引数1つ・引数2つ・複数行処理など、よくあるパターンごとの書き方
- アロー関数は「短く・読みやすく・関数式と相性が良い」記法であること
この段階まで来ると、 「新しく関数を書くときに、自然にアロー関数で書く」ことができるようになっていきます。
ぜひ、今後書く関数を意識的にアロー関数で書いてみて、 自分の手に馴染ませていってください。
Day 13：アロー関数の「深い特徴」を理解して、使いどころを見極める
Day 13では、アロー関数の基本的な書き方だけでなく、 より深い特徴（とくに this の扱い） を理解して、
- アロー関数を使うべき場面
- アロー関数を使わないほうがよい場面
を見極められるようになることを目標にします。
ここからは、初心者の方にもわかるように、 ステップバイステップで丁寧に解説していきます。
関数式とアロー関数の関係をもう一度整理する
関数式とは「関数を値として扱う書き方」
まず、アロー関数は 関数式の一種 であることを押さえておきます。
通常の関数定義：
function greet() {
console.log("こんにちは！");
}
関数式：
const greet = function() {
console.log("こんにちは！");
};
function() { ... }という「無名関数」を、変数greetに代入しています。- これにより、関数を「値」として扱えるようになります。
アロー関数は、この 関数式の書き方を短くしたもの です。
アロー関数は「function」を => に置き換えた形
関数式：
const greet = function() {
console.log("こんにちは！");
};
アロー関数：
const greet = () => {
console.log("こんにちは！");
};
functionキーワードがなくなり、代わりに=>が使われています。- 引数は
()の中に書き、処理は{}の中に書きます。
ここまでは「短く書ける」というメリットが中心でしたが、 実はアロー関数には 通常の関数と違う重要な性質 がいくつかあります。
アロー関数の「深い特徴」1：this を持たない
通常の関数は「自分自身の this」を持つ
JavaScriptの通常の関数は、呼び出し方によって this の中身が変わります。
const obj = {
value: 42,
showValue: function() {
console.log(this.value);
}
};
obj.showValue(); // this は obj を指し、42 が表示されます
obj.showValue()のように「オブジェクトのメソッド」として呼び出すと、thisはそのオブジェクト（ここではobj）になります。
アロー関数は「自分自身の this を持たない」
同じことをアロー関数で書いてみます。
const obj = {
value: 42,
showValue: () => {
console.log(this.value);
}
};
obj.showValue(); // 期待通りに動きません
- アロー関数は 自分自身の
thisを持ちません。 - 代わりに、外側のスコープの
thisをそのまま使います（これを「レキシカルなthis」と言います）。
ブラウザのグローバル環境では、 外側の this は window を指すことが多いため、 this.value は obj.value ではなく window.value を見に行ってしまいます。
その結果、undefined になったり、意図しない動作になります。
メソッドにはアロー関数を使わないほうがよい
この性質から、オブジェクトのメソッドにはアロー関数を使わないほうがよいとされます。
// 良い例：通常の関数でメソッドを書く
const user = {
name: '太郎',
greet: function() {
console.log(`こんにちは、${this.name}です。`);
}
};
user.greet(); // 「こんにちは、太郎です。」と表示されます
// 避けたい例：メソッドをアロー関数で書く
const user2 = {
name: '花子',
greet: () => {
console.log(`こんにちは、${this.name}です。`);
}
};
user2.greet(); // 期待通りに動かない可能性が高いです
重要ポイント：
- アロー関数は
thisを持たないため、 「オブジェクトのメソッド」として使うと混乱のもとになります。 - メソッドを書くときは、基本的に 通常の関数（function）を使うほうが安全です。
アロー関数の「深い特徴」2：arguments を持たない
通常の関数は arguments を使える
通常の関数では、arguments という特別な変数を使って、 渡された引数をまとめて扱うことができます。
function showArguments() {
console.log(arguments);
}
showArguments(1, 2, 3); // [1, 2, 3] のような引数一覧が表示されます
アロー関数は arguments を持たない
同じことをアロー関数で書くと、期待通りに動きません。
const showArgumentsArrow = () => {
console.log(arguments); // ここでの arguments は外側のものを参照します
};
showArgumentsArrow(1, 2, 3); // 意図しない動作になります
アロー関数は 自分自身の arguments を持たないため、 「可変長引数」を扱いたいときには向きません。
その代わりに、レストパラメータ を使うのが一般的です。
const showArgumentsArrow = (...args) => {
console.log(args); // [1, 2, 3] が表示されます
};
showArgumentsArrow(1, 2, 3);
重要ポイント：
- アロー関数では
argumentsが使えないため、 可変長引数を扱うときは(...args)のようなレストパラメータを使います。
アロー関数を「使うべき場面」
1. 短い処理・コールバック関数
アロー関数は、短い処理をサッと書きたいときにとても便利です。
例えば、配列の forEach や map などのコールバック関数です。
const numbers = [1, 2, 3, 4, 5];
// 通常の関数
numbers.forEach(function(n) {
console.log(n);
});
// アロー関数
numbers.forEach(n => console.log(n));
- 1行で書けるため、読みやすくなります。
- 「ここでちょっとだけ処理したい」という場面に向いています。
2. 単純な計算関数
足し算や掛け算など、1行で書ける計算関数もアロー関数と相性が良いです。
const add = (a, b) => a + b;
const square = x => x * x;
const toUpper = str => str.toUpperCase();
- 「入力→結果」がはっきりしている関数は、アロー関数で書くとスッキリします。
3. this を使わない関数
this に依存しない関数（純粋な計算・変換など）は、 アロー関数で書いて問題ありません。
const calcBMI = (weightKg, heightCm) => {
const heightM = heightCm / 100;
return weightKg / (heightM * heightM);
};
thisを使わない関数は、アロー関数で書くと読みやすくなります。
アロー関数を「使わないほうがよい場面」
1. オブジェクトのメソッド
先ほども触れたように、 オブジェクトのメソッドにはアロー関数を使わないほうがよいです。
const user = {
name: '太郎',
greet() { // ここは通常の関数（メソッド記法）で書くのがベストです
console.log(`こんにちは、${this.name}です。`);
}
};
- メソッドは
thisを使うことが多いため、thisを持たないアロー関数は不向きです。
2. コンストラクタ関数（new で呼び出す関数）
アロー関数は コンストラクタとして使えません。
const Person = (name) => {
this.name = name;
};
const p = new Person('太郎'); // エラーになります
newと一緒に使う「コンストラクタ関数」は、 必ず通常のfunctionで書く必要があります。
3. this や arguments に依存する関数
thisを使ってオブジェクトの状態を操作する関数argumentsを使って可変長引数を扱う関数
などは、通常の関数で書くほうが安全です。
具体例で「使う場面・使わない場面」を比較する
例：配列処理にはアロー関数が向いている
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 13：アロー関数の使いどころ（配列処理）</title>
</head>
<body>
<h1>配列処理でアロー関数を使う例</h1>
<p>ブラウザのコンソールを開いて結果を確認してください。</p>
<script>
const numbers = [1, 2, 3, 4, 5];
// 通常の関数
const doubledNormal = numbers.map(function(n) {
return n * 2;
});
// アロー関数
const doubledArrow = numbers.map(n => n * 2);
console.log('通常の関数で2倍：', doubledNormal);
console.log('アロー関数で2倍：', doubledArrow);
</script>
</body>
</html>
- どちらも同じ結果になりますが、 アロー関数のほうが短くて読みやすいです。
例：オブジェクトのメソッドには通常の関数が向いている
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 13：アロー関数の使いどころ（メソッド）</title>
</head>
<body>
<h1>メソッドでは通常の関数を使う例</h1>
<p>ブラウザのコンソールを開いて結果を確認してください。</p>
<script>
const userNormal = {
name: '太郎',
greet: function() {
console.log(`通常関数：こんにちは、${this.name}です。`);
}
};
const userArrow = {
name: '花子',
greet: () => {
console.log(`アロー関数：こんにちは、${this.name}です。`);
}
};
userNormal.greet(); // 期待通り「太郎」が表示されます
userArrow.greet(); // this が userArrow を指さないため、期待通りに動きません
</script>
</body>
</html>
- この例から、メソッドには通常の関数を使うべきということがよくわかります。
Day 13：アロー関数の深い特徴をまとめた練習テンプレート
最後に、this・arguments・使いどころをまとめて確認できる 練習用テンプレートを示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 13：アロー関数の深い特徴 練習テンプレート</title>
</head>
<body>
<h1>Day 13：アロー関数の深い特徴と使いどころ</h1>
<p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>
<script>
console.log('--- 1. 配列処理でのアロー関数 ---');
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log('アロー関数で2倍：', doubled);
console.log('--- 2. メソッドでの this の違い ---');
const userNormal = {
name: '太郎',
greet: function() {
console.log(`通常関数：こんにちは、${this.name}です。`);
}
};
const userArrow = {
name: '花子',
greet: () => {
console.log(`アロー関数：こんにちは、${this.name}です。`);
}
};
userNormal.greet(); // 期待通り「太郎」
userArrow.greet(); // 期待通りに動かない可能性が高い
console.log('--- 3. arguments の違い ---');
function showArgumentsNormal() {
console.log('通常関数の arguments：', arguments);
}
const showArgumentsArrow = () => {
// アロー関数には自分自身の arguments がありません
console.log('アロー関数の arguments：', arguments);
};
showArgumentsNormal(1, 2, 3);
showArgumentsArrow(1, 2, 3); // 外側の arguments を参照しようとします
console.log('--- 4. レストパラメータでの可変長引数（アロー関数） ---');
const showArgsWithRest = (...args) => {
console.log('レストパラメータで受け取った引数：', args);
};
showArgsWithRest(1, 2, 3, 4, 5);
console.log('--- Day 13：アロー関数の深い特徴の確認が完了しました ---');
</script>
</body>
</html>
Day 13：アロー関数の深い特徴のまとめ
Day 13では、アロー関数について次のポイントを学びました。
- アロー関数は「関数式」を短く書くためのモダンな記法であること
- アロー関数は 自分自身の
thisを持たず、外側のthisをそのまま使うこと - アロー関数は 自分自身の
argumentsを持たないため、可変長引数にはレストパラメータを使うこと - 配列処理や短い計算関数など、
thisに依存しない場面ではアロー関数がとても便利であること - オブジェクトのメソッドやコンストラクタ関数など、
thisに依存する場面では通常の関数を使うべきであること
この「使うべき場面・使わないほうがよい場面」を意識できるようになると、 アロー関数を ただの「短い書き方」ではなく、性質を理解したうえで選び取る道具として扱えるようになります。
今後コードを書くときに、 「この関数は this を使うか？」「短い処理か？」「コールバックか？」 といった視点で、アロー関数と通常の関数を使い分けていってください。