TypeScriptアロー関数完全攻略！型定義・this・ジェネリクスの使い方

アロー関数がモダン開発の標準である理由

TypeScript開発において、関数定義の主流はfunctionキーワードからアロー関数へと完全にシフトしました。

その理由は、記述の簡潔さだけでなく、this の挙動が予測可能であるという安全面にあります。

本記事では、初心者がつまずきやすい型定義のバリエーションから、React開発で必須となるジェネリクスの扱いまで、実務に直結する知識を凝縮して解説します。

アロー関数の基本構文と型定義

TypeScriptのアロー関数では、引数と戻り値の双方に型を明示するのが基本です。

引数と戻り値の型付け

最も一般的なインラインでの定義方法です。

const calculateTax = (price: number, taxRate: number = 0.1): number => {
  return price * (1 + taxRate);
};

デフォルト引数

taxRate: number = 0.1 のように指定すると、型推論とデフォルト値の設定を同時に行えます。

戻り値の型

引数の括弧 () の直後に記述します。

型エイリアス（Type Alias）による共通化

関数そのものの「形」に名前を付けることで、複数の関数で型を再利用できます。

type Formatter = (input: string) => string;

const toUpper: Formatter = (str) => str.toUpperCase();
const toLower: Formatter = (str) => str.toLowerCase();

このように定義すると、実装側（toUpper など）で引数の型を再度書く必要がなくなり、コードがスッキリします。

thisの挙動：なぜアロー関数が安全なのか

JavaScript/TypeScriptにおいて、最もバグの原因になりやすいのが this の取り扱いです。

レキシカルなthis束縛

従来の function で定義された関数は、「呼び出し方」によって this が変わります。

一方、アロー関数は「定義された場所」の this を引き継ぎます。

class Counter {
  count = 0;
  start() {
    setInterval(() => {
      this.count++; // アロー関数なら 'this' は常に Counter インスタンスを指す
    }, 1000);
  }
}

コールバック関数（setTimeout やイベントリスナーなど）を渡す際、アロー関数を使えば bind(this) を書く手間とリスクから解放されます。

ジェネリクスを用いたアロー関数

再利用性の高いコンポーネントやユーティリティを作る際に欠かせないのがジェネリクスです。

基本構文と .tsx ファイルの注意点

ジェネリクスアロー関数の基本は以下の通りです。

const wrapInArray = <T>(value: T): T[] => [value];

ただし、Reactの .tsx ファイルでは、<T> がHTMLタグと誤認されエラーになることがあります。

その場合は、「カンマ」を一つ入れるのが現場の知恵です。

// .tsx ファイルでの回避策
const wrapInArray = <T,>(value: T): T[] => [value];

React/Next.jsにおける実践活用術

React開発では、コンポーネントやイベントハンドラーの定義にアロー関数が多用されます。

関数コンポーネントの型定義

現在推奨されているのは、React.FC を使わず、引数に直接型を付けるスタイルです。

type Props = { title: string };

const Header = ({ title }: Props) => {
  return <h1>{title}</h1>;
};

イベントハンドラーの型

ボタンクリックなどのイベントでは、React.MouseEvent などの型をアロー関数に添えることで、イベントオブジェクトのプロパティを安全に扱えます。

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log(event.currentTarget.name);
};

アロー関数を使いこなすためのチェックリスト

TypeScriptのアロー関数をマスターするためのポイントを振り返ります。

これらを守るだけで、あなたの書くTypeScriptコードの堅牢性と読みやすさは劇的に向上します。