【実践】TypeScriptのアロー関数でコードを短くシンプルに！

こんにちは！Syuu（ @syuu_n18）です。

この記事ではTypeScriptのアロー関数について特徴や使い方、メリットなどについて分かりやすく解説していきます。

アロー関数とは？

アロー関数とは従来の関数と比べて 短くてシンプルな構文 で関数を書くことができる新しい関数表現です。

実際にアロー関数を使った例をみてみましょう。

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

上記のコードは引数 a と b を受け取り、その和を返す関数 add を定義しています。

従来の関数との違い

では、従来の関数の書き方とアロー関数は何が違うのでしょうか？

先程の例で従来の関数を使った同じ処理は次のようになります。

function add(a: number, b: number): number {
  return a + b;
}

アロー関数では先頭の function キーワードが不要で、アロー(=>)を使って関数を定義することができます。
=> を使った書き方だからアロー関数と呼ばれているわけでですね！

アロー関数のメリット

そんなアロー関数のメリットは主に2つあります。

短くシンプルな構文
thisの扱いが容易

短くシンプルな構文

これは先程も解説したとおり、アロー関数は従来の関数と比べて 短くシンプルな構文 で関数を書くことができます。

実は、上記の add 関数はさらに短く次のように書くこともできます。

const add = (a: number, b: number): number => a + b;

{} と return を省略してワンラインで書けるので、だいぶシンプルになりましたね！

thisの扱いが簡単

また、アロー関数は従来の関数と比べて this の扱いが簡単です。

具体的にどういうことかというと、従来の関数では this の値は関数の呼び出し方によって変わりますが、アロー関数では this の値は 関数定義時の値が固定 されます。

具体的なコードでみていきましょう。

class Counter {
  count: number = 0;

  incrementRegular() {
    setTimeout(function () {
      this.count++; // エラー: `this` はグローバルオブジェクトを参照してしまう
      console.log(this.count);
    }, 1000);
  }

  incrementArrow() {
    setTimeout(() => {
      this.count++; // エラーしない: `this` は Counter クラスのインスタンを参照する
      console.log(this.count);
    }, 1000);
  }
}

const counter = new Counter();
counter.incrementRegular(); // NaN
counter.incrementArrow(); // 1

上記のコードではまず、Counter クラスがあり count プロパティを持っています。
また、従来の関数で書かれている incrementRegular メソッドとアロー関数で書かれている incrementArrow メソッドの2つのメソッドが定義されています。

incrementRegular メソッドでは setTimeout 関数を使って1秒後に this.count をインクリメントして、その値をコンソールに出力しようとしています。
しかし、従来の関数表現（ function キーワードを使った関数）を使っているため、this が グローバルオブジェクト を指してしまい、エラーが発生します。
なので結果として NaN が出力されています。

一方、incrementArrow メソッドではアロー関数を使っています。
アロー関数では this が 関数定義時のthisの値を保持 します。

この場合、this は Counter クラスのインスタンスを指します。
そのため、1秒後に this.count をインクリメントしてその値をコンソールに出力するというコードが正しく動作し、結果として1が出力されています。

この例からわかるようにアロー関数を使うことで this の扱いが簡単になります！

従来の関数は呼び出し方によって this の値が変わってしまうために、想定外の動作をすることがあったのですが、アロー関数では関数定義時の値を保持するのでこの問題を回避できているわけですね。

アロー関数の使い方

アロー関数を使うことのメリットについてわかったところで、次はアロー関数のケース別に使い方を紹介します！

単一式を返す場合

以下のように、単一の式だけを帰す場合は波括弧（{}）と return キーワードを省略できます。
とてもシンプルですね。

const square = (x: number): number => x * x;

複数の引数を持つ場合

アロー関数に渡す引数が複数ある場合はカッコで囲む必要があります。

const add = (a: number, b: number): number => a + b;

引数が1つだけの場合

逆にアロー関数に渡す引数が１つだけの場合はカッコを省略できます。

const double = x: number => x * 2;

引数がない場合

逆にアロー関数に渡す引数が必要ない場合には空のカッコを使います。
意外とよく見るケースですね。

const hello = (): void => console.log("Hello, World!");

複数の式がある場合

アロー関数の返り値に複数の式が必要な場合は波括弧（{}）で囲み、return キーワードを使います。

const max = (a: number, b: number): number => {
  if (a > b) {
    return a;
  } else {
    return b;
  }
};

実践的な例

それでは最後にアロー関数を使った実践的な例を見てみましょう！

Arrayメソッドと組み合わせる

一般的に、アロー関数はArrayのメソッド（map、filter、reduceなど）と組み合わせることが多いです。

例えば以下のコードは、配列の各要素を2倍して新しい配列を作成しています。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(x => x * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

map を使ったコードがワンラインで読みやすく書かれているのがわかりますね。

また、次のコードは配列から偶数だけを取り出して新しい配列を作成しています。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]

filter を使って対象となる値のみを抽出していますが、こちらもアロー関数を使うことで可読性がアップしています。

TypeScript で配列をループする簡単な3つの方法を紹介

初心者向けにTypeScriptの配列をループする方法を分かりやすく解説！for、for-of、forEachの3つを紹介。

gizanbeak.com

イベントハンドラとして使用する

アロー関数はイベントハンドラとしても使うことができます。

const button = document.querySelector("button");
button.addEventListener("click", () => alert("ボタンクリック!"));

上記のコードは、ボタンがクリックされたときにアラートを表示するイベントハンドラを設定しています。
アロー関数を使うことで function を省略しつつ読みやすくかけますね！

まとめ

今回解説したようにアロー関数は短くシンプルな構文で関数を書くことができるため、コードが読みやすくなります。
また、thisの扱いが簡単になるため、クラスのメソッドやイベントハンドラなどで役立ちます。

アロー関数は、JavaScriptやTypeScriptのプログラミングスキルを向上させるための重要なツールです。
ぜひ、アロー関数をうまく活用してコードをよりシンプルで読みやすくしましょう！

TypeScriptはめんどくさい？対策をわかりやすく解説

初学者向けに、TypeScriptの面倒くささとその対策を解説。型安全性のメリットも紹介！

gizanbeak.com

Gizanbeak