
## 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 を用いてコールバック関数の実装と利用について、具体的なソースコードを交えて解説します。

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


## TL;DR

このページでは、Next.js と TypeScript を用いて Context API の利用法について解説します。このテクニックを使うことで、アプリケーション全体でのデータの流れを効率化できます。

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

### Context API とは「公共の掲示板」のようなもの

Context API とは、React が提供するグローバルな状態管理のための仕組みです。つまり、アプリケーション全体で共有したいデータを管理することができます。例えば、ユーザー情報や設定値など、複数のコンポーネント間で使用されるデータを Context API を使って管理できます。

Context API は、実は"公共の掲示板"のようなものだと考えると分かりやすいです。

例えば、小学校の掲示板を想像してみてください。掲示板には様々な情報が掲示されていますよね。学校全体のニュースやお知らせ、それから各クラスからのメッセージなど、全ての情報が一箇所に集まっている場所が、この掲示板です。

全ての生徒たちは、この掲示板に行けば自分たちに関係する情報を取得することができます。つまり、重要な情報が一箇所に集まっているため、それを必要とする人たちが容易にアクセスできるのです。

Context API は、この掲示板のようなものと考えることができます。ある特定の情報（状態）を、アプリケーション全体でアクセス可能にすることができます。例えば、ユーザーのログイン情報や、選択したテーマの色など、複数のコンポーネントで共有したい情報を Context API で管理することができます。

コンポーネントは、必要な情報を取得するためにこの"掲示板"（Context）にアクセスし、そこから必要な情報を読み取ります。また、情報を更新することもできます。

つまり、Context API はアプリケーション全体で共有したい情報を一箇所にまとめ、それを必要とするコンポーネントが容易にアクセスできるようにする機能なのです。これにより、様々なコンポーネントで一貫した情報を共有し、同期することが可能になります。

Context API の基本的な利用法を示す、超シンプルなコード例を書いてみます。Context を作成し、それを利用してテーマカラーを管理してみましょう。まずは、Context を作成します。

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

type ThemeContextType = {
  themeColor: string
  setThemeColor: (value: string) => void
}

// 初期値を設定して、Contextを作成します。
const ThemeContext = createContext<ThemeContextType>({
  themeColor: 'light',
  setThemeColor: () => {},
})

export default ThemeContext
```

次に、この Context を使ってテーマカラーを管理するコンポーネントを作成します。

```tsx
import { useState } from 'react'
import ThemeContext from './ThemeContext'

const ThemeProvider: React.FunctionComponent = ({ children }) => {
  const [themeColor, setThemeColor] = useState('light')

  return <ThemeContext.Provider value={{ themeColor, setThemeColor }}>{children}</ThemeContext.Provider>
}

export default ThemeProvider
```

最後に、この ThemeProvider コンポーネントを利用して、アプリケーション全体でテーマカラーを管理します。

```tsx
import ThemeProvider from './ThemeProvider'
import ChildComponent from './ChildComponent'

const App = () => {
  return (
    <ThemeProvider>
      <ChildComponent />
    </ThemeProvider>
  )
}

export default App
```

この例では、`ThemeProvider`コンポーネントが全体のテーマカラーを管理し、それを Context を通して子コンポーネントに提供しています。そして、`ChildComponent`コンポーネントはその情報を利用して何かを表示することができます。

このように Context API を利用することで、アプリケーション全体で共有する情報を簡単に管理することができます。

### Next.js で、Context API を実装

具体的には、以下のようなソースコードで Context API を使用することが可能です。まず、/contexts/AppContext.tsx ファイルを作成し、AppContext という Context を定義します。

```tsx
// /contexts/AppContext.tsx
import { createContext, useContext } from 'react'

type AppContextType = {
  username: string
  setUsername: (value: string) => void
}

const AppContext = createContext<AppContextType | undefined>(undefined)

export const useAppContext = () => {
  const context = useContext(AppContext)
  if (context === undefined) {
    throw new Error('useAppContext must be used within a AppProvider')
  }
  return context
}

export const AppProvider: React.Provider<AppContextType> = AppContext.Provider
```

次に、/\_app.tsx で AppProvider を使用します。

```tsx
// /_app.tsx
import { AppProps } from 'next/app'
import { useState } from 'react'
import { AppProvider } from '../contexts/AppContext'

function MyApp({ Component, pageProps }: AppProps) {
  const [username, setUsername] = useState('Guest')

  return (
    <AppProvider value={{ username, setUsername }}>
      <Component {...pageProps} />
    </AppProvider>
  )
}

export default MyApp
```

そして、必要なコンポーネントで `useAppContext` フックを使って Context の値にアクセスできます。

```tsx
// /pages/index.tsx
import { useAppContext } from '../contexts/AppContext'

const HomePage = () => {
  const { username, setUsername } = useAppContext()

  return (
    <div>
      <p>{username}</p>
      <button onClick={() => setUsername('User1')}>Change username</button>
    </div>
  )
}

export default HomePage
```

この例では、AppContext という Context を作成し、username と setUsername を保持しています。これらの値はアプリケーション全体でアクセス可能となります。

### Context API の詳細な使い方

Context API は比較的シンプルな方法でグローバルな状態管理を行うことができますが、大規模なアプリケーションではより詳細な実装が必要になることもあります。例えば、コンテキストの値を操作するための特定のアクションを定義したり、複数のコンテキストを一つにまとめたりすることがあります。

### Emotion で実装

Emotion を用いて、スタイルをコンテキストとして管理することも可能です。例えば、テーマ情報（色、フォントサイズ等）をコンテキストとして管理し、アプリケーション全体でその情報を共有することができます。そのためのソースコードは以下の通りです。

```tsx
// /contexts/ThemeContext.tsx
import { createContext, useContext } from 'react'
import { css } from '@emotion/react'

type ThemeType = {
  primaryColor: string
  secondaryColor: string
  spacing: (size: number) => string
}

const ThemeContext = createContext<ThemeType | undefined>(undefined)

export const useThemeContext = () => {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw new Error('useThemeContext must be used within a ThemeProvider')
  }
  return context
}

export const ThemeProvider: React.Provider<ThemeType> = ThemeContext.Provider
```

そして、テーマ情報を使用したいコンポーネントでは以下のように書けます。

```tsx
// /components/ThemedButton.tsx
import { useThemeContext } from '../contexts/ThemeContext'

const ThemedButton = () => {
  const { primaryColor, spacing } = useThemeContext()

  return (
    <button
      css={css`
        background-color: ${primaryColor};
        padding: ${spacing(2)};
      `}
    >
      Click me
    </button>
  )
}

export default ThemedButton
```

このようにして、Emotion と Context API を組み合わせることで、アプリケーション全体でのスタイル管理をより一貫性を持って行うことが可能になります。ユーザーが選んだテーマに応じてスタイルを動的に変更するなど、さまざまな応用が考えられますよね。

以上が Next.js と TypeScript を使って Context API を活用する方法の一例です。今回の例では、アプリケーションのユーザー名とテーマをグローバルに管理する方法を紹介しましたが、実際にはもっと様々な情報を管理することが可能です。Context API の特徴的な利点は、そのシンプルさと直感的な使い方にあります。これにより、大きな学習コストを必要とせずに、アプリケーションの状態管理を行うことができるんですよね。


この記事では、Next.js と TypeScript を使用した Context API の適用方法について詳しく解説します。

React: Context API とは「公共の掲示板」のようなもの


## TL;DR

このページでは、高階関数の実装方法について解説します。高階関数とは、他の関数を引数に取ったり、結果として関数を返したりする関数のことを指します。JavaScript や TypeScript、そして React を含む多くのフロントエンドのフレームワークでは、高階関数は大変重要な概念であり、実装を行う際に非常に強力なツールとなります。

| 開発環境   | バージョン |
| :--------- | :--------- |
| 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)

### 高階関数は、関数のマネージャー

まず、高階関数についての基本的な概念を理解しましょう。高階関数（Higher-Order Functions）は、他の関数を引数として受け取ったり、結果として関数を返したりする関数のことを指します。

では、なぜこれが便利なのでしょうか？それは、高階関数を使うとコードをより柔軟に、かつ短く書けるからです。ものごとをよりシンプルにし、コードの読みやすさを改善します。

想像してみてください。あなたがお誕生日パーティーを開くことにしました。パーティーで楽しむためのゲームを考えることになりました。

1. 三角飛び： これは 1 人で遊べるゲームです。
2. 鬼ごっこ： これは複数人で遊べるゲームです。

そして、これらのゲームがどのように遊ばれるかを説明するルールを作ることにしました。

ここで、「三角飛び」と「鬼ごっこ」をそれぞれ「関数」と考えてみてください。それぞれが独自のルール（つまり、動作）を持っています。それぞれ一人で遊ぶか、他の人と一緒に遊ぶかなど、そのルールはそれぞれのゲームによって異なります。

さて、ここで「高階関数」が登場します。「高階関数」はまるでパーティーの司会者のようなものです。司会者は、どのゲームをいつするかを決め、そのルールを説明します。すなわち、司会者は「三角飛び」や「鬼ごっこ」といった「関数」を引数として受け取り、それらを実行するための新しい「関数」を作り出します。

このように、「高階関数」は、他の関数をうまく制御して、プログラム全体の流れをより柔軟に制御するための「司会者」のようなものなんですよ。

どういったときに使われるのかというと、関数型プログラミングでよく使われます。高階関数を使うと、関数を他の関数に渡すことができます。これにより、コードの重複を避け、抽象化を可能にし、コードの可読性とモジュール性を高めることができます。例えば JavaScript の Array メソッド（map、filter、reduce など）や、Python の map や filter 関数などが高階関数です。

高階関数の概念をソースコードで説明すると、ちょっと複雑になりがちですが、JavaScript を使ったシンプルな例を出してみましょう。

以下に、高階関数を使った非常に基本的な例を示します。

```javascript
// これが普通の関数です。与えられた数値を2倍にして返します。
function doubleNumber(num) {
  return num * 2
}

// これが高階関数です。他の関数（action）を引数として受け取り、
// その関数を使って何かを行います。
// この例では、action関数を使ってnumberを処理し、
// その結果を表示（console.log）します。
function performAndPrint(action, number) {
  const result = action(number)
  console.log(result)
}

// 高階関数を使ってみましょう。
// doubleNumber関数をactionとしてperformAndPrintに渡します。
performAndPrint(doubleNumber, 5) // これは "10" を表示します。
```

この例では、`performAndPrint`関数が高階関数となっています。なぜなら、それは他の関数（この場合は `doubleNumber`）を引数として受け取り、その関数を使って何かを行うからです。

`doubleNumber` 関数は数字を 2 倍にするお手伝いさんだと考えてください。`performAndPrint` 関数は、お手伝いさんと数字を受け取り、お手伝いさんに仕事をさせてその結果を表示するマネージャーだと思ってください。だから、`performAndPrint` は高階関数と呼ばれ、それを使っていろいろなことができるんですよ。

まとめると、高階関数とは、関数を引数に取ったり、関数を結果として返す関数のことを指します。この特性により、関数の振る舞いを動的に変更したり、汎用的なコードを記述することが可能になります。これは、JavaScript や TypeScript のような関数型言語における重要な概念であり、プログラムの読みやすさや再利用性を大幅に向上させることができます。

### Next.js で、高階関数を実装

それでは具体的な高階関数の実装を Next.js と TypeScript で行ってみましょう。

ファイル名: `components/MyComponent.tsx`

```tsx
type WithLogProps = {
  message: string
}

const withLog = (Component: (props: WithLogProps) => JSX.Element) => {
  return (props: WithLogProps) => {
    console.log(props.message)
    return <Component {...props} />
  }
}

type MyComponentProps = WithLogProps

const MyComponent = ({ message }: MyComponentProps) => {
  return <div>{message}</div>
}

export default withLog(MyComponent)
```

ここで定義されている`withLog`は高階関数です。引数として React のコンポーネントを受け取り、そのコンポーネントをラップする新しいコンポーネントを返します。ラップされたコンポーネントは、レンダリング時に指定のメッセージをコンソールに出力し、その後で元のコンポーネントをレンダリングします。こうすることで、すべてのコンポーネントに対して共通のロギング機能を追加することができます。

### 高階関数を使った実装

高階関数は非常に柔軟性があり、様々な用途に使用することができます。たとえば、複数のコンポーネントに対して共通のスタイリングやビヘイビアを追加するためのラッパーコンポーネントを生成する、といったことも可能です。

```tsx
type EnhancedComponentProps = {
  color: string
}

const enhanceComponent = (Component: (props: EnhancedComponentProps) => JSX.Element) => {
  return (props: EnhancedComponentProps) => {
    const newStyle = { color: props.color }
    return <Component {...props} style={newStyle} />
  }
}

type MyEnhancedComponentProps = EnhancedComponentProps

const MyEnhancedComponent = ({ color }: MyEnhancedComponentProps) => {
  return <div style={{ color }}>{color}</div>
}

export default enhanceComponent(MyEnhancedComponent)
```

この例では、`enhanceComponent`という高階関数を用いて、引数で渡されたコンポーネントに対して共通のスタイルを追加しています。このように高階関数を用いることで、様々なコンポーネントに対して共通の機能を追加することが容易になります。

### Emotion で実装

最後に、Emotion と高階関数を組み合わせた実装例を見てみましょう。

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

type WithEmotionProps = {
  emotion: string
}

const withEmotion = (Component: (props: WithEmotionProps) => JSX.Element) => {
  return ({ emotion }: WithEmotionProps) => {
    const styles = css`
      color: ${emotion === 'happy' ? 'yellow' : 'blue'};
    `
    return (
      <div css={styles}>
        <Component emotion={emotion} />
      </div>
    )
  }
}

type EmotionComponentProps = WithEmotionProps

const EmotionComponent = ({ emotion }: EmotionComponentProps) => {
  return <div>{emotion}</div>
}

export default withEmotion(EmotionComponent)
```

この例では、Emotion の`css`関数と高階関数を用いて、コンポーネントのスタイルを動的に変更する機能を実装しています。これにより、色を示す`emotion`プロパティに応じて、コンポーネントの色が変化します。

以上、Next.js と TypeScript を用いた高階関数の実装例を通じて、その実用性と柔軟性についてご紹介しました。高階関数はコードの再利用性を高め、コンポーネントの振る舞いを柔軟に制御する強力なツールとなります。これを活用することで、より効率的なフロントエンド開発を実現することができるでしょう。


高階関数という強力なツールをNext.jsとTypeScriptで実装し、その実用性と柔軟性を深掘りします。本記事では具体的なソースコードと共にその活用方法を解説します。

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

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

2023-05-31

React: Context API とは「公共の掲示板」のようなもの

2023-05-31

Next.js と TypeScriptで学ぶ : 高階関数は関数のマネージャー