前回の記事で、関数に引数と戻り値を持たせることで、コードの再利用性が格段に向上することを学びましたね。その関数の書き方ですが、現代のJavaScript（ES6以降）では、従来のfunctionキーワードを使った書き方よりも、アロー関数と呼ばれる新しい書き方が主流になっています。
アロー関数は、その名の通り「=>」（アロー、矢印）を使って関数を定義します。これはコードをより短く、よりシンプルに書くことができる非常に便利な方法です。
今回は、このアロー関数の基本的な使い方から、従来の関数との違いまでを、一緒に見ていきましょう。
1. アロー関数の基本的な書き方
従来の関数とアロー関数を比較してみましょう。
従来の関数（関数宣言）
JavaScript
// 従来の関数宣言
function add(num1, num2) {
return num1 + num2;
}
アロー関数
アロー関数は、functionキーワードを使わず、引数の後に=>（アロー）を記述します。
JavaScript
// アロー関数
const add = (num1, num2) => {
return num1 + num2;
};
ここでは、変数（const）を使って関数を定義しています。これがアロー関数の標準的な使い方です。
2. アロー関数の省略形：短く書くメリット
アロー関数が人気を集める最大の理由は、その**短縮記法（省略形）**にあります。特定の条件を満たせば、コードをさらにシンプルに書くことができます。
省略形 1: 処理が1行の場合（returnの省略）
関数の処理が**return文一行だけ**の場合、波括弧{}とreturnキーワードの両方を省略できます。
JavaScript
// 通常のアロー関数
const add = (num1, num2) => {
return num1 + num2;
};
// 処理が1行なので、波括弧とreturnを省略
const addSimple = (num1, num2) => num1 + num2;
console.log(addSimple(5, 3)); // 結果: 8
この短縮形は、イベントリスナーなど、短い処理を記述する際に非常に役立ちます。
省略形 2: 引数が1つの場合（括弧の省略）
引数が一つだけの場合、引数を囲む括弧()も省略できます。
JavaScript
// 引数が1つなので、括弧を省略
const double = number => number * 2;
console.log(double(10)); // 結果: 20
引数がゼロの場合や、引数が複数の場合は、括弧()は省略できません。
3. アロー関数が主流になった理由
アロー関数は単に短く書けるだけでなく、従来の関数が持つ**「this」**という概念の複雑さを解消してくれます。
従来の関数と「this」の問題
従来のfunctionキーワードで定義された関数は、実行される状況によって「thisが何を指すか」が動的に変わります。これが特に初心者にとって理解を難しくする要因でした。
アロー関数と「this」の固定
一方、アロー関数は、自身で新しいthisを作らず、常に外側のスコープ（親要素）のthisを継承します。
これにより、「このthisは何を指しているんだろう？」と悩む必要がなくなり、コードの挙動が予測しやすくなりました。
まとめ：アロー関数でモダンなJavaScriptへ
アロー関数は、現代のJavaScriptを書く上で欠かせない記述方法です。
- 書き方:
const functionName = (引数) => { 処理 }; - メリット: コードが短くなり、
thisの挙動がシンプルになる。 - ルール: 処理が
return一行だけなら、{}とreturnを省略できる。引数が一つなら()を省略できる。
今後は、特別な理由がない限りアロー関数を使うように習慣づけてみましょう。これにより、あなたのコードはより現代的で、他の開発者にとっても読みやすいものになるはずです。
