
## TL;DR

このページでは、TypeScript の機能の一つである「export type」について具体的な実装方法を解説しますね。まずは基本からしっかりと理解し、その上で実際の Next.js プロジェクトに応用していきましょう。

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

### export type

TypeScript には、型情報を他のファイルに共有するための仕組みとして「export」が存在します。これを用いて、定義した型情報を外部のファイルから参照できます。そして、「export」には大きく分けて二つの種類があります。一つは「export」で、もう一つが「export type」です。

「export」は、変数、関数、クラス、型など様々な要素をエクスポートできます。一方、「export type」は型だけをエクスポートできる機能です。この「export type」を使用することで、コードの読み手に対して、「これは型情報だけをエクスポートしていますよ」と明示的に伝えることができます。

```tsx
// types.ts
export type User = {
  id: string
  name: string
}
```

### export interface

`export interface`は、TypeScript においてインターフェースを外部ファイルに共有するための方法です。これを使うことで他のファイルからそのインターフェースをインポートして利用することができます。インターフェースは、オブジェクトが持つべき構造を定義するのに用いられます。

以下に、`export interface`を使った例を示します。

```tsx
// types.ts
export interface IUser {
  id: string
  name: string
}

// pages/index.tsx
import { IUser } from '../types'

const HomePage = ({ user }: { user: IUser }) => {
  return (
    <div>
      <p>{user.name}</p>
    </div>
  )
}

export default HomePage
```

この例では、`types.ts`で`IUser`インターフェースを定義し、`export interface`を用いてそれを外部に公開しています。そして、`pages/index.tsx`ではその`IUser`インターフェースをインポートし、ユーザー情報を扱っています。

それでは、`export interface`を使ってインターフェースをエクスポートし、それを別のファイルからインポートする例を見てみましょう。

まず、`IUser`というインターフェースを`types.ts`というファイルで定義し、それをエクスポートします。

```tsx
// types.ts
export interface IUser {
  id: string
  name: string
}
```

次に、この`IUser`インターフェースを`App.tsx`というファイルでインポートします。

```tsx
// App.tsx
import { IUser } from './types'

const user: IUser = {
  id: '1',
  name: 'John Doe',
}

const App = () => {
  return (
    <div>
      <p>{`User Name: ${user.name}`}</p>
    </div>
  )
}

export default App
```

ここで、`IUser`インターフェースを使って`user`変数を定義しています。この`user`変数は、`id`と`name`プロパティを持つオブジェクトとして定義されています。これが`IUser`インターフェースの定義に一致しているため、TypeScript の型チェックを通過することができます。

なお、この`user`変数を`App`コンポーネントで利用して、ユーザーの名前を表示しています。

### export type と export interface の違い

実際には`export type`と`export interface`のどちらを使うかは開発者のスタイルやプロジェクトのルールに依存しますが、いくつか違いはあります。

- 拡張性： `interface`は拡張（extends）や実装（implements）が可能であるため、より複雑な型関係を表現するのに適しています。一方、`type`は主に既存の型を組み合わせて新しい型を定義するのに用いられます。
- 互換性： TypeScript の古いバージョンでは`interface`の方が多機能でしたが、TypeScript 2.7 以降では`type`も大抵の機能をサポートしています。
- 表現力： `type`は`interface`よりも表現力が高く、例えば Union 型や Intersection 型、タプル、リテラル型などを定義することができます。

そのため、実際の開発では、どちらを使うべきかは要件や利便性によるところが大きいです。また、`export type`があまり見かけないのは、TypeScript の早い段階では`interface`がより高機能であったため、既存のコードベースやスタイルガイドが`interface`を推奨している場合が多いからかもしれません。

### Next.js で、"export type" を実装

具体的な実装例を見てみましょう。以下に示すコードは Next.js でのページコンポーネントの一例です。User 型をエクスポートし、その型を利用してユーザーデータを扱います。

```tsx
// types.ts
export type User = {
  id: string
  name: string
}

// pages/index.tsx
import { User } from '../types'

const HomePage = ({ user }: { user: User }) => {
  return (
    <div>
      <p>{user.name}</p>
    </div>
  )
}

export default HomePage
```

