Next.js と TypeScript で、コールシグネチャを理解する

公開：2023-07-12
更新：2024-11-12
文章量：5901
Next.js TypeScript React

TL;DR

このページでは、コールシグネチャの実装方法について解説しますね。簡潔に述べると、コールシグネチャとは、TypeScript におけるtypeまたはinterface内で関数型を定義するための記法です。

開発環境	バージョン
Next.js	13.4.4
TypeScript	5.0.4
Emotion	11.11.0
React	18.2.0

コールシグネチャとは？

コールシグネチャは、TypeScript において、typeまたはinterface内で関数の型を定義する際に使用する記法の一つです。この考え方を理解することで、より厳密に関数の型を制御できるようになります。

TypeScript のコールシグネチャは、特定のオブジェクトが関数として呼び出せることを表します。これは、そのオブジェクトが特定のパラメータを取り、特定の型の結果を返す関数であることを示しています。

つまり、コールシグネチャはオブジェクトが関数として振る舞うための「契約」を定義します。それは、関数が取るべき引数と、その関数が返すべき結果の型を定義します。

例えば、以下のコードでは、Greeter 型は一つの文字列をパラメータとして取り、戻り値として文字列を返す関数として定義されています。

type Greeter = (message: string) => string

このGreeter型の変数は、文字列をパラメータとして取り、文字列を返す関数として使うことができます。

const sayHello: Greeter = (name) => `Hello, ${name}!`

これが TypeScript のコールシグネチャの基本的な概念で、オブジェクトが関数のように呼び出せることを示しています。

それでは、基本的なコールシグネチャの定義の仕方から見ていきましょう。

type MyFunctionType = (param1: number, param2: string) => boolean

このコードは、二つのパラメータ（param1 は数値型、param2 は文字列型）を受け取り、boolean 型を返す関数の型を定義しています。これがコールシグネチャの基本的な形式です。

コールシグネチャはさらに高度な型制約も可能です。たとえば、関数が特定のオブジェクトを引数として受け取る場合、そのオブジェクトの型を以下のように定義できます。

type User = {
  name: string
  age: number
}

type GreetFunction = (user: User) => string

const greet: GreetFunction = (user) => `Hello, ${user.name}!`

このように、コールシグネチャは、関数のパラメータと戻り値の型を柔軟に制御する手段を提供し、コードの予測可能性と安全性を高めます。

どのような場面でコールシグネチャを使用するか

TypeScript では、主にtypeやinterfaceでコールシグネチャを使用します。しかし、それら以外の場所で直接コールシグネチャを使用することは一般的にはありません。一部の特殊な状況を除いて、コールシグネチャは型エイリアスやインターフェースの定義内でのみ通常見られます。

それらを使用する主な場面は次の通りです。

関数型の定義: TypeScript では、関数の型を明示的に定義できます。コールシグネチャは、関数の引数と戻り値の型を指定するのに使用されます。これにより、関数が期待する引数と戻り値の型をコードに明示的に示すことができます。
インターフェースでの関数の定義: TypeScript のインターフェースでは、関数を定義するためにコールシグネチャを使用します。これにより、特定の型のオブジェクトが特定の関数を持つことを保証できます。

それら以外のコンテキストでコールシグネチャを直接使用することは稀であり、一般的には型エイリアスやインターフェース内で定義される関数の型を指定するために使用されます。

コールシグネチャを使うメリット

コールシグネチャを使うと以下のようなメリットがあります。

型の安全性: TypeScript は静的型チェックを提供します。これにより、開発時に型エラーを検出できます。コールシグネチャを使うと、関数が期待する引数と戻り値の型を明示的に宣言することができます。これにより、関数が正しく使用されていることを保証し、型エラーによるバグを予防することができます。
自己文書化: コールシグネチャはコードに含まれるドキュメンテーションの一部と見なすこともできます。関数がどのような引数を取り、何を返すかを示すことで、コードを理解しやすくすることができます。
コードの再利用: コールシグネチャを持つインターフェースを定義すると、そのインターフェースに従って複数の関数を作成することができます。これにより、コードの再利用と整合性を保つことが容易になります。
拡張性: コールシグネチャを用いたインターフェースを定義しておけば、後からそのインターフェースを実装したクラスを作成することも可能です。これにより、コードの構造を柔軟に拡張することが可能になります。

以上のような理由から、特に大規模なプロジェクトや複数人での開発においては、コールシグネチャを活用することが有益です。

オブジェクトでコールシグネチャを定義する

オブジェクトでコールシグネチャを使うと、そのオブジェクトが関数のように呼び出されることを期待する型定義を行うことができます。これは特に、関数の振る舞いを持つオブジェクトを表現する場合や、関数をプロパティとして持つオブジェクトを定義する場合に有用です。

例えば、次のようなオブジェクト型を定義することができます。

type GreetingObject = {
  (name: string): string
}

ここでは、GreetingObject というオブジェクト型を作り、それが関数の形を持つことを定義しています。つまり、このオブジェクトは、引数に文字列を一つ取り、文字列を返す関数として呼び出せるべきであることを示しています。

また、オブジェクト型の中に関数を含むプロパティを持たせることも可能です。これを行うには、各プロパティに対するコールシグネチャを提供します。

type Greeter = {
  sayHello: (name: string) => string
  sayGoodbye: (name: string) => string
}

