
## TL;DR

この記事では、いつも使っているような、`string` や `number` などとは少し違った、特殊な存在である `void` 型についてお話しします。なんの役に立つのか、いつ使うのか、どう使うのか、すべてを明らかにしますね。

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

### void 型とは？

「void」は英語で「空虚」「何もない」という意味があります。そう、プログラミングの世界でも void 型は「何も返さない」という意味を持っています。他のデータ型が値を返すのに対して、void 型は値を返さないんですね。「何も返さないというのがなんで必要？」と思うかもしれませんが、それぞれの役割があるんです。

たとえば、ある関数が特定の操作を行うだけで、その結果を他の部分で使わない場合、その関数の返り値は void 型になります。それが以下のような TypeScript のコードです。

```tsx
function logMessage(message: string): void {
  console.log(message)
}
```

この関数 `logMessage` は、メッセージを受け取り、それをコンソールに出力します。ですが、この関数は何も返しません。そのため、この関数の返り値の型は `void` となるんですね。

### void 型の使いどころ

`void`型は、一体どのようなシーンで使うのでしょうか？

`void`型は一般的に、関数が値を返す必要がない場合に使用されます。具体的な例をいくつか挙げてみましょう。

#### クリックイベントで特定の状態を更新する場合

例えば、ボタンがクリックされたときにカウンターの値を増加させるような関数は、何も返す必要がありません。その操作自体が状態を直接変更するからです。

```tsx
const handleClick = (): void => {
  // 何かしらの状態を更新する
}
```

#### ログ出力のための関数

ログをコンソールに表示するだけの関数も、何も返す必要がありません。

```tsx
const logMessage = (message: string): void => {
  console.log(message)
}
```

#### ユーザーへのアラート表示

ユーザーへメッセージを表示するだけの関数も、何も返す必要がありません。

```tsx
const showAlert = (alertText: string): void => {
  alert(alertText)
}
```

このように、関数が何らかの副作用（状態の変更、コンソールへの出力、アラートの表示など）を引き起こすだけで、特定の値を返す必要がない場合、その関数の戻り値の型として `void` を使用します。

イベントハンドラ以外でも、`void`型はよく使用されます。主に関数が値を返す必要がない場合、または関数が明示的に何も返さないことを示したい場合に使用します。具体的な使用例として以下のシーンが挙げられます。

#### 副作用を伴う関数

この種の関数は何らかのアクションを実行しますが、値を返す必要はありません。例えば、データベースへのデータ保存や、ファイルへの書き込み、ログの出力などが該当します。

```tsx
const saveToDatabase = (data: Data): void => {
  // データベースへ data を保存する処理
}
```

#### 状態の変更

React の `useState` フックのセッター関数（`setState`）は典型的な例です。この関数は新しい状態を受け取り、状態を更新しますが、何も返しません。

```tsx
const [count, setCount] = React.useState(0)
// setCount の型は (value: number) => void
```

#### コールバック関数

ある関数を別の関数に渡して、特定のタイミングで呼び出すための関数です。これらの関数は結果を直接返すのではなく、何らかの副作用（状態の変更、ログ出力など）を引き起こすことが多いです。

```tsx
array.forEach((element) => {
  console.log(element) // 値を返す必要はありません
})
```

このような場面で`void`型は活躍します。

### Next.js で、void 型を実装

それでは、Next.js と TypeScript を使って void 型を使った具体的なソースコードを見てみましょう。以下に示すコードは `/pages/index.tsx` として配置します。

```tsx
import React from 'react'

type Props = {
  message: string
}

const IndexPage = ({ message }: Props): JSX.Element => {
  const showMessage = (msg: string): void => {
    alert(msg)
  }

  React.useEffect(() => {
    showMessage(message)
  }, [message])

  return <div>Welcome to Next.js!</div>
}

export default IndexPage
```

この `IndexPage` コンポーネントは、`message` プロパティを受け取り、`React.useEffect` フック内で `showMessage` 関数を呼び出します。`showMessage` 関数は受け取ったメッセージを alert ダイアログで表示しますが、何も返さないため、その戻り値の型は `void` になります。

### void 型を活用

さて、ここでさらにテクニカルな部分に踏み込んでみましょう。一見すると「何も返さない void 型、それって本当に役に立つの？」と思うかもしれませんが、次の例を見てみてください。

```tsx
import React from 'react'

type Props = {
  onClick: () => void
}

const ButtonComponent = ({ onClick }: Props): JSX.Element => {
  return <button onClick={onClick}>Click me!</button>
}

export default ButtonComponent
```

この `ButtonComponent` コンポーネントは、`onClick` 関数をプロパティとして受け取り、それをボタンのクリックイベントハンドラとして使用します。ここで、`onClick` の型が `() => void` になっていることに注目です。つまり、何も返さない関数を期待しているわけです。void 型はこのように、ユーザーがクリックしたときなど、特定のアクションに対する反応を表現するのにとても役立つんです。

`onClick: () => void` の部分を詳しく解説していきましょう。

まず、全体を見てみましょう。`onClick: () => void` は TypeScript の関数型の表現方法で、`onClick`という名前のプロパティが関数を期待していることを示します。

- `onClick`はプロパティ名です。これは React の onClick イベントハンドラに対応しています。
- `()` は、関数が受け取る引数を示します。ここは空っぽなので、この関数は引数を受け取らないことを意味します。
- `=>` は、関数の型を定義するための特殊な記号です。これによって「この関数は何も受け取らず、何も返さない」という意味になります。
- `void` は関数が何も返さないことを示します。つまり、この関数は実行すると何かしらの処理を行いますが、結果を返しません。

具体的には、この型定義に合う実際の関数は以下のような形になります。

```tsx
const handleClick = () => {
  console.log('Button was clicked!')
}
```

この関数は引数を受け取らず、何も返さないので、`onClick: () => void` という型定義にマッチします。つまり、この関数を`onClick`の値として使用できます。

それに対し、次のような関数は引数を受け取りますので、`onClick: () => void` という型定義にはマッチしません。

```tsx
const handleClick = (event: React.MouseEvent) => {
  console.log('Button was clicked!', event)
}
```

同様に、次のような関数は値を返すため、`onClick: () => void` という型定義にはマッチしません。

```tsx
const handleClick = () => {
  console.log('Button was clicked!')
  return true
}
```

つまり、`onClick: () => void` という型は、「何も引数を受け取らず、何も返さない関数」を期待しているということを表しています。

### void 型を使わないシーン

クリックイベントや他の関数が何かしらの値を返す必要がある場合は、その値の型を戻り値の型として指定します。`void` 型は、「何も返さない」ことを示すために使用されます。

例えば、あるボタンがクリックされたときに、そのボタンの ID を返すとします。その場合、その関数の型は次のようになります。

```tsx
type Props = {
  onClick: () => string // ボタンの ID を返す
}
```

この例では、`onClick` 関数は何も返さないという `void` 型ではなく、文字列（`string`）を返すと宣言しています。したがって、この関数は必ず文字列を返さなければならないという制約がつけられています。このように、関数が何らかの値を返す場合は、その値の型を戻り値の型として指定します。

### Emotion で実装

Emotion を用いた例を見てみましょう。ここでは、スタイリングされたボタンコンポーネントにクリックイベントハンドラを割り当てる例を見てみましょう。

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

type Props = {
  onClick: () => void
}

const ButtonComponent = ({ onClick }: Props): JSX.Element => {
  const buttonStyle = css`
    padding: 10px;
    background-color: #0070f3;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  `

  return (
    <button css={buttonStyle} onClick={onClick}>
      Click me!
    </button>
  )
}

export default ButtonComponent
```

この `ButtonComponent` コンポーネントは Emotion を使ってスタイリングされ、`onClick` プロパティとして何も返さない関数（void 型の関数）を受け取ります。これにより、クリックしたときの動作を親コンポーネントから自由に定義できるようになります。

これらの例から、TypeScript の `void` 型がどのように役立つかを理解してもらえたでしょうか。`void` 型は、「何も返さない」という単純な概念でありながら、実際の開発では多くの場面で使用され、JavaScript の柔軟性を保ちつつ、TypeScript の厳密な型チェックの恩恵を受けることができます。


Next.js と TypeScript を使って、void 型の理解とその活用方法について説明します。プログラミングの中で見逃されがちな void 型の秘密を解き明かします。

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


## TL;DR

このページでは、REST API の作り方について解説しますね。Next.js と TypeScript を駆使して REST API を作成し、それがどう動いて、何をやってくれるのか一緒に学びましょう。

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

### REST API とは？

あなたが小さな冒険者で、何か情報を探していると想像してみてください。例えば、あなたが図書館に本を探しに行ったとしましょう。そこで図書館員さんに「この本がどこにあるか教えてください」と尋ねたら、図書館員さんが教えてくれるかと思います。

これが REST API の一番基本的な考え方です。あなたが図書館員さん（REST API）に問い合わせ（リクエスト）をし、図書館員さんが答え（レスポンス）を返してくれます。

同じ考え方で、REST API はウェブ上で情報を取得したり、情報を変更したり、新しい情報を作成したり、情報を削除したりするための一連のルールや手段です。これを用いることで、ウェブページやアプリケーションは情報を交換できます。以下は、REST API を用いて情報を取得する基本的なコード例です。

```tsx
// ファイル名: pages/api/books.ts
import type { NextApiRequest, NextApiResponse } from 'next'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'Next.js', author: 'Vercel' })
}

