Day 1・変数・基本型・関数

関数の型(引数と戻り値)、アロー関数

関数の引数と戻り値に型を付ける方法と、短く書けるアロー関数の書き方を学ぶ。

関数にも「入口」と「出口」の型がある

関数は「値を受け取って、加工して、返す」しくみです。受け取る値が引数、返す値が戻り値。引数と戻り値それぞれに型を付けられます。ここが型注釈の一番おいしい場所です。なぜなら関数の引数は初期値がなく、型推論が効かないからです。

TYPESCRIPT

// (name: string) が引数の型、: string が戻り値の型
function greet(name: string): string {
  return "こんにちは、" + name + "さん";
}

const text = greet("あかり"); // text は string
// greet(123); // エラー: number は string の引数に渡せない

引数と戻り値に型を付ける

なぜ関数の型が「AIに任せる」ときの守りになるのか

実装をAIに書いてもらうとき、あなたが決めるのは多くの場合「引数と戻り値の型」です。入口と出口の型さえ固定しておけば、中身をAIがどう書こうと、型に合わないコードは受け付けません。型が仕様書の役割を果たし、実装だけを任せられます。

アロー関数:短く書く関数

同じ関数を、より短い記法で書けるのがアロー関数です。function という語のかわりに => (矢印)を使います。React などでは、このアロー関数が至るところで出てきます。

function 記法(これはこれで正しい)

TYPESCRIPT

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

アロー関数で同じ処理

TYPESCRIPT

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

処理が「値を1つ返すだけ」なら、波かっこと return も省略できます。1行で書けるので、配列の変換などでよく使います。

TYPESCRIPT

// 波かっこと return を省いた形。=> の右がそのまま戻り値になる
const double = (n: number): number => n * 2;

const nums = [1, 2, 3];
const doubled = nums.map((n) => n * 2); // [2, 4, 6]

1行のアロー関数

戻り値の型は書くべき?

戻り値の型は推論もされますが、公開する関数や少し複雑な関数では自分で書くのがおすすめです。書いておくと「返すつもりの型」と「実際に返している型」がズレたとき、その関数の中でエラーが出て原因が特定しやすくなります。

引数は「名前: 型」、戻り値は引数かっこのうしろに「: 型」
引数は型推論が効かないので型注釈が必要
アロー関数は function のかわりに => を使う短い書き方
1つ値を返すだけなら波かっこと return を省略できる

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

次のうち、戻り値が number 型のアロー関数として正しいものはどれ?

関数の引数には型推論が効かず、型注釈が必要になる理由を説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。