TypeScript ファットアロー記号：匿名関数を簡潔に定義する

2024-04-23

TypeScriptにおける「=>」(ファットアロー)の意味

例：

const sum = (x: number, y: number) => x + y;
console.log(sum(10, 20)); // 出力：30

上記の例では、「sum」という名前の変数に、2つの引数(x, y)を受け取り、それらを足した結果を返す匿名関数を代入しています。「=>」記号を用いることで、「function」キーワードを省略し、より簡潔に記述できます。

ファットアロー記号の利点

コードがより簡潔で読みやすくなる
関数定義のオーバーヘッドが軽減される
関数定義の場所が明確になる

関数名の省略により、デバッグが難しくなる場合がある
複雑な処理を含む関数には不向きな場合がある

シンプルな計算処理
コールバック関数
配列やオブジェクトの処理

TypeScriptにおける「=>」(ファットアロー)記号は、匿名関数を簡潔に定義するための便利な構文です。コードをより読みやすく、簡潔にするために積極的に活用しましょう。

TypeScript ファットアロー記号のサンプルコード

const square = (x: number) => x * x;
console.log(square(5)); // 出力：25

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

const data = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 22 },
];

const adults = data.filter(person => person.age >= 25);
console.log(adults); // 出力：[Object { name: "Alice", age: 30 }, Object { name: "Bob", age: 25 }]

多行処理

const multiply = (x: number, y: number) => {
  if (x === 0 || y === 0) {
    return 0;
  }
  return x * y;
};

console.log(multiply(5, 2)); // 出力：10

省略可能な引数名

const greet = (name: string) => `Hello, ${name}!`;
console.log(greet("TypeScript")); // 出力：Hello, TypeScript!

デフォルト引数

const add = (x: number, y: number = 10) => x + y;
console.log(add(5)); // 出力：15
console.log(add(5, 2)); // 出力：7

これらの例は、TypeScriptにおけるファットアロー記号の様々な使用方法を示しています。

ファットアロー記号は、オブジェクトリテラルやジェネリック型にも使用できます。
より複雑な処理を含む場合は、従来の関数定義を使用する方が適切な場合があります。

TypeScript ファットアロー記号以外の匿名関数定義方法

通常の関数定義

function sum(x: number, y: number): number {
  return x + y;
}

console.log(sum(10, 20)); // 出力：30

IIFE (Immediately Invoked Function Expression)

(function (x: number, y: number) {
  console.log(x + y);
})(10, 20); // 出力：30

ES6 Arrow Function (非推奨)

const sum = (x: number, y: number) => {
  return x + y;
};

console.log(sum(10, 20)); // 出力：30

それぞれの方法の利点と注意点

ファットアロー記号:
- 利点: シンプルで読みやすい
- 注意点: デバッグが難しくなる場合がある
通常の関数定義:
- 利点: デバッグしやすい
- 注意点: 記述量が多くなる
IIFE:
- 利点: 自身のスコープを制御できる
ES6 Arrow Function (非推奨):
- 利点: ファットアロー記号とほぼ同じ
- 注意点: TypeScript 3.8 以降では非推奨