export default handler
```

このコードは、本の名前と著者を取得する簡単な API を作成します。あなたが図書館員さんに尋ねるように、他のコードがこの API にリクエストを送り、そしてこの API はレスポンスとして本の名前と著者を返します。

#### 関数名・引数名は任意

`handler` という名前は単に一例なので、任意の名前に変更することができます。Next.js は関数名ではなく、エクスポートされた関数自体を API エンドポイントのハンドラーとして利用します。

以下に、ハンドラー関数の名前を `helloHandler` に変更した例を示します。

```tsx
// src/pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function helloHandler(req: NextApiRequest, res: NextApiResponse<Data>) {
  res.status(200).json({ name: 'John Doe' })
}
```

ちなみに、res や req という名前も固定ではありません。これらは慣習的によく使われる名前ですが、開発者が任意の名前に変更することができます。

このように関数名を変更しても、API エンドポイントの動作に影響はありません。ただし、ソースコードを他人と共有する場合や、自分自身が後日見返す際に、関数の目的が一目でわかるように、意味のある名前をつけることが推奨されます。

#### EC サイトを作ることができる

実は、この REST API を使ったデータ取得の仕組みは、EC サイトやブログ、ニュースサイトなど、インターネット上の様々なサイトで活用されています。

例えば、EC サイトでは商品のリストや詳細、ユーザーの購入履歴などのデータをサーバーから取得して表示します。これらのデータは、REST API を通じて取得され、ユーザーがブラウザ上で見られる形に加工されます。

また、ブログやニュースサイトでは記事の一覧や詳細などのデータをサーバーから取得します。これらの情報もまた、REST API を使って取得され、読みやすい形に整形されます。

このように、REST API はウェブ上の様々な場所で使われ、データの取得や送信に大いに役立っています。ですから、REST API の仕組みを理解することは、ウェブ開発スキルを高めるために重要なステップとなります。

さて今度は、デフォルトで作成される Next.js の API ファイルを見てみましょう。

```tsx
// src/pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  res.status(200).json({ name: 'John Doe' })
}
```

このコードは、Next.js を用いた API エンドポイントの基本的な構造を示しています。ここでは、`handler`という名前の関数が API のハンドラーとしてエクスポートされています。このハンドラーは、`req`（リクエスト）と`res`（レスポンス）の 2 つの引数を取ります。これらは Express.js などの他の Node.js ベースのフレームワークと同じように機能します。

Next.js により提供される`NextApiRequest`と`NextApiResponse`型を使用して、リクエストとレスポンスオブジェクトの型を定義します。この型付けにより、TypeScript はリクエストとレスポンスオブジェクトが持つべきプロパティとメソッドについての情報を持つことができ、これにより開発者は安全にこれらのオブジェクトを利用することができます。

`type Data = { name: string }`はレスポンスの形式を定義しています。この例では、レスポンスの形式は`name`というキーを持つオブジェクトで、その値は文字列でなければなりません。

`handler`関数の中では、まずレスポンスの HTTP ステータスコードを 200（成功）に設定します。そして、JSON 形式でレスポンスのボディを送信します。このボディは`{ name: 'John Doe' }`という形式のオブジェクトで、これは上で定義した`Data`型と一致します。

#### API の取得・出力方法

作成した API は、Next.js のサーバーサイドルーティングにより、そのファイルパスに基づく URL からアクセスできます。この例では、ファイルが`pages/api/hello.ts`に保存されていると仮定すると、この API は`http://localhost:3000/api/hello`（またはあなたのデプロイした URL に応じて）から GET リクエストを行うことでアクセスできます。リクエストを行うと、レスポンスとして`{ name: 'John Doe' }`の形式の JSON が返されます。

`hello.ts`が存在する API エンドポイントは、Next.js アプリケーション内の任意の場所から `fetch` や `axios` などの HTTP リクエストライブラリを使って取得することができます。API エンドポイントは、ファイルが配置されているパスに基づいて URL が決定されます。この例では、`hello.ts`が`src/pages/api`ディレクトリ内に存在しているため、その URL は `/api/hello` となります。

例えば、`src/pages/index.tsx` ファイル内でこの API エンドポイントを呼び出すことができます。以下にそのサンプルコードを記載します。

```tsx
// src/pages/index.tsx
import { useEffect, useState } from 'react'

type Data = {
  name: string
}

const IndexPage = () => {
  const [name, setName] = useState<string>('')

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/hello')
      const data: Data = await res.json()
      setName(data.name)
    }
    fetchData()
  }, [])

  return <div>Hello, {name}!</div>
}

export default IndexPage
```

上記のサンプルコードでは、React の`useEffect`フックと`useState`フックを利用しています。`useState`フックを使って `name` の状態を管理し、`useEffect`フック内で非同期的に API を呼び出し、取得したデータで `name` の状態を更新しています。

`fetch('/api/hello')` で API を呼び出し、`res.json()`で取得したデータを JSON 形式にパースし、そのデータを `name` の状態にセットしています。最終的には、`<div>Hello, {name}!</div>` により取得した名前がブラウザ上に表示されます。

#### エンドポイントの作成方法

エンドポイントとは、ネットワークに接続されたデバイスやアプリケーションが通信を行うための「目的地」のようなものです。具体的には、API でデータをやり取りするための URL の一部を指します。

たとえば、「`https://xxxx.com/api/users`」があったとき、「/api/users」部分がエンドポイントとなります。このエンドポイントに対して特定の HTTP メソッド（GET, POST など）を使ってリクエストを送ることで、データの取得や更新ができます。

Next.js では、`pages/api/` ディレクトリ内に作成されたファイルは自動的に API エンドポイントとして扱われます。そのため、各エンドポイントはそのファイルのパスに応じた URL でアクセスできます。

そして、フロントエンドからその API エンドポイントにアクセスする際には、 `fetch` 関数や `axios` のような HTTP クライアントライブラリを使って HTTP リクエストを行います。

たとえば、先ほどの `pages/api/hello.ts` をフロントエンドから呼び出すには、次のようなコードを書きます。

```tsx
// src/pages/index.tsx
import { useEffect } from 'react'

const HomePage = () => {
  useEffect(() => {
    fetch('/api/hello')
      .then((response) => response.json())
      .then((data) => console.log(data))
  }, [])

  return <h1>Welcome to HomePage</h1>
}

export default HomePage
```

上記のコードは、HomePage コンポーネントがレンダリングされるときに `/api/hello` への HTTP リクエストを非同期で行い、その結果をコンソールに出力します。これにより、サーバーサイドの API とフロントエンドのコンポーネント間でデータをやり取りすることができます。

そして、`.then` というメソッドを使って、非同期処理の結果を取得しています。

#### .then とは？

`.then` は、JavaScript で非同期処理を扱う際によく見る表現で、プロミス（Promise）という仕組みに関連しています。

プロミスは、「未来のある時点で結果を返す」ことを約束する仕組みで、例えばネットワークを通じて情報を取得するときに使われます。ネットワークを通じてデータを取得する際は、リクエストを送信してからデータが返ってくるまでに時間がかかるため、その間に他の処理を行うことができます。そのような処理を「非同期処理」といいます。

`.then` を使うと、プロミスが「完了したら、次に何をすべきか」を記述することができます。つまり、`.then` の後ろに書かれた関数は、プロミスが完了した後に実行されます。

例えば、先ほどのコードを見てみましょう。

```tsx
fetch('/api/hello')
  .then((response) => response.json())
  .then((data) => console.log(data))
```

このコードでは、まず `fetch('/api/hello')` でデータを取得するプロミスが作られます。そして、そのプロミスが完了したら（つまり、データが取得できたら）、`.then(response => response.json())` の部分が実行されます。この部分では、取得したデータ（`response`）を JSON 形式に変換しています。

その次に、再び `.then(data => console.log(data))` の部分が実行されます。ここでは、先ほど JSON 形式に変換したデータ（`data`）をコンソールに出力しています。

要するに、`.then` を使うと、「この処理が終わったら、次にこれをやってね」という指示を書くことができるのです。

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

では、より具体的な例として、Next.js を使って本の情報を管理する API を作ってみましょう。

```tsx
// ファイル名: pages/api/books.ts
import type { NextApiRequest, NextApiResponse } from 'next'

type Book = {
  id: string
  name: string
  author: string
}

let books: Book[] = [
  { id: '1', name: 'Harry Potter', author: 'J.K. Rowling' },
  { id: '2', name: 'The Lord of the Rings', author: 'J.R.R. Tolkien' },
]

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'GET') {
    res.status(200).json(books)
  }
}

export default handler
```

このコードは、本のリストを返す API を作成します。まず `Book` という型を定義し、それに基づいて `books` という本の配列を作ります。そして、リクエストのメソッドが GET の場合には、その `books` 配列をレスポンスとして返します。これにより、他のコードがこの API に GET リクエストを送ると、本のリストが返されます。

### REST API を実装

では、上記のコードをさらに拡張して、新たな本を追加する機能を実装してみましょう。そのためには、POST リクエストを処理する必要があります。

```tsx
// ファイル名: pages/api/books.ts
import type { NextApiRequest, NextApiResponse } from 'next'

type Book = {
  id: string
  name: string
  author: string
}

let books: Book[] = [
  { id: '1', name: 'Harry Potter', author: 'J.K. Rowling' },
  { id: '2', name: 'The Lord of the Rings', author: 'J.R.R. Tolkien' },
]

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'GET') {
    res.status(200).json(books)
  } else if (req.method === 'POST') {
    const newBook: Book = req.body
    books.push(newBook)
    res.status(200).json(newBook)
  }
}

export default handler
```

このコードでは、POST リクエストを受け取った際に、リクエストの本文に含まれる新たな本のデータを `books` 配列に追加します。その後、新たに追加した本のデータをレスポンスとして返します。これにより、他のコードがこの API に POST リクエストを送ると、新たな本が追加され、その新たな本のデータが返されます。

### Emotion で実装

Emotion は CSS-in-JS の一つで、コンポーネントのスタイルを JavaScript の中に書くことができます。ここでは、上記の REST API を用いて、本のリストを表示するコンポーネントのスタイルを Emotion を使って書いてみましょう。

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

type Book = {
  id: string
  name: string
  author: string
}

type Props = {
  books: Book[]
}

const BookList = ({ books }: Props) => {
  return (
    <ul css={styles.list}>
      {books.map((book) => (
        <li key={book.id} css={styles.item}>
          <h2 css={styles.title}>{book.name}</h2>
          <p css={styles.author}>{book.author}</p>
        </li>
      ))}
    </ul>
  )
}