このコードでは、`types.ts`から User 型をインポートし、HomePage コンポーネントの props として使用しています。このように、TypeScript では型情報を別ファイルに分けて管理し、必要な場所でインポートして使用することができます。

### export type を活用

さらに、「export type」を活用すると、より複雑な型の管理も可能になります。例えば、アプリケーションで使用するすべての型を一つのファイルで管理し、「export type」を用いて型情報を共有するという方法があります。

```tsx
// types.ts
export type User = {
  id: string
  name: string
}

export type Post = {
  id: string
  title: string
  author: User
}

// pages/index.tsx
import { User, Post } from '../types'

const HomePage = ({ user, post }: { user: User; post: Post }) => {
  return (
    <div>
      <p>{user.name}</p>
      <p>{post.title}</p>
    </div>
  )
}

export default HomePage
```

### Emotion で実装

Emotion を使って、「export type」を活用する場面を見てみましょう。Emotion を使用すると、props に基づいてスタイリングを動的に変更することが可能です。

```tsx
// styles.ts
import styled from '@emotion/styled'

export const UserCard = styled.div<{ isActive: boolean }>`
  padding: 20px;
  background: ${(props) => (props.isActive ? 'green' : 'red')};
`

// types.ts
export type User = {
  id: string
  name: string
  isActive: boolean
}

// pages/index.tsx
import { UserCard } from '../styles'
import { User } from '../types'

const HomePage = ({ user }: { user: User }) => {
  return (
    <UserCard isActive={user.isActive}>
      <p>{user.name}</p>
    </UserCard>
  )
}

export default HomePage
```

このコードでは、UserCard コンポーネントが受け取る props の型を明示的に定義しています。このように、「export type」を使うことで、コンポーネントが受け取る props の型を一元管理し、再利用することが可能です。これにより、型安全性が高まり、開発の効率が向上します。


Next.js と TypeScript を用いて、export type と interface を適切に使い分ける手法について詳しく解説します。

Next.js と TypeScript で学ぶ、export interface と type


## TL;DR

今日は「never 型」について話します。

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

### never 型とは？

never 型は、TypeScript では、「絶対に何も返さない」ときに使われる特殊な型です。なんだか難しそうですね。でも、実はとても便利な型なんです。

例えば、次のような関数を考えてみてください。

```tsx
function throwError(message: string): never {
  throw new Error(message)
}
```

この関数はエラーを投げるだけで、正常に終了することはないです。だから、この関数の戻り値の型は never になるんですね。

また、無限ループの関数も考えてみましょう。

```tsx
function infiniteLoop(): never {
  while (true) {}
}
```

この関数は終了しないので、戻り値の型は never になります。

never 型は、他のどんな型とも互換性がない特殊な型。だから、「この関数や処理は絶対に正常に終わらない」とコード上で表現することができるんです。

### void 型や never 型の違い

まず、TypeScript にはいくつかの特殊な型がありますが、その中に`void`型と`never`型があります。それぞれがどのような時に使われ、どのような意味を持つのかを説明します。

`void`型は、主に関数が特定の値を返さないことを表すために使用されます。具体的には、関数が値を返さず、`return`文を使わずに終了する場合に、その関数の戻り値の型として`void`を使います。

次に`never`型ですが、この型は、`void`型とは少し違った意味を持ちます。`never`型は、関数が絶対に正常に終了しないことを表すための型です。つまり、`never`型の関数は、例えばエラーを投げるか、無限ループするなど、必ず何らかの形で中断されます。

それぞれの違いを、具体的なコードを見ながら理解してみましょう。

```tsx
function sayHello(): void {
  console.log('Hello, world!')
  // この関数は値を返さない
}

function throwError(): never {
  throw new Error('This is an error!')
  // この関数は常にエラーを投げるため、正常に終了しない
}
```

上記の例で、`sayHello`関数は値を返さないため、戻り値の型として`void`が指定されています。一方、`throwError`関数はエラーを投げるため、常に中断されることを表す`never`型が戻り値として指定されています。

それぞれの型がどういったケースで使われるのか、具体的な例を見ていきましょうね。

#### void 型

`void`型は主に以下のようなケースで使われます。

ログを出力する関数: ログをコンソールに表示するだけで、特定の値を返す必要がない場合、その関数の戻り値は`void`になります。

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

