=>とは？JavaScriptのアロー関数を解説

JavaScriptのコードで、次のような記号を見かけることがあります。

1(index) => (index % 2 === 0 ? "blue" : "red")

この => は、アロー関数と呼ばれる書き方です。

関数を短く、読みやすく書くために使われます。

そもそも関数とは？

関数は、「値を受け取って、何か処理をして結果を返すもの」です。
たとえば、受け取った数字を2倍にする関数はこう書けます。

1function double(number) {
2  return number * 2;
3}

使うときは、このように書きます。

1double(3); // 6
2double(10); // 20

=> を使うと短く書ける

先ほどの関数は、アロー関数を使うとこう書けます。

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

処理が1行だけなら、さらに短く書けます。

1const double = (number) => number * 2;

=> の左側と右側を見る

アロー関数は、次のように読むとわかりやすいです。

1(受け取る値) => 処理

たとえばこちら。

1(name) => `こんにちは、${name}さん`

これは、name を受け取って「こんにちは、○○さん」という文字を返す、という意味です。

偶数・奇数で色を切り替えるサンプル

次のコードを見てみましょう。

1(index) => (index % 2 === 0 ? "blue" : "red")

これは、要素の番号によって色を切り替えるアロー関数です。

・index は、今処理している要素の番号

・JavaScriptの番号は 0 から始まる

・index % 2 は、index を2で割った余り

・番号が偶数なら “blue”

・番号が奇数なら “red”

たとえば、4つの要素がある場合はこのようになります。

1つ目 0 “blue”

2つ目 1 “red”

3つ目 2 “blue”

4つ目 3 “red”

この部分です。

1index % 2 === 0 ? "blue" : "red"

は「もし index が偶数なら青、そうでなければ赤」という意味です。

if 文を使って書き直すと、次のようになります。

1(index) => {
2  if (index % 2 === 0) {
3    return "blue";
4  } else {
5    return "red";
6  }
7}

実際に配列で使う

配列の要素を順番に処理する map と組み合わせると、次のように使えます。

1const items = ["りんご", "みかん", "バナナ", "ぶどう"];
2
3const colors = items.map(
4  (item, index) => (index % 2 === 0 ? "blue" : "red")
5);
6
7console.log(colors);
8// ["blue", "red", "blue", "red"]

この場合、item には「りんご」や「みかん」といった要素の中身が入り、index にはその要素の番号が入ります。

今回は item 自体は使わず、何番目かを表す index だけを使って、色を交互に決めています。

引数が1つならカッコも省略できる

受け取る値が1つだけの場合、丸カッコは省略できます。

1const double = number => number * 2;

これは次のコードと同じです。

1const double = (number) => number * 2;

ただし、引数がない場合や複数ある場合は丸カッコが必要です。

1const sayHello = () => "こんにちは";
2
3const add = (a, b) => a + b;

まとめ

=> は、JavaScriptで関数を短く書くための記号です。

1(受け取る値) => 処理

今回の例では、

1(index) => (index % 2 === 0 ? "blue" : "red")

は、index を受け取って、偶数番目なら青、奇数番目なら赤を返す関数です。

アロー関数は「左で値を受け取り、右で処理する」と考えると、少しずつ読みやすくなります。