ここでは Greeter というオブジェクト型は sayHello と sayGoodbye という 2 つのメソッドを持つことを定義しています。これらのメソッドはどちらも引数に文字列を一つ取り、文字列を返す関数であるべきです。

したがって、オブジェクトでコールシグネチャを使用すると、そのオブジェクトが関数として振る舞うか、または関数を含むプロパティを持つことを定義できます。

interface でコールシグネチャを定義する

TypeScript の interface を用いたコールシグネチャの一例を以下に示します。

interface Greeter {
  (message: string): void
}

const greet: Greeter = (message) => {
  console.log(message)
}

greet('Hello, world!') // Hello, world!

この例では、Greeter という名前のインターフェースを定義し、そのインターフェースには、一つのコールシグネチャが含まれています。そのコールシグネチャは、一つの文字列型の引数を取り、何も返さない（void）関数を示しています。

次に、この Greeter 型を greet という変数の型として使用しています。この greet 関数は、インターフェースで定義した通り、一つの文字列型の引数を取り、何も返さない関数として定義されています。

最後に greet 関数を呼び出しています。その引数には文字列 "Hello, world!" を渡しています。これにより、コンソールに "Hello, world!" というメッセージが表示されます。

このように、TypeScript のインターフェースとコールシグネチャを組み合わせることで、特定のシグネチャを持つ関数を定義することができます。

関数に型をつけるのと、コールシグネチャはどう違うのか？

関数に直接型をつける方法と、コールシグネチャを使用する方法は、一見似ていますが、その使い方と柔軟性に違いがあります。

まず、関数に直接型をつける方法について見てみましょう。

function greet(name: string): string {
  return `Hello, ${name}!`
}

ここでは、greet関数は引数nameを受け取り、文字列を返すと型定義されています。これは一つの具体的な関数の型を示しています。

一方、コールシグネチャを使用すると、特定の形状の関数すべてを表現することができます。つまり、特定のパラメータを取り、特定の型を返すような関数全般をカバーする型を作成することができます。以下に例を示します。

type GreetingFunc = (name: string) => string

ここでは、GreetingFuncはコールシグネチャを用いて定義されており、任意の関数がこの形状を持つならば、その関数はGreetingFuncの型とみなされます。

したがって、以下の 2 つの関数はどちらもGreetingFunc型として扱うことができます。

const greetEnglish: GreetingFunc = (name) => `Hello, ${name}!`
const greetJapanese: GreetingFunc = (name) => `こんにちは、${name}さん！`

このように、コールシグネチャを使用することで、特定の関数形状を持つ全ての関数を表現できる一方、関数に直接型をつける方法は一つの具体的な関数の型を示すのが特徴です。

Next.js で、コールシグネチャを実装

それでは、Next.js と TypeScript を使って、実際のコンポーネントでコールシグネチャをどのように使うかを見ていきましょう。

`/components/UserGreeting.tsx`

import React from 'react'

type User = {
  name: string
  age: number
}

type UserGreetingProps = {
  user: User
  greetFunction: (user: User) => string
}

const UserGreeting = ({ user, greetFunction }: UserGreetingProps): JSX.Element => {
  return (
    <div>
      <h2>{greetFunction(user)}</h2>
    </div>
  )
}

export default UserGreeting

このUserGreetingコンポーネントでは、greetFunctionという名前の関数をプロップとして受け取ります。この関数の型はコールシグネチャによって定義され、Userオブジェクトを受け取り、文字列を返すと指定されています。

このように、コールシグネチャを用いることで、関数をプロップとして受け取る際に、その関数がどのような引数と戻り値を持つべきかを厳密に定義できます。

次に、このUserGreetingコンポーネントを使用するページコンポーネントを作成しましょう。

`/pages/index.tsx`

import UserGreeting from '../components/UserGreeting'

const user = {
  name: 'Taro',
  age: 20,
}

const greetFunction = (user) => `Hello, ${user.name}! Welcome to our site!`

const HomePage = () => {
  return (
    <div>
      <UserGreeting user={user} greetFunction={greetFunction} />
    </div>
  )
}

export default HomePage

このHomePageコンポーネントでは、UserGreetingコンポーネントを呼び出し、その必要なプロップを渡しています。greetFunctionとして渡される関数は、Userオブジェクトを引数に取り、挨拶文を作成して返します。

このように、コールシグネチャを使うことで、関数が持つべきパラメータと戻り値の型を明確に制御でき、コードの安全性と可読性を向上させることができます。

オプショナルなパラメータ

コールシグネチャでは、関数のパラメータがオプショナル（必須でない）であることを示すこともできます。そのための記法は、パラメータ名の後に?を付けます。これは、そのパラメータが省略可能であることを示します。

type GreetWithOptionalName = (name?: string) => string

const greet: GreetWithOptionalName = (name = 'Guest') => `Hello, ${name}!`

Jamstack での制作を依頼する

MORE SKILL UP!

- 2023-06-13
- Next.js
- TypeScript
- React
Next.js と TypeScript で、useMemo を学ぶ
- 2023-05-23
- Next.js
- TypeScript
- Tech
Next.js と TypeScript で、パンくずリストを実装する方法
- 2023-08-01
- JavaScript
- TypeScript
JavaScript の IndexedDB を使ってブラウザにデータを保存しよう

Next.js と TypeScript で、コールシグネチャを理解する