イベントハンドラ: ボタンがクリックされたときや、フォームが送信されたときなど、特定のイベントが発生したときに実行する関数（イベントハンドラ）は、多くの場合、何も返す必要がありません。

```tsx
function handleClick(): void {
  alert('Button was clicked!')
}
```

#### never 型

一方、`never`型は以下のようなケースで使われます。

常にエラーをスローする関数: 何らかの理由で、特定の関数が呼び出されると常にエラーが発生する場合、その関数の戻り値は`never`になります。

```tsx
function alwaysThrowsError(): never {
  throw new Error('This function always throws an error')
}
```

無限ループ: 無限に処理を繰り返す関数や、特定の条件が満たされるまで処理を繰り返す関数でも、その条件が絶対に満たされないとわかっている場合、戻り値は`never`になります。

```tsx
function infiniteLoop(): never {
  while (true) {
    console.log('This is an infinite loop!')
  }
}
```

以上のように、それぞれの型は異なるケースで使われ、それぞれが異なる目的と機能を果たしています。この違いを理解することで、コードをより明確にし、意図しない動作を防ぐことができます。

これらの型を使うことで、関数の動作をより詳細に制御し、意図しない動作やエラーを防ぐことができるのです。`void`型と`never`型は似ているように見えますが、役割と使い方が大きく異なることを覚えておきましょうね。

### never 型は、どういうときに役立つのか？

`never`型は主に、以下のようなシーンで役立ちます。

#### エラーをスローする関数

`never`型は、関数が絶対に正常に終了しないことを示すのに役立ちます。例えば、エラーハンドリング用の関数などでよく使用されます。

```tsx
function throwError(message: string): never {
  // この関数は絶対に正常に終了しない
  throw new Error(message)
}
```

#### 絶対に終了しないループ

無限ループのように絶対に終了しないループも`never`型を返します。

```tsx
function infiniteLoop(): never {
  while (true) {
    // このループは絶対に終了しない
  }
}
```

#### 型ガード

TypeScript における型ガードでは、特定の型が期待する型であることを確認するための機能を提供します。`never`型は、全ての型のサブタイプとして、型ガードで非常に役立ちます。

```tsx
type Foo = { kind: 'foo'; foo: number }
type Bar = { kind: 'bar'; bar: number }
type Baz = Foo | Bar

function doSomething(arg: Baz) {
  switch (arg.kind) {
    case 'foo':
      return arg.foo
    case 'bar':
      return arg.bar
    default:
      const exhaustiveCheck: never = arg
      return exhaustiveCheck
  }
}
```

この`doSomething`関数では、`arg`が`Foo`型か`Bar`型かによって異なる値を返します。`default`のケースでは、`exhaustiveCheck`は`never`型として定義されていて、もし`Foo`か`Bar`以外の値が渡されるとコンパイルエラーが発生します。これによって、開発者が`Baz`型を更新して新たなサブタイプを追加した場合でも、それが`doSomething`関数で考慮されるようになります。

これらの例からわかるように、`never`型はコードが特定のパスを絶対に通らないことを明示するのに役立ちます。そのため、`never`型はエラーハンドリング、無限ループの作成、または型ガードといった、特定の動作を示す場合に特に有用です。

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

それでは、never 型を Next.js のコードでどう使うかを見てみよう。例えば、API のエラーハンドリングを考えてみましょう。

まずは、API からデータを取得する関数を作るね。エラーが発生した場合には never 型の関数を使ってエラーを投げます。

```tsx
// ファイル名: api.ts
type Data = {
  id: number
  name: string
}

function handleError(response: Response): never {
  throw new Error(`Failed to fetch data: ${response.status}`)
}

async function fetchData(): Promise<Data> {
  const response = await fetch('/api/data')

  if (!response.ok) {
    handleError(response)
  }

  const data: Data = await response.json()
  return data
}
```

次に、React コンポーネントでこの fetchData を呼び出します。

```tsx
// ファイル名: MyComponent.tsx
import { fetchData } from './api'

type Props = {
  /* props definition */
}

const MyComponent = ({}: Props) => {
  React.useEffect(() => {
    fetchData().catch((error) => console.error(error))
  }, [])

  return <div>My Component</div>
}
```

