先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptのアロー関数って何ですか？普通の関数とどう違うんでしょうか？」

先生

「アロー関数はJavaScriptの新しい書き方で、簡単に関数を書ける方法の一つです。特に短い関数を書くときに便利ですよ。」

生徒

「なるほど、簡単に書けるんですね！でもどうやって書くのか教えてください。」

先生

「はい、それではアロー関数の基本の書き方を一緒に見ていきましょう！」

1. アロー関数とは？

アロー関数（arrow function）は、関数をより短く書くための新しい書き方です。名前の通り、矢印（=>）を使って関数を作ります。

今までの関数宣言と比べて、コードがすっきりして見やすくなります。

2. 通常の関数とアロー関数の違い

例えば、2つの数字を足す関数を作るとき、通常の関数とアロー関数はこう書きます。


function sum(a, b) {
  return a + b;
}

const sumArrow = (a, b) => {
  return a + b;
};

どちらも同じ動きをしますが、アロー関数はfunctionキーワードの代わりに=>を使います。

3. アロー関数のもっと短い書き方

アロー関数はさらに短く書けます。処理が1行で終わる場合、returnも省略できます。


const sumArrow = (a, b) => a + b;

console.log(sumArrow(3, 4));  // 7

この書き方は「引数 => 処理結果」という形です。

4. 引数が1つの場合の書き方

引数が1つだけなら、丸カッコも省略できます。


const greet = name => "こんにちは、" + name + "さん！";

console.log(greet("太郎"));

引数がない場合は、必ず空の丸カッコ () を書きます。


const sayHello = () => "こんにちは！";

console.log(sayHello());

5. アロー関数の便利なポイント

短く書けるので、コードがスッキリする
特に無名関数（名前のない関数）を使う場面で便利
複雑な関数でも、処理が1行なら簡単に書ける

ただし、アロー関数は通常の関数と違う動きをする部分もあるため、まずは基本の書き方から覚えるのがおすすめです。

6. アロー関数でよくある使い方の例

配列の要素を2倍にする例です。


const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);

console.log(doubled);  // [2, 4, 6, 8]

ここで使っているmapは配列のすべての要素に処理をして新しい配列を作る関数で、アロー関数を渡しています。

7. 最後に注意点

アロー関数はJavaScriptで関数を書く新しいスタイルで、短く簡潔に書けるのが魅力です。

まずは基本的な書き方に慣れて、少しずつ使い方を広げていきましょう。

まとめ

JavaScriptのアロー関数は、現代的なコードを書くうえで欠かせない重要な機能であり、関数を短く表現できるだけでなく、日常的なプログラム作成をより効率的に進められる魅力的な仕組みです。特に、無名関数をよく使う配列操作やコールバック処理では、アロー関数を使うことで全体の見通しがよくなり、読みやすく整理されたコードを書くことができます。関数を簡潔にまとめられるため、長いコードを避けたい場面や、処理の流れをスムーズに理解したいときにも非常に役立ちます。また、アロー関数は矢印記号の=>を使うことで構造を簡単に表現でき、通常の関数と比べて余計な記述を減らせます。引数が一つなら丸カッコを省略できたり、処理が一行で完結する場合はreturnを省略できたりと、書き方の幅も広く、状況に応じて使い分けられる柔軟さが特徴です。配列の変換、繰り返し処理、イベント処理など、日常的な場面で何度も登場する書き方だからこそ、しっかりと基本を理解しておくことが大切です。さらに、アロー関数はシンプルなだけでなく、見慣れると非常に読みやすく、コード全体に統一感を与えることができます。関数宣言よりも直感的な書き方ができるため、短い処理をサッと記述したい場面でも活躍します。特に配列の操作と組み合わせたときの使いやすさは抜群であり、mapやfilter、reduceといったメソッドとの相性は非常に良いです。より実践的な活用例として、以下にサンプルプログラムを掲載します。

サンプルコード：複数のアロー関数を組み合わせた実用例


const users = [
  { name: "太郎", score: 80 },
  { name: "花子", score: 92 },
  { name: "次郎", score: 75 }
];

// 点数だけ抜き出して平均を計算
const scores = users.map(u => u.score);
const average = scores.reduce((acc, n) => acc + n, 0) / scores.length;

console.log("平均点:", average);

// 名前を挨拶文に変換
const greetings = users.map(u => `こんにちは、${u.name}さん！`);
console.log(greetings);

このサンプルでは、mapとreduceの両方にアロー関数を活用しています。短い記述で配列の変換や集計をまとめて実行できるため、JavaScript全体の理解を深めるうえでも非常に有益な練習になります。アロー関数はJavaScriptの基礎として扱うべき要素のひとつであり、慣れることでさまざまな場面で自由に使えるようになります。コードの一貫性が高まり、読み手にも優しい構造になるため、プロジェクト全体の品質向上にもつながります。今回学んだ「引数の省略」「return の省略」「丸カッコの省略」などのルールを押さえておくことで、関数の書き方の幅が広がり、より自由で表現力のあるコードが書けるようになります。アロー関数を使いこなせば、配列処理、イベント処理、非同期処理の記述など、多くの分野でスムーズなプログラミングが可能になります。これからJavaScriptを学び進めていく中でも、アロー関数は頻繁に登場するため、自然に使える程度まで慣れておくと便利です。

先生と生徒の振り返り会話

生徒

「アロー関数って思ったより簡単に書けて、しかも短くて見やすいですね。mapとかと一緒に使うとすごく便利だと感じました！」

先生

「そうなんですよ。特に配列を扱う場面ではアロー関数が大活躍します。短く書けるだけでなく、処理の流れもつかみやすくなります。」

生徒

「return を省略できる書き方も覚えやすかったです。最初は難しく見えましたが、ルールを知るとスッキリ理解できました！」

先生

「その調子です。アロー関数はJavaScriptの基礎としてとても重要なので、今回の内容を参考にしながら、実際のコードでどんどん使って慣れていきましょう。」