
## TL;DR

この記事では Next.js と TypeScript を使用して、CSS-in-JS ライブラリである Emotion の Global Styles の実装方法を解説します。Emotion の Global Styles を用いることで、アプリケーション全体に適用したいスタイルを効率的に管理することが可能です。

| 開発環境   | バージョン            |
| :--------- | :-------------------- |
| Next.js    | 13.4.3 (Pages Router) |
| TypeScript | 5.0.4                 |
| Emotion    | 11.11.0               |
| React      | 18.2.0                |

### Emotion の Global Styles とは？

Emotion は React における CSS-in-JS の解決策の一つで、コンポーネントのスタイルを JavaScript 内で管理できるライブラリです。Emotion の Global Styles 機能を使うと、アプリケーション全体に適用する CSS を定義することが可能になります。これにより、例えば全体のフォント設定や色の基本設定などを一元管理できるわけです。

リセット CSS やフォントフェイスのようなグローバル CSS を挿入したい場合は、Global コンポーネントを使います。グローバルスタイルは、スタイルが変更された時や Global コンポーネントがアンマウントされた時に削除されます。

Emotion の Global スタイルは基本的にインラインスタイルです。そのため、他の CSS ルールより優先されます。もちろん、ネストや変数を使うこともできます。

Emotion の Global スタイルは静的なものだけでなく、動的なスタイルもサポートしています。つまり、プロパティや状態に基づいてスタイルを変更することが可能です。これにより、ダークモードのような異なるテーマを切り替える機能を簡単に実装できます。

また、利点として、Emotion の Global スタイルは、ページの読み込み時に一度だけ挿入されます。これにより、パフォーマンスに悪影響を与えることなく、全体のスタイルを効率的に管理できます。

[Emotion – Global Styles](https://emotion.sh/docs/globals)に書かれているコードを見てみましょう。

```tsx
import { Global, css } from '@emotion/react'

render(
  <div>
    <Global
      styles={css`
        .some-class {
          color: hotpink !important;
        }
      `}
    />
    <Global
      styles={{
        '.some-class': {
          fontSize: 50,
          textAlign: 'center',
        },
      }}
    />
    <div className="some-class">This is hotpink now!</div>
  </div>
)
```

少し解説します。このコードは、`@emotion/react` というライブラリから `Global` と `css` というものを取り出して使います。このライブラリは、ウェブサイト全体に適用されるスタイルを作るのを助けてくれるツールです。

`render` 関数は、括弧内のすべてをウェブページに表示させます。これは作りたいウェブページのレイアウトや内容を定義する場所ですね。

`<Global />` という部分は、その中に書かれたスタイルがウェブサイト全体に適用されるようにするためのものです。

最初の `Global` コンポーネントでは、`styles` プロパティに `css` 関数を使って、`.some-class` という名前のクラスに対するスタイルを定義しています。このクラスが適用された要素は、「hotpink」色になります。「!important」は、このスタイルルールが他のスタイルルールよりも優先されることを保証します。

次の `Global` コンポーネントでは、`styles` プロパティにオブジェクト形式のスタイルを定義しています。このスタイルでは、`.some-class` クラスを持つ要素のフォントサイズが 50 になり、テキストが中央揃えになります。

最後に `<div className="some-class">This is hotpink now!</div>` の部分で、実際に `.some-class` クラスを使う要素を作ります。この `div` 要素のテキストは、「This is hotpink now!」となります。そして、先ほど定義したスタイルにより、このテキストは hotpink 色になり、フォントサイズが 50 で、中央揃えに表示されます。

まとめると、このコードは hotpink 色で大きな文字を中央に表示するウェブページを作っているんですね。

### Next.js で Emotion の Global Styles を実装

次に、Emotion の Global Styles を Next.js のプロジェクトでどのように実装するかを見ていきます。

Pages Router の例として、\_app.tsx ファイルに Global Styles を適用してみましょう。

```tsx
// pages/_app.tsx

import { Global, css } from '@emotion/react'
import type { AppProps } from 'next/app'

type Props = AppProps

const MyApp = ({ Component, pageProps }: Props) => (
  <>
    <Global
      styles={css`
        body {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }
      `}
    />
    <Component {...pageProps} />
  </>
)

export default MyApp
```

このコードでは Emotion の `Global` コンポーネントと `css` 関数を使用して、全体に適用する CSS を定義しています。今回は `body` タグに対してマージンとパディングの初期化、ボックスサイジングの設定、そしてフォントファミリーの設定を行っています。

ただ、reset.css などを適用したい場合は、視認性が悪くなるので Global Styles に書かずに、次のように import して使うほうがよいです。

```tsx
import '../styles/reset.min.css'
import '../styles/style.scss'
import { Global, css } from '@emotion/react'
```

### ダークモード切り替えを実装する

ダークモードとライトモードを切り替える方法を見てみましょう。これは、ボタンをクリックするとダークモードとライトモードを切り替えるシンプルなコンポーネントです。

```tsx
import { useState } from 'react'
import { Global, css } from '@emotion/react'

const DarkModeToggle = () => {
  const [isDarkMode, setIsDarkMode] = useState(false)

  return (
    <div>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>Toggle Dark Mode</button>
      <Global
        styles={css`
          body {
            background-color: ${isDarkMode ? 'black' : 'white'};
            color: ${isDarkMode ? 'white' : 'black'};
          }
        `}
      />
    </div>
  )
}

export default DarkModeToggle
```

解説します。まず、 `useState`を使って`isDarkMode`という名前の状態を作ります。これはブール値（true か false）を持つことができます。デフォルトでは false（つまりライトモード）に設定されています。

次にボタンを作ります。このボタンがクリックされると、`isDarkMode`の値が反転します。つまり、もし`isDarkMode`が false なら true になり、もし true なら false になります。これでダークモードとライトモードを切り替えることができます。

最後に`Global`コンポーネントを使って全体のスタイルを変更します。`body`の背景色と文字色を`isDarkMode`の値によって変更します。もし`isDarkMode`が true（つまりダークモード）なら背景色は黒で文字色は白になります。逆に`isDarkMode`が false（つまりライトモード）なら背景色は白で文字色は黒になります。

これでダークモードとライトモードを切り替えることができるようになりました。

このように、三項演算子や論理演算子を使って、状態に応じてスタイルを変更することができるので、Emotion はとても便利ですね。

### ブレークポイントを設定する

Emotion の Global Styles は基本的なスタイリングだけでなく、より高度なスタイリングにも対応しています。以下に、デバイスごとのブレークポイントを管理する例を紹介します。

```tsx
// styles/GlobalStyles.tsx

import { css, Global } from '@emotion/react'

const breakpoints = [576, 768, 992, 1200]

const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`)

export const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      }

      ${mq[0]} {
        body {
          background-color: red;
        }
      }

      ${mq[1]} {
        body {
          background-color: yellow;
        }
      }

      ${mq[2]} {
        body {
          background-color: green;
        }
      }

      ${mq[3]} {
        body {
          background-color: blue;
        }
      }
    `}
  />
)
```

以上のコードでは、デバイスの幅ごとに異なる背景色を適用する Global Styles を定義しています。

Emotion の Global Styles を活用することで、一貫性のあるスタイルをアプリケーション全体に簡単に適用することが可能になります。


この記事では Next.js と TypeScript を使用して、Emotion の Global Styles の活用方法を分かりやすく解説します。

Next.js と TypeScript で、Emotion の Global Styles を理解する


## TL;DR

この記事では、Next.js と TypeScript を用いて、Emotion Media Queries を使う方法を説明します。Media Queries を活用することで、異なるデバイスサイズに対応したレスポンシブなデザインを実現できます。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### Media Queries とは？

Media Queries は CSS の一部で、デバイスの特性や状況に基づいてスタイルを適用するための技術です。例えば、スクリーンの幅や高さ、方向（ランドスケープまたはポートレート）、解像度などに応じて異なるスタイルを適用することができます。これにより、ある範囲のビューポートサイズで特定のスタイルを適用することが可能になり、レスポンシブデザインを実現できます。

### Next.js での Media Queries の使い方

Next.js では、Emotion を使って Media Queries を使用することができます。ここではその基本的な使用方法をお見せします。

以下の例では、`useMediaQuery` というカスタムフックを作成し、ビューポートの幅が一定の値より大きいかどうかを判定しています。

```tsx
// /hooks/useMediaQuery.tsx

import { useEffect, useState } from 'react'

type UseMediaQueryType = (width: number) => boolean

const useMediaQuery: UseMediaQueryType = (width) => {
  const [targetReached, setTargetReached] = useState(false)

  const updateTarget = () => {
    setTargetReached(window.innerWidth > width)
  }

  useEffect(() => {
    updateTarget()
    window.addEventListener('resize', updateTarget)
    return () => window.removeEventListener('resize', updateTarget)
  }, [])

  return targetReached
}

export default useMediaQuery
```

次に、このフックを使って、コンポーネントのスタイルを動的に変更する方法をお見せします。

```tsx
// /components/DynamicStyledComponent.tsx

import { css } from '@emotion/react'
import useMediaQuery from '../hooks/useMediaQuery'

type Props = {
  text: string
}

const DynamicStyledComponent = ({ text }: Props) => {
  const isDesktop = useMediaQuery(768)

  return (
    <div
      css={css`
        color: ${isDesktop ? 'blue' : 'red'};
      `}
    >
      {text}
    </div>
  )
}

export default DynamicStyledComponent
```

