
## 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で実装し、その実用性と柔軟性を深掘りします。本記事では具体的なソースコードと共にその活用方法を解説します。

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


## 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)

### 再帰関数とは？

再帰関数とは、関数の中から自分自身を呼び出す関数のことを言います。プログラミングにおける再帰は、繰り返し処理を行う一つの方法で、特定の条件が満たされるまで関数が自身を呼び出し続けます。

なんだか難しそうな単語が出てきたかもしれませんが、実はシンプルなアイデアに基づいています。

#### 再帰関数は「ドミノ倒し」

再帰関数を理解するためには、「ドミノ倒し」をイメージしてみてください。ドミノ倒しは、一つのドミノを倒すとその次のドミノも倒れて、その次のドミノも倒れて...というように、一つ一つのドミノが次のドミノを倒していく遊びですよね。

これを再帰関数に置き換えて考えてみると、一つの関数（ドミノ）が次の同じ関数（ドミノ）を呼び出し（倒し）、その関数がまた次の同じ関数を呼び出し（倒し）...というように、一つ一つの関数が次の関数を呼び出していくイメージです。

まさに、「一つ倒すと、全てが動き出す」というわけです！

ただし、ドミノ倒しのように無限に続いてしまうと問題があるので、ある条件が満たされたら（全てのドミノが倒れたら）再帰は終了し、関数の呼び出しはストップします。この「止まる条件」をプログラミングでは「ベースケース」や「終了条件」などと呼びます。

例えば、フィボナッチ数列を生成する再帰関数は、数列の次の数を求めるために自分自身を二回呼び出します（二つ前の数と一つ前の数を足し合わせるため）。しかし、「1 以下の数が来たらそのまま返す」という終了条件を設けることで、無限に再帰することなく適切な値を計算することができます。

それぞれの関数（ドミノ）は自分が何番目かは気にせず、ただ自分の「仕事」をするだけなんです。これが再帰関数の面白いところで、大きな問題を小さな問題に分けて解く力があります。

このように、再帰関数は「自分自身を呼び出す関数」であり、その仕組みはドミノ倒しみたいな感じなんだということを覚えておいてくださいね。

どういったときに使われるのかというと、再帰関数は問題をより小さな問題に分解し、それを解決するために使用されます。これは一般的に、問題が自己類似的な構造を持つ場合に特に有効です。例えば、フラクタルの描画、ファイルシステムの探索、あるいはデータ構造（特に木構造）の探索などに再帰がよく使用されます。また、数学的な問題（フィボナッチ数列の計算など）でもよく用いられます。

以下はシンプルな再帰関数の一例です。

```tsx
const countDown = (num: number): void => {
  console.log(num)
  if (num > 0) {
    countDown(num - 1)
  }
}

console.log(countDown(10))
// 10
// 9
// ...
// 0
// undefined
```

### Next.js で、再帰関数を活用

Next.js と TypeScript を使用して、再帰関数を活用する一つの例として、コンポーネントの再帰的なレンダリングを見ていきましょう。

ファイル名: /components/RecursiveList.tsx

```tsx
import React from 'react'

type ListData = {
  id: number
  name: string
  children?: ListData[]
}

type RecursiveListProps = {
  listData: ListData[]
}

const RecursiveList: React.VFC<RecursiveListProps> = ({ listData }) => {
  return (
    <ul>
      {listData.map((data) => (
        <li key={data.id}>
          {data.name}
          {data.children && <RecursiveList listData={data.children} />}
        </li>
      ))}
    </ul>
  )
}

export default RecursiveList
```

このコンポーネントは、再帰的なデータ構造（この場合は木構造）を表現できます。例えば、Web サイトのナビゲーションメニューのような階層的なデータを表示するときに非常に役立ちますよね。

### フィボナッチ数列を実装

再帰関数をさらに深く理解するために、おなじみのフィボナッチ数列を計算する再帰関数を作成しましょう。

```tsx
const fibonacci = (n: number): number => {
  if (n <= 1) {
    return n
  } else {
    return fibonacci(n - 1) + fibonacci(n - 2)
  }
}

console.log(fibonacci(10)) // 55
```

ここで、`fibonacci` 関数は、n が 1 以下の場合には n を返し、それ以外の場合には `fibonacci(n - 1) + fibonacci(n - 2)` を返します。これはフィボナッチ数列の定義そのものですね。

次に、ディレクトリ構造を表すデータを扱うための再帰関数の例をご紹介します。