const styles = {
  list: css`
    list-style: none;
    padding: 0;
  `,
  item: css`
    margin-bottom: 1rem;
  `,
  title: css`
    font-size: 1.2rem;
    font-weight: bold;
  `,
  author: css`
    font-size: 1rem;
    color: #888;
  `,
}

export default BookList
```

ここでは、本のリストを受け取り、それをリスト形式で表示する `BookList` コンポーネントを作成します。そして、そのコンポーネントのスタイルを Emotion を使って定義します。リスト、リストの各アイテム、本の名前、そして著者の名前それぞれにスタイルを適用しています。このように、Emotion を使うと、コンポーネントのスタイルを直接 JavaScript の中に書くことができ、スタイルとコンポーネントのロジックを密接に結びつけることができます。


Next.js と TypeScript を活用して、楽しく学べる REST API の作り方を解説します。

Next.js と TypeScript で、REST API を学ぶ


## TL;DR

このページでは、React の `useContext` フックを Next.js と TypeScript の世界でどうやって使うのかを一緒に見ていきましょう。

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

### useContext とは？

`useContext` とは、React が提供しているフックの一つで、あるコンポーネントから別のコンポーネントへデータを渡すことができます。例えば、あるページでユーザーが入力した情報を、別のページで表示したい場合に使うことができます。

皆さんは遊んだことがあるドミノ倒しを覚えていますか？一つのドミノが倒れると、それが次のドミノを倒し、その次のドミノを倒していく。それぞれのドミノが情報を次のドミノに伝えていくのと似ています。

`useContext` は、React のツールで、それを使うと一つの情報（データ）を一つのドミノから最後のドミノまで持っていくことができます。これを利用すると、親のドミノから子どものドミノ、孫のドミノへとデータを簡単に送ることができます。

たとえば、あるドミノ（親コンポーネント）が「こんにちは」というメッセージを持っていて、それを一番最後のドミノ（孫コンポーネント）に伝えたいとしましょう。`useContext` を使わないと、親から子、子から孫へと順番にメッセージを手渡していかなければなりません。

でも、`useContext` を使えば、そのメッセージを一つの「バケツ」（これが context）に入れて、一番最後のドミノがそのバケツから直接メッセージを取り出すことができます。「こんにちは」のメッセージを一気に最後のドミノまで届けることができるのです。

だから、`useContext` は特にたくさんのドミノ（コンポーネント）があるときや、一つのメッセージを沢山のドミノに伝えたいときにとても便利なツールなのです。これを使うと、たくさんのドミノの中でも情報をスムーズに伝えることができます。

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

`useContext` は、アプリケーション全体で共有したいデータが存在するときに使うことが多いです。

例えば以下のような場合に利用します。

ユーザーのログイン情報: あなたが小学生たちに会員制のウェブサイトを作るとしましょう。ログインしたユーザーの情報は、ウェブサイトのいろいろな場所で使うでしょう。ユーザーの名前を表示したり、ユーザーがアクセスできる機能を制御したりします。そのような場合、ログイン情報はアプリケーション全体で共有するのが理にかなっていますよね。

テーマ（デザイン）の設定: あなたがウェブサイトに「ライトモード」と「ダークモード」を実装するとします。ユーザーが選択したモードは、サイト全体の色やスタイルに影響を与えます。これも、アプリケーション全体で共有するデータの一例です。

ローカライゼーション（地域化）設定: ウェブサイトが複数の言語に対応している場合、ユーザーが選択した言語設定をアプリケーション全体で保持する必要があります。

これらのようなケースでは、`useContext` を使ってデータをグローバルに管理することで、アプリケーション内のどのコンポーネントからでも簡単にそのデータにアクセスできます。

それでは、例を見てみましょう。

```tsx
import React, { createContext, useContext } from 'react'

type UserData = {
  name: string
  age: number
}

const UserContext = createContext<UserData>({ name: '', age: 0 })

const UserProvider = UserContext.Provider

const UserConsumer = UserContext.Consumer

const DisplayUser = () => {
  const user = useContext(UserContext)

  return (
    <div>
      <p>{`Name: ${user.name}`}</p>
      <p>{`Age: ${user.age}`}</p>
    </div>
  )
}
```

ここでは `useContext` を使って、ユーザーの名前と年齢を取得して表示しています。

#### グローバルな空間

「グローバル」や「共有」といった考え方が、`useContext` を理解するのにとても役立ちます。

例えば、学校全体が一つの「グローバルな空間」だと考えてみましょう。そして、各クラスはその学校の一部として存在していますね。各クラスはそれぞれ自分たちだけの情報（たとえばクラスの平均点や、クラスのアイドルの名前など）を持っています。でも、学校全体で共有される情報（たとえば給食の献立や、運動会の日程など）もあります。

`useContext` は、この「学校全体で共有される情報」を管理するためのツールと言えます。どのクラスからでも、これらの共有情報にアクセスすることができます。これが「グローバル」や「共有」という考え方とどうつながるか分かりますか？

どのコンポーネント（クラス）からでも、同じ情報（給食の献立や運動会の日程）にアクセスすることができる。これが `useContext` の役割と言えます。このツールを使うと、React アプリ全体でデータを共有することができるのです。

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

それでは、次に Next.js で `useContext` を使ってみましょう。まずは、`context.ts` というファイルを作ります。

```tsx
// context.ts
import { createContext } from 'react'

export type UserInfo = {
  name: string
  age: number
}

export const UserContext = createContext<UserInfo>({ name: '', age: 0 })
```

ここでは `UserContext` というコンテキストを作成し、`UserInfo` という型を持たせています。この `UserContext` を使ってデータを渡すことができます。

次に、コンテキストの提供者となる `UserProvider` コンポーネントを作成します。

```tsx
// UserProvider.tsx
import { UserContext, UserInfo } from './context'

type Props = {
  userInfo: UserInfo
  children: React.ReactNode
}

const UserProvider = ({ userInfo, children }: Props) => {
  return <UserContext.Provider value={userInfo}>{children}</UserContext.Provider>
}

export default UserProvider
```

ここで作成した `UserProvider` コンポーネントは、その子孫コンポーネントに対して `UserInfo` のデータを提供します。`UserProvider` は `userInfo` と `children` を引数にとり、`UserContext.Provider` を通じて `userInfo` の値を子孫コンポーネントに渡します。

### useContext を実装

それでは、`UserProvider` を使ってデータを提供し、そのデータを取得するコンポーネントを作ってみましょう。`_app.tsx` で `UserProvider` を使います。

```tsx
// _app.tsx
import type { AppProps } from 'next/app'
import UserProvider from '../context/UserProvider'

function MyApp({ Component, pageProps }: AppProps) {
  const userInfo = {
    name: 'Taro',
    age: 12,
  }

  return (
    <UserProvider userInfo={userInfo}>
      <Component {...pageProps} />
    </UserProvider>
  )
}

export default MyApp
```

`MyApp` コンポーネントで `UserProvider` を使っています。`userInfo` として、名前が 'Taro'、年齢が 12 歳というデータを `UserProvider` に渡しています。

そして、データを表示する `UserDisplay` コンポーネントを作ります。

```tsx
// UserDisplay.tsx
import { useContext } from 'react'
import { UserContext } from '../context/context'

const UserDisplay = () => {
  const user = useContext(UserContext)

  return (
    <div>
      <p>{`Name: ${user.name}`}</p>
      <p>{`Age: ${user.age}`}</p>
    </div>
  )
}

export default UserDisplay
```

`UserDisplay` コンポーネントでは、`useContext` フックを使って `UserContext` からデータを取得し、そのデータを表示しています。

### Emotion で実装

最後に、Emotion を使ってスタイルを適用してみましょう。`UserDisplay` コンポーネントにスタイルを追加します。

```tsx
// UserDisplay.tsx
import { useContext } from 'react'
import { UserContext } from '../context/context'
import { css } from '@emotion/react'

const textStyle = css`
  font-size: 20px;
  color: blue;
`

const UserDisplay = () => {
  const user = useContext(UserContext)

  return (
    <div>
      <p css={textStyle}>{`Name: ${user.name}`}</p>
      <p css={textStyle}>{`Age: ${user.age}`}</p>
    </div>
  )
}

export default UserDisplay
```

ここでは、Emotion の `css` 関数を使ってスタイルを作成し、そのスタイルを `p` タグに適用しています。こうすることで、テキストの色とサイズを変更できます。

以上が、Next.js と TypeScript で `useContext` を使った具体的な実装例です。`useContext` を使うことで、React コンポーネントの木全体でデータを共有できます。コードはシンプルになり、状態管理の複雑さを軽減することができます。これからも Next.js と TypeScript を使った実装を探求していきましょう。


Next.js と TypeScript を組み合わせて、ReactのuseContextフックを活用した状態管理の方法を分かりやすく解説します。

Next.js と TypeScript で、useContext を学ぶ


## TL;DR

こんにちは！今回は、React のメソッドの一つである useMemo を使った、アプリの更新方法について話しますね。

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

### useMemo とは？

みなさん、お部屋をきれいにするために、掃除をすることはありますか？掃除をすると、物がきちんと整理されて、探し物が見つけやすくなったりしますよね。でも、毎回全ての部屋を掃除すると、時間がかかりますよね。

React の `useMemo` は、そのような掃除のようなものだと思ってください。`useMemo`は、特定の部屋（データ）だけをきれいに（計算する）して、他の部屋（データ）はそのままにしておく方法です。これにより、無駄な時間を使わずに、必要なところだけを素早く掃除（計算）することができます。

基本的な使い方は以下のようになります。

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

// Props の型定義
type Props = {
  values: number[] // 数値の配列を受け取る
}

const CalculateSum = ({ values }: Props) => {
  // `values` の合計を計算する。計算結果はメモ化される。
  // 第2引数の依存配列に `values` を入れることで、`values` が変更された時のみ再計算を行う。
  const sum = useMemo(() => {
    return values.reduce((prev, curr) => prev + curr, 0)
  }, [values])

  // 計算結果を表示する
  return <div>合計: {sum}</div>
}
```

