JavaScriptのアロー関数入門【=>の使い方】

JavaScript アロー関数とは？

「=> の書き方がよくわからない」「普通の関数と何が違うの？」——そんな疑問を解決します。アロー関数（arrow function）は、=>（矢印）を使った短い書き方です。ES6（2015年）で追加され、現代のJavaScriptでは広く使われています。

アロー関数を覚えると、コールバック関数（map・filter・forEachなど）を短く書けるようになります。ReactやVueなどのフレームワークでも頻出するので、今のうちにしっかり覚えておきましょう。この記事では、基本の書き方から省略記法、thisの違い、使い分けまで、コード例を使ってわかりやすく解説します。

通常の関数との比較

アロー関数と通常の関数（function宣言）の書き方を比較してみましょう。同じ処理でも、アロー関数を使うと短く書けます。

// 通常の関数
function add(a, b) {
  return a + b;
}

// アロー関数（同じ意味）
const add = (a, b) => {
  return a + b;
};

// 1行で書ける場合はさらに短く（暗黙のreturn）
const add = (a, b) => a + b;

// 引数が1つの場合は()を省略できる
const double = n => n * 2;

// 引数がない場合は()が必要
const greet = () => 'こんにちは！';

省略ルールまとめ

• 引数が1つ：() を省略できる → n => n * 2
• 引数が0個または2個以上：() が必要
• 処理が1行で値を返す： と return を省略できる → n => n * 2
• 処理が複数行： と return が必要

💡 JavaScript問題ドリルで基礎を確認できます。

コールバックでよく使う

アロー関数が最も活躍するのは、配列メソッドのコールバック関数です。map・filter・forEach・reduce などで使うと、コードが格段に読みやすくなります。これらの配列メソッドは実際のアプリ開発で毎日のように使うので、アロー関数との組み合わせに慣れておきましょう。

const nums = [1, 2, 3, 4, 5];

// forEachのコールバック
nums.forEach(n => console.log(n));

// mapで各要素を2倍にする
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filterで偶数だけ取り出す
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduceで合計を計算する
const sum = nums.reduce((total, n) => total + n, 0);
console.log(sum); // 15

// イベントリスナー
document.getElementById('btn').addEventListener('click', () => {
  console.log('クリック！');
});

通常関数で書くと function(n) { return n * 2; } となるところが、アロー関数なら n => n * 2 と1行で書けます。コードの見通しが良くなり、バグも減ります。

🔗 あわせて配列メソッド入門もチェックしてみましょう。

オブジェクトを返す場合

アロー関数でオブジェクトを直接返すときは、() で囲む必要があります。

// NG：{}がブロックとして解釈される
const getUser = () => { name: '田中' };

// OK：()で囲む
const getUser = () => ({ name: '田中', age: 15 });
console.log(getUser()); // { name: '田中', age: 15 }

📖 文字列操作入門で解説しています。

アロー関数を使う場面・使わない場面

アロー関数が向いている場面

• コールバック関数（map、filter、forEach など）
• 短い処理を1行で書きたいとき
• イベントハンドラ内で this を外側のスコープと同じにしたいとき

const numbers = [1, 2, 3, 4, 5];

// map + アロー関数で簡潔に書ける
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter + アロー関数
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

通常の関数を使うべき場面

• オブジェクトのメソッド定義（this がオブジェクトを指す必要がある場合）
• コンストラクタ関数（new で呼び出す関数）

🔗 スコープの基本でthisの挙動を理解しましょう。

💡 JavaScript入門で基礎を確認できます。

thisの挙動の違い

通常関数とアロー関数の最大の違いは this の扱いです。これはJavaScriptで最もつまずきやすいポイントの一つです。

const obj = {
  name: '田中',
  // 通常関数：thisはobjを指す
  greet: function() {
    console.log('こんにちは、' + this.name);
  },
  // アロー関数：thisは外側のスコープ（この場合window/undefined）
  greetArrow: () => {
    console.log('こんにちは、' + this.name); // undefinedになる！
  }
};

obj.greet();      // こんにちは、田中
obj.greetArrow(); // こんにちは、undefined

通常関数は「誰が呼び出したか」によって this が決まります。obj.greet() なら this は obj です。

アロー関数は「どこで定義されたか」によって this が決まります（レキシカルthis）。定義時の外側のスコープの this をそのまま使います。

アロー関数のthisが便利な場面

setTimeoutやイベントリスナーの中で外側のthisを使いたいとき、アロー関数が便利です。

