(arg) => R アロー関数の型
最終更新：2026-10-22
(arg) => R アロー関数の型
アロー関数は型注釈の構文を内蔵しています：パラメータの後のコロン、式そのものが戻り値です。アロー関数の変数に明示的に関数型を宣言すると、本体のパラメータと戻り値がすべて自動的に連動します。ソートの比較器やマッパーなど一度きりのコールバックにおける推奨スタイルです。
| グループ | 関数とクラス |
|---|---|
| 種類 | 構文 |
| strict モード | 不要 |
ℹ️ 説明 エディタは TypeScript を JavaScript にトランスパイルして実行します（型チェックなし）。型チェック結果は各サンプルの出力を参照してください。
📝 構文
const byPriceAsc: (a: Product, b: Product) => number = (a, b) => a.price - b.price;
// ジェネリック アロー関数（.tsx ファイルでは JSX タグとの衝突を避けるため <T,> と書く）
const identity = <T,>(v: T): T => v;⚙️ パラメータ
| (a: Product, b: Product) => number | 変数の関数型注釈：右側の実装本体の中の a/b は自動的に型を得ます |
|---|---|
| <T,>(v: T): T | ジェネリックなアロー関数：型パラメータはパラメータリストの前に書きます。末尾カンマは .tsx での曖昧さ回避に使います |
戻り値：式本体の戻り値はその式の型です。ブロック本体は return を使い、戻り値の型は明示的に注釈できます。
▶ サンプル
下のコードを編集して「試す」を押すと、トランスパイル実行結果を確認できます：
出力：
Mouse:89 | Keyboard:199 | Monitor:899
（トランスパイル後の実行出力。比較器がブール値（a.price < b.price）を返すのは型エラーです——sort は number を期待します）💡 ポイント
ℹ️ 説明 アロー関数には自分自身の this がありません。メソッドのコールバックやイベントハンドラの中で外側の this をそのまま使えます。これが普通の関数との最も重要な実行時の違いです。
⚠️ 注意 式本体でオブジェクトリテラルを返すには括弧が必要です：() => ({ key: v })。() => { key: v } と書くとブロック本体と解釈され undefined を返します。
💡 ヒント 比較器は a.price - b.price（負/ゼロ/正）を返せば昇順になります。ブール値は絶対に使わないでください——Boolean 同士の減算はたまたま動くだけで意味が混乱し、型の上でも間違いです。
🏷️ 関連関数とクラス
💡 関連ケース
ケースは今後追加予定です。
📚 関連チュートリアル
❓ よくある質問
Q アロー関数と普通の関数で型の書き方に違いはありますか？
A 型のレベルでは完全に同じです。どちらも (params) => returnType です。違いは実行時の意味論（this、arguments、new できるか）にあります。
Q .tsx ファイルで <T>(v: T) がエラーになるのはなぜですか？
A ジェネリックの山括弧が JSX のタグ構文と衝突するためです。<T,>（末尾カンマ）や <T extends unknown> と書けば曖昧さを解消できます。
Q いつアロー関数の変数に型を注釈すべきですか？
A 変数に代入される、オブジェクトに格納される、またはエクスポート API になるときです。注釈があれば実装本体が文脈的型付けの恩恵を受けます。すでにパラメータ型の分かっている関数にインラインで渡す場合（sort(byPriceAsc) など）は省略できます。
