Props

Props（プロップス）を分かりやすく？

「Props」は、JavaScriptのフレームワークであるReact（もちろんNext.jsも！）において、コンポーネント間でデータを受け渡すためのメカニズムです。親コンポーネントから子コンポーネントへデータを渡すことができ、それにより各コンポーネントは必要な情報を得て機能を実行します。

ええと、Propsがなにをやってくれるのかを例え話で説明してみますね。

思い出してみてください、子供の頃の誕生日に両親からプレゼントをもらったことを。あなたが子供で、親が親コンポーネント、あなたがもらうプレゼントがPropsだと考えてみてください。親から子へとプレゼントが渡され、それによってあなたは何か新しい遊びをしたり、新しいことを学んだりできましたよね？

これと全く同じように、親コンポーネントはPropsを通じてデータ（つまりプレゼント）を子コンポーネントに渡します。子コンポーネントはそのデータを利用して何か特定のタスク（新しい遊びや学習）を実行するわけです。

「Propsって一体ナンノコッチャ？」と思っていたあなた、でも実は簡単に理解できるんですよね。Propsはただのデータのプレゼント。どうでしょうか？簡単ですよね？

結論

Props（プロップス）は、React コンポーネント間でデータを渡すために使われるオブジェクトです。親コンポーネントから子コンポーネントに順番にデータを渡すことができ、データの流れは一方通行です。

TypeScript での Props の型定義

TypeScript を使うことで、Props の型定義を行うことができます。これにより、コンポーネントが受け取る Props の構造や型が明確になり、より堅牢なコードが書けます。

type UserProps = {
  name: string
  age: number
}

const User = ({ name, age }: UserProps) => {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  )
}

上記の例では、UserProps 型を定義して User コンポーネントが受け取る Props の構造を明示しています。UserProps 型を React.FC（FunctionComponent）の型引数として渡すことで、User コンポーネントが期待される Props の型を満たすかどうかチェックされます。

Next.js での Props の取り扱い

Next.js では、サーバーサイドでデータを取得し、それを Props としてコンポーネントに渡すことができます。これにより、サーバーサイドレンダリングや静的サイト生成などの機能を実現できます。

getServerSideProps を使った Props の取得

getServerSideProps 関数を用いることで、サーバーサイドでデータを取得し、それを Props としてページコンポーネントに渡すことができます。この関数は、リクエストごとに実行されるため、動的なデータを取得するのに適しています。

import { GetServerSideProps } from 'next'

type User = {
  id: number
  name: string
}

type UserPageProps = {
  user: User
}

const UserPage = ({ user }: UserPageProps) => {
  // コンポーネントの中で `user` Props を使用する処理
  return (
    <div>
      <p>ID: {user.id}</p>
      <p>名前: {user.name}</p>
    </div>
  )
}

export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
  // 例として、外部APIからユーザーデータを取得する
  const response = await fetch(`https://api.example.com/users/${context.query.id}`)
  const user: User = await response.json()

  return {
    props: {
      user,
    },
  }
}

export default UserPage

上記の例では、getServerSideProps 関数を使って外部 API からユーザーデータを取得し、それを UserPage コンポーネントに渡しています。getServerSideProps の戻り型は GetServerSideProps<UserPageProps> として、Props の構造と型を明示しています。

getStaticProps を使った Props の取得

getStaticProps 関数を用いることで、ビルド時にデータを取得し、それを Props としてページコンポーネントに渡すことができます。この関数は、ビルド時に一度だけ実行されるため、静的なデータを取得するのに適しています。

import { GetStaticProps } from 'next'

type Post = {
  id: number
  title: string
}

type BlogProps = {
  posts: Post[]
}

const Blog = ({ posts }: BlogProps) => {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export const getStaticProps: GetStaticProps<BlogProps> = async () => {
  // 例として、ビルド時に外部APIからブログ記事を取得する
  const response = await fetch('https://api.example.com/posts')
  const posts: Post[] = await response.json()

  return {
    props: {
      posts,
    },
  }
}

export default Blog

上記の例では、getStaticProps 関数を使ってビルド時に外部 API からブログ記事を取得し、それを Blog コンポーネントに渡しています。getStaticProps の戻り型は GetStaticProps<BlogProps> として、Props の構造と型を明示しています。

まとめ

Props（プロップス）は、React コンポーネント間でデータを渡すために使われるオブジェクトです。Next.js と TypeScript を組み合わせて開発することで、型定義を通じてより堅牢なコードが書けます。また、Next.js の getServerSideProps や getStaticProps 関数を使って、サーバーサイドやビルド時にデータを取得し、それを Props としてコンポーネントに渡すことができます。