const timer = {
  seconds: 0,
  start() {
    // アロー関数なのでthisはtimerオブジェクトを指す
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds + '秒経過');
    }, 1000);
  }
};

timer.start(); // 1秒経過, 2秒経過, 3秒経過

もし通常関数を使うと、this が window（またはundefined）になってしまい、this.seconds にアクセスできません。アロー関数を使えば、外側の this（= timerオブジェクト）がそのまま使えます。

🔗 スコープとthisで詳しく学べます。

使ってはいけない場面

• オブジェクトのメソッド定義 — thisがオブジェクトを指さないため、プロパティにアクセスできません。メソッドは通常関数（またはメソッド省略記法）で書きましょう。
• コンストラクタ関数 — アロー関数は new で呼び出せません。TypeErrorになります。
• arguments が必要な場合 — アロー関数には arguments オブジェクトがありません。可変長引数が必要な場合はレスト構文を使いましょう。

// NG：オブジェクトのメソッドにアロー関数
const user = {
  name: '田中',
  greet: () => {
    console.log(this.name); // undefined！
  }
};

// OK：メソッド省略記法を使う
const user2 = {
  name: '田中',
  greet() {
    console.log(this.name); // '田中'
  }
};

🔗 関数の基本・配列メソッド・コールバック関数・JavaScript入門・イベント処理も参考にしてください。

よくある質問（FAQ）

Q. アロー関数と通常関数、どちらを使えばいい？

基本的にはアロー関数を使い、thisが必要なメソッド定義だけ通常関数を使うのが現代のベストプラクティスです。迷ったらアロー関数で書いてみて、thisの問題が出たら通常関数に変えましょう。

Q. constで定義するのはなぜ？

アロー関数は変数に代入する形で書くため、const を使います。const にすることで、関数が意図せず上書きされるのを防げます。let でも動きますが、関数を再代入することはほぼないので const が適切です。

Q. 複数行の処理を書くときは？

で囲んで、return を明示的に書きます。1行で書ける場合のみ と return を省略できます。省略できるのは「式（値を返す処理）」が1つだけの場合です。if文やfor文など「文」が含まれる場合は省略できません。この省略ルールに慣れると、コードが格段に読みやすくなります。実際のプロジェクトでは省略形が主流です。

// 複数行の場合：{}とreturnが必要
const getFullName = (first, last) => {
  const space = ' ';
  return first + space + last;
};

// 1行の場合：省略可能
const getFullName = (first, last) => first + ' ' + last;

アロー関数の省略パターン早見表

アロー関数には複数の省略パターンがあります。最初は混乱しやすいので、整理しておきましょう。

基本形は (a, b) => { return a + b; } です。これは常に使えます。

処理が1行のときは return と {} を省略できます。(a, b) => a + b と書けます。

引数が1つのときは () も省略できます。n => n * 2 と書けます。

引数が0個のときは () が必要です。() => 'hello' のように書きます。

オブジェクトを返すときは () で囲みます。() => ({ key: value }) と書きます。

迷ったら基本形で書きましょう。慣れてきたら省略形を使うとコードが短くなります。

省略形を使うときの注意点があります。処理が2行以上になったら {} と return を書き戻す必要があります。例えば次のような場合です。

1行なら省略できます。const double = n => n * 2 と書けます。

2行以上なら {} と return が必要です。

const process = n => {
  const result = n * 2;
  console.log(result);
  return result;
};

デバッグ時に console.log を追加したくなったら、省略形から基本形に戻す必要があります。最初から基本形で書いておくと後から修正しやすいです。

チーム開発では「省略形を使うかどうか」をルールとして決めておくと統一感が保てます。ESLintなどのツールで自動チェックすることもできます。

また、アロー関数は名前を持ちません。エラーが発生したとき、スタックトレースに「anonymous」と表示されます。デバッグしにくい場合は、変数名をわかりやすくつけておきましょう。const calculateTotal = (items) => ... のように書くと、エラー時に変数名が表示されて原因を特定しやすくなります。

まとめ

アロー関数を使いこなすと、コードが短くシンプルになります。特に配列メソッド（map・filter・reduce）との組み合わせは、モダンJavaScriptの基本パターンです。コールバック関数をアロー関数で書く習慣をつけましょう。慣れれば自然と手が動くようになります。毎日少しずつ練習して、アロー関数をマスターしましょう。JavaScriptコースで実践的に学べます。最初は通常関数で書いてからアロー関数に書き換える練習をすると、違いが実感できます。レッスンでさらに実践的な使い方を学んでみましょう。