上記のコンポーネントは、ビューポートの幅が 768px より大きい場合にはテキストの色を青に、それ以外の場合には赤に設定します。

### レスポンシブデザインの実装

さらに、Media Queries を使ってレスポンシブデザインを実装する方法について見てみましょう。以下は、スマートフォン、タブレット、デスクトップで異なるスタイルを適用するための一例です。

```tsx
// /components/ResponsiveComponent.tsx

import { css } from '@emotion/react'
import useMediaQuery from '../hooks/useMediaQuery'

type Props = {
  content: string
}

const ResponsiveComponent = ({ content }: Props) => {
  const isTablet = useMediaQuery(768)
  const isDesktop = useMediaQuery(1024)

  return (
    <div
      css={css`
        color: ${isDesktop ? 'blue' : isTablet ? 'green' : 'red'};
        font-size: ${isDesktop ? '2em' : isTablet ? '1.5em' : '1em'};
      `}
    >
      {content}
    </div>
  )
}

export default ResponsiveComponent
```

上記のコンポーネントでは、ビューポートの幅に応じてテキストの色とサイズを変更しています。

### styled を使う

`styled` は、Emotion ライブラリの一部であり、JavaScript 内部で CSS を記述し、それを React コンポーネントに適用するためのツールです。テンプレートリテラルを使用して CSS を記述し、それを指定した HTML タグや React コンポーネントに適用することで、スタイリングされた新しいコンポーネントを作成します。この結果、スタイルの再利用と一貫性が向上し、スタイルの管理が容易になります。

`@emotion/styled` モジュールを使用すると、コンポーネントスタイルをより明確に分離して管理することができます。以下に、`styled` を使用して Emotion でメディアクエリを実装する例をお見せします。

```tsx
import styled from '@emotion/styled'

const StyledParagraph = styled.p`
  font-size: 30px;

  @media (min-width: 420px) {
    font-size: 50px;
  }
`

export const ExampleComponent = () => {
  return <StyledParagraph>Some text!</StyledParagraph>
}
```

このコードでは、`styled.p` を使って新しいスタイリングされたパラグラフコンポーネント `StyledParagraph` を作成しています。これは CSS 文字列テンプレートリテラル内でメディアクエリを含むことができます。`StyledParagraph` はビューポート幅が `420px` 以上の場合に `font-size` を `50px` に変更します。

最後に、新しく作成した `StyledParagraph` コンポーネントを `ExampleComponent` 内部で使っています。これにより、ビューポート幅に応じて動的にサイズ変更するテキストを表示できます。

このように、`styled` を使うと、CSS を JavaScript コードから分離し、より一貫性のあるスタイリングを実現できます。


Next.js と TypeScript を活用して、Emotion Media Queries を実装するための独自の指南です。

Next.js と TypeScript で、Emotion Media Queries を扱う


## TL;DR

この記事では、Next.js と TypeScript を用いて、Emotion Styled Components の効果的な実装方法について解説します。具体的なソースコードを通じて、最新の React 18 に対応した実装スタイルを深掘りします。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### Emotion Styled Components とは？

Emotion Styled Components は、React で使われる CSS-in-JS の一つで、JavaScript の中に CSS を書くことができます。つまり、コンポーネントにスタイルを直接適用することができ、それぞれのコンポーネントが独立したスタイルを持つことができます。この技術は、大規模なアプリケーションにおいて特に有効で、コンポーネントの再利用性を高め、コードの可読性とメンテナンス性を向上させます。

以下に基本的な Emotion Styled Components の使用例をお見せします。

```tsx
import styled from '@emotion/styled'

// Button コンポーネントの作成
const Button = styled.button`
  color: white;
  background-color: hotpink;
  font-size: 24px;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: darkorange;
  }
`

// Container コンポーネントの作成
const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`

// App コンポーネントで Button と Container を使用
export default function App() {
  return (
    <Container>
      <Button>Click me!</Button>
    </Container>
  )
}
```

このコードは、ホットピンクの背景色と白い文字色を持つボタンを作成しています。さらに、ボタンはマウスオーバーすると色がダークオレンジに変わります。また、Container コンポーネントは要素を中央に配置するためのフレックスボックスコンテナとして機能します。このコンポーネントはビューポートの高さ全体を占め、内部の要素を中央に配置します。

次に[公式サイトのコード](https://emotion.sh/docs/styled)を解説します。

```tsx
import styled from '@emotion/styled'

const Basic = ({ className }) => <div className={className}>Some text</div>

const Fancy = styled(Basic)`
  color: hotpink;
`

render(<Fancy />)
```

このコードは、ウェブページ上のテキストに特別な色とスタイルを付けるものです。具体的には、普通のテキスト（"Some text"）をホットピンク色にするという役割を果たしています。

まず最初に、`Basic`という名前の部品（コンポーネント）を作ります。この部品はただの箱（`<div>`）で、中に"Some text"という文字が入っています。`className`という特別な情報をこの箱につけることができます。この`className`は、箱にどんなスタイル（見た目）をつけるかを決める情報です。

次に、`Fancy`という新しい部品を作ります。この部品は`Basic`部品を基にして作られ、更にスタイルを追加しています。具体的には、`color: hotpink;`というスタイルを追加して、テキストの色をホットピンクに変更しています。

最後に、`<Fancy />`を表示することで、ホットピンク色の"Some text"というテキストがウェブページ上に現れます。

### Next.js で、Emotion Styled Components を実装

Emotion Styled Components を Next.js プロジェクトに導入してみましょう。

まず、必要なパッケージをインストールします。

```bash
npm install @emotion/react @emotion/styled
```

次に、Emotion を利用した Button コンポーネントを作成します。

`components/Button.tsx`

```tsx
/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled'

type ButtonProps = {
  label: string
  primary?: boolean
}

const StyledButton = styled.button<ButtonProps>`
  padding: 10px 20px;
  font-size: 16px;
  color: ${(props) => (props.primary ? 'white' : 'black')};
  background-color: ${(props) => (props.primary ? 'hotpink' : 'white')};
  border: none;
  border-radius: 4px;
  cursor: pointer;
`

const Button = ({ label, primary }: ButtonProps) => {
  return <StyledButton primary={primary}>{label}</StyledButton>
}

export default Button
```

この Button コンポーネントは、プロパティ`primary`に基づいて異なるスタイルを適用します。`primary`が true の場合、ボタンはホットピンクの背景色と白い文字色を持ちます。

この Button コンポーネントを利用するために、以下のようにページから呼び出します。

`pages/index.tsx`

```tsx
import Button from '../components/Button'

export default function Home() {
  return (
    <div>
      <Button label="Primary Button" primary />
      <Button label="Secondary Button" />
    </div>
  )
}
```

### テーマ機能で、レイアウトを一元管理する

Emotion Styled Components をさらに活用するために、テーマ機能を利用してみましょう。これにより、全体の色調やフォントなどを一元的に管理することができます。

まず、テーマを定義します。

`theme.ts`

```tsx
const theme = {
  colors: {
    primary: 'hotpink',
    secondary: 'black',
    background: 'white',
  },
  fonts: {
    base: 'Arial, sans-serif',
  },
}

export default theme
```

そして、Emotion の`ThemeProvider`を使用して、これをアプリ全体で利用できるようにします。

`pages/_app.tsx`

```tsx
import { ThemeProvider } from '@emotion/react'
import theme from '../theme'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp
```

これにより、スタイル定義の中からテーマを参照することが可能になります。

`components/Button.tsx`

```tsx
import styled from '@emotion/styled'

type ButtonProps = {
  label: string
  primary?: boolean
}

const StyledButton = styled.button<ButtonProps>`
  padding: 10px 20px;
  font-size: 16px;
  color: ${(props) => (props.primary ? props.theme.colors.background : props.theme.colors.secondary)};
  background-color: ${(props) => (props.primary ? props.theme.colors.primary : props.theme.colors.background)};
  border: none;
  border-radius: 4px;
  cursor: pointer;
`

const Button = ({ label, primary }: ButtonProps) => {
  return <StyledButton primary={primary}>{label}</StyledButton>
}

export default Button
```

これにより、一貫したデザインを簡単に実装することができます。また、将来的なデザインの変更も容易になります。


Next.js と TypeScript で Emotion Styled Components を活用したデザインの実装方法を詳細に説明します。

Next.js と TypeScript で、Emotion Styled Components を学ぶ

### Next.js のメタデータの最適化について

Next.js 13.4 の App Router において 便利な Metadata API が使えるようになりました。これを使うことで、アプリケーションのメタデータ（例えば、HTML の head 要素内の meta タグや link タグ）を簡単に定義することができるんですね。SEO（検索エンジン最適化）が向上します。Pages Router に比べると、シンプルに記述できるようになりました。

メタデータをアプリケーションに追加する方法は主に 2 つあります。

#### 設定ベースのメタデータ

layout.js ファイルや page.js ファイルで静的なメタデータオブジェクトをエクスポートするか、動的な generateMetadata 関数をエクスポートします。

#### ファイルベースのメタデータ

ルートセグメントに静的または動的に生成された特別なファイルを追加します。

これらのオプションを使用すると、Next.js は自動的にページのための適切な `<head>` 要素を生成します。また、ImageResponse コンストラクタを使用して、動的な OG（Open Graph）イメージを作成することも可能です。

### 主要な用語のまとめ

まずは、主要な用語を表形式でまとめてみました。今回は、Metadata API を中心に解説していきます。

| 用語                  | 説明                                                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Metadata API          | Next.js が提供する API で、アプリケーションのメタデータを定義するために使用します。                                                               |
| Config-based Metadata | layout.js ファイルや page.js ファイルで静的なメタデータオブジェクトをエクスポートするか、動的な generateMetadata 関数をエクスポートする方法です。 |
| File-based Metadata   | ルートセグメントに静的または動的に生成された特別なファイルを追加する方法です。                                                                    |
| ImageResponse         | Next.js のコンストラクタで、JSX と CSS を使用して動的なイメージを生成するために使用します。OGP やアイキャッチ画像に最適。                         |
| Static Metadata       | layout.js ファイルや静的な page.js ファイルから Metadata オブジェクトをエクスポートします。                                                       |
| Dynamic Metadata      | generateMetadata 関数を使用して、動的な値が必要なメタデータを取得します。                                                                         |

### ソースコードの解説

[Building Your Application: Routing \| Next\.js](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)を参考に、ソースコードを紐解いていきます。

#### 静的メタデータ

以下に示すのは、静的なメタデータを定義するためのコード例です。layout.js ファイルまたは page.js ファイルから Metadata オブジェクトをエクスポートします。この例では、特定のページ（例えば、ホームページ）のメタデータを設定しています。非常にシンプルになりましたね。

```tsx
// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'サイトのタイトル',
  description: 'サイトの説明',
  openGraph: {
    title: 'サイトのタイトル',
    description: 'サイトの説明',
    images: ['/path-to-your-image.jpg'],
  },
}