handleError 関数は never 型を返すので、正常に終了することはないよ。だから、もし fetchData がエラーを投げたら、それは catch でキャッチされてエラーメッセージがコンソールに表示されるんですね。

### never 型を実装

ここで、もう少し複雑な使い方を見てみよう。never 型は型安全を保つための有力なツールとなります。

たとえば、すべての TypeScript の型を網羅するような処理を書くときには、never 型が役立つんです。これを "exhaustive checking"（網羅的なチェック）と呼びます。

```tsx
type Animal = 'cat' | 'dog' | 'bird'

function getSound(animal: Animal): string {
  switch (animal) {
    case 'cat':
      return 'meow'
    case 'dog':
      return 'woof'
    case 'bird':
      return 'tweet'
    default:
      const unexpectedAnimal: never = animal
      throw new Error(`Unexpected animal: ${unexpectedAnimal}`)
  }
}
```

ここでは、Animal の型は "cat"、"dog"、"bird" の 3 つだけです。もし新しい動物を追加し忘れたら、never 型の unexpectedAnimal に割り当てられず、コンパイラがエラーを出すんです。これによって、すべての可能性を網羅したコードを書くことが強制され、バグを防げるんです。

### Emotion で実装

最後に、Emotion を使って、スタイルと never 型を組み合わせる例を見てみよう。CSS のプロパティ名と値を型安全に扱うために never 型を使います。

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

type CSSProperty = 'color' | 'background' | 'margin'
type CSSValue = 'red' | 'blue' | 'green' | '10px'

function getCSSValue(property: CSSProperty): CSSValue {
  switch (property) {
    case 'color':
      return

      'red'
    case 'background':
      return 'blue'
    case 'margin':
      return '10px'
    default:
      const unexpectedProperty: never = property
      throw new Error(`Unexpected property: ${unexpectedProperty}`)
  }
}

type Props = {
  property: CSSProperty
}

const MyStyledComponent = ({ property }: Props) => {
  const value = getCSSValue(property)
  const styles = css`
    ${property}: ${value};
  `

  return <div css={styles}>My Styled Component</div>
}
```

ここでは、getCSSValue 関数は CSS のプロパティ名に応じて適切な値を返すよ。もし存在しないプロパティ名を渡そうとしたら、never 型の unexpectedProperty に割り当てることができず、コンパイラがエラーを出すんです。これによって、CSS のプロパティ名と値が正しく組み合わされることを保証できます。


Next.js と TypeScript を活用し、never 型を理解し、実際に使えるようになるための解説をします。never 型の理解から、Next.js での実装例、さらにはEmotionとの連携まで、深く掘り下げて解説します。

Next.js と TypeScript で、never 型を学ぶ


## TL;DR

今回は「型推論」について一緒に楽しく学んでいきましょう！

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

### 「型推論」って何？

型推論っていうのは、コンピュータが魔法使いみたいになってくれて、我々が書くコードの「型」を自動的に判断してくれる技術です。これは TypeScript という言語に備わっている機能の一つなんですね。

まずは、「型」って何？から解説しましょう。「型」とは、数値や文字列など、データの種類を指す言葉です。例えば、数字の 5 は「数値型」、"hello" という文字は「文字列型」なんです。

```tsx
let number: number = 5 // これは「数値型」
let text: string = 'hello' // これは「文字列型」
```

さて、ここで型推論の出番です。TypeScript はスマートなので、我々が型を指定しなくても、自動的にそれを推測してくれます。

```tsx
let number = 5 // TypeScript はここが「数値型」だと推測してくれる
let text = 'hello' // ここは「文字列型」だと推測してくれる
```

こういう風に、型を明示的に書かなくても型を理解してくれるのが「型推論」の力です。

### 型推論を使えば、型を指定しなくてもよいのか？

型推論を使用すると、TypeScript はコードから変数の型を推測しようとします。このため、型宣言を必要としない場合があります。

しかし、これは型宣言が不要という意味ではありません。型推論は一部のシナリオで非常に有用ですが、常にすべてのケースで正確に型を推測できるわけではありません。また、明示的な型宣言はコードの可読性を向上させ、あなたの意図を明確に伝えることができます。

たとえば、以下のコードでは、TypeScript は`result`の型を推測できます。

```typescript
const add = (a: number, b: number) => {
  return a + b
}