ここでは、`useMemo`を使って、`values`の合計を計算しています。`useMemo`の第一引数には、結果をメモ化（覚えておく）する関数を渡し、第二引数には依存配列を渡します。この依存配列の値が変わるときだけ、関数が再計算されます。つまり、`values`が変わらなければ、`sum`は再計算されずにメモ化された値が使われるのです。

### useMemo の使い所

`useMemo`は、React のフックの一つで、計算結果を「記憶」（メモ化）しておくために使います。その名の通り、「メモ」を利用した最適化のための道具なのです。

計算とは何かと言うと、関数の結果を求めることや、オブジェクトや配列の新しいバージョンを作ることなどが含まれます。これらの操作は時にはコストが高くなることがあります。たとえば、大量のデータを処理する関数や、複雑なロジックを持つ関数がそうです。これらの関数が頻繁に呼び出されると、アプリケーションのパフォーマンスに影響を与えることがあります。

それでは、どういったシーンで`useMemo`を使うのでしょうか。

#### 高コストな計算を行うシーン

`useMemo`は、計算結果をメモ化するため、計算の結果が同じである限り、何度も同じ計算を行うことなく、前回の計算結果を再利用できます。これは、例えば大きなデータセットを扱うような場合や、複雑な計算を行う関数が頻繁に実行される場合に特に有用です。

#### 参照の一貫性が重要なシーン

`useMemo`は生成された値の「参照」を保存します。これは、例えば子コンポーネントに props としてオブジェクトや配列を渡すような場合に役立ちます。子コンポーネントがこれらの props を依存配列に含むフック（`useEffect`, `useMemo`, `useCallback`など）を使用していると、親コンポーネントが再レンダリングされるたびに新しい参照が生成され、フックが不要に実行される可能性があります。`useMemo`を使用すると、依存配列内の値が変更されない限り、同じ参照を保持できるため、不要なフックの実行を防ぐことができます。

しかし、`useMemo`は計算の結果をメモ化するためのものであり、副作用（API 呼び出しやイベントハンドラなど）を含む処理には使用すべきではありません。副作用を含む処理には`useEffect`を使うべきです。

また、`useMemo`を使用するときは、メモ化自体にもコストがかかるため、計算のコストとメモ化のコストを比較して適切に使うことが重要です。計算のコストがそれほど高くない場合、あるいは計算が頻繁に行われない場合は、`useMemo`を使わない方がパフォーマンスが良い場合もあります。

`useMemo`は特に以下のようなシーンでよく使われます。

#### 大規模な配列やオブジェクトの操作

例えば、大量のデータをフィルタリング、ソート、マッピングなどの操作をする場合、毎回レンダリングするたびにこれらの操作を実行するとパフォーマンスに影響を及ぼす可能性があります。そのような場合、`useMemo`を使って操作の結果をメモ化し、データが変更されない限り再計算を回避することができます。

```tsx
const sortedList = useMemo(() => {
  return list.sort((a, b) => a - b)
}, [list])
```

#### 複雑な計算の結果

フィボナッチ数列のような計算コストが高い演算や、複雑なアルゴリズムの結果をメモ化することで、パフォーマンスの改善が期待できます。

```tsx
const fib = useMemo(() => {
  return calculateFibonacci(number)
}, [number])
```

#### 参照等価性を保つ必要があるオブジェクトや関数

React の子コンポーネントに props としてオブジェクトや関数を渡す際、これらの値が再レンダリングのたびに新しく作られると、React はそれを新しい props として認識し、子コンポーネントも無駄に再レンダリングされます。これを回避するために、`useMemo`や`useCallback`を使って参照等価性を保つことがあります。

```tsx
const handleClick = useCallback(
  (event) => {
    // ...
  },
  [dependency]
)

// or

const configObject = useMemo(() => {
  return { foo: 'bar', baz: 'qux' }
}, [dependency])
```

これらは一例であり、`useMemo`を使用するかどうかは、パフォーマンスに影響を及ぼす計算や操作があるかどうか、そしてそれがどの程度の頻度で発生するかによります。また、あまりにも頻繁に`useMemo`を使用しすぎると、メモ化自体のオーバーヘッドがパフォーマンスに影響を及ぼすこともありますので注意が必要です。

例えば、リアルタイム検索を実装するとしましょう。

この場合、リアルタイム検索における`useMemo`の使用は、結果の計算や操作がパフォーマンスに影響を及ぼす可能性がある場合に有効です。

たとえば、検索クエリに基づいて大量のデータをフィルタリングする必要がある場合、このフィルタリング操作は高コストである可能性があります。このフィルタリングを毎回レンダリングするたびに行うと、UI が遅くなる可能性があります。そのような場合、`useMemo`を使ってフィルタリング結果をメモ化し、クエリが変更されない限り再計算を避けることができます。

以下は、その一例です。

```tsx
const SearchResults = ({ query, data }: Props) => {
  const results = useMemo(() => {
    // data が大量で filter の計算コストが高い場合に有効
    return data.filter((item) => item.includes(query))
  }, [query, data])

  // 結果のレンダリング
  return (
    <div>
      {results.map((result) => (
        <div key={result}>{result}</div>
      ))}
    </div>
  )
}
```

ただし、`useMemo`のオーバーヘッドが問題となる場合や、フィルタリングの計算コストがそれほど高くない場合は、`useMemo`なしでも問題ありません。また、サーバーサイドで検索結果をフィルタリングし、クライアントサイドにはすでにフィルタリングされた結果を送信するという設計もあります。この場合、`useMemo`を使用する必要はありません。

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

それでは、Next.js で `useMemo` を実装してみましょう。まず、以下のコードは `/pages/index.tsx` として作成します。

```tsx
import { useMemo, useState } from 'react'
import CalculateSum from '../components/CalculateSum' // 合計を計算するコンポーネントをインポート

const Home = () => {
  // useState フックで values という名前の state を定義し、初期値を [1, 2, 3, 4, 5] とする
  const [values, setValues] = useState<number[]>([1, 2, 3, 4, 5])

  // 配列 values をシャッフルする関数を定義
  const handleShuffle = () => {
    // setValues を使って state を更新。シャッフルは Math.random() を使って行われる
    setValues(values.sort(() => Math.random() - 0.5))
  }

  return (
    <div>
      {/* シャッフルボタンを配置し、クリック時に handleShuffle 関数を実行 */}
      <button onClick={handleShuffle}>配列をシャッフル</button>
      {/* 合計値を計算するコンポーネントに現在の values を渡す */}
      <CalculateSum values={values} />
    </div>
  )
}

// Home コンポーネントをエクスポート
export default Home
```

ここでは、まず状態 `values` を定義し、`handleShuffle` 関数を使ってその配列をシャッフルします。そして、シャッフルされた配列 `values` を `CalculateSum` コンポーネントに渡します。

次に、`/components/CalculateSum.tsx`として以下のコードを作成します。

```tsx
import { useMemo } from 'react' // React の useMemo フックをインポート

type Props = {
  values: number[] // props として number の配列を受け取る
}

const CalculateSum = ({ values }: Props) => {
  // useMemo フックを使って、values の合計をメモ化
  // これにより、values が変更されるまでの間、合計値の再計算がスキップされる
  const sum = useMemo(() => {
    return values.reduce((prev, curr) => prev + curr, 0) // 配列の各要素を足し合わせて合計値を算出
  }, [values])

  // 合計値を表示
  return <div>合計: {sum}</div>
}

export default CalculateSum // CalculateSum コンポーネントをエクスポート
```

`CalculateSum` コンポーネントでは、受け取った `values` を `useMemo` を使って合計し、その結果を表示します。`useMemo` により、`values` が変更されない限り、再計算を行わずに、メモ化した結果を再利用します。これにより、計算時間が節約できます。

### useMemo を使った高度な例

`useMemo` は、高度な計算や重い処理を行う際に特に効果を発揮します。例えば、大量のデータをフィルタリングする際などに、結果をメモ化して再利用することで、パフォーマンスを向上させることができます。

以下に、大量のデータから特定の条件を満たすデータを抽出する際に `useMemo` を使用した例を示します。ファイル名は `/components/FilterData.tsx` とします。

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

type Data = {
  id: number
  value: number
}

type Props = {
  data: Data[]
  threshold: number
}

const FilterData = ({ data, threshold }: Props) => {
  const filteredData = useMemo(() => {
    return data.filter((item) => item.value > threshold)
  }, [data, threshold])

  return (
    <div>
      {filteredData.map((item) => (
        <div key={item.id}>{item.value}</div>
      ))}
    </div>
  )
}

export default FilterData
```

このコンポーネントでは、`data` 配列から `value` が `threshold` より大きい要素をフィルタリングします。フィルタリングの結果は `filteredData` としてメモ化されます。これにより、`data` または `threshold` が変更されない限り、フィルタリングの結果は再利用され、高負荷なフィルタリング処理を省くことができます。

### Emotion での実装

最後に、スタイリングライブラリ `Emotion` を使用して `useMemo` を使った例を示します。以下のコードは、`useMemo` を使ってスタイルオブジェクトをメモ化し、再レンダリング時に新たなオブジェクトを生成することなく、既存のオブジェクトを再利用する例です。ファイル名は `/components/StylizedButton.tsx` とします。

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

type Props = {
  color: string
}

const StylizedButton = ({ color }: Props) => {
  const style = useMemo(
    () =>
      css`
        background-color: ${color};
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      `,
    [color]
  )

  return <button css={style}>Click me!</button>
}

export default StylizedButton
```

`StylizedButton` コンポーネントでは、背景色を受け取り、その背景色に基づいてボタンのスタイルを定義します。スタイルオブジェクトは `useMemo` を使ってメモ化され、`color` が変更されない限り、再レンダリング時に新たなオブジェクトが生成されることはありません。これにより、再レンダリング時のパフォーマンスが向上します。


