TL;DR

今回は、Next.js と TypeScript を組み合わせた際の基本的な型定義を解説します。型をうまく定義することで、コードのバグを早期に防止し、後々の保守性を高めることが可能です。

型注釈（Type Annotation）

TypeScript の「Type Annotation」は日本語では「型注釈」または「型アノテーション」と呼ばれます。これは、変数や関数の返り値などに期待されるデータの型を明示的に指定するための構文です。これにより、コードが正しく型に従っているかを静的にチェックでき、エラーやバグの予防に役立ちます。

TypeScript では、変数や引数名の後ろに :型 のように型注釈と呼ばれる型情報を付与し、変数や引数に入れる値を制限することができます。

const name: string = 'John'
const age: number = 20

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

add(1, 2) // 3

上のコードは、TypeScript で書かれたコードの例です。

name と age の変数はそれぞれ string と number の型を持つことを宣言しています。add 関数では、2 つの引数 a と b を number 型として受け取り、その合計を number 型で返すことを示しています。

そして add(1, 2) の呼び出しは、引数として number 型の値を渡しているので問題ありません。

なお、もし add 関数に数値以外の型（例えば文字列）を渡そうとすると、TypeScript はその型の不一致を検出しエラーを表示します。これにより、型の誤りを早期に発見することができます。

以上のように、TypeScript の型システムは、コードの安全性と可読性を向上させ、デバッグを助ける強力なツールとなります。

Next.js で型定義する

それでは、型定義を活用するための簡単な Next.js プロジェクトを準備しましょう。ここでは、ユーザーの名前と年齢を表示するコンポーネントを作成します。

ファイル名：components/UserProfile.tsx

type UserProfileProps = {
  name: string
  age: number
}

const UserProfile = ({ name, age }: UserProfileProps) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  )
}

export default UserProfile

呼び出し方は、以下のようになります。

ファイル名：app/page.tsx

import UserProfile from '../components/UserProfile'

const HomePage = () => {
  return (
    <div>
      <UserProfile name="Taro" age={25} />
    </div>
  )
}

export default HomePage

コード解説

さて、それでは上記のコードについて詳しく解説していきます。まず始めに UserProfile コンポーネントから見ていきましょう。

type UserProfileProps = {
  name: string
  age: number
}

この部分で UserProfileProps という型を定義しています。この型は、UserProfile コンポーネントの props に対する型定義で、name は文字列、age は数値となることを示しています。

const UserProfile = ({ name, age }: UserProfileProps) => {
  ...
}

そして、この UserProfile コンポーネントでは、props として受け取る name と age の型を UserProfileProps として定義しています。これにより、props が期待する型と異なる値が渡されると、コード編集時

に TypeScript がエラーを表示し、バグの早期発見を支援してくれるんですね。

呼び出し側のコードも見てみましょう。

<UserProfile name="Taro" age={25} />

ここでは UserProfile コンポーネントに対して、文字列型の name と数値型の age を渡しています。もし age に文字列を渡そうとすると、TypeScript が型の不一致を検出し、エラーを表示します。

このように、TypeScript の型定義を活用することで、コードの安全性と可読性を向上させることができるというわけなんです。

メリット

• 型の不一致を早期に発見でき、バグの発生を抑えられる
• コードが自己説明的になり、他の開発者が理解しやすくなる
• 定義した型を再利用でき、コードの保守性を向上させる

学習リソース

次は、学習に役立つリンクです。

以上が Next.js と TypeScript を用いた基本的な型の定義についての解説でした。型をしっかりと定義することで、より安全で保守性の高いコードを書くことができるんですよね。