const result = add(1, 2)
```

この場合、`result`は`add`関数の結果を保持しているため、TypeScript はそれが`number`型であると自動的に推測します。そのため、`result`の型を明示的に宣言する必要はありません。

しかし、型推論は常に十分ではない場合があります。例えば、関数の引数や複雑なオブジェクトについては、引数の型やオブジェクトの形状を明示的に宣言したほうが良い場合があります。これにより、エラーを早期にキャッチしたり、関数が何を期待しているのかを他の開発者に明確に伝えることができます。

要するに、型推論は非常に有用ですが、それだけに依存するのではなく、適切な場所で明示的な型宣言を行うことが、TypeScript を最大限に活用するための良い戦略です。

次の例を見てみましょう。

```tsx
const a = 2 + 3
```

上の例では、数値 2 と 3 を加算しています。その結果を変数`a`に格納しています。しかし、このコードには明示的な型宣言がありません。それでも TypeScript は型推論の力を使って、`a`の型が`number`であると自動的に認識します。

なぜなら、JavaScript（そして TypeScript も）は、2 と 3 のようなリテラル値が数値であると認識し、それらを加算するときに結果もまた数値になると理解しているからです。

そのため、次のように書いても結果は同じです。

```tsx
const a: number = 2 + 3
```

ただし、この場合は`a`の型を明示的に指定しています。このように型を明示的に書くことで、もし間違えた値を代入しようとした場合、TypeScript が型チェックを行い、エラーを通知してくれます。

TypeScript の型推論は、我々が明示的に型を書かなくても、適切な型を TypeScript が推測してくれるという強力な機能です。しかし、コードの可読性や型の安全性を確保するために、場合によっては型を明示的に書くことも重要です。

### リテラルと型の対応表

それぞれのリテラルとその対応する TypeScript の型を示した表を以下に作成しました。

| リテラル       | TypeScript の型 |
| :------------- | :-------------- |
| `"Hello"`      | string          |
| `123`          | number          |
| `true / false` | boolean         |
| `{}`           | object          |
| `null`         | null            |
| `undefined`    | undefined       |
| `[]`           | any[]           |
| `["Hello"]`    | string[]        |
| `[123, 456]`   | number[]        |

上記表は一部を表しています。TypeScript では複雑な型も表現できます。たとえばオブジェクトや配列の中にさまざまな型の値を格納することができます。また、カスタム型を定義することも可能です。

```tsx
// オブジェクトの例
const obj: { name: string; age: number } = { name: 'Alice', age: 20 }

// 配列の例
const arr: (string | number)[] = ['Alice', 20]
```

このように、TypeScript は JavaScript の動的な型システムに静的型付けの能力を加えることで、より安全で予測可能なコードを書くのを助けてくれます。

### コンポーネント呼び出し先の型推論

TypeScript は React コンポーネントの開発においても強力なツールとなります。特に、コンポーネントの props（プロパティ）に型を付けることで、エラーを早期に検出するのに役立ちます。また、コンポーネントが期待する props の型を明示的に示すことで、他の開発者がコンポーネントを正しく使う助けにもなります。

次に示すように、TypeScript で React コンポーネントを作るときには、まずコンポーネントが受け取る props の型を定義します。

```tsx
type ButtonProps = {
  onClick: () => void
  label: string
}

const Button = ({ onClick, label }: ButtonProps) => <button onClick={onClick}>{label}</button>
```

ここで、`ButtonProps`という型を定義し、それを`Button`コンポーネントに適用しています。この`ButtonProps`は 2 つのフィールドを持っています：`onClick`は関数であり、`label`は文字列です。

さて、このコンポーネントを呼び出すとき、TypeScript の型推論が役立ちます。

```tsx
<Button onClick={() => console.log('clicked!')} label="Click me" />
```

このコードを見て、TypeScript は`Button`コンポーネントが期待する props の型（つまり`ButtonProps`）を見て、渡された props がそれと一致するかどうかを確認します。この場合、`onClick`と`label`の両方が適切な型で提供されているため、問題ありません。

しかし、もし`label`として数値を渡そうとすると、

```tsx
<Button onClick={() => console.log('clicked!')} label={123} />
```

ここで、TypeScript は`Button`コンポーネントが`label`として文字列を期待していることを知っているので、型エラーをすぐに報告します。これにより、開発者はコードをデプロイする前にこのエラーを修正できます。

このように、TypeScript の型推論はコンポーネントの props の型の一貫性を保つための強力なツールとなります。

### Next.js で、「型推論」を使う

さて、Next.js の中で型推論をどのように使っていくか見ていきましょう。まずは、簡単なコンポーネントを作ってみよう。

```tsx
// pages/index.tsx

