JavaScriptのアロー関数とは?functionとの違いを初心者向けに解説

JavaScript

別記事では、関数の基本であるfunction構文について紹介しました。しかし、最近のプログラミング教材や実務のコードを見ていると、次のような変わった書き方をよく目にしませんか?

const sayHello = () => {
  console.log("こんにちは!");
};

この =>(矢印のような形)を使った書き方を「アロー関数」と呼びます、現代のJavaScript開発では、このアロー関数が主流となっています。

「これまでのfunctionと何が違うの?」「どっちを使えばいいの?」と不安に思う必要はありません。本記事では、アロー関数の書き方の基本から、従来のfunctionとの違い、そして使い分けのポイントまでを初心者向けにわかりやすく解説します。

合わせて読みたい

JavaScriptのアロー関数とは?「短く書ける」新しい関数のカタチ

アロー関数は、2015年のJavaScriptアップデート(ES6)で登場した、関数をよりシンプルに書くための仕組みです。

最大のメリットは、「コードが短く、スッキリ書けること」です。

書き方の比較
従来のfuntionを使った書き方と、アロー関数の書き方を並べてみましょう。

【従来の書き方】

const double = function(number) {
 return number * 2;
};

【アロー関数】

const double = (number) => {
  return number * 2;
};

functionという文字が消え、代わりに=>(ファットアロー)という記号が使われています。まるで「この引数を使って、右側の処理を実行するよ!」と指し示しているような見た目ですね。

アロー関数をもっと短く書くルール

アロー関数が好まれる理由は、特定の条件でさらに短く(省略して)書くことができるからです。

①引数が一つのときは「()」を省略できる

// 省略なし
const greet = (name) => {...};

// 省略あり(nameを囲むカッコがない)
const greet = name => {...};

②処理が一行だけのときは「{ }」と「return」を省略できる

これが最もよく使われる便利な省略ルールです。

// 省略なし
const add = (a, b) => {
  return a + b;
};

// 省略あり
const add = (a, b) => a + b;

このように、一行で結果を返すようなシンプルな関数を書く時、アロー関数はその真価を発揮します。

アロー関数とfunctionの決定的な違い

見た目の違い以外に、大きな違いが3つあります。

①「名前」の付け方が違う
functionは「関数そのものに名前をつける」イメージですが、アロー関数は「匿名(名前のない)関数を変数に入れる」というイメージで書きます。

②「this」の扱いが違う
これが最も大きな技術的な違いです。JavaScriptにはthisという「今どこを指しているか」を示すキーワードがありますが、functionとアロー関数では、このthisが指す相手が異なります。
※初心者のうちは「アロー関数の方が、thisのトラブルが起きにくい」とだけ覚えておけば大丈夫です。

③「ホイスティング(巻き上げ)」が起きない
従来のfunctionで作った関数は、コードの下の方で宣言しても、上の方で呼び出すことができました。しかし、アロー関数は変数に代入して使うため、「使う前に宣言してあること」が厳密に求められます。
つまり、アロー関数は「先に書いてから使う」という順番を守る必要があります。

関数とアロー関数はどう使い分けている?

「結局、どっちを使えばいいの?」という疑問に対する答えは、以下のようになっています。

  • 基本は「アロー関数」を使う
    コードが短くなり、this関連のバグも防げるため、現代のスタンダードになっています。特に「配列の操作」など、ちょっとした処理を渡すときに欠かせません。
  • あえてfunctionを使う場合
    古い教材やプロジェクトを扱う場合や、特定の高度な機能(メソッドとして定義する場合など)で必要になることがあります。

初心者の皆さんは、「まずはアロー関数で書く練習をし、読めないコードに出会ったらfunction構文を思い出す」というスタンスで進めるのが最も効率的です。

アロー関数✖️配列の組み合わせ例

「配列」と一緒に使うと、アロー関数の便利さが際立ちます。

const numbers = [1, 2, 3];

// 配列の各要素を2倍にする(一行で書ける!)
const doubled = numbers.map(n => n * 2);

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

このように、一行でサッと処理を記述できるのがアロー関数の美しさです。

合わせて読みたい

まとめ

アロー関数は、JavaScriptをより現代的にスマートに書くための必須スキルです。

  1. アロー関数は=>を使った短縮形の書き方。
  2. 引数が一つなら()を省略でき、一行なら{ return }も省略できる。
  3. 現代の現場では、アロー関数がメインで使われている。
  4. 使う前に書く(宣言する)というルールを意識する。

まずは、手元にある従来のfunctionで書かれたコードを、アロー関数へ書き換える練習から始めてみてください。複雑だったコードが数行、あるいは一行へと劇的にスッキリする快感を味わえば、モダンなJavaScriptの習得へ大きく一歩前進です!

タイトルとURLをコピーしました