TypeScript Created: 2026/04/17 Updated: 2026/04/30

TypeScriptの関数と型を解説
引数・戻り値・アロー関数の書き方

TypeScriptの関数と型の書き方を初心者向けに解説。引数や戻り値の型指定、オプション引数、アロー関数の使い方まで実例付きで理解できます。

全8回シリーズ — 目次

1 TypeScriptとは

2 環境構築

3 基本の型

4 関数と型

5 インターフェイス

6 クラス

7 実践的な型

8 便利機能まとめ

🎯 この記事のゴール

引数・戻り値に型を付けた関数を自在に書けるようになること。オプション引数・デフォルト値・アロー関数・関数型まで、実務で毎日使うパターンを網羅します。

実行ファイルを用意しよう

今回用のファイルを作成します。Bunの場合はfunctions.ts 、Node.jsの場合はsrc/functions.ts です。

Bunの場合

bash
touch functions.ts
bun --watch run functions.ts

Node.js + npm

bash
touch src/functions.ts
npx tsc --watch  # 別ターミナルで起動
node dist/functions.js

関数の型定義 — シグネチャを読めるようになろう

TypeScriptの関数型定義は「引数の型」と「戻り値の型」の2か所を宣言します。この2点セットを 関数シグネチャ と呼びます。

typescript
function greet(引数名name: 引数の型string): 戻り値の型string { return `こんにちは、${name}さん`; }

(name : string ) name 部分が 引数名 string 引数の型 です。: string string の部分に 戻り値の型 を設定します。

typescript
function greet(name: string): string {
  return `こんにちは、${name}さん`;
}

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

function isAdult(age: number): boolean {
  return age >= 18;
}

console.log(greet("Alice"));  // → こんにちは、Aliceさん
console.log(add(3, 7));       // → 10
console.log(isAdult(20));    // → true

// 戻り値の型が合わない場合はエラー
function badReturn(): number {
  return "文字列"; // エラー: string は number に代入不可

}

Bunの場合

bash
bun run functions.ts
#こんにちは、Aliceさん
#10
#true

Node.js + npm

bash
npx tsc && node dist/functions.js
#こんにちは、Aliceさん
#10
#true

オプション引数 — ? で省略可能にする

引数名の後ろに? を付けると、その引数は省略できるようになります。省略された場合の値はundefined になるため、関数の内側で必ず存在チェックが必要です。

typescript
function buildLabel(name: string, suffix?: string): string {
  if (suffix) {
    return `${name} (${suffix})`;
  }
  return name;
}

console.log(buildLabel("Alice", "管理者")); // → Alice (管理者)
console.log(buildLabel("Bob"));            // → Bob

function createUser(
  name: string,
  age: number,
  role?: string
): string {
  const roleLabel = role ?? "一般ユーザー";
  return `${name}(${age}歳) - ${roleLabel}`;
}

console.log(createUser("Carol", 25, "編集者")); // → Carol(25歳) - 編集者
console.log(createUser("Dave",  30));          // → Dave(30歳) - 一般ユーザー

Bunの場合

bash
bun run functions.ts
#Alice (管理者)
#Bob
#Carol(25歳) - 編集者
#Dave(30歳) - 一般ユーザー

Node.js + npm

bash
npx tsc && node dist/functions.js
#Alice (管理者)
#Bob
#Carol(25歳) - 編集者
#Dave(30歳) - 一般ユーザー

✨ ?? 演算子

?? (Nullish Coalescing)は左辺がnull またはundefined のときだけ右辺を返します。|| と異なり、0 や空文字"" はそのまま通します。

デフォルト値 — 省略時の値をあらかじめ決める

引数に= 値 を書くとデフォルト値を設定できます。 デフォルト値があれば undefined チェックが不要 になり、型注釈も省略できます(値から推論されるため)。

typescript
function repeatText(text: string, count = 3): string {
  return text.repeat(count);
}

console.log(repeatText("TS"));    // → TSTSTS
console.log(repeatText("TS", 5)); // → TSTSTSTSTSTS

function createConfig(
  host: string,
  port    = 3000,
  debug   = false,
  timeout = 5000
): { host: string; port: number; debug: boolean; timeout: number } {
  return { host, port, debug, timeout };
}