この例では、各ディレクトリがサブディレクトリのリストを持つようなツリー構造のデータを扱います。再帰関数はこのようなツリー構造のデータを処理するのに非常に適しています。型注釈を Props として指定しています。

ファイル名: /components/RecursiveList.tsx

```tsx
type ListData = {
  id: number
  name: string
  children?: ListData[]
}

type RecursiveListProps = {
  listData: ListData[]
}

const RecursiveList = ({ listData }: RecursiveListProps) => {
  return (
    <ul>
      {listData.map((item) => (
        <li key={item.id}>
          {item.name}
          {item.children && <RecursiveList listData={item.children} />}
        </li>
      ))}
    </ul>
  )
}

export default RecursiveList
```

この `RecursiveList` コンポーネントは、`listData` プロパティとして受け取った配列を基にリストをレンダリングします。各要素がさらに子要素を持つ場合（`children` プロパティが存在する場合）、それらの子要素に対しても同様に `RecursiveList` コンポーネントを使用してリストを作成します。このように自分自身を呼び出すことで、ツリー構造のデータを自然に表現することができます。

### Emotion で実装

Emotion を使用して、再帰的にレンダリングされるコンポーネントにスタイルを適用してみましょう。

ファイル名: /components/StyledRecursiveList.tsx

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

type ListData = {
  id: number
  name: string
  children?: ListData[]
}

type StyledRecursiveListProps = {
  listData: ListData[]
}

const StyledRecursiveList = ({ listData }: StyledRecursiveListProps) => {
  return (
    <div css={container}>
      <RecursiveList listData={listData} />
    </div>
  )
}

export default StyledRecursiveList

const container = css`
  font-family: Arial, sans-serif;
  ul {
    padding-left: 20px;
    border-left: 1px solid #ccc;
    li {
      margin-bottom: 10px;
    }
  }
`
```

ここで、Emotion を使って再帰的にレンダリングされるリストのコンテナにスタイルを追加しています。また、`ul` と `li` タグにもスタイルを適用して、リストが階層化されていることを視覚的に強調しています。

再帰関数は単純なアイデアに基づいていますが、そのパワーは絶大です。この記事を通じて、Next.js と TypeScript で再帰関数を活用する一歩を踏み出せたら嬉しいです。


再帰関数はパワフルなツールであり、Next.js と TypeScript でその活用方法を見ていきます。コンポーネントの再帰的なレンダリングも取り扱います。

Next.js と TypeScriptで学ぶ : 再帰関数は「ドミノ倒し」


## TL;DR

このページでは、Next.js と TypeScript を使用した環境変数のスマートな管理について解説します。環境変数はアプリケーションの設定を管理する上で非常に重要な要素であり、Next.js と TypeScript が提供する機能を最大限に活用することで、簡潔で可読性の高いコードを作成することができます。

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

### 環境変数とは？

環境変数は、システムやアプリケーションの動作を制御するための変数で、データベースの接続情報や外部サービスの API キーなど、アプリケーションの設定や機密情報を保管するために用いられます。これらの情報は、ソースコードから分離して管理されるべきであり、それを可能にするのが環境変数です。

### NEXT_PUBLIC の役割

Next.js では環境変数の名前が `NEXT_PUBLIC_` で始まる場合、その環境変数はブラウザの実行コンテキストでも利用できるようになります。これは、Next.js がサーバーサイドとクライアントサイドの両方で動作するフレームワークであるための特別な仕様です。

`NEXT_PUBLIC_` プレフィックスが付いていない環境変数は、デフォルトではサーバーサイドでのみ利用でき、クライアントサイドの JavaScript からはアクセスできません。これは、秘密情報（例えば API キー）などをブラウザから直接参照できないようにするためのセキュリティ対策です。

例えば、`NEXT_PUBLIC_` をつけずに、Google Analytics や、ドメイン名を環境変数に設定しても、ブラウザでは反映されません。これは、ブラウザから直接参照できないようにするための仕様だからです。

公開情報や設定情報など、クライアントサイドでも利用したい環境変数が存在する場合には、その環境変数の名前を `NEXT_PUBLIC_` で始めることで、クライアントサイドでも利用できるようになります。

### 環境変数の設定方法

Google Analytics やベース URL などの公開可能な情報は、Next.js の環境変数として設定できます。`NEXT_PUBLIC_`という接頭語をつけた環境変数は、ブラウザサイドのコードでアクセス可能となります。

まず、`.env.local` ファイルをプロジェクトのルートディレクトリに作成します。そして、以下のように Google Analytics のトラッキング ID とベース URL を設定します。

```bash
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=YourGoogleAnalyticsID
NEXT_PUBLIC_BASE_URL=https://your-website.com
```

これにより、Next.js アプリケーションでは以下のように環境変数を参照することが可能になります。

```tsx
// Google Analytics IDの参照
const gaId = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