この記事では、Next.js と TypeScript を使用し、React の useMemo フックを活用した効率的なコンポーネント更新の方法を解説します。

Next.js と TypeScript で、useMemo を学ぶ


## TL;DR

この記事では、Next.js と TypeScript を用いて、React の useCallback フックの実装とその動作について解説します。最終的に、useCallback の概念と効率的な使用法を理解し、パフォーマンスを向上させるためのテクニックを身につけることができます。

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

### useCallback とは？

useCallback は、特定の関数をメモ化（一度計算した結果を記憶しておくこと）するための React Hook です。これにより、依存関係が変化しない限り、同じ関数を再利用することができ、結果としてコンポーネントのパフォーマンスが向上します。と言っても難しいかと思いますので、わかりやすく説明します。

まず、useCallback が何かを理解するために、まず「メモ化」という言葉を理解する必要があります。

#### メモ化

「メモ化」とは、難しい問題を解くときに、一度解いた問題の答えをメモしておいて、次に同じ問題に出会ったときにはそのメモを見てすぐ答えを思い出すようなものです。例えば、九九の表は「メモ化」の一種と言えます。2x3 が 6 であることを覚えておけば、次に 2x3 の計算が出てきたときにはすぐに答えが 6 であることを思い出すことができます。

では、ここで useCallback が登場します。useCallback はこの「メモ化」をプログラミングに使うための道具です。

例えば、ボタンを押すとカウンターの数が 1 つずつ増えるプログラムを作るとします。このとき、ボタンを押すたびにカウンターを増やす「関数」という命令が実行されます。しかし、ボタンを何度も押していると、同じ命令が何度も繰り返され、プログラムが無駄に重くなることもあります。

そこで useCallback を使うと、一度実行した命令（関数）を「メモ」しておけるので、ボタンを押すたびに新しく命令を作るのではなく、前に作った命令を使い回すことができます。これにより、プログラムが重くなることを防ぐことができます。

つまり、useCallback は「一度覚えた答え（命令）を使い回すための道具」であり、これによってプログラムがスムーズに動くようになるのです。

基本的な使用法は以下のようになります。

```tsx
const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])
```

ここで、`doSomething(a, b)`はメモ化したい関数、`[a, b]`は依存配列と呼ばれます。この依存配列にリストされた変数のいずれかが変化すると、新しい関数が作成されます。

#### なぜ依存配列が必要なのか？

依存配列とは、React の特定のフック（useEffect や useMemo、useCallback など）で使われるもので、そのフックが「依存」する値をリストアップした配列のことを指します。

さて、なぜ依存配列が必要なのでしょうか？それを理解するためには、React がどのように動作するかを理解する必要があります。

React は、コンポーネントの状態が変更されると、そのコンポーネントを再描画します。そして、再描画の際に、useEffect や useMemo、useCallback などのフック内の処理も再度実行されます。しかし、すべての処理を毎回再実行すると、パフォーマンスが低下する可能性があります。

そこで依存配列が役立ちます。依存配列に指定された値が変更された場合に限り、フック内の処理が再実行されます。依存配列に何も指定しない場合、フック内の処理は一度だけ実行され、その結果はメモ化されます。依存配列に空の配列を指定すると、フック内の処理はコンポーネントの初回描画時にだけ実行されます。

依存配列を理解するには、「フックが依存する値をリストアップする」と考えると良いでしょう。その値が変わると、フック内の処理は再実行され、値が変わらなければ以前の結果が再利用されます。これにより、不必要な処理を減らすことでパフォーマンスを向上させることが可能です。

例えば、useCallback フックを使ってボタンのクリックイベントをハンドリングする関数をメモ化するとします。その関数が特定の状態（例えば、カウンターの値）に依存する場合、その状態を依存配列に追加します。このようにすると、その状態が変更されるたびに、新しい関数が作成され、メモ化されます。状態が変更されなければ、以前に作成された関数が再利用されます。これにより、関数の再作成を最小限に抑え、パフォーマンスを向上させることができます。

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

ここでは、useCallback の使用例として、ボタンクリックによるカウントアップを実装します。useCallback を使って、カウントアップする関数をメモ化します。

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

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

type Props = {
  initialCount: number
}

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

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1)
  }, [])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default Counter
```

上記のコードでは、`useState`を使ってカウントの状態を管理し、その値を増やすための関数`increment`を定義しています。この関数は`useCallback`を使ってメモ化され、その結果としてパフォーマンスが向上します。

### 使い所

useCallback フックは、主に 2 つのシチュエーションで使うと良いです。

#### イベントハンドラを最適化するとき

React コンポーネントでイベントハンドラ（例えば、ボタンクリックの処理）を定義するとき、その関数はコンポーネントが再レンダリングされるたびに新しく生成されます。これはパフォーマンスに影響を与える可能性があります。また、この新しく生成される関数は、他のコンポーネントやフックの依存配列をトリガーする可能性があります。ここで useCallback を使うと、依存性が変わらない限り同じ関数を再利用できるので、このような問題を回避できます。

#### 子コンポーネントに関数を渡すとき

React コンポーネントが子コンポーネントに関数を props として渡すとき、その関数が再レンダリングのたびに新しく生成されると、子コンポーネントも不必要に再レンダリングされます。この問題を避けるためにも useCallback を使います。

しかし、全ての場面で useCallback を使うべきかというと、そうではありません。なぜなら、useCallback 自体もリソースを消費します。つまり、useCallback を使うことによる恩恵がそれを上回る場面で使うべきです。

また、useCallback は最適化の一種ですので、無闇に使うと逆にコードの読みやすさを損なう可能性があります。パフォーマンスが実際に問題になっている場面で、そしてその問題が useCallback によって解決可能である場合にのみ使用することをおすすめします。

要するに、useCallback の主な使い道はパフォーマンス最適化であり、全ての関数で使うべきツールではありません。パフォーマンスの問題が観測され、その原因が関数の再生成によるものであると明らかになった場合にのみ、useCallback を使うことを考慮すると良いでしょう。

### useCallback の進化的実装

useCallback の主な使用例は、コンポーネントのパフォーマンス最適化です。ここでは、useCallback を使って子コンポーネントの不要な再レンダリングを防ぐ例を見てみましょう。

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

```tsx
import { useState, useCallback } from 'react'
import Child from './Child'

type Props = {
  initialCount: number
}

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

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1)
  }, [])

  return (
    <div>
      <p>Count: {count}</p>
      <Child onIncrement={increment} />
    </div>
  )
}

export default Parent
```

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

```tsx
type Props = {
  onIncrement: () => void
}

const Child = ({ onIncrement }: Props) => {
  console.log('Child component rendered')

  return <button onClick={onIncrement}>Increment</button>
}

export default Child
```

ここでは、`Parent`コンポーネントが`Child`コンポーネントに`increment`関数を渡しています。この`increment`関数がメモ化されているため、`Parent`が再レンダリングされても、`Child`は不必要に再レンダリングされません。

### Emotion で実装

Emotion と組み合わせると、useCallback はユーザーのインタラクションに基づいてスタイルを動的に変更する際に役立ちます。以下に具体的な実装例を示します。

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

type Props = {
  initialColor: string
}

const ColorChanger = ({ initialColor }: Props) => {
  const [color, setColor] = useState(initialColor)

  const changeColor = useCallback(() => {
    setColor((prevColor) => (prevColor === 'red' ? 'blue' : 'red'))
  }, [])

  return (
    <div
      onClick={changeColor}
      css={css`
        background-color: ${color};
        width: 100px;
        height: 100px;
      `}
    />
  )
}

export default ColorChanger
```

ここで、`ColorChanger` コンポーネントはクリックするたびに背景色を切り替えます。色を変えるための関数 `changeColor` が useCallback でメモ化されているため、パフォーマンスが向上します。


Next.js と TypeScript を用いて、React の useCallback フックの使い方とそのメリットを明らかにする。

Next.js と TypeScript で、useCallback の使い方を理解する


## TL;DR

このページでは、Next.js と TypeScript を使って、フォームの入力値（`e.target.value`）の取り扱いについて詳しく解説します。フォームはウェブ開発において欠かせない要素です。ユーザーの入力を取得して、それをアプリケーションのどこかで使用する方法を学びます。

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

### e.target.value とは？

e.target.value は、イベントが起きた要素の value 属性の値を取得することができます。

`e` はイベントを表し、`target` はイベントが発生した要素（ここでは入力要素）を指し、`value` はその要素の現在の値を指します。イベントオブジェクトの名前は任意なので、`e` 以外にも `event`、`ev` など、何でもよいです。

なんだか難しいですよね？`e.target.value` を理解するために、まず HTML のフォームと JavaScript の世界を少しご紹介します。

みんながよく見かけるウェブサイトには、様々な情報を入力するためのフォームがあります。例えば、ユーザー名を入力したり、パスワードを設定したり、お問い合わせのメッセージを書いたりしますよね。これらはすべて、ウェブページ上の「フォーム」という部分で行われます。

JavaScript という言語は、ウェブページ上で色々な動きを作るために使われます。例えば、ボタンをクリックした時に何かしらのアクションを起こしたり、フォームに入力した情報を収集したりします。

そして、ここで`e.target.value`の出番です。これは JavaScript の中で、ユーザーがフォームに入力した情報を取得するためのコードの一部です。さて、分解して解説します。

「e」はイベント（Event）を表し、何かしらのアクション（クリックや入力など）が起こったことを示しています。

「target」はそのイベントが起こった具体的な場所や要素（この場合はフォームの入力欄）を指しています。

「value」はその場所での具体的な値、つまりユーザーが入力した情報を表します。

つまり、`e.target.value`は「ユーザーが何かアクションを起こした場所で（target）、そのアクションによって生まれた具体的な情報（value）を取得する」という意味になります。