export default function HomePage() {
  // ここにコンテンツを記述します。
}
```

このコードは、ホームページのメタデータを設定します。タイトル、説明、Open Graph タグ（タイトル、説明、イメージ）を設定しています。

こちらは、OGP の設定例。非常にシンプルに記述できます。

```tsx
export const metadata = {
  openGraph: {
    title: 'サイトのタイトル',
    description: 'サイトの説明',
    url: 'https://example.com',
    siteName: 'サイトのタイトル',
    images: [
      {
        url: 'https://example.com/og.png',
        width: 800,
        height: 600,
      },
      {
        url: 'https://example.com/og-alt.png',
        width: 1800,
        height: 1600,
        alt: '代替テキスト',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}
```

#### title.template

結構便利だなと思ったのがこちらです。これは、ページの名前の前後に、追加の言葉をつけることができる機能のことです。

`title.template`を使うと、子ルートで定義されたタイトルに接頭辞や接尾辞を追加できます。layout.js で定義された `title.template` は、同じルートの page.js で定義されたタイトルには適用されません。

```tsx
// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | タイトル',
  },
}
```

```tsx
// app/about/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About',
}

// 出力: <title>About | タイトル</title>
```

#### metadataBase

`metadataBase` は、基本 URL プレフィックスを設定する便利なオプションです。絶対 URL が必要なすべての URL ベースのメタデータフィールドは、metadataBase オプションで設定することができます。

```tsx
// layout.js / page.js
export const metadata = {
  metadataBase: new URL('https://example.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
```

出力結果はこのようになります。

```html

<link rel="canonical" href="https://example.com" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<meta property="og:image" content="https://example.com/og-image.png" />
```

参考：[Functions: generateMetadata \| Next\.js](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)

#### 動的メタデータ

次に、動的な値が必要なメタデータを取得するためのコード例です。generateMetadata 関数を使用します。

以下に、`generateMetadata`関数を使用して動的なメタデータを生成する例です。この例では、ブログ記事のページを想定しています。記事の ID をパラメータとして受け取り、その ID を使用して記事のデータをフェッチします。フェッチしたデータから、メタデータのタイトルと説明を設定します。

```tsx
import { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
}

export async function generateMetadata({ params }: Props, parent?: ResolvingMetadata): Promise<Metadata> {
  const id = params.id
  const post = await fetch(`https://your-api/posts/${id}`).then((res) => res.json())
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: post.title,
    description: post.summary,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function PostPage({ params }: Props) {}
```

このコードは、特定のブログ記事の情報を取得し、その情報を使用してメタデータを生成します。記事の情報は、記事の ID を使用してフェッチします。また、親のメタデータから Open Graph イメージを取得し、それを新たなメタデータに追加します。

Next.js と TypeScript を使って、アプリケーションのメタデータを最適化する方法を解説します。これにより、SEOとウェブの共有性が向上します。

Next.js と TypeScript で、Metadata APIを理解する


## TL;DR

このページでは、Google Fonts の実装方法について詳しく解説します。Google Fonts を Next.js と TypeScript のプロジェクトに適用し、ウェブページの見た目を一新する方法を実践的に学んでいきましょう。

以下の開発環境を基準に進めます。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### Google Fonts とは？

Google Fonts とは、Google が提供するフリーのフォントライブラリです。多種多様なフォントが用意されていいて、ウェブページで簡単に利用することができる便利なサービスです。

WordPress を扱うときに、Google Fonts を埋め込まれた方は多いのではないでしょうか？でも、読み込み速度が遅くなり、パフォーマンスが悪化するということがありましたよね。

Next.js での導入方法は非常にシンプルで、`next/font/google`を使って、フォントを関数としてインポートすることで Googel Font を扱うことができます。さらに、Next.js で使うメリットとしては、ブラウザから Google へのリクエストが送信されないことです。なので、パフォーマンスが悪化することはありません。

Google フォントは自動的に自己ホスティングされます。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。

軽量の Google Fonts の例をいくつか挙げると、以下のようなものがあります。

- Roboto
- Open Sans
- Lato
- Raleway
- Montserrat
- Nunito
- Poppins
- PT Sans
- Source Sans Pro
- Roboto Slab

これらのフォントは、すべて Google Fonts のウェブサイトから無料でダウンロードできます。Google Fonts のウェブサイトでは、フォントごとにファイルサイズを確認することができます。ファイルサイズが小さいほど、ページの読み込み速度は向上します。

### Next.js で、Google Fonts を実装

それでは具体的に、Next.js と TypeScript の環境で Google Fonts を利用する方法を見ていきましょう。

@next/font をインストールします。

```bash
npm install @next/font
```

次に、Google Fonts の Lato を App Router で使ってみます。

```tsx
// src/app/page.tsx

import { Lato } from 'next/font/google'

const Lato700 = Lato({
  weight: '700',
  preload: false,
})

export default function Home() {
  return (
    <>
      <main>
        <p>ここはFontが反映されません。</p>
        <h1 className={Lato700.className}>ここはFontが反映されます。</h1>
      </main>
    </>
  )
}
```

以上で反映されます。

### フォント関数の引数

[Components: Font \| Next\.js](https://nextjs.org/docs/pages/api-reference/components/font#display)から、フォントモジュールの詳細を確認することができます。以下に、フォントモジュールのオプションをまとめました。

| 用語               | 説明                                                                                                                           |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| src                | フォントファイルのパスを指定します。文字列またはオブジェクトの配列として指定できます。                                         |
| weight             | フォントのウェイトを指定します。文字列または配列として指定できます。                                                           |
| style              | フォントのスタイルを指定します。文字列または配列として指定できます。                                                           |
| subsets            | プリロードしたいフォントのサブセットを指定します。文字列の配列として指定します。                                               |
| axes               | 変数フォントの追加軸を指定します。文字列の配列として指定します。                                                               |
| display            | フォントの表示方法を指定します。文字列として指定し、可能な値は 'auto', 'block', 'swap', 'fallback', 'optional' です。          |
| preload            | フォントをプリロードするかどうかを指定します。ブール値として指定します。                                                       |
| fallback           | フォントがロードできない場合のフォールバックフォントを指定します。文字列の配列として指定します。                               |
| adjustFontFallback | レイアウトシフトを減らすための自動フォールバックフォントを使用するかどうかを指定します。ブール値または文字列として指定します。 |
| variable           | CSS 変数の名前を指定します。文字列として指定します。                                                                           |
| declarations       | 生成された@font-face をさらに定義するフォントフェース記述子のキー値ペアを指定します。オブジェクトの配列として指定します。      |

これらの用語は、Next.js の Font Optimization 機能を使用する際に重要なパラメーターとなります。これらを理解することで、フォントの最適化とパフォーマンス向上を実現することができます。

### フェイトの指定

可変フォントを使用できない場合は、次のようにウェイトを指定する必要があります。

[Building Your Application: Routing \| Next\.js](https://nextjs.org/docs/app/building-your-application/optimizing/fonts)に書かれているコードです。

```tsx
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}
```

#### 可変フォントとは？

可変フォント（Variable Fonts）というのは、1 つのフォントファイル内に複数のスタイルやウェイト（文字の太さ）の情報を格納できる新しいタイプのフォントテクノロジーです。従来のフォントシステムでは、異なるウェイトやスタイルのフォントそれぞれに個別のフォントファイルが必要でしたが、可変フォントでは 1 つのフォントファイルでこれらをすべてカバーします。

可変フォントの最大の利点は、その柔軟性と効率性です。デザイナーは、同じフォントファミリーの異なるウェイトやスタイルを個別にロードする代わりに、1 つの可変フォントファイルをロードするだけで済みます。これによって、ウェブサイトのパフォーマンスを向上させることができるんですね。

さらに、ウェイトや幅、スラントなどの軸を動的に調整することで、さまざまなデザイン表現が可能になります。これは、レスポンシブデザインやアニメーション、アクセシビリティの向上など、新しいデザインの可能性を広げる大きな要素となっています。

### 複数のウェイト・スタイルを指定する

配列に格納するだけです。

```ts
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})
```

### Noto Sans JP を使う場合

Google Fonts から Noto Sans JP を使用する場合、次のように指定します。

```typescript
import { Noto_Sans_JP } from 'next/font/google'