type Props = {
  name: string
}

const HomePage = ({ name }: Props) => {
  return <div>Hello, {name}!</div>
}

export default HomePage
```

このコンポーネントは、`name` というプロパティを受け取り、それを画面に表示するようになっています。`name` の型は `string`（文字列型）となっています。

この `HomePage` コンポーネントは、Next.js が自動的に `/` のパスで表示されるようになります。そして、`name` プロパティを渡すことで、「Hello, [name]!」と表示されます。

さて、ここで型推論の力を見せる時がきました。`HomePage` コンポーネントに `name` プロパティを渡す時、TypeScript はその型を推測してくれます。

```tsx
// pages/index.tsx

const HomePage = ({ name }) => {
  // TypeScript は `name` が `string` 型だと推測してくれます
  return <div>Hello, {name}!</div>
}

export default HomePage
```

このように、型推論を利用すれば、コードをシンプルに保ちつつ、安全性を確保することができます。

### 「型推論」を使うテクニカルな例

型推論は、もっと複雑な場面でも役立ちます。例えば、関数の引数や戻り値の型を自動的に推測することができます。次の例を見てみましょう。

```tsx
// utils/calculate.ts

type CalculateProps = {
  num1: number
  num2: number
}

const calculateSum = ({ num1, num2 }: CalculateProps) => {
  return num1 + num2
}

export default calculateSum
```

この `calculateSum` 関数は、`num1` と `num2` を受け取り、その和を返します。TypeScript は、この関数の引数と戻り値の型を自動的に推測してくれます。

```tsx
// utils/calculate.ts

const calculateSum = ({ num1, num2 }) => {
  // TypeScript は引数の型と戻り値の型を推測してくれます
  return num1 + num2
}

export default calculateSum
```

これにより、関数を使う側は、引数と戻り値の型を意識せずにコーディングを進めることができます。型推論は、より良い開発体験を提供します。

### Emotion での実装

最後に、Emotion を用いた型推論の活用例を見ていきましょう。Emotion は、CSS-in-JS のライブラリで、スタイルの定義も JavaScript で行います。これにより、型推論の恩恵を受けられます。

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

type ButtonProps = {
  color: string
}

const Button = ({ color }: ButtonProps) => {
  return (
    <button
      css={css`
        background-color: ${color};
      `}
    >
      Click me
    </button>
  )
}

export default Button
```

この `Button` コンポーネントは、`color` プロパティを受け取り、それを背景色に適用します。TypeScript は `color` プロパティの型を自動的に推測します。

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

const Button = ({ color }) => {
  // TypeScript は `color` が `string` 型だと推測してくれます
  return (
    <button
      css={css`
        background-color: ${color};
      `}
    >
      Click me
    </button>
  )
}

export default Button
```

Emotion を使っている場合でも、TypeScript の型推論はしっかりと機能します。これにより、スタイリングに関するコードも、より簡潔で安全に保つことができます。

以上が、Next.js と TypeScript を組み合わせた際の、型推論の利用例となります。初心者でもわかるように解説してきましたが、どうでしょうか？型推論は、コードの安全性を確保しつつ、コードをシンプルに保つ強力なツールです。是非、あなたのコーディングに活用してみてくださいね！


Next.js と TypeScript を使った型推論の使い方について、エンジニアの視点から初学者にも理解できるように解説します。

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


## 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) の構築とそれに伴う深い理解を目指します。

2023-06-19

Next.js と TypeScript で学ぶ、export interface と type

2023-06-18

Next.js と TypeScript で、never 型を学ぶ

2023-06-16

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

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を構築する