【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 をそのまま使います。

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

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、イベント処理、非同期処理などで非常によく見かけます。

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

5. よくあるつまずき

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

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

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

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

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

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

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

補足：アロー関数を実務で読むときの見方

アロー関数は「短く書ける関数」と説明されることが多いですが、実際のコードではそれだけでは少し足りません。特に、配列処理、イベント処理、コールバック関数の中でよく登場するため、コードを読むときは「どの値を受け取り、何を返しているのか」を先に見ると理解しやすくなります。

まずは、配列の map でアロー関数を使う例を見てください。アロー関数がどんな場面で自然に使われるのかが見えやすい例です。

この画像で見てほしいのは、price => { ... } の部分です。これは「priceを受け取り、税込価格に変換する処理」を map に渡しています。関数名を付けて何度も使うほどではない短い処理を、その場で渡したいときにアロー関数はよく使われます。

実務では、商品一覧の価格を加工する、ユーザー一覧から名前だけ取り出す、APIで受け取ったデータを画面表示用に整える、といった場面でよく出てきます。つまり、アロー関数は「短く書けるから使う」というより、「その場限りの小さな処理を読みやすく渡すために使う」と考えると自然です。

const users = [
  { name: "田中", age: 24 },
  { name: "佐藤", age: 31 }
];

const names = users.map(user => user.name);

console.log(names); // ["田中", "佐藤"]

この例では、user => user.name が「ユーザー情報から名前だけ取り出す処理」です。処理が1行で済むため、アロー関数にすると何をしているかが見えやすくなります。

一方で、アロー関数には注意点もあります。特に this の扱いは、通常の function と違います。次の図で、アロー関数が this をどう扱うかを整理します。

この図で重要なのは、アロー関数が「自分専用の this を持たない」という点です。通常の function は呼び出し方によって this が変わりますが、アロー関数は外側の this をそのまま使います。

この性質は、クラスやオブジェクトの中でイベント処理を書くときに役立つことがあります。ただし、オブジェクトのメソッドそのものをアロー関数で書くと、期待した this にならないこともあります。初心者のうちは、短いコールバックや配列処理ではアロー関数、オブジェクトのメソッドでは通常の function やメソッド記法、と分けて考えると安全です。

よくあるミスは、アロー関数を「functionの完全な置き換え」と思ってしまうことです。確かに似た場面で使えますが、this、arguments、コンストラクタ利用では違いがあります。迷ったときは、まず function（関数）の基本 を押さえ、そのうえで コールバック関数 や JavaScriptのthis とつなげて読むと理解しやすいです。

使ってよい場面・避けたほうがよい場面

アロー関数が特に向いているのは、配列処理や一時的なコールバックです。map、filter、forEach のように、関数をその場で渡す処理では、短く書けることが読みやすさにつながります。

一方で、オブジェクトのメソッドとして this を使う処理では注意が必要です。アロー関数は外側の this を引き継ぐため、「このオブジェクト自身」を指してほしい場面で期待と違う挙動になることがあります。

const user = {
  name: "田中",
  greet: function() {
    console.log(this.name);
  }
};

user.greet(); // 田中

このように、オブジェクト自身の情報を使うメソッドでは、まず通常の関数やメソッド記法で書くと安全です。アロー関数は便利ですが、いつでも短くすればよいわけではありません。

初心者が見るべきポイント

• => の左側は受け取る値、右側は実行する処理
• 1行で返すときは return が省略されていることがある
• this を使う処理では、通常の function との違いを見る
• 配列処理やイベント処理でよく出てくると覚える

読みづらいアロー関数に出会ったとき

アロー関数は短く書ける反面、短くしすぎると初心者には読みづらくなります。特に、引数が複数あり、さらに三項演算子やオブジェクトの返却が混ざると、どこまでが引数で、どこからが戻り値なのか見失いやすくなります。

そのようなコードに出会ったら、いったん通常の関数の形に戻して読むと理解しやすいです。user => user.name なら「userを受け取ってuser.nameを返す関数」、(a, b) => a + b なら「aとbを受け取って足し算の結果を返す関数」と読み替えます。

また、アロー関数の中で処理が長くなっている場合は、無理に1行で書かず、{ } と return を使って複数行にしたほうが読みやすいこともあります。短さよりも、何をしているかがすぐ分かることを優先しましょう。

実務では、チームのコード規約によってアロー関数を積極的に使う場合もあれば、読みやすさを優先して通常の関数を選ぶ場合もあります。大切なのは、どちらか一方を丸暗記することではなく、処理の短さ、this の扱い、読みやすさを見て選べるようになることです。

アロー関数を通常の関数に戻して読む練習

アロー関数が読みにくいと感じたときは、頭の中で通常の関数に戻してみると理解しやすくなります。たとえば price => price * 1.1 は、次のように読み替えられます。

function(price) {
  return price * 1.1;
}

このように戻してみると、左側の price が引数で、右側の price * 1.1 が戻り値だと分かります。アロー関数は記号が少ないぶん、慣れるまでは情報が省略されているように感じます。読みづらいときは、無理に一瞬で理解しようとせず、通常の関数に展開して確認しましょう。

また、アロー関数が連続して出てくるコードでは、最初から全部を理解しようとすると疲れます。まずは「配列の要素を1つ受け取って、別の形に変換しているのか」「条件に合うものだけ残しているのか」「クリック後に実行する処理なのか」を見ると、コードの目的がつかみやすくなります。

実務のコードレビューでは、アロー関数が短いかどうかよりも、意図が伝わるかどうかを見ます。1行で書ける処理でも、条件分岐が増えて読みにくいなら、複数行にして変数名を付けたほうがよい場合があります。

特に、画面表示用のデータ変換では、アロー関数の中で価格表示、日付整形、ステータス変換などをまとめて行うことがあります。処理が増えたら、無理にその場へ詰め込まず、名前付きの関数へ分けると読みやすくなります。

初心者の方は、アロー関数を見たらまず「これはどこへ渡されている関数なのか」を確認してください。map に渡されているなら変換、filter に渡されているなら絞り込み、クリックイベントに渡されているなら操作後の処理、というように周辺の関数名から役割を推測できます。

この見方ができるようになると、アロー関数は単なる省略記法ではなく、JavaScriptの処理の流れを表す重要なサインとして読めるようになります。

最初は記号に目が行きますが、慣れてくると「受け取る値」と「返す値」を素早く読めるようになります。そこまで来ると、配列処理やイベント処理のコードがぐっと身近になります。

関連して学びたい記事

• JavaScriptの関数 function の使い方
• JavaScriptの関数式とは？
• JavaScriptのコールバック関数とは？

まとめ

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