console.log(createConfig("localhost"));
// → { host: "localhost", port: 3000, debug: false, timeout: 5000 }

console.log(createConfig("api.example.com", 8080, true));
// → { host: "api.example.com", port: 8080, debug: true, timeout: 5000 }

Bunの場合

Node.js + npm の場合

オプション引数とデフォルト値の違いをまとめます。

書き方 省略時の値 undefinedチェック 型推論
arg?: string undefined 必要 型注釈が必要
arg = "default" "default" 不要 値から自動推論

アロー関数と型

アロー関数(() => )は現代のTypeScript / JavaScriptで主流の書き方です。書き方のバリエーションを整理しておきましょう。

typescript
// ① 基本形
const double = (n: number): number => n * 2;

// ② 複数行の場合は {} と return が必要
const formatPrice = (price: number, currency = "JPY"): string => {
  return `${price.toLocaleString()} ${currency}`;
};

// ③ 戻り値は型推論させてもOK
const square = (n: number) => n * n;

// ④ 引数なし
const getTimestamp = (): number => Date.now();

console.log(double(7));               // → 14
console.log(formatPrice(1980));      // → 1,980 JPY
console.log(formatPrice(9800, "USD")); // → 9,800 USD
console.log(square(9));               // → 81

Bunの場合

bash
bun run functions.ts
#14
#1,980 JPY
#9,800 USD
#81

Node.js + npm の場合

bash
npx tsc && node dist/functions.js
#14
#1,980 JPY
#9,800 USD
#81

関数型 — 関数を変数・引数として渡す

関数自体を型として定義できます。コールバック関数や高階関数(関数を受け取る関数)で必須の知識です。

typescript
// 関数型は「(引数名: 型) => 戻り値の型」で書く
type Transformer = (value: number) => number;

const double: Transformer = (n) => n * 2;
const square: Transformer = (n) => n * n;

// 関数を引数として受け取る(高階関数)
function applyAll(values: number[], fn: Transformer): number[] {
  return values.map(fn);
}

console.log(applyAll([1, 2, 3, 4], double)); // → [2, 4, 6, 8]
console.log(applyAll([1, 2, 3, 4], square)); // → [1, 4, 9, 16]

// コールバックの型定義
function fetchData(
  url: string,
  onSuccess: (data: string) => void,
  onError:   (err: Error)  => void
): void {
  try {
    onSuccess(`${url} のデータ`);
  } catch (e) {
    onError(e as Error);
  }
}

fetchData(
  "https://api.example.com/users",
  (data) => console.log("成功:", data),
  (err)  => console.log("失敗:", err.message)
);

Bunの場合

bash
bun run functions.ts
#[2, 4, 6, 8]
#[1, 4, 9, 16]
#成功: https://api.example.com/users のデータ

Node.js + npm の場合

bash
npx tsc && node dist/functions.js
#[ 2, 4, 6, 8 ]
#[ 1, 4, 9, 16 ]
#成功: https://api.example.com/users のデータ

関数型定義 早見表

実務でよく出てくるパターンをまとめました。チートシートとして使ってください。

基本の関数宣言

typescript
function fn(a: string): number { return a.length; }

アロー関数

typescript
const fn = (a: string): number => a.length;

オプション引数

typescript
function fn( a: string, b?: number ): void {}

デフォルト値

typescript
function fn( a: string, b = 10 ): void {}

関数型の宣言

typescript
type Fn = (a: string) => boolean;

値を返さない関数

typescript
function log( msg: string ): void { console.log(msg); }

📌 第4回のまとめ

関数シグネチャ・オプション引数(? )・デフォルト値(= )・アロー関数・関数型をひと通り学びました。特に 関数型(type Fn = (a: T) => U はコールバックや高階関数で頻繁に使います。次回はオブジェクトの型設計を担うinterface type を深掘りします。

📝 ▶ 次のステップ

次は「 」を解説します
TypeScriptのinterfaceとは?オブジェクト型の定義と使い方を解説
TypeScript

TypeScriptのinterfaceとは?オブジェクト型の定義と使い方を解説

TypeScriptのinterfaceを使ったオブジェクト型の定義方法を解説。typeとの違いやネスト構造、実務で使える設計パターンを初心者向けに紹介します。