このように`e.target.value`は、ウェブサイト上でユーザーが入力した情報を収集し、その情報を使って色々なこと（ユーザーへのメッセージの表示、データベースへの情報の保存など）を行うためにとても重要な役割を果たしているんですね。

「3 文字以上入力したら、コンソールに「3 文字以上はダメですよ」と表示する」コードを書いてみましょう。

```ts
import { useState, useCallback } from 'react'

const MyComponent = () => {
  const [text, setText] = useState('') // text の初期値を空文字に設定

  // 3文字以上入力したら、コンソールに「3文字以上はダメですよ」と表示する
  const handleChange = useCallback((e) => {
    if (e.target.value.length > 3) {
      console.log('3文字以上はダメですよ')
      return
    }
    setText(e.target.value)
  }, [])

  // jsx
  return <input type="text" value={text} onChange={handleChange} />
}

export default MyComponent
```

このコードは、入力文字数の制限が 3 文字に変更され、5 文字以上の入力があるとコンソールにメッセージが表示されます。

次は、ボタンをクリックするとそのボタンの`value`属性の値をコンソールに出力するシンプルなコンポーネントです。

```tsx
type ButtonProps = {
  value: string
}

const ButtonComponent = ({ value }: ButtonProps) => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log(event.currentTarget.value)
  }

  return (
    <button value={value} onClick={handleClick}>
      Click me
    </button>
  )
}
```

`e.target.value` ではなく `event.currentTarget.value` となっていますね。これは、`e` と `event` は同じものを指しています。

イベントオブジェクトの名前は任意で、一般的に `event`、`e`、`ev` などがよく使われます。したがって、`e.target.value` も一般的によく見かける形式です。これは「イベントオブジェクトの名前（ここでは `e`）」＋「.target.value」で理解することができます。

### `event.target` と `event.currentTarget` の違い

一方、 `event.target` と `event.currentTarget` の違いについては、具体的な要素を指す対象が異なります。どちらもイベントが発生した際の要素に関する情報を保持していますが、`event.target` は実際にイベントが発生した要素（例：ボタンの中のテキストなど）を指し、`event.currentTarget` はイベントリスナーがアタッチされた要素（例：ボタン自体）を指します。

なお、上記のコードサンプルでは、イベントリスナーがボタン要素に直接アタッチされているため、`event.target.value` と `event.currentTarget.value` は同じ結果を返すことになります。ただし、複雑な DOM 構造やイベント伝播（バブリングやキャプチャリング）を考慮する場合には、この 2 つのプロパティが異なる結果を返すこともありますので、適切なプロパティを選んで使用することが重要です。

ここでは、`ButtonComponent`というコンポーネントを作っています。このコンポーネントは`value`という文字列を受け取り、それをボタンの`value`属性として設定します。

ボタンがクリックされると、`handleClick`関数が実行されます。この関数は、イベントオブジェクト（ここでは`event`）を引数に取り、そのイベントオブジェクトの`currentTarget.value`（ここではボタンの`value`属性の値）をコンソールに出力します。

なお、ボタンのイベントハンドラーで `event.target.value` ではなく `event.currentTarget.value` を使っている理由は、イベントの伝播の中でイベント発生元が変わる可能性（たとえば子要素がイベントを発生させた場合など）があるためです。`currentTarget` はイベントハンドラーがアタッチされている要素（ここではボタン自体）を常に指すため、このコードでは `event.currentTarget.value` が安全です。

### `e` の中には何が入っているのか？

イベントハンドラの引数 `e`（または `event` と名付けられます）は、発生したイベントに関する情報を保持したイベントオブジェクトです。このオブジェクトには、イベントに関する様々な情報やメソッドが含まれています。

具体的にどのような情報が含まれるかは、イベントの種類（クリックイベント、キーボードイベント、フォームの送信イベントなど）によります。しかし、一般的に以下のようなプロパティやメソッドが含まれます。

`target`: イベントが発生した DOM 要素を参照します。これを使うと、たとえば `<input>` 要素の値を取得したり、クリックされたボタンのテキストを読み取ったりすることができます。

`currentTarget`: イベントリスナーがアタッチされている要素を参照します。イベントバブリングを通じて親要素でイベントをキャッチした場合でも、`target` はオリジナルの発火源を指しますが、`currentTarget` はイベントリスナーが実際に設定されている要素（つまり、イベントをキャッチした要素）を指します。

`type`: 発生したイベントの種類（例えば "click"、"keydown" 等）を文字列として返します。

`preventDefault()`: このメソッドを呼び出すと、イベントのデフォルトの動作（例えばリンクのクリックによるページ遷移や、フォームの送信によるページリロード）を防げます。

`stopPropagation()`: このメソッドを呼び出すと、イベントの伝播を停止できます。これにより、イベントが親要素にバブリングしたり、子要素にキャプチャリングされるのを防げます。

これらはイベントオブジェクトの一部であり、具体的なイベントの種類により、さらに多くの情報が提供されることがあります。

それでは、以下に、`select` 要素の選択項目の値を `event.target.value` で取得する簡単な例を示します。

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

type Props = {
  options: string[]
}

const SelectComponent = ({ options }: Props) => {
  const [selectedOption, setSelectedOption] = useState('')

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(event.target.value)
  }

  return (
    <div>
      <select value={selectedOption} onChange={handleChange}>
        {options.map((option, index) => (
          <option key={index} value={option}>
            {option}
          </option>
        ))}
      </select>
      <p>選択された項目: {selectedOption}</p>
    </div>
  )
}
```

ここでは、`SelectComponent`というコンポーネントを作っています。これは、複数の選択肢から一つを選ぶという、`select` 要素を含むコンポーネントです。

このコンポーネントは`options`という配列を受け取ります。そして、その配列の各要素を`select` 要素の選択肢として表示します。

ユーザーが選択肢の中から一つ選択すると、その選択された項目の値（ここでは`event.target.value`）が`handleChange` 関数によって取得され、その値が`selectedOption` というステートにセットされます。

最後に、選択された項目は画面上に表示されます。これにより、ユーザーがどの項目を選択したかが一目でわかるようになります。

### Next.js で、フォーム入力値を扱う

次のコードスニペットは、Next.js と TypeScript を使った簡単なフォームの例です。

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

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

type MyFormProps = {
  onSubmit: (formValue: string) => void
}

const MyForm = ({ onSubmit }: MyFormProps) => {
  const [inputValue, setInputValue] = useState('')

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }

  const handleSubmit = () => {
    onSubmit(inputValue)
  }

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  )
}

export default MyForm
```

上述したコードでは、まず `useState` を使って `inputValue` の状態を管理します。続いて、`handleInputChange` 関数では、入力値（`e.target.value`）が変更されるたびに `setInputValue` を呼び出して状態を更新します。

### フォーム入力値を取り扱う高度な例

```tsx
import { ChangeEvent, FormEvent, useState } from 'react'

type AdvancedFormProps = {
  onSubmit: (formValues: { name: string; email: string }) => void
}

const AdvancedForm = ({ onSubmit }: AdvancedFormProps) => {
  const [formValues, setFormValues] = useState({ name: '', email: '' })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFormValues({
      ...formValues,
      [e.target.name]: e.target.value,
    })
  }

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    onSubmit(formValues)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formValues.name} onChange={handleInputChange} />
      <input type="email" name="email" value={formValues.email} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  )
}

export default AdvancedForm
```

この例では、複数の入力要素を一つの状態オブジェクトで管理します。各入力要素には `name` 属性が設定されており、これが状態の更新に使用されます。`handleInputChange` 関数では、`e.target.name` をキーとして使用し、それに対応する `e.target.value` を値として設定します。

### Emotion で実装

Emotion を用いたスタイリングの例も見てみましょう。ここでは `AdvancedForm` コンポーネントにスタイルを追加します。

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

const formStyle = css`
  display: flex;
  flex-direction: column;
  gap: 1em;
`

const inputStyle = css`
  padding: 0.5em;
  font-size: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
`

type StyledFormProps = {
  onSubmit: (formValues: { name: string; email: string }) => void
}

const StyledForm = ({ onSubmit }: StyledFormProps) => {
  const [formValues, setFormValues] = useState({ name: '', email: '' })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFormValues({
      ...formValues,
      [e.target.name]: e.target.value,
    })
  }

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    onSubmit(formValues)
  }

  return (
    <form css={formStyle} onSubmit={handleSubmit}>
      <input type="text" name="name" value={formValues.name} onChange={handleInputChange} css={inputStyle} />
      <input type="email" name="email" value={formValues.email} onChange={handleInputChange} css={inputStyle} />
      <button type="submit">Submit</button>
    </form>
  )
}

