TL;DR

この記事では、Next.js と TypeScript を使用した際のオブジェクト型について掘り下げて解説します。具体的なコードとともに、TypeScript のオブジェクト型の使い方を明らかにすることで、より堅牢なコードを書くための手助けをします。

オブジェクト型 とは？

オブジェクト型は、TypeScript で最も重要な要素の一つで、複数の値を一つのオブジェクトとしてまとめるための構造体です。これにより、値や関数などを構造化して管理することが可能となります。

たとえば、ユーザー情報を管理する場合を考えてみましょう。ユーザーの名前と年齢をオブジェクト型で表現することができます。

type User = {
  name: string
  age: number
}

const user: User = {
  name: 'Taro',
  age: 25,
}

このように、TypeScript のオブジェクト型を使うと、ユーザー情報を一つのオブジェクトとして管理し、型安全にコードを記述することが可能となります。

オブジェクトリテラルとオブジェクト型は別物

紛らわしいですが、オブジェクトリテラルとオブジェクト型は別物です。

オブジェクトリテラルは JavaScript（および TypeScript）における値の表現形式の一つで、キーと値の組を {}（波括弧）で囲んで定義します。例えば、以下のようになります。

const user = {
  name: 'John Doe',
  age: 30,
  email: 'john@example.com',
}

一方、オブジェクト型は TypeScript で用いられる型の一つで、オブジェクトの構造（つまり、どのようなキーとそのキーの値の型を持つか）を表します。オブジェクト型を用いて型定義を行うことで、コードの安全性を向上させることができます。

type User = {
  name: string
  age: number
  email: string
}

上記の User はオブジェクト型で、name、age、email というキーを持つオブジェクトを表しています。それぞれのキーの値の型も指定しています（name は文字列型、age は数値型、email は文字列型）。

要約すると、オブジェクトリテラルは値の表現方法であり、オブジェクト型は TypeScript の型システムの一部で、オブジェクトの構造を表現します。

Next.js で、オブジェクト型を実装

では、具体的に Next.js のプロジェクトでオブジェクト型をどのように活用するか見ていきましょう。

// components/UserCard.tsx
type UserCardProps = {
  user: {
    name: string
    age: number
    email: string
  }
}

const UserCard = ({ user }: UserCardProps) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
    </div>
  )
}

この UserCard コンポーネントでは、ユーザー情報を表すオブジェクト型を利用しています。UserCardProps という型を定義し、その中に user というオブジェクト型を指定しています。この user オブジェクトには name, age, email というプロパティが含まれています。

このように、オブジェクト型を用いることで、複数のプロパティを一つのオブジェクトとしてまとめ、型安全なコードを記述することが可能となります。

オブジェクト型を活用

さらに、TypeScript のオブジェクト型は、共通する構造を持つデータを効率よく扱うための手段を提供します。例えば、API から返ってくるユーザーデータのリストを扱う場合に役立ちます。

// pages/api/users.ts
type User = {
  id: number
  name: string
  age: number
  email: string
}

type UsersResponse = User[]

export const getUsers = async (): Promise<UsersResponse> => {
  const response = await fetch('https://api.example.com/users')
  const users: UsersResponse = await response.json()
  return users
}

このように、共通の構造を持つデータのリスト（ここではユーザーデータのリスト）を扱う際には、その構造を表現したオブジェクト型を配列として使用します。これにより、API から返ってくるデータの形式を明示的に示すことができます。

Emotion で実装

最後に、Emotion と TypeScript のオブジェクト型を用いてスタイリングを実装してみましょう。

// components/UserCard.tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

type UserCardProps = {
  user: {
    name: string
    age: number
    email: string
  }
}

const UserCard = ({ user }: UserCardProps) => {
  return (
    <div
      css={css`
        background-color: #fafafa;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      `}
    >
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
    </div>
  )
}

この UserCard コンポーネントでは、Emotion を使ってスタイリングを行っています。css prop を用いてスタイルを指定することで、React コンポーネントの見た目を柔軟に制御できます。

Emotion は CSS-in-JS ライブラリの一つで、TypeScript のオブジェクト型と相性が良く、より強力な型安全性を提供してくれるんですよ。

以上、Next.js と TypeScript におけるオブジェクト型の使い方について解説しました。TypeScript のオブジェクト型を用いることで、より堅牢で読みやすいコードを書くことができますよね。これを活用して、効率的で安全な開発を進めてみてください。