const notoSansJP = Noto_Sans_JP({
  weight: '400', // あなたが必要とするウェイトを指定します
  subsets: ['japanese'], // 必要なサブセットを指定します
  display: 'swap', // フォントの表示方法を指定します
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja" className={notoSansJP.className}>
      <body>{children}</body>
    </html>
  )
}
```

このコードは、Noto Sans JP フォントをインポートし、それを HTML 要素に適用します。`weight`はフォントのウェイトを指定し、`subsets`は使用するフォントのサブセットを指定します。`display`はフォントがどのように表示されるかを指定します。

また、Google Fonts のページで Noto Sans JP の利用可能なウェイトやスタイルを確認し、それに基づいて`weight`や`style`を指定することができます。

#### className とは？

フォントの読み取り専用 CSS です。HTML 要素にクラス名を割り当てることで、その要素に特定のスタイルを適用することができます。

Next.js の Font Optimization 機能では、特定のフォントを適用するために`className`プロパティが使用されます。具体的には、`Noto_Sans_JP`などのフォント関数を呼び出すと、その戻り値としてフォントのクラス名が含まれるオブジェクトが返されます。このクラス名は、フォントを適用したい HTML 要素の`className`属性に指定します。

例えば、以下のコードでは`notoSansJP.className`を HTML 要素の`className`属性に指定しています。

```typescript
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja" className={notoSansJP.className}>
      <body>{children}</body>
    </html>
  )
}
```

これで、HTML 要素全体に Noto Sans JP フォントが適用されます。


Next.js と TypeScript を使用して、Google Fonts の導入と活用を行う実践的な方法を解説します。

Next.js と TypeScript で、Google Fonts を活用する方法


## TL;DR

このページでは、Next.js と TypeScript の組み合わせで、モジュールの import/export の効果的な活用方法について解説します。これを通じて、コードの保守性と再利用性を向上させることが目的です。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### named export と default export の違い

まずは、エクスポートから説明します。

JavaScript の基本的な概念である import/export は、ソースファイル間で変数や関数などを共有するための機能です。これにより、コードの再利用性と保守性を向上させることが可能となります。

英語では、`named export` と `default export` と呼ばれます。日本語では、それぞれ以下のように呼ばれます。

- `named export` : 名前付きエクスポート
- `default export` : デフォルトエクスポート

ただし、技術的な文脈では、英語の表現をそのまま使うことが多いです。

具体的には、以下のようなソースコードが一般的です。

```tsx
// utils.js
export const sum = (a, b) => {
  return a + b
}

// main.js
import { sum } from './utils.js'

console.log(sum(1, 2)) // 3
```

### named export と default export の違い

表にまとめると次のようになります。

|                | named export                                                                               | default export                                                                                                                                                            |
| -------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 説明           | モジュールが複数のエクスポートを持つ場合に便利。それぞれのエクスポートは独自の名前を持つ。 | モジュールが一つの主要なエクスポートを持つ場合に便利。モジュールごとに一つだけ持つことができる。                                                                          |
| 使いどころ     | 共通のユーティリティ関数や、一緒に使われる関数群をエクスポートする場合など。               | Next.js のページコンポーネントのエクスポートなど。主要なエクスポート（一つのコンポーネントや関数など）を他のモジュールからインポートする場合に便利。                      |
| インポート方法 | `import { namedExport } from 'module'` のように波括弧 `{}` を使用してインポートする。      | `import defaultExport from 'module'` のように、名前を付けてインポートする。または `import * as name from 'module'` のように全てのエクスポートをインポートすることも可能。 |
| 名前付け       | エクスポートする際に指定した名前をそのまま使用する必要がある。                             | インポートする際に任意の名前を付けることができる。                                                                                                                        |
| 数             | モジュールごとに何個でも作成できる。                                                       | モジュールごとに一つだけ持つことができる。                                                                                                                                |

以上の表は、Next.js に限った話ではなく、一般的な JavaScript（または TypeScript）のモジュールシステムにおける named export と default export の使い所を説明しています。Next.js のページコンポーネントでは、ページを表現する一つのコンポーネントが主となるため、通常は default export を使用します。

それでは、JavaScript の `import/export` について、みかんとリンゴで例えて説明してみます。

まず、「named export（名前付きエクスポート）」とは、みかん箱から一つずつみかんを取り出すようなイメージです。箱の中にはたくさんのみかんが入っていますが、各みかんはそれぞれ名前がついていて、名前を指定して取り出すことができます。そして、一度に複数のみかんを取り出すこともできます。

JavaScript のコードで表すと以下のようになります。

```tsx
// fruits.js
export const mikan = 'mikan'
export const apple = 'apple'

// main.js
import { mikan, apple } from './fruits.js'
```

一方、「default export（デフォルトエクスポート）」は、リンゴ一つをリンゴ箱から取り出すような感じです。リンゴ箱の中にはリンゴが一つだけ入っていて、箱を開けるとそのリンゴが手に入ります。そして、一つの箱からは一つのリンゴしか取り出せません。

JavaScript のコードで表すと以下のようになります。

```tsx
// fruit.js
const apple = 'apple'
export default apple

// main.js
import apple from './fruit.js'
```

これが、named export と default export の違いです。違いを理解して、それぞれをうまく使い分けることが大切ですね。

### インポート時の名前の付け方

名前付きエクスポート（named exports）とデフォルトエクスポート（default exports）では、インポート時の名前の付け方が異なります。

名前付きエクスポートはエクスポートされた変数の名前でインポートします。そのため、インポートする側では元の名前を使用する必要があります。ただし、`as` キーワードを使うことで、インポートする際に別の名前をつけることが可能です。

```tsx
// original module
export const myFunction = () => {
  /* implementation */
}

// importing module
import { myFunction as renamedFunction } from './originalModule'

renamedFunction() // This works!
```

デフォルトエクスポートは、エクスポートする値に名前がないため、インポートする側で任意の名前をつけることができます。

```tsx
// original module
export default () => {
  /* implementation */
}

// importing module
import anyNameYouLike from './originalModule'

anyNameYouLike() // This works!
```

上記のように、名前付きエクスポートでは基本的にエクスポート時の名前を保持しますが、`as`を使ってリネーム可能です。デフォルトエクスポートではインポート時に任意の名前をつけることができます。

### インポートするときの波括弧 {} は何か？

JavaScript（および TypeScript）では、`import { something } from 'module'` の形式は名前付きエクスポート（named exports）から特定の機能や値をインポートするための記法です。ここで `something` はモジュールがエクスポートしている特定の機能や値の名前です。

波括弧 `{}` の中に名前を列挙することで、そのモジュールから複数の機能や値を一度にインポートすることが可能です。

例えば、次のようなモジュールがあるとします。

```tsx
// myModule.ts
export const function1 = () => {
  /* implementation */
}
export const function2 = () => {
  /* implementation */
}
```

これを利用する場合、以下のようにインポートします：

```tsx
// anotherModule.ts
import { function1, function2 } from './myModule'
```

次のコードの、`import { css }` の形式は、`css` という名前のエクスポートをそのモジュールからインポートすることを意味します。具体的には、Emotion（CSS-in-JS ライブラリ）の `css` 関数をインポートする際によく見かける記法です。

```tsx
import { css } from '@emotion/react'
```

では、上のインポートを、`import css from '@emotion/react'` と書き換えて `css` 関数をインポートするとどうなるでしょうか？

この形式は、`@emotion/react` モジュールから `default export` を `css` という名前でインポートするという意味になってしまいます。

しかし、`@emotion/react` モジュールは `css` 関数を `default export` として提供していません。`css` 関数は名前付きエクスポート（named export）として提供されています。したがって、`css` 関数をインポートするためには、`import { css } from '@emotion/react'` のように波括弧 `{}` を使って名前付きエクスポートをインポートする形式を使用する必要があります。

したがって、`import css from '@emotion/react';` という記述はだめで、これを実行してしまうと `css` が未定義となるためエラーが発生します。

### Next.js では default export を使う

Next.js では、主にページコンポーネントをエクスポートする際に `default export` が使われます。これにはいくつかの理由があります。

`default export` を使うと、そのファイルが主に何をエクスポートしているのかが一目でわかります。これは、特にページコンポーネントのような大きな機能単位のモジュールに対して有用です。例えば、`HomePage` コンポーネントが `HomePage.tsx` ファイルのデフォルトエクスポートになっていると、このファイルを開いたときにすぐにその目的が理解できます。

Next.js では、ファイルベースのルーティングが採用されています。つまり、`pages` ディレクトリ内の各ファイルはそれぞれが一つのルートとして扱われます。そのため、それぞれのファイルは一つの React コンポーネントをデフォルトでエクスポートする必要があります。

Next.js のプロジェクトでは、各ページのファイルで `default export` を使用することにより、コードベース全体での一貫性が保たれます。どのページファイルも同じ方法でエクスポートされているため、開発者は新しいページを作成するか、既存のページを修正する際に迷うことが少なくなります。

以上の理由から、Next.js ではページコンポーネントをエクスポートする際に `default export` が一般的に使われます。ただし、その他のヘルパー関数やコンポーネントなどをエクスポートする際には、名前付きエクスポート（named export）を使用することもあります。

### Next.js での Import/Export の活用

それでは具体的に、Next.js と TypeScript での import/export の実装例を見ていきましょう。ここでは、Button コンポーネントを作成し、それを他のコンポーネントで再利用するという一般的なシナリオを想定します。

まず、`components/Button.tsx` ファイルを作成します。

```tsx
// components/Button.tsx
import { MouseEventHandler } from 'react'

