【確認用】【JavaScript】アロー関数とは？functionとの違いと使いどころを初心者向けに解説

JavaScriptでアロー関数を見ると、=> の記号が急に出てきて戸惑う方が多いです。結論からいうと、アロー関数は「関数式を短く書くための書き方」ですが、this など一部の挙動は通常の function と違います。

そのため、単なる省略記法だと思っていると後で混乱しやすくなります。この記事では、アロー関数の意味、基本構文、function との違い、使いどころを初心者向けに整理します。

結論：アロー関数は短い関数を書くのに向いている

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

上のように、function を使わず => で関数を書けるのがアロー関数です。特に、配列処理やコールバック関数でよく使われます。

比較	通常の関数	アロー関数
書き方	function add(a, b) { ... }	(a, b) => { ... }
短く書けるか	やや長い	短く書きやすい
this の決まり方	呼び出し方で変わる	外側の this を引き継ぐ
コンストラクタ利用	できる	できない

1. アロー関数の基本構文

通常の関数式は次のように書きます。

const greet = function(name) {
  return "こんにちは、" + name + "さん";
};

同じ処理をアロー関数で書くと、こうなります。

const greet = (name) => {
  return "こんにちは、" + name + "さん";
};

このように、function を省いて、引数の後ろに => を置くのが基本形です。

2. さらに短く書けるパターン

アロー関数は、条件がそろうとさらに短く書けます。

引数が1つなら () を省略できる

const double = n => {
  return n * 2;
};

1行で値を返すなら return と { } を省略できる

const double = n => n * 2;

この書き方はとても便利ですが、短くしすぎると読みにくくなることもあります。初心者のうちは、まずブロック付きで書ければ十分です。

3. アロー関数と function の大きな違い

ここが大事です。アロー関数は単なる短縮形ではありません。

this を自分で持たない

通常の function は呼び出し方によって this が変わりますが、アロー関数は外側の this をそのまま使います。ここが曖昧な方は、JavaScript の this 解説も一緒に読むと整理しやすいです。

そのため、オブジェクトのメソッドやクラスのメソッドで、どちらを使うかによって挙動が変わることがあります。

arguments を持たない

通常の関数には arguments がありますが、アロー関数にはありません。可変長引数を扱いたいときは、通常は ...args を使います。

コンストラクタとして使えない

アロー関数は new と一緒には使えません。オブジェクトを生成するコンストラクタ用途なら、通常の関数や class を使います。

4. どんな場面で使うのか

アロー関数が特に活躍するのは、短いコールバック関数を書く場面です。

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

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

このように、配列の map や filter、イベント処理、非同期処理などで非常によく見かけます。配列メソッドでの使われ方をまとめて押さえたい方は、map・filter・reduce の違いを解説した記事もおすすめです。

一方で、メソッド定義や this の理解が必要な場面では、通常の function のほうが意図が伝わりやすいこともあります。

5. よくあるつまずき

return が省略されていて意味が分からなくなる

1行アロー関数では、式の結果が自動で返ります。慣れるまでは、あえて { } と return を書いたほうが理解しやすいです。

オブジェクトを返したいのにエラーになる

オブジェクトを1行で返すときは、丸かっこで囲む必要があります。

const createUser = name => ({ name: name });

this が思った通りにならない

アロー関数は自分の this を持たないため、「メソッド内だから自動でそのオブジェクトを指す」と考えるとズレることがあります。ここは通常の関数との最重要ポイントです。

関連して学びたい記事

• JavaScriptの関数 function の使い方
• JavaScriptのコールバック関数とは？
• JavaScriptのthisとは？
• JavaScriptのmap・filter・reduceの違いとは？

まとめ

アロー関数は、JavaScriptを学ぶうえで避けて通れない基本文法です。まずは「短い関数を書きやすい仕組み」と理解し、次に this の違いまで押さえると、実務でもかなり読みやすくなります。