export default StyledForm
```

上述したコードでは、`css` 関数を使ってスタイルを定義し、それをコンポーネントに適用します。`css`

関数はスタイルを文字列として書き、その結果をコンポーネントの `css` prop に渡すことでスタイルが適用されます。

以上が、Next.js と TypeScript を用いた `e.target.value` の使用例とそのスタイリングになります。


Next.js と TypeScript を用いて、フォームの入力値 (e.target.value) の取り扱いと更新を分かりやすく説明します。

Next.js と TypeScript で学ぶイベント処理「e.target.value」


## TL;DR

この記事では、Next.js と TypeScript による Progressive Web Apps (PWA) の構築方法を深掘りします。PWA の基礎的な考え方から、具体的なソースコードによる実装例、そして Emotion を活用したスタイリングまでを一挙に解説します。

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

### PWA とは？

PWA（Progressive Web Apps）とは、「進歩的なウェブアプリ」のことを指します。…いや、進歩的ってなんのことやねんって感じかと思いますので、おもちゃのロボットを例に出して、PWA について考えてみましょう。

例えば、ロボットのおもちゃがあるとします。

ただのおもちゃとして遊ぶこともできますが、バッテリーを入れると動き出すように、新たな機能が追加されるともっと楽しくなりますよね。さらに、リモコンを使って操作することができたら、その楽しさはもっと増すでしょう。

PWA も同じです。ウェブサイトは、そのままでも情報を見ることができます。それが「おもちゃ」です。しかし、特殊な技術を使って「バッテリー」を入れることで、ウェブサイトは「動き出し」、いくつかの特別な機能を持つようになります。例えば、インターネットに接続していない時でもウェブサイトの内容を見ることができるようになったり、スマートフォンのホーム画面にウェブサイトのアイコンを追加して、アプリのように直接開けるようになったりします。

このように、PWA はウェブサイトをより便利で使いやすくするための技術なんですね。これが「進歩的なウェブアプリ」、つまり PWA と呼ばれる理由です。

Progressive Web Apps (PWA) は、ウェブアプリケーションをモバイルアプリのように振る舞わせるための技術です。この考え方では、ウェブアプリケーションはインターネット接続がなくても動作し、ユーザーに高速で滑らかな体験を提供します。

PWA の主な特徴は以下の通りです。

- リアルタイム性：PWA は最新の情報を提供します。
- レスポンシブ：PWA は任意のデバイス（デスクトップ、モバイル、タブレット）で動作します。
- オフライン対応：Service Workers の利用により、オフライン時でも動作します。

#### PWA のメリット

PWA の具体的なメリットは、以下の通りです。

##### オフライン対応

Service Worker を用いることで、インターネット接続がない状況でもウェブページを表示することが可能です。キャッシュを利用することで、アプリの一部あるいは全部の機能をオフラインでも使用できます。

##### ホーム画面への追加

ユーザーは PWA をスマートフォンやタブレットのホーム画面に追加できます。これにより、ネイティブアプリケーションのようにアプリを起動でき、より簡単にアクセスできます。

##### プッシュ通知

PWA はプッシュ通知をサポートしています。これにより、ユーザーエンゲージメントを高め、ユーザーに最新情報を直接伝えることができます。

##### レスポンシブ

PWA はデバイスの種類や画面サイズに関係なく最適な表示がされます。これにより、スマートフォン、タブレット、デスクトップなど、あらゆるデバイスで一貫したユーザーエクスペリエンスを提供できます。

##### アップデートの簡単さ

PWA はウェブベースのアプリケーションなので、アップデートを行う際にユーザーに何も手間をかけさせる必要がありません。新しい内容はユーザーがアプリを開くたびに自動的に提供されます。

##### コスト効率

PWA は一つの基盤で複数のプラットフォームに対応できます。iOS と Android の両方に対応するネイティブアプリをそれぞれ作るよりも、開発・メンテナンスのコストと時間を大幅に節約できます。

##### 検索エンジン対策(SEO)

PWA はウェブベースのため、SEO 対策が可能です。これにより検索エンジンからの流入を得やすくなります。

### manifest.json

Next.js を使って PWA を構築する際の主なステップは、manifest.json の作成と Service Worker の設定です。

`manifest.json`とは、ウェブアプリケーションの設定を記述するためのファイルです。これは PWA（Progressive Web Apps）の一部として使用され、ウェブサイトがスマートフォンやタブレットなどのデバイスでどのように表示されるべきかを定義します。

たとえば、ウェブサイトの名前やアイコン、テーマ色、スタート URL（アプリが開いた時に最初に表示するページ）などを指定できます。また、ウェブアプリケーションが全画面で表示されるべきか、ブラウザのナビゲーションバーを表示するべきかなど、表示モードも定義できます。

以下に、`manifest.json`の例を示します：

```json
{
  "short_name": "MyApp",
  "name": "My Awesome App",
  "icons": [
    {
      "src": "/favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
  "theme_color": "#000000"
}
```

これにより、ウェブサイトはユーザーのデバイスにインストールされ、ネイティブアプリケーションのように動作するようになります。これが PWA の大きな特徴で、その実現には`manifest.json`が欠かせません。

PWA Manifest のジェネレーターは次のようなものがあります。

- [PWABuilder](https://www.pwabuilder.com/)
- [PWA Manifest Generator \| SimiCart](https://www.simicart.com/manifest-generator.html/)

PWABuilder は、Microsoft が提供するこのツールで、ウェブサイトの URL を入力するだけで、自動的に manifest.json を作成します。また、提供されたマニフェストをカスタマイズして、必要な情報を追加したり編集したりすることもできます。

Manifest Generator は、手動でウェブアプリマニフェストを作成するのに役立ちます。必要な情報をフォームに入力すると、それに基づいて manifest.json が生成されます。

これらのツールを使うことで、manifest.json の作成がより簡単になります。しかし、自分で作成することで、必要な設定を自由に調整できるという利点もあります。

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

それでは Next.js で実装してみましょう。まず、`public/` ディレクトリに `manifest.json` を作成します。

```json
// public/manifest.json

{
  "name": "Next.js PWA",
  "short_name": "NextPWA",
  "description": "An example of a PWA using Next.js and TypeScript",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0070f3",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```

次に、Service Worker を設定します。Service Worker

を活用するためには、Next.js プロジェクトに `next-pwa` パッケージを導入します。

```bash
npm install next-pwa
```

`next.config.js` ファイルに次の設定を追加します。

```js
// next.config.js

const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
  },
})
```

これで、Next.js と TypeScript で PWA を実装できました。ブラウザの DevTools を使って、PWA が正しく機能していることを確認できます。

### PWA を更に進化させる

ここからは、さらにテクニカルな観点から PWA を改良する方法を見ていきます。例えば、ユーザーのオフライン時の体験を向上させるために、特定のページを事前にキャッシュしておくことがあります。

```js
// next.config.js

const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/example.com\/api\/.*/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          expiration: {
            maxEntries: 10,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
          networkTimeoutSeconds: 10,
        },
      },
    ],
  },
})
```

この設定により、`https://example.com/api/` から始まるリクエストはすべてキャッシュされます。また、10 秒以内にネットワークからの応答がない場合、Service Worker はキャッシュからの応答を返します。

以上のコードでは、`css` 関数を使って CSS プロパティを JavaScript オブジェクトとして記述し、その後にテンプレートリテラルを使って CSS スタイルを直接記述しています。

以上が、Next.js と TypeScript を用いて PWA を実装し、Emotion を使用してスタイリングする方法についての解説でした。


Next.js と TypeScript による効率的な Progressive Web Apps (PWA) の構築とそれに伴う深い理解を目指します。

Next.js と TypeScript で、PWAを構築する


## TL;DR

このページでは、Next.js と TypeScript を使用した React イベントの実装方法について解説します。その過程で、イベントが React と一緒にどのように機能するのか、そしてそれらを TypeScript で型付けする際の考え方を調べてみましょう。

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

### イベントとは？

React のイベントシステムの前に、「イベント」について解説します。

イベントとは、あなたが何かを行うことで、コンピュータやプログラムが反応するための「トリガー（引き金）」のようなものです。例えば、ボタンをクリックしたり、キーボードのキーを押したり、マウスを動かしたりすると、それらはすべて「イベント」と呼ばれます。

それでは、このイベントを楽しい例え話で考えてみましょう。あなたが公園で遊んでいて、フリスビーを投げるとします。あなたがフリスビーを投げる行為は「イベント」です。そして、あなたの友達（ここではコンピュータやプログラムと考えてみてください）がそれを見て、フリスビーを追いかけるという反応を起こします。

ここで、フリスビーを投げる行為が「イベント」であり、フリスビーを追いかける行為が「イベントハンドラ（イベント処理）」となります。フリスビーを投げたときに何が起こるのか（友達がフリスビーを追いかける）は、事前に決めておくことができます。これがプログラミングにおける「イベントハンドリング」の基本的な考え方です。

なので、例えばボタンをクリックしたら、何か特定の動作をするようにプログラミングすることができます。この特定の動作が「イベントハンドラ」で、それをプログラムすることを「イベントハンドリング」と呼びます。

### React イベントシステムとは？

React のイベントシステムは、ブラウザの標準イベントシステムを抽象化したもので、各種ブラウザのイベントの違いを吸収し、一貫したイベントハンドリングの体験を提供します。JavaScript のイベントリスナーとは違い、React のイベントはキャメルケースで書かれ、JSX に直接渡されます。

React では様々な種類のイベントに対応しています。以下の表はその一部です。

| イベント種別               | 例                           | 用途                                                                       |
| -------------------------- | ---------------------------- | -------------------------------------------------------------------------- |
| クリックイベント           | `onClick`                    | ボタンやリンクのクリック、要素上でのマウスダウン＆アップイベントに対応     |
| フォームイベント           | `onChange`, `onSubmit`       | 入力値の変更、フォームの送信に対応                                         |
| キーボードイベント         | `onKeyDown`, `onKeyUp`       | キーボードのキー押下、キー解放に対応                                       |
| マウスイベント             | `onMouseOver`, `onMouseOut`  | マウスカーソルの要素上への入出に対応                                       |
| フォーカスイベント         | `onFocus`, `onBlur`          | 要素のフォーカス取得、フォーカス失いに対応                                 |
| スクロールイベント         | `onScroll`                   | スクロール操作に対応                                                       |
| タッチイベント             | `onTouchStart`, `onTouchEnd` | タッチデバイス（スマートフォンやタブレット）のタッチ開始、タッチ終了に対応 |
| ドラッグ＆ドロップイベント | `onDrag`, `onDrop`           | ドラッグ操作、ドロップ（ドラッグ中の要素の放下）に対応                     |

これらのイベントハンドラは、関数を受け取り、その関数内でイベントに対する動作を定義します。イベントハンドラは、通常、React のコンポーネントの中で定義されます。

基本的な onClick イベントのハンドラは以下のようになります。

```tsx
type Props = {
  text: string
}

const ButtonComponent = ({ text }: Props) => {
  const handleClick = () => {
    console.log('Button clicked!')
  }

  return <button onClick={handleClick}>{text}</button>
}
```

このソースコードでは、`ButtonComponent`というボタンコンポーネントを作成しています。`handleClick`関数は、ボタンがクリックされたときにコンソールにメッセージを表示します。

### Next.js で、React イベントを実装

Next.js での React イベントの取り扱いは、通常の React アプリと同じです。それでは、より具体的な例を見てみましょう。

次のソースコードは、テキストフィールドからユーザーの入力を受け取り、onChange イベントを使って入力を state で管理するコンポーネントです。

```tsx
// components/InputField.tsx
import { useState } from 'react'

type Props = {
  placeholder: string
}

const InputField = ({ placeholder }: Props) => {
  const [value, setValue] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }

  return <input type="text" placeholder={placeholder} value={value} onChange={handleChange} />
}

export default InputField
```

上記のコードでは、`useState`フックを使ってユーザーの入力を追跡します。`handleChange`関数では、イベントオブジェクト `e` を受け取り、その `value` プロパティを `setValue` に渡して state を更新しています。

### 高度なイベント処理

React のイベント処理の考え方を更に広げてみましょう。例えば、複数の input フィールドの値を一度に管理するためのハンドラを作成します。

```tsx
// components/MultiInputField.tsx
import { useState } from 'react'

type FormData = {
  firstName: string
  lastName: string
}

const MultiInputField = () => {
  const initialFormData: FormData = {
    firstName: '',
    lastName: '',
  }

  const [formData, setFormData] = useState(initialFormData)

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

  return (
    <>
      <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} />
      <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} />
    </>
  )
}

export default MultiInputField
```

ここでは、複数の入力フィールド（名前と姓）の値を一つの state オブジェクトで管理します。各入力フィールドは固有の `name` 属性を持ち、この `name` 属性は `handleChange` 関数内で利用されています。

### Emotion での実装

Emotion は、CSS-in-JS ライブラリの一つで、React コンポーネント内で CSS を直接記述することができます。それでは、Emotion を使ってスタイル付きのボタンを作成し、そのボタンがクリックされたときに特定のアクションを実行するような例を見てみましょう。

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

type Props = {
  text: string
}

const buttonStyles = css`
  padding: 10px 20px;
  background-color: #0070f3;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #0051bb;
  }
`

const StyledButton = ({ text }: Props) => {
  const handleClick = () => {
    console.log('Styled button clicked!')
  }

  return (
    <button css={buttonStyles} onClick={handleClick}>
      {text}
    </button>
  )
}

export default StyledButton
```

ここでは、ボタンのスタイルを `buttonStyles` という定数に定義し、それをボタンコンポーネントに適用します。そして、ボタンがクリックされたときに `handleClick` 関数が呼び出され、コンソールにメッセージが出力されます。

以上が、Next.js と TypeScript で React のイベント処理を実装する方法についてのガイドでした。これらの概念を理解して使いこなすことで、よりリッチでインタラクティブなユーザーインターフェースを構築することができます。


React のイベント管理と処理を Next.js と TypeScript の観点から分析し、それらを Next.js のアプリケーションにどのように統合するかを明らかにします。

Next.js と TypeScript で、Reactのイベント処理を学ぶ

Astro.js とは何か、そしてそれが既存のフロントエンドエコシステムにどのように適応するかについて深く掘り下げる。

華麗なるWebフレームワーク Astro の使い方


## TL;DR

この記事では、Next.js と TypeScript を活用し、API ルートの制作とその適用方法について詳しく説明します。API ルートは Next.js アプリケーションの一部で、エンドポイントとして機能します。ここでは、その作成方法と、クライアント側での使用方法を実例を通じて見ていきます。

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

### API ルートとは？

そもそも、API ルートとは、何なのか？ということですが、例えば、みなさんがお店で何かを買うとき、まず商品を選んで、レジに持って行き、お金を払って商品をもらいますよね。そのとき、お店の人が何をすべきかを知るために、レジがあるところに行くわけです。この「レジがあるところ」が、API ルートという考え方に似ています。

API ルートは、ウェブサイトやアプリが他のプログラムと「話す」ための特別な場所です。まるでレジのように、何かを要求したり、情報を得たりするための場所と言えます。例えば、あるアプリが天気の情報を必要とするとき、そのアプリは「天気情報の API ルート」に行って、天気の情報を尋ねます。

API ルートは、ウェブサイトやアプリが特定の情報を要求したとき、または何か特定のことをするように要求したときに、どのように応答するかを定義します。API ルートを通じて、ウェブサイトやアプリは他のプログラムやサービスと「会話」をすることができます。

例えば、私たちが天気予報アプリで今日の天気を調べるとき、天気予報アプリは「天気の API ルート」に行って「今日の天気は何ですか？」と尋ね、API ルートは「今日の天気は晴れです」と答えます。このように、API ルートはプログラム同士の会話を可能にしてくれるのです。

### Next.js の API ルート

API ルートは、Next.js に内蔵されたサーバーレス関数です。これらの関数は、`pages/api` ディレクトリ内の `.ts` ファイルとして配置され、そのファイルパスがエンドポイントの URL となります。このエンドポイントを通じて、データの取得やデータの更新など、クライアントからのリクエストに対応することができます。

わかりやすいように、シンプルなコードで解説します。

```tsx
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}
```

このコードは、Next.js で API ルートを作成するためのサンプルコードです。

handler のところは、API ルートを定義するための関数（handler）を宣言しています。Next.js はこのような形式の関数を API ルートとして認識します。

関数`handler`は 2 つの引数を取ります。

##### `req`（request）

これは API ルートへのリクエスト情報を含むオブジェクトで、リクエストに含まれるデータやリクエストの種類（GET、POST など）などを管理します。

##### `res`（response）

これはレスポンスを構築するためのオブジェクトで、API ルートからのレスポンスを送る際に用いられます。

```tsx
res.status(200).json({ name: 'John Doe' })
```

この行はレスポンスオブジェクト（`res`）を使って、クライアント（API ルートへのリクエストを行ったエンティティ）にレスポンスを送ります。

`res.status(200)`は、 HTTP ステータスコード 200 をレスポンスに設定しています。HTTP ステータスコード 200 は、「成功」を意味します。

`.json({ name: 'John Doe' })` は、レスポンスの内容を JSON 形式で送ります。この例では、`{ name: 'John Doe' }`という JSON を送っています。これは、"name"というキーの値として"John Doe"という文字列を持つ JavaScript のオブジェクトを、JSON として送信します。

最後に、関数の宣言を終了します。

以上のように、この API ルートはリクエストを受けると、必ずステータスコード 200 とともに、`{ name: 'John Doe' }`という JSON 形式のデータを返します。

この形式では、関数が直接エクスポートされているため、別の名前でインポートすることはできません（常に `handler` として扱われます）。

他にも、シンプルな API ルートを作成しましょう。以下のファイルは `pages/api/hello.ts` として保存します。

```tsx
import { NextApiRequest, NextApiResponse } from 'next'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ text: 'Hello' })
}