type ButtonProps = {
  onClick: MouseEventHandler<HTMLButtonElement>
  children: React.ReactNode
}

const Button = ({ onClick, children }: ButtonProps) => {
  return <button onClick={onClick}>{children}</button>
}

export default Button
```

次に、この Button コンポーネントを `pages/index.tsx` で利用します。

```tsx
// pages/index.tsx
import Button from '../components/Button'

const IndexPage = () => {
  const handleClick = () => {
    console.log('Button clicked!')
  }

  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Button onClick={handleClick}>Click Me!</Button>
    </div>
  )
}

export default IndexPage
```

このように、Next.js と TypeScript を組み合わせることで、再利用可能なコンポーネントを作成し、それを import して利用することができます。

### Emotion での実装

さらに、Emotion を用いてスタイルを適用しましょう。Emotion は CSS-in-JS のライブラリの一つで、JavaScript の中で CSS スタイルを記述することができます。

以下の例では、Button コンポーネントにスタイルを追加します。

```tsx
// components/Button.tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import { MouseEventHandler } from 'react'

type ButtonProps = {
  onClick: MouseEventHandler<HTMLButtonElement>
  children: React.ReactNode
}

const Button = ({ onClick, children }: ButtonProps) => {
  const buttonStyle = css`
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      background-color: darkblue;
    }
  `

  return (
    <button css={buttonStyle} onClick={onClick}>
      {children}
    </button>
  )
}

export default Button
```

このように、Emotion を使用してスタイルを適用すると、コードの見た目と機能を一箇所に集約することができます。

以上が、Next.js と TypeScript を使った import/export の活用方法の説明でした。これを通じて、再利用性と保守性が向上し、より効率的な開発が可能になりますよね。


Next.js と TypeScript を組み合わせて、インポートとエクスポート機能を効果的に活用する方法を解説します。

Next.js と TypeScriptで、インポートとエクスポートを学ぶ


## TL;DR

この記事では Next.js の useRouter フックの使い方を TypeScript を用いて詳細に説明します。このフックを理解し使いこなすことで、あなたのアプリケーションはよりダイナミックで使いやすくなるでしょう。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### useRouter フックとは？

`useRouter`は Next.js に組み込まれている特別なフックで、ルーティングに関連する情報にアクセスするために使われます。具体的には、現在のページの URL、クエリパラメータ、ルーティングメソッドなどにアクセスできます。

これを使って、Google Analytics を設定したり、問い合わせフォームを送信した後に特定のページにリダイレクトしたりすることができます。

`useRouter`は、ウェブサイトの中で移動するための地図のようなものです。例えば、家の中で部屋から部屋へ移動するときに、どの部屋に行くかを知るために地図を使うようなイメージです。

`useRouter`を使うと、ウェブサイトのどのページにいるのか、または別のページに移動するときにどの道を通るべきかを知ることができます。それによって、ウェブサイトの中でスムーズに移動することができます。

#### どのようなときに使うのか？

例えば、どのようなときに使うのか？というと

- フォームの送信後に特定のページにリダイレクトする
- ページの移動が終わったときに Google Analytics のページビューイベントを送信する
- ユーザーが認証されていない場合や特定の条件を満たしていない場合に、ログインページやエラーページにリダイレクトする
- 現在の URL パスを取得し、それを基にパンくずリストを生成する
- アクセス制御や認証
- URL パラメータに基づいて特定の商品や記事を表示する
- 404 ページにリダイレクトする

といった場合に使うことができます。

#### 用語解説

次に、主要な用語を表形式でまとめます。

| 用語          | 説明                                                                                         |
| ------------- | -------------------------------------------------------------------------------------------- |
| useRouter     | Next.js の機能で、ウェブサイト内での移動を管理するもの                                       |
| router object | `useRouter`が提供するオブジェクトで、現在のページの情報やページ間の移動方法を提供            |
| pathname      | 現在のページのパス（例：/about）                                                             |
| query         | URL のクエリパラメータ（例：?id=123）                                                        |
| asPath        | ブラウザに表示されるパス                                                                     |
| push          | 新しいページに移動するためのメソッド                                                         |
| replace       | 現在のページを新しいページで置き換えるためのメソッド                                         |
| back          | 前のページに戻るためのメソッド                                                               |
| reload        | 現在のページを再読み込みするためのメソッド                                                   |
| events        | ページの移動が始まったときや終わったときなど、ルーターの状態が変わったときに発生するイベント |

[Functions: useRouter \| Next\.js](https://nextjs.org/docs/pages/api-reference/functions/use-router)に書かれているコードを解説します。

```javascript
import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink
```

このコードは、Next.js の`useRouter`を使ってリンクを作る例です。`ActiveLink`という関数は、子要素（children）とリンク先の URL（href）を受け取り、そのリンクを表示します。リンクの色は、現在のページがリンク先と同じであれば赤色、そうでなければ黒色になります。

`handleClick`関数は、リンクがクリックされたときに呼び出されます。この関数は、デフォルトのリンクの動作を止めて（`e.preventDefault()`）、代わりに`router.push(href)`を使って新しいページに移動します。これにより、Next.js のページ間移動の機能を利用することができます。

最後に、この`ActiveLink`関数をデフォルトでエクスポートしています。これにより、他のファイルからこの関数をインポートして使うことができます。

次のコードは、Next.js の`useRouter`フックを使って、ボタンをクリックしたときに特定のページ（この場合は'/about'ページ）に移動する機能を持つコンポーネントを作成しています。

```tsx
import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )
}
```

`const router = useRouter();` は、`useRouter`フックを呼び出して、ルーターオブジェクトを取得しています。このルーターオブジェクトを使って、ページ間の移動を制御します。

`<button type="button" onClick={() => router.push('/about')}>` は、ボタンを定義しています。このボタンは、クリックされたときに`router.push('/about')`を実行します。`router.push('/about')`は、'/about'ページに移動する命令です。

### useRouter フックの使い方

それでは、簡単な useRouter の使用例を見てみましょう。

```tsx
// ファイル名: pages/index.tsx

import { useRouter } from 'next/router'

type Props = {
  text: string
}

const Page = ({ text }: Props) => {
  const router = useRouter()
  console.log(router.pathname) // 現在のページのパスが表示される

  return <div>{text}</div>
}

export default Page
```

ここでは、useRouter フックを用いて現在のページのパスをコンソールに出力しています。同様に、`router.query` を使用することで URL のクエリパラメータにアクセスすることができます。

### Link コンポーネントとの違い

Next.js の`Link`コンポーネントと`useRouter`フックは、どちらもページ間の移動を制御するためのツールですが、使い方と機能にはいくつか違いがあります。

`Link`コンポーネントは、主に静的なリンクを作成するために使用されます。つまり、リンク先の URL が固定で、クリックするだけで特定のページに移動するようなリンクを作るときに使います。`Link`コンポーネントは、自動的に`<a>`タグを生成し、Next.js のページ間移動の機能を利用します。

一方、`useRouter`フックは、より動的なページ間の移動を制御するために使用されます。例えば、ユーザーのアクションに基づいてリンク先を決定したり、プログラム的にページを移動したりするときに使います。`useRouter`は、ルーターオブジェクトを提供し、そのオブジェクトのメソッド（`push`、`replace`など）を使ってページ間の移動を制御します。

先程の例では、ボタンがクリックされたときに特定のページ（'/about'ページ）に移動するという動的な動作を制御しています。このような場合、`useRouter`の`push`メソッドを使ってページ間の移動を制御することができます。

したがって、`Link`コンポーネントと`useRouter`フックの主な違いは、`Link`が静的なリンクを作成するのに対し、`useRouter`が動的なページ間の移動を制御するために使用されるという点です。

### 問い合わせフォームを作成

動的な遷移の例として、Next.js で問い合わせフォームを作成し、フォームが送信された後にユーザーを'thanks'ページにリダイレクトする例を書きます。

```jsx
import { useRouter } from 'next/router'
import { useState } from 'react'