// ベースURLの参照
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL

// サンプルコンポーネント
const SampleComponent = () => {
  return (
    <div>
      <h1>Welcome to {baseUrl}</h1>
      <p>We use Google Analytics. Our ID is {gaId}</p>
    </div>
  )
}
```

Google Analytics のトラッキング ID を実際に使用するには、別途 Google Analytics のセットアップが必要となります。それについては Google の公式ドキュメンテーションを参照してください。

同様に、ベース URL は通常、API エンドポイントの参照やリダイレクトの設定などに使用されます。

なお、環境変数はセンシティブな情報を含む可能性がありますので、`.env.local` ファイルは絶対にソースコード管理システム（例えば Git）にはコミットしないように注意してください。`.gitignore`ファイルに `.env.local` を追加して、誤ってコミットされるのを防ぎましょう。

以上の手順により、Google Analytics の ID やベース URL などの環境固有の情報を安全に管理することが可能となります。

### Vercel での環境変数の設定方法

Next.js の開発チームが作った Vercel は、Next.js のアプリケーションをデプロイするための優れたプラットフォームです。Vercel では、プロジェクトの設定画面から環境変数を設定することができます。

具体的な手順は以下の通りです。

1. Vercel のダッシュボードにログインし、対象のプロジェクトを選択します。
2. プロジェクトの設定画面に移動します。
3. 左側のメニューから "Environment Variables" を選択します。
4. "Add" ボタンをクリックします。
5. "Name" フィールドに環境変数の名前（`NEXT_PUBLIC_` を先頭につける）を入力し、"Value" フィールドにその値を入力します。
6. "Add" ボタンをクリックして環境変数を追加します。

以上の手順で環境変数が Vercel 上に設定され、デプロイ時に利用することが可能となります。また、Vercel はローカルの `.env.local` ファイルと同期する機能も提供しており、これを利用することでローカルとデプロイ先の環境変数を一致させることが容易になります。

`NEXT_PUBLIC_` を用いる主なケースとしては、クライアントサイドで必要となる設定情報や、公開情報を管理する場面が挙げられます。Google Analytics のトラッキング ID やベース URL のような情報以外にも、以下のような情報を扱う場合に `NEXT_PUBLIC_` を用いると便利です。

#### API のエンドポイント

サードパーティの API エンドポイントや、自身のバックエンドのエンドポイントなど、クライアントサイドから直接参照する必要がある URL を管理する際に便利です。

#### プラットフォームキー

フロントエンドから直接参照する必要がある、Stripe や Mapbox などの公開可能な API キーを管理する際に用います。ただし、秘密情報を含むキーについてはサーバーサイドで管理する必要があります。

#### アプリケーションの動作を制御するフラグ

例えば、デバッグモードやメンテナンスモードの ON/OFF など、アプリケーションの動作を制御するためのフラグを管理する場面でも用います。

#### テーマの色

ユーザーが動的に色を変更できる UI を持つアプリケーションの場合、それらの色情報を環境変数として管理することもあります。

以上のように、クライアントサイドから参照が必要であり、かつセキュリティ上公開しても問題ない情報を `NEXT_PUBLIC_` を用いて管理することが一般的です。ただし、API キーや他の秘密情報については、公開によるセキュリティリスクを理解した上で適切に管理する必要があります。

#### Vercel で環境変数を設定するメリット

Vercel に環境変数を設定するメリットについては以下の通りです。

- セキュリティの強化：Vercel は、環境変数を安全に保存・管理するための機能を提供します。これにより、機密情報が漏えいするリスクを軽減することができます。

- 一元化された管理：Vercel では、全ての環境（開発、プレビュー、本番）の環境変数を一箇所で管理することができます。これにより、設定の追跡と管理が容易になります。

- 環境ごとの設定：Vercel では、開発、プレビュー、本番の各環境で異なる環境変数を設定することが可能です。これにより、各環境で異なる設定を行うことができます。

このように、Vercel で環境変数を設定することにより、セキュリティの強化、一元化された管理、そして環境ごとの設定といったメリットが得られます。また、設定変更をコードベースではなく Vercel の設定画面で行うことで、誤って機密情報を公開リポジトリにプッシュするリスクも軽減できます。

### .env.development と、.env.production の違い

Next.js は `.env` ファイルを用いて、アプリケーションの異なる環境（開発環境、本番環境など）で異なる設定を行うことができます。具体的には、以下のようなフィールドが存在します。

#### `.env.development`

ローカルの開発環境でのみ使用される環境変数を設定します。開発環境特有の設定や、機密でないダミーの値（API キーや DB 接続情報など）を設定するのに用います。

#### `.env.production`

本番環境でのみ使用される環境変数を設定します。実際に公開されるアプリケーションで使用する値（API キーや DB 接続情報など）を設定します。

### process.env

Next.js では、環境変数を管理するための `process.env` オブジェクトが提供されています。これを利用して環境変数を参照することができます。次に示すのは、その一例です。

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

const HomePage = () => {
  return <div>{process.env.NEXT_PUBLIC_GREETING}</div>
}

export default HomePage
```