export default handler
```

このコードでは、`handler` 関数が API ルートを定義しています。この関数は、リクエストオブジェクト (`req`) とレスポンスオブジェクト (`res`) を引数に取り、レスポンスのステータスコードを `200` に設定し、レスポンスのボディに JSON を含めます。

#### 処理を分岐させる

次のコードは、API ルートにおいてリクエストの HTTP メソッド（GET、POST、PUT など）によって処理を分岐させている例です。

```tsx
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}
```

1 行目は、API ルートをハンドリングする関数を宣言しています。関数`handler`は引数としてリクエストオブジェクト`req`とレスポンスオブジェクト`res`を受け取ります。

2 行目では、リクエストオブジェクトの`method`プロパティを参照し、その値が`POST`であるかどうかを評価しています。HTTP メソッドが`POST`であれば、この`if`ブロック内のコードが実行されます。ここでは「// Process a POST request」のコメントが書かれていますが、実際には POST リクエストを処理する具体的なコードがこの位置に書かれることを期待しています。

逆に、HTTP メソッドが`POST`でなければ、4 行目の`else`ブロック内のコードが実行されます。この部分では、POST 以外のリクエストメソッド（GET、PUT、DELETE など）を処理するコードが記述されます。

以上のように、この関数は API ルートに送られてきたリクエストの HTTP メソッドによって、適切な処理を行います。これにより、一つの API ルートで複数の HTTP メソッドをハンドリングすることが可能となります。

[Routing: API Routes \| Next\.js](https://nextjs.org/docs/pages/building-your-application/routing/api-routes#use-cases)

### API ルートの実装

それでは、もっと複雑な例を見てみましょう。ユーザー情報を取得する API ルートを作成してみます。新しい API ルートは `pages/api/user.ts` というパスに保存します。

```tsx
import { NextApiRequest, NextApiResponse } from 'next'

type User = {
  name: string
  email: string
}

const handler = (req: NextApiRequest, res: NextApiResponse<User>) => {
  if (req.method === 'GET') {
    // ユーザー情報の偽装
    const user: User = {
      name: 'John Doe',
      email: 'john.doe@example.com',
    }

    res.status(200).json(user)
  } else {
    res.setHeader('Allow', ['GET'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

export default handler
```

ここで、`User` 型を定義し、それを `NextApiResponse` の型引数として使っています。これにより、この API ルートがユーザー情報を返すことを明示的に示しています。また、この API ルートは GET リクエストのみを許可し、それ以外のメソッドのリクエストに対しては 405 ステータスコードを返します。


Next.js と TypeScript を活用し、API ルートの制作とその適用方法を分かりやすく説明します。

2023-06-16

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

2023-06-13

Next.js と TypeScript で、REST API を学ぶ

2023-06-13

Next.js と TypeScript で、useContext を学ぶ

2023-06-13

Next.js と TypeScript で、useMemo を学ぶ

2023-06-12

Next.js と TypeScript で、useCallback の使い方を理解する

2023-06-10

Next.js と TypeScript で学ぶイベント処理「e.target.value」

2023-06-10

Next.js と TypeScript で、PWAを構築する

2023-06-10

Next.js と TypeScript で、Reactのイベント処理を学ぶ

2023-06-08

華麗なるWebフレームワーク Astro の使い方

2023-06-08

Next.js と TypeScript で、API ルートを学ぶ