export default function ContactForm() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  })

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    // ここでフォームデータをAPIに送信する処理を行います。
    // 例: await fetch('/api/contact', { method: 'POST', body: JSON.stringify(formData) });

    // フォーム送信後に'thanks'ページにリダイレクトします。
    router.push('/thanks')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Your Name" required />
      <input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Your Email" required />
      <textarea name="message" value={formData.message} onChange={handleChange} placeholder="Your Message" required />
      <button type="submit">Submit</button>
    </form>
  )
}
```

このコードでは、React の`useState`フックを使ってフォームデータを管理し、`useRouter`フックを使ってフォーム送信後のリダイレクトを制御しています。また、各フォームフィールドの`onChange`イベントハンドラを使って、ユーザーが入力したデータを`formData`ステートに保存しています。

`handleSubmit`関数は、フォームが送信されたときに呼び出されます。この関数では、まず`e.preventDefault()`を呼び出してフォームのデフォルトの送信動作を止め、次にフォームデータを API に送信する処理を行います。最後に、`router.push('/thanks')`を呼び出してユーザーを'thanks'ページにリダイレクトします。

このコードはあくまで一例であり、実際のアプリケーションでは API への送信処理やエラーハンドリングなどを適切に実装する必要があります。


この記事では Next.js と TypeScript を用いた useRouter フックの活用方法について詳しく説明します。

Next.js と TypeScript で、useRouterを学ぶ


## TL;DR

この記事では、Next.js と TypeScript を使った useEffect の効果的な使い方について詳しく解説します。useEffect は React の生命周期に対応した Hooks の一つであり、コンポーネントがレンダリングされた後に何らかの作業を行うことが可能になります。この作業は、データのフェッチ、手動な DOM の変更、ログの記録、そして他の購読や非同期操作など、多岐にわたります。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### useEffect は「ある状況がきたら、あることをする」

`useEffect` は、React（ウェブサイトを作るためのツール）の一部で、「関数（やりたいことのまとまり）」を特定のタイミングで動かすためのものです。これが何を意味しているか説明するために、実際の日常生活から例を出してみましょう。

例えば、学校から帰った後に宿題をする、という日常的な行動がありますよね。これを `useEffect` で表現すると、学校から帰ることが「特定のタイミング」で、宿題をすることが「やりたいことのまとまり（関数）」になります。つまり、学校から帰ったら宿題をする、という動きを `useEffect` を使ってプログラムすることができるのです。

また、`useEffect` にはもう一つ特徴があります。それが「クリーンアップ」機能です。これは、例えば遊び終わった後に片付けをする、という行動を表しています。遊び終わったら片付けをする、という動きも `useEffect` を使ってプログラムすることができます。

このように、`useEffect` を使うと「**ある状況がきたら、あることをする**」というプログラムを書くことができます。そして、そのあとの片付けも一緒に書けます。つまり、`useEffect` は日常生活でいうところの「ルーティン（決まった習慣）」を作るためのツールなんですね。

だから、あなたも日常生活でのルーティンを考えてみて、それをどのように `useEffect` に置き換えるか考えてみると、もっと理解が深まると思いますよ！

### レンダリングの前後

React のコンポーネントには、レンダリングの前後に何らかの作業を行う必要がある場合があります。例えば、API からのデータの取得やタイマーの設定などです。このような作業を「サイドエフェクト」（副作用）と呼びます。サイドエフェクトは、主に以下のようなものがあります。

- 外部データのフェッチング、購読または手動な DOM の操作
- パフォーマンスのために使われる不純な読み込み（例えば、特定の要素へのスクロール位置の設定）
- 他のコンポーネントに影響を及ぼす可能性のあるもの（例えば、タイマーやログイン状態の変更）

React の useEffect Hook を使うと、これらの副作用を取り扱うことができます。

React ではコンポーネントのレンダリング後に何らかの処理を実行するために useEffect を使用します。これは React が提供するフック（Hook）の一つで、サイドエフェクト（外部 API の呼び出し、イベントリスナの登録など）を扱うことができます。useEffect の基本的な使い方は以下のような形です。

```tsx
import React, { useEffect } from 'react'

type Props = {
  message: string
}

const ShowMessage = ({ message }: Props) => {
  useEffect(() => {
    console.log(message)
  })

  return <div>{message}</div>
}
```

### 依存配列`[]`は、何をしているのか？

`useEffect`の第二引数として与えられる`[]`は、依存配列と呼ばれます。

この依存配列は`useEffect`内で使用されるプロパティや値（ステート、プロップ、コンテキスト、など）のリストで、配列内のどの値が変化した場合にも`useEffect`の内容が再実行されます。

例えば、あるステート変数`count`が`useEffect`内で使われていて、その変化に応じて何らかの処理を行いたい場合、以下のように`count`を依存配列に含めます。

```tsx
useEffect(() => {
  // 何らかの処理...
}, [count])
```

しかし、`[]`のように依存配列が空の場合、つまり何も依存しない場合、`useEffect`の内容は一度だけ実行されます。これはコンポーネントがマウント（描画）された直後の一度だけです。

そのため、特定の値の変化に対して反応する必要がなく、一度だけ何らかの処理を実行したい場合には、依存配列を空にします。これは一般的には API からデータを取得する時や、イベントリスナを設定する際などに利用されます。

```tsx
useEffect(() => {
  // APIからデータを取得するなどの処理...
}, [])
```

ただし、依存配列を正しく設定しないと予期しない挙動やパフォーマンス問題を引き起こす可能性があるため、注意が必要です。例えば、`useEffect`内で使われている値が依存配列に含まれていない場合、その値が変化しても`useEffect`が再実行されないため、期待しない結果を引き起こす可能性があります。

この配列の要素が更新された時にだけ、useEffect 内の処理が行われます。依存配列を使用した例を見てみましょう。

```tsx
import React, { useEffect } from 'react'

type Props = {
  message: string
}

const ShowMessage = ({ message }: Props) => {
  useEffect(() => {
    console.log(message)
  }, [message]) // messageが更新された時にだけconsole.logが実行されます

  return <div>{message}</div>
}
```

### useeffect で初回のみ実行するには？

`useEffect`を使用して何かの処理をコンポーネントの初回レンダリング（マウント）時にのみ実行したい場合、第二引数に空の配列`[]`を渡します。この空の配列は、依存配列として機能し、その中のどの値も変化しない（つまり、値が存在しないため）ことを示します。結果として、`useEffect`内の処理はコンポーネントのマウント時に一度だけ実行されます。

以下に具体的なコードを示します。

```tsx
useEffect(() => {
  console.log('This will only run once, after the first render')
}, []) // ← 空の依存配列
```

このコードでは、`useEffect`内の関数は初回レンダリング時にのみ実行され、その後のレンダリングでは実行されません。

注意点として、`useEffect`内で利用する値や関数がある場合、それらは依存配列に必ず含める必要があります。それらを含めずに空の依存配列を使用すると、予期せぬバグを引き起こす可能性があります。ただし、初回マウント時にのみ実行したい処理（API からのデータ取得など）が含まれている場合などは、このルールが適用されません。

### クリーンアップ

クリーンアップとは、`useEffect`の一部として、エフェクト（副作用）がもたらす変更を元に戻すために実行される関数のことを指します。

`useEffect`は、あるコード片（エフェクトと呼ばれる）を特定のタイミングで実行します。このエフェクトは、外部のデータをフェッチする、サブスクリプションを設定する、タイマーを設定するなど、通常のレンダリングフローの外部で何かを実行する可能性があります。

しかし、これらのエフェクトは一時的なものであり、後でクリーンアップ（解除または元に戻す）する必要があります。例えば、サブスクリプションを設定した場合、それを解除しないとメモリリークを引き起こす可能性があります。また、タイマーを設定した場合、そのタイマーが未解除のままになると、それが不要になった時点での問題を引き起こす可能性があります。

このようなクリーンアップ処理を`useEffect`では、エフェクト関数からクリーンアップ関数を返すことで行います。React はこの返された関数を記憶し、次のレンダリングの前か、コンポーネントがアンマウントされる時にそれを実行します。つまり、エフェクトがもたらした変更を元に戻すための手段としてクリーンアップ関数が活用されるわけです。

実際の生活に例えてみると、クリーンアップは、遊びに出かける前に部屋を片付ける、または遊んだ後におもちゃを片付けるといった行動に相当します。ある行動が終わった後で、その影響を元に戻すための行動、それがクリーンアップなのです。

クリーンアップは少し難しそうに思えるかもしれませんが、シンプルな例で説明することで理解しやすくなるでしょう。

タイマーを使った例を考えてみましょう。ボタンを押すとカウントダウンが始まり、時間が経つとメッセージが表示されるというものです。

まず、カウントダウンの状態を管理するための`useState`と、タイマーを設定およびクリーンアップするための`useEffect`を使います。

```tsx
import { useState, useEffect } from 'react'

type Props = {
  startCount: number
}

const Countdown = ({ startCount }: Props) => {
  const [count, setCount] = useState(startCount)

  useEffect(() => {
    // タイマーを設定
    const timerId = setInterval(() => {
      setCount((prevCount) => prevCount - 1)
    }, 1000)

    // クリーンアップ関数を返す
    return () => {
      // タイマーをクリア
      clearInterval(timerId)
    }
  }, []) // 空の依存配列を渡してエフェクトを一度だけ実行

  return <div>{count > 0 ? <h1>{count}</h1> : <h1>Time's up!</h1>}</div>
}

export default Countdown
```

ここで、`setInterval`はタイマーを設定して、一定の時間ごとにカウントダウンを進行させます。そして、そのタイマーは`clearInterval`で解除（クリーンアップ）することができます。これが`useEffect`のクリーンアップの基本的な例です。

このコードの中で重要な点は、`useEffect`から返される関数です。この関数は、次の`useEffect`が実行される前か、もしくはコンポーネントがアンマウントされる際に実行されます。つまり、`useEffect`が再度実行される前にタイマーがクリアされるため、古いタイマーが残り続けて問題を引き起こすことはありません。

これをおもちゃで遊ぶシチュエーションに例えると、タイマー設定（`setInterval`）は新しいおもちゃを出すこと、タイマー解除（`clearInterval`）は遊んだ後におもちゃを片付けることに相当します。これにより、新しいおもちゃを出す前に古いおもちゃが片付けられ、お部屋がいつも整った状態に保たれるのです。

### Next.js で、useEffect を実装

それでは、Next.js と TypeScript を使って useEffect をどのように実装するか見ていきましょう。

```tsx
// pages/index.tsx

import { useEffect, useState } from 'react'

type Data = {
  id: number
  title: string
}

const HomePage = () => {
  const [data, setData] = useState<Data[]>([])

  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then((response) => response.json())
      .then((data: Data[]) => setData(data))
  }, [])

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  )
}

export default HomePage
```

このコードは、useEffect と useState を使って外部 API からデータをフェッチし、そのデータを表示する Next.js のコンポーネントです。

この useEffect の中で行われている操作は次のとおりです。

1. 空の配列（[]）で useState を初期化しています。これは、フェッチしたデータを格納するためのものです。
2. useEffect を使って、コンポーネントがマウントされたときに API からデータをフェッチします。
3. フェッチしたデータを JSON 形式に変換し、そのデータを useState にセットします。
4. データをマップして表示します。

### 不要な副作用を回避する

useEffect は、第二引数として依存性配列を受け取ることができるとお話しました。この依存性配列に変数を追加すると、その変数の値が変更されたときにだけ、useEffect 内の関数が実行されます。これにより、不要な副作用を回避することができます。

useEffect からのクリーンアップは非常に重要な要素です。useEffect 内の関数が返す関数は、副作用のクリーンアップを行うために使用されます。これは、購読を解除したり、タイマーをクリアしたりするために使用されます。

以下に、useState と useEffect を用いて、簡易的なカウンターを作成する例を示します。

```tsx
// pages/counter.tsx

import { useEffect, useState } from 'react'

const CounterPage = () => {
  const [count, setCount] = useState(0)
  const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null)

  useEffect(() => {
    setTimerId(setInterval(() => setCount((prev) => prev + 1), 1000))

    return () => {
      if (timerId) {
        clearInterval(timerId)
      }
    }
  }, [timerId])

  return (
    <div>
      <p>{count}</p>
    </div>
  )
}

export default CounterPage
```

この例では、useEffect を用いてタイマーを設定し、1 秒ごとにカウンターの値を増加させています。また、コンポーネントがアンマウントされるときにタイマーをクリアするクリーンアップ関数を設定しています。これにより、不要なメモリの消費を防ぎ、パフォーマンスを向上させることができます。


useEffect は、React Hooks の一つで、サイドエフェクトを管理するためのものです。この記事では、Next.js と TypeScript を使用して、効果的な useEfffect の使用法について解説します。

Next.js と TypeScript で、useEffect を分かりやすく解説


## TL;DR

このページでは、Next.js と TypeScript の実装方法について深掘りし、React の Hooks の一つである useState の使い方を解説します。useState の基本的な概念から高度なテクニックまで、初心者から上級者まで参考になる内容を提供します。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

### useState は、状態管理

useState は React の Hooks の一つで、関数コンポーネントの中で状態を管理するためのものです。もし、状態を持たせたいコンポーネントがあれば、useState を使うと便利です。

では、まず「状態」とは何か、そしてそれがなぜ必要なのか、それを知るための一つの例を考えてみましょう。

皆さんは、スーパーマーケットで買い物をした経験があると思います。スーパーマーケットにはたくさんの商品が並んでいますよね。それぞれの商品は、あなたがそれをカートに入れるまでは「買わない状態」にあります。

でも、あなたが「おいしいそうなパン」を見つけてカートに入れたとき、そのパンは「買う状態」に変わります。また、カートに入れたパンを「やっぱりこれはいらないな」と思ってカートから出すと、そのパンは再び「買わない状態」に戻ります。

このように、あなたがスーパーマーケットで買い物をするときの「商品の買う/買わない」の状態のように、アプリケーションでも多くのものが「ある状態」から「別の状態」に変化します。そして、それらの状態を管理するのが「useState」なんです。

例えば、ユーザーがフォームに何かを入力したとき、その入力値は状態として保存され、その後ユーザーが別の値を入力すると、その新しい値で状態が更新されます。このように useState を使うと、アプリケーションの状態を簡単に管理できるんです。

ですから、React でアプリケーションを作るとき、useState はとても大切なツールなんですよ。

基本的な使用方法は以下の通りです。

```tsx
import { useState } from 'react'

type Props = {
  initialCount: number
}

const Counter = ({ initialCount }: Props) => {
  const [count, setCount] = useState(initialCount)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  )
}
```

useState は一つの引数を取り、その引数は状態の初期値です。この例では、初期値は `initialCount` として渡されます。

また、useState は 2 つの要素を持つ配列を返します。一つ目の要素は現在の状態、二つ目の要素はその状態を更新する関数（セッター）です。この例では、現在のカウント値が `count` という名前で、それを更新する関数が `setCount` という名前で取り扱われています。

### Next.js での useState の使用例

では、Next.js プロジェクトで useState をどのように使うのか具体的に見てみましょう。この例では、ユーザーの入力を状態として保持し、それを表示するシンプルなフォームを作成します。

ファイル名：`components/InputForm.tsx`

```tsx
import { useState } from 'react'

type Props = {
  placeholder: string
}

const InputForm = ({ placeholder }: Props) => {
  const [input, setInput] = useState('')

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInput(event.target.value)
  }

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} placeholder={placeholder} />
      <p>入力値: {input}</p>
    </div>
  )
}

export default InputForm
```

このコンポーネントでは、入力要素の値が状態として保持され、ユーザーが入力するたびにその状態が更新されます。具体的には、ユーザーの入力に応じて `input` の値が更新され、その更新された値が画面上に表示されます。このように useState を使うことで、ユーザーのアクションに応じて動的に変化する UI を簡単に実装することができます。

### useState を使って配列を更新する

useState を使って配列の要素を追加する方法について解説しますね。まずは、「配列」というものを理解しましょう。

「配列」とは、まるで小さな引き出しのようなもので、その中にいろいろなものを保存することができます。それぞれの引き出しには番号がついていて、その番号を使って、どの引き出しに何が入っているかを知ったり、新しいものを入れたり、入っているものを取り出したりします。

では、React の useState を使って、配列に新しいものを追加する方法を見てみましょう。まずは新しい空の配列（空の引き出しセット）を作ります。

```tsx
const [items, setItems] = useState([])
```

次に、新しいもの（例えば、文字列の 'apple'）を配列に追加します。

```tsx
setItems([...items, 'apple'])
```

このコードは、「今までの items（引き出しの中身全て）に'apple'を追加した新しい配列を作って、それを items に保存する」という意味です。配列の最後に新しい要素が追加されます。

次に、配列から特定の要素を削除する方法を見てみましょう。ここでは、2 番目の要素（番号は 0 から始まるので、実際には'apple'）を削除します。

```tsx
setItems(items.filter((item, index) => index !== 1))
```

このコードは、「items の中で、番号が 1 でないものだけを取り出して新しい配列を作り、それを items に保存する」という意味です。つまり、番号 1 の要素が削除されます。

最後に、配列の要素を変更する方法を見てみましょう。ここでは、1 番目の要素を'orange'に変更します。

```tsx
setItems(items.map((item, index) => (index === 0 ? 'orange' : item)))
```

このコードは、「items の中の各要素について、その番号が 0 なら'orange'に変更し、それ以外ならそのままにして新しい配列を作り、それを items に保存する」という意味です。

以上が、useState を使って配列の要素を追加、削除、変更する方法です。これらの知識を使って、アプリケーションを作るときに色々なことができるようになりますよ。

### 複数の useState を使用

複数の独立した状態を持つコンポーネントを作成する場合、複数の useState を使用することがあります。例えば、名前と年齢を入力するフォームを作成する場合、以下のようになります。

ファイル名：`components/MultipleInputForm.tsx`

```tsx
import { useState } from 'react'

const MultipleInputForm = () => {
  const [name, setName] = useState('')
  const [age, setAge] = useState('')

  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value)
  }

  const handleAgeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setAge(event.target.value)
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} placeholder="名前" />
      <input type="text" value={age} onChange={handleAgeChange} placeholder="年齢" />
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  )
}

export default MultipleInputForm
```

このように、各入力フィールドごとに独立した状態（`name` と `age`）とその更新関数（`setName` と `setAge`）が定義されています。

### Emotion でのスタイリング

Emotion を使用して、React コンポーネントにスタイルを適用することも可能です。次の例では、入力フォームのスタイルを変更してみましょう。

```tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import { useState } from 'react'

const inputStyle = css`
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
`

const InputFormStyled = ({ placeholder }: { placeholder: string }) => {
  const [input, setInput] = useState('')

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInput(event.target.value)
  }

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} placeholder={placeholder} css={inputStyle} />
      <p>入力値: {input}</p>
    </div>
  )
}

export default InputFormStyled
```

上記の例では、`inputStyle` を定義して、それを入力要素に適用しています。こうすることで、特定のスタイルを複数の要素に適用したり、スタイルを動的に変更することが可能になります。

### オブジェクトを受け取る

`useState`はオブジェクトも受け取ることが可能です。`useState`は初期値を受け取る関数で、その初期値はどんな形でも構いません。つまり、文字列、数値、配列、オブジェクトなど、JavaScript で作成できるあらゆる形のデータを`useState`の初期値として使うことができます。

例えば、次のように`useState`を使ってオブジェクトを管理することができます。

```tsx
type PersonProps = {
  name: string
  age: number
}

const Component = () => {
  const [person, setPerson] = useState<PersonProps>({ name: 'John', age: 20 })

  const updateName = () => {
    setPerson((prevPerson) => ({ ...prevPerson, name: 'Jane' }))
  }

  const updateAge = () => {
    setPerson((prevPerson) => ({ ...prevPerson, age: 30 }))
  }

  return (
    <div>
      <div>{person.name}</div>
      <div>{person.age}</div>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  )
}
```

この例では、`useState`は`PersonProps`型のオブジェクトを初期値としています。そして、`setPerson`関数を使ってオブジェクト内の`name`や`age`を更新しています。

オブジェクトを更新する際は、新しいオブジェクトを作成するようにします。これは React の仮想 DOM が変更を検出しやすくするためです。そのため、オブジェクト内の特定の値を更新する際には、スプレッド構文`...`を使ってオブジェクトをコピーし、その後で特定の値を更新します。

以上が、Next.js と TypeScript を使用して useState を実装する方法になります。これらの知識を活用して、様々な状況に応じた動的な UI を実装していきましょう。また、Emotion を使用すれば、スタイリングも非常に簡単に行えるので、ぜひ試してみてくださいね。


Next.js と TypeScript を用いて、React Hooks の一つである useState の使用方法を解説します。

Next.js と TypeScript で、useState を理解する


## TL;DR

この記事では、Next.js と TypeScript を使ったコールバック関数の実装と利用について詳しく解説します。基本的な実装から、テクニカルな例までカバーしています。

| 開発環境   | バージョン |
| :--------- | :--------- |
| Next.js    | 13.4.3     |
| TypeScript | 5.0.4      |
| Emotion    | 11.11.0    |
| React      | 18.2.0     |

#### 関数に関する記事

- [コールバック関数](./nextjs-callback)
- [高階関数](./nextjs-higher-order-functions)
- [再帰関数](./nextjs-recursion)

### コールバック関数は「指定したタイミングで、これをやってね」

例えば、友達の家に遊びに行くときのシチュエーションを想像してみましょう。

あなたが友達の家に遊びに行くとき、その友達に「お昼になったら、私にお知らせしてね」と頼むとします。すると、その友達は、お昼になったらあなたに「お昼だよ」と教えてくれるでしょう。

この場合、あなたが友達にお昼の時間を教えてもらうことを頼んだのと同じように、プログラムの中では、ある関数が他の関数に対して「私が終わったら、あなたがやることをしてね」という要求をすることがあります。そして、その「あなたがやることをしてね」という部分がコールバック関数です。

つまり、コールバック関数とは、「私の仕事が終わったら、あなたがこれをやってね」という指示をする関数のことを言います。これを理解すると、プログラムを順番に実行するだけでなく、ある特定の時間や状況に合わせて特定の操作を行うことができるようになります。

まさに「タイミングぴったり、あなたの指示」というわけです！

このように、コールバック関数はプログラムの「頼みごと」のようなもので、その「頼みごと」が実行されるタイミングをコントロールすることができます。これがコールバック関数の基本的な理解です。

まとめると、コールバック関数とは、他の関数に引数として渡され、その関数の実行が完了した後で実行される関数です。コールバック関数を利用することで、非同期処理や関数の後処理など、より複雑な制御フローを可能にします。

どういったときに使われるのか？というと、主に非同期プログラミングで使用されます。たとえば、データベースからデータを取得するときや、ユーザーがボタンをクリックしたときなど、特定のイベントが発生したときに実行する関数を指定します。また、配列の操作（map、filter、reduce など）のような高階関数でコールバック関数が利用されることもあります。

たとえば、次のような基本的なコールバック関数の例を考えてみましょう。

```tsx
type Callback = () => void

const executeCallback = (callback: Callback) => {
  console.log('Before callback execution')
  callback()
  console.log('After callback execution')
}

executeCallback(() => {
  console.log('This is a callback')
})
```

このコードは、TypeScript と Next.js を使ってコールバック関数を定義し、実行する例です。それぞれの部分について詳しく説明していきましょう。

```tsx
type Callback = () => void
```

この行では、`Callback`という名前の新しい型を定義しています。この型は、引数を取らずに何も返さない関数を表す`()` => `void`という型を指します。

次に、

```tsx
const executeCallback = (callback: Callback) => {
  console.log('Before callback execution')
  callback()
  console.log('After callback execution')
}
```

ここでは`executeCallback`という名前の関数を定義しています。この関数は、先ほど定義した`Callback`型の関数を引数として受け取ります。関数の内部では、まず`'Before callback execution'`というメッセージをログに出力し、次に引数として渡されたコールバック関数を実行します。コールバック関数が実行された後で、`'After callback execution'`というメッセージをログに出力します。

最後に、

```tsx
executeCallback(() => {
  console.log('This is a callback')
})
```

この行では、`executeCallback`関数を呼び出しています。この関数には、`console.log('This is a callback');`というコードを実行するコールバック関数を引数として渡しています。

このコードを実行すると、次のような出力が得られます。

```bash
Before callback execution
This is a callback
After callback execution
```

これは、`executeCallback`関数がまず`'Before callback execution'`を出力し、次に渡されたコールバック関数を実行（ここで`'This is a callback'`が出力される）、最後に`'After callback execution'`を出力するからです。

### Next.js で、コールバック関数を実装

Next.js と TypeScript を用いてコールバック関数を活用する一例として、状態を更新する際の後処理としてコールバック関数を利用する例を考えてみましょう。この例では、useState フックを用いて状態を管理し、その状態が更新された後にコールバック関数が実行されるようにします。

/src/components/CallbackExample.tsx

```tsx
import { useState } from 'react'

type UpdateStateCallback = (value: boolean) => void

const CallbackExample = () => {
  const [state, setState] = useState(false)

  const updateStateWithCallback = (callback: UpdateStateCallback) => {
    setState((prevState) => {
      const newValue = !prevState
      callback(newValue)
      return newValue
    })
  }

  return (
    <div>
      <button onClick={() => updateStateWithCallback((newValue) => console.log(`State updated to ${newValue}`))}>Update state</button>
    </div>
  )
}

export default CallbackExample
```

このプログラムは、ボタンを押すと「状態」が更新される魔法の箱のようなものです。箱の中には、「状態」を表すランプがあり、それがオン（true）かオフ（false）かを表します。始めはランプはオフになっています。

```tsx
const [state, setState] = useState(false)
```

この行は、ランプの状態（オンかオフか）と、その状態を変更するためのスイッチを作る部分です。

```tsx
const updateStateWithCallback = (callback: UpdateStateCallback) => {
  setState((prevState) => {
    const newValue = !prevState
    callback(newValue)
    return newValue
  })
}
```

この部分は、ランプの状態を更新する方法を定義しています。その方法は、まず現在のランプの状態（prevState）を見て、それがオンならオフに、オフならオンにするというものです。そして、ランプの新しい状態を伝える役目を果たす「お知らせ係」（callback）に新しい状態を教えます。

```tsx
<button onClick={() => updateStateWithCallback((newValue) => console.log(`State updated to ${newValue}`))}>Update state</button>
```

最後に、この部分はボタンです。このボタンを押すと、先ほど定義したランプの状態更新方法が実行されます。そして、「お知らせ係」（callback）にランプの新しい状態が通知され、その情報がログ（console）に書かれます。

このようにして、ボタンを押すたびにランプの状態が変わり、その変更がお知らせ係によって通知されるのです。この「お知らせ係」の部分が、プログラミングでいう「コールバック関数」に相当します。

### 高度なコールバック関数の実装

コールバック関数を利用することで、より複雑な制御フローを実装することも可能です。以下に、非同期処理の結果を扱うためのコールバック関数の高度な利用例を示します。

```tsx
type AsyncCallback = (value: string) => Promise<void>

const asyncOperation = (callback: AsyncCallback) => {
  fetch('/api/data')
    .then((response) => response.json())
    .then((data) => callback(data))
    .catch((err) => console.error(err))
}

asyncOperation(async (data) => {
  console.log(`Received data: ${data}`)
  await doSomethingWithData(data)
})
```

このコードでは、`asyncOperation` 関数が API からデータを取得し、そのデータをコールバック関数に渡します。コールバック関数は非同期関数で、取得したデータを引数として受け取り、それを元に何らかの処理を非同期に実行します。

### Emotion でのコールバック関数の活用

Emotion を用いてスタイリングを行う際にも、コールバック関数を活用することができます。たとえば、動的なスタイルを適用する際に、プロパティの値に応じて異なるスタイルを生成するための関数をコールバックとして利用することができます。

```tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

const colorStyles = (color: string) => css`
  color: ${color};
`

const StyledComponent = ({ color }: { color: string }) => <div css={colorStyles(color)}>This is a styled component</div>
```

このコードでは、`colorStyles` 関数がコールバック関数として利用されています。この関数は指定された色を受け取り、それを元に CSS を生成します。

以上、Next.js と TypeScript を使ったコールバック関数の利用について解説しました。さまざまな状況でコールバック関数を活用することで、非同期処理や後処理、動的なスタイルの生成など、より柔軟かつ高度なプログラミングが可能になりますよね。この概念を理解して活用することで、より洗練されたコードを書くことができるようになります。


この記事では、Next.js と TypeScript を用いてコールバック関数の実装と利用について、具体的なソースコードを交えて解説します。

2023-06-03

Next.js と TypeScript で、Emotion の Global Styles を理解する

2023-06-03

Next.js と TypeScript で、Emotion Media Queries を扱う

2023-06-03

Next.js と TypeScript で、Emotion Styled Components を学ぶ

2023-06-03

Next.js と TypeScript で、Metadata APIを理解する

2023-06-02

Next.js と TypeScript で、Google Fonts を活用する方法

2023-06-02

Next.js と TypeScriptで、インポートとエクスポートを学ぶ

2023-06-02

Next.js と TypeScript で、useRouterを学ぶ

2023-06-02

Next.js と TypeScript で、useEffect を分かりやすく解説

2023-06-02

Next.js と TypeScript で、useState を理解する

2023-05-31

コールバック関数「指定したタイミングで、これをやってね」