ここでは、`process.env.NEXT_PUBLIC_GREETING` を参照しています。`NEXT_PUBLIC_GREETING` は環境変数の一つで、これを `.env.local` ファイルなどに設定しておくことで、Next.js のアプリケーションから参照することができます。

### 環境変数の型定義

上述したように、Next.js で環境変数を利用するときは `process.env` を通じて参照しますが、TypeScript を用いている場合には環境変数の型を定義することで、型安全にコードを書くことが可能です。

```tsx
// ファイル名: types/env.d.ts

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NEXT_PUBLIC_GREETING: string
    }
  }
}

export {}
```

ここでは、`NEXT_PUBLIC_GREETING` 環境変数の型を `string` として定義しています。これにより、環境変数を参照する際に TypeScript の型チェックを受けることができます。

### Emotion での利用

Emotion は CSS-in-JS の一つで、JavaScript から CSS を扱うことが可能です。これを用いて、環境変数に基づいたスタイルの変更を行うことができます。

```tsx
// ファイル名: components/StyledGreeting.tsx
import { css } from '@emotion/react'

type Props = {
  greeting: string
}

const StyledGreeting = ({ greeting }: Props) => {
  const style = css`
    color: ${process.env.NEXT_PUBLIC_COLOR};
  `

  return <div css={style}>{greeting}</div>
}

export default StyledGreeting
```

ここでは、`process.env.NEXT_PUBLIC_COLOR` 環境変数を用いて文字色を設定しています。環境変数を用いてスタイルを動的に変更することで、異なる環境で異なるスタイルを適用することが可能となります。

### テスト環境変数

テスト環境での環境変数は、アプリケーションのテスト（単体テスト、統合テスト、エンドツーエンドテストなど）を行う際に必要となる設定情報を管理します。これらの環境変数は、テスト環境専用の設定情報や、機密でないダミーデータを設定するのに使用されます。

具体的には、`test.env` ファイルを作成し、その中にテスト環境でのみ必要な環境変数を設定することが一般的です。また、Jest のようなテストランナーを使用する場合、テスト実行時にこの `test.env` ファイルをロードする設定を行います。

```bash
// test.env
NEXT_PUBLIC_API_URL=http://localhost:4000
DB_USER=test-user
DB_PASSWORD=test-password
```

テスト環境変数の主な用途は以下の通りです：

- ダミーデータ：テスト環境変数を用いて、テストケースで使用するダミーデータを設定します。これにより、テストが一貫性を持ち、再現性を確保することができます。

- テスト環境の設定：テスト DB への接続情報や、テスト専用の API エンドポイントなど、テスト環境専用の設定を管理します。

- フィーチャーフラグ：テスト中に特定の機能を有効化/無効化するためのフラグを設定することもあります。

このように、テスト環境変数を適切に設定することで、テストの安定性と再現性を向上させ、アプリケーションの品質を確保することが可能になります。ただし、テスト環境変数も他の環境変数と同様に、適切に管理し、機密情報が漏えいしないように注意する必要があります。


Next.js と TypeScript を用いて、環境変数の管理をスマートに管理する方法を詳細に解説します。

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で学ぶ : 高階関数は関数のマネージャー

2023-05-31

Next.js と TypeScriptで学ぶ : 再帰関数は「ドミノ倒し」

2023-05-30

Next.js と TypeScript で、環境変数をスマートに管理する