
## 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 ルートの制作とその適用方法を分かりやすく説明します。

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


## TL;DR

この記事では、Next.js と TypeScript を使用して Fetch API の活用について詳細に解説します。データ取得についても語りますが、主なテーマは Fetch API の効果的な利用方法です。Web 開発の現場で直面する問題を解決するための具体的な実装例を含みます。

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

### Fetch API の基礎

Fetch API とは、JavaScript の標準的な API で、非同期的にリソースを取得するためのものです。多くの Web API やデータベースと通信するための基本的な方法ですね。Promise をベースに動作していて、非同期操作を管理するためのインターフェースを提供します。

#### fetch()

fetch()をわかりやすく解説すると、私たちがパソコンやスマホでウェブサイトを見るときに、そのウェブサイトの情報を取ってくるためのツールのようなものです。

例えば、あなたが遊んでいるゲームアプリがあったとしましょう。そのゲームが進行するたびに、スコアやランキングなどの情報を保存しておく場所が必要ですよね。この情報は、ゲームを作った人たちが管理しているコンピュータ（これをサーバーと呼びます）に保存されます。

さて、あなたがゲームの中で新しいハイスコアを出したとしましょう。その情報をサーバーに送り、自分のスコアが他のプレイヤーと比べてどのくらい高いのか（ランキング）を知りたくなりますよね。そのときに使われるのが、この fetch()なのです。

あなたのゲームアプリは fetch()を使ってサーバーに「ハイスコアの情報をください」というリクエストを送ります。すると、サーバーはそのリクエストに応じてハイスコアの情報を返します。その情報をもとに、あなたのゲームアプリはあなたのスコアがどのくらい高いのかを表示できます。

つまり、fetch()は「情報を取ってきてください」というリクエストをサーバーに送り、その結果を受け取る役割を果たすツールと言えます。

以下に fetch() を使ってウェブからデータを取得する非常に簡単な例を示します。

```tsx
fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error))
```

この例では、`fetch()` 関数を使って "https://api.example.com/data" という URL からデータを要求しています。`fetch()` 関数は Promise を返すため、その結果（Response オブジェクト）を `then()` メソッドで受け取ります。

`response.json()` は、取得したデータを JSON 形式に変換します。これも Promise を返すため、`then()` メソッドを再度使って、変換後のデータ（ここでは `data`）を取り出します。最後に、`console.log(data)` で取得したデータをコンソールに表示しています。

なお、データ取得や JSON 形式への変換に問題が発生した場合は、`catch()` メソッドが呼び出され、エラーメッセージが表示されます。

#### 使い所

fetch()関数は、ウェブサイトやウェブアプリケーションで外部の API（他のウェブサービスから提供される機能）を利用する場合や、自身のサーバーからデータを取得する場合に用いられます。以下に具体的な使用例をいくつか挙げてみます。

天気予報 API を利用して天気情報を取得する: 自身のウェブサイトに天気予報を表示したい場合、fetch()を使って天気予報 API から天気情報を取得し、ウェブサイト上に表示することができます。

ブログ投稿のデータを自身のサーバーから取得する: 自身のブログウェブサイトで各ブログ投稿のデータを表示する場合、fetch()を使って自身のサーバーから各投稿のデータを取得し、それをウェブサイト上に表示することができます。

SNS の投稿を一覧表示する: SNS アプリケーションでユーザーの投稿を一覧表示する場合、fetch()を使ってサーバーから投稿データを取得し、それをアプリケーション上に表示することができます。

以上のように、ウェブサービスにおいて、他のサービスや自身のサーバーからデータを取得する必要がある場合に fetch()が活用されます。

### Next.js で実装

それでは、Next.js で実装してみましょう。

```tsx
// ファイル名： components/FetchExample.tsx
import React, { useEffect, useState } from 'react'

type Props = {
  url: string
}

type Data = {
  // your data type here
}

const FetchExample = ({ url }: Props): JSX.Element => {
  const [data, setData] = useState<Data | null>(null)

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [url])

  if (!data) return <div>Loading...</div>

  // Assuming data is an array for this example
  return (
    <ul>
      {data.map((item) => (
        <li>{/* display your data here */}</li>
      ))}
    </ul>
  )
}
```

このコードを解説しましょう。これは Next.js と TypeScript を用いて Fetch API を活用したデータ取得の一例です。ファイル名 `FetchExample.tsx` から見て取れる通り、`FetchExample` というコンポーネントが定義されています。

それでは、コードを一つずつ解説していきましょう。

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

ここでは React のフック、`useState` と `useEffect` をインポートしています。これらは、それぞれ状態管理と副作用の制御に利用されます。

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

type Data = {
  // your data type here
}
```

ここでは、2 つの型を定義しています。`Props` は `FetchExample` コンポーネントが受け取るプロパティの型を表し、`Data` は取得するデータの型を表します。

```tsx
const FetchExample = ({ url }: Props): JSX.Element => {
  const [data, setData] = useState<Data | null>(null)
```

`FetchExample` コンポーネントが始まります。`useState` フックを使って `data` という状態と、それを更新するための `setData` 関数を定義しています。初期値は `null` となっています。

```tsx
useEffect(() => {
  fetch(url)
    .then((response) => response.json())
    .then((data) => setData(data))
}, [url])
```

`useEffect` フックを使っています。このフックの中で Fetch API を用いてデータを取得しています。取得したデータは JSON 形式に変換され、その後 `setData` 関数を用いて `data` 状態が更新されます。

```tsx
if (!data) return <div>Loading...</div>
```

データがまだ取得できていない（つまり、`data` が `null` のまま）場合、"Loading..." と表示されることを表します。

```tsx
// Assuming data is an array for this example
return (
  <ul>
    {data.map((item) => (
      <li>{/* display your data here */}</li>
    ))}
  </ul>
)
```

最後に、取得したデータをリスト形式で表示しています。ここでは、データが配列であると仮定しています。`map` メソッドを使って、配列の各要素に対して `<li>` 要素を生成し、その中に各データを表示します。どのようにデータを表示するかは、データの形式によります。

### Fetch API の活用

基本的な Fetch API の使用方法を理解したところで、Next.js と TypeScript の組み合わせて Fetch API を活用する方法について見ていきましょう。

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

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

export default handler
```

上記のコードでは、Next.js の API ルートを作成し、Fetch API から呼び出すことができます。その後、フロントエンドからこの API を呼び出す方法を見ていきます。

```tsx
// ファイル名: pages/index.tsx
import React, { useEffect, useState } from 'react'

type Data = {
  name: string
}

const Home = () => {
  const [data, setData] = useState<Data | null>(null)

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

  if (!data) return <div>Loading...</div>

  return <div>{data.name}</div>
}

export default Home
```

### 高度な Fetch API の使用例

Fetch API をより高度に使う方法について見ていきましょう。ここでは、エラーハンドリングとリトライロジックを追加します。

```tsx
// ファイル名: utils/fetchWithRetry.ts
async function fetchWithRetry(url: string, retries: number): Promise<any> {
  try {
    const response = await fetch(url)
    const data = await response.json()
    return data
  } catch (error) {
    if (retries === 1) throw error
    return fetchWithRetry(url, retries - 1)
  }
}

export default fetchWithRetry
```

ここでは、`fetchWithRetry` 関数を作成し、エラーが発生したときに再試行するロジックを追加しています。これを利用すると、ネットワークの一時的な問題が発生したときでも、アプリケーションが適切に動作するようになります。


Next.js と TypeScript を組み合わせて Fetch API を使うことにより、データを非同期に取得する方法を詳しく解説します。

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


## TL;DR

エンジニアの方であれば、自分で管理画面を作ったり、VSCode とマークダウンで記事を作成するでしょうから CMS は不要かと思います。しかし、管理画面から記事を投稿したい人や、マークダウンを扱えないクライアントさんには、CMS を使う必要があります。

この記事では、Next.js 13~ と TypeScript による microCMS の 2023 年 6 月現在の導入方法について解説します。実際のコードを交えながら、microCMS の基本的な使い方から、より高度な実装方法までをカバーします。

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

### microCMS の基本

microCMS とは、ヘッドレス CMS（Content Management System）の一つです。ヘッドレス CMS とは、フロントエンドとバックエンドが完全に分離された CMS のことを指します。これにより、データの入力と表示が分離され、任意のフロントエンドでデータを表示することができます。

microCMS は API によるデータの取得が可能で、これにより JavaScript のフレームワークである Next.js からデータを取得し、ウェブサイト上に表示することが可能となります。

### microCMS でブログを作成する

microCMS の管理画面に入ります。

1. 管理画面の左 > コンテンツ（API）の「＋」をクリック > 「カテゴリ API」を作成
2. API 名 > 「ブログ」、エンドポイント名を「blog」と指定
3. API スキーマ > フィールド ID > 「title」、表示名を「タイトル」
4. API スキーマ > フィールド ID > 「content」、表示名を「内容」
5. API スキーマ > フィールド ID > 「eyecatch」、表示名を「アイキャッチ」、種類を「画像」

そして、画面右上の API プレビューをクリックすると、情報が表示されますので、X-MICROCMS-API-KEY の右に書いてあるキーをコピーしておきます。

### microCMS でカテゴリの作成

1. 管理画面の左 > コンテンツ（API）の「＋」をクリック > 「カテゴリ API」を作成
2. API 名 > 「カテゴリ」、エンドポイント名を「 categories」と指定
3. API スキーマ > フィールド ID > 「name」、表示名を「カテゴリ名」
4. API スキーマ > フィールド ID > 「slug」、表示名を「スラッグ」

次にブログの API に再度移動して

1. API スキーマのフィールド ID を「category」、表示名を「カテゴリ」、種類を「複数コンテンツ参照 - カテゴリ」

「複数コンテンツ参照」にすることで複数のカテゴリを設定できます。

これでブログとカテゴリの結びつきができました。

### Next.js

Next.js をインストールします。プロジェクト名は、micro-cms とします。

```bash
npx create-next-app@latest micro-cms
```

microcms-js-sdk をインストールします。

```bash
npm install --save microcms-js-sdk
```

ルートに、lib/client.ts を作成し、次のように記述します。

```ts
import { createClient } from "microcms-js-sdk";

export const client = createClient({
  serviceDomain: process.env.SERVICE_DOMAIN || "",
  apiKey: process.env.API_KEY || "",
});
```

また、ルートに.env.development.local を作成し、先程コピーした microCMS の情報を書き込みます。API_KEY の横に、コピーしたキーを追加し、SERVICE_DOMAIN の横には、microCMS 管理画面の左上にあるドメインを追加します。

```bash
API_KEY=ここにX-MICROCMS-API-KEY の右に書いてあるキーを貼り付けます
SERVICE_DOMAIN=microCMSで発行されたドメイン名を貼り付けます
```

#### ビルドエラー 「check serviceDomain and apiKey」

ビルド時に以下のようなエラーがでることがあります。

```bash
info Collecting page data ...Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient
```

`.env.development.local`の設定は通常、開発時（next dev）にしか適用されません。ビルド（next build）をローカルで行っている場合、それらの環境変数が適用されない可能性があります。

対処法としては.env.local という名前の新しいファイルを作成し、.env.development.local の内容をそのままコピーします。これでビルド時にも環境変数が適用されて、ビルドエラーが解決します。

### ブログ一覧ページ

pages/blog/index.tsx を作り、次のように編集します。

```tsx
// src/pages/blog/index.tsx
import Link from "next/link";
import { client } from "lib/client";

type Category = {
  id: string;
  name: string;
};

type Blog = {
  id: string;
  title: string;
  category: Category[];
};

const Blog = ({ blog }: { blog: Blog[] }) => {
  return (
    <div className="content">
      {blog.map((blogItem) => (
        <div key={blogItem.id}>
          <ul>
            <li>
              {blogItem.category.map((categoryItem: Category) => (
                <Link
                  key={categoryItem.id}
                  href={`/categories/${categoryItem.id}`}
                >
                  {categoryItem.name}
                </Link>
              ))}
            </li>
          </ul>
          <h3 className="mb-10">
            <Link href={`/blog/${blogItem.id}`}>{blogItem.title}</Link>
          </h3>
        </div>
      ))}
    </div>
  );
};

export default Blog;

export const getStaticProps = async () => {
  const blogData = await client.get({ endpoint: "blog" });

  return {
    props: {
      blog: blogData.contents,
    },
  };
};
```

### Image コンポーネントを使用する

Next.js の next/image を使用して外部の画像を最適化するには、 next.config.js ファイルにその画像のホストを設定する必要があります。これは、不適切な画像のリンクや潜在的に危険な URL を防ぐためのセキュリティ対策です。next.config.js を以下のように編集してみてください。

```js
/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["images.microcms-assets.io"],
  },
};
```

### 詳細ページ

詳細ページを作ります。タイトル、カテゴリー、アイキャッチ画像、本文を表示します。次のコードは Next.js と microCMS を使ってブログ記事を表示するためのものです。

```tsx
// src/pages/blog/[id].tsx
import { client } from "lib/client";
import Image from "next/image";
import Link from "next/link";

type Eyecatch = {
  url: string;
  height: number;
  width: number;
};

type Category = {
  id: string;
  name: string;
};

type Blog = {
  id: string;
  title: string;
  publishedAt: string;
  content: string;
  category: Category[];
  eyecatch: Eyecatch;
};

export default function BlogId({ blog }: { blog: Blog }) {
  const date = new Date(blog.publishedAt).toLocaleDateString();

  return (
    <main className="content">
      {blog.eyecatch && (
        <Image
          src={blog.eyecatch.url}
          alt="blog eyecatch"
          width={blog.eyecatch.width}
          height={blog.eyecatch.height}
        />
      )}
      <h1>{blog.title}</h1>
      <p>{date}</p>
      {blog.category &&
        blog.category.map((categoryItem) => (
          <p key={categoryItem.id}>
            <Link href={`/categories/${categoryItem.id}`}>
              {categoryItem.name}
            </Link>
          </p>
        ))}
      {blog.content && (
        <div
          dangerouslySetInnerHTML={{
            __html: `${blog.content}`,
          }}
        />
      )}
    </main>
  );
}

export const getStaticPaths = async () => {
  const data = await client.get({ endpoint: "blog" });

  const paths = data.contents.map((content: Blog) => `/blog/${content.id}`);
  return { paths, fallback: false };
};

export const getStaticProps = async (context: { params: { id: string } }) => {
  const id = context.params.id;
  const data = await client.get({ endpoint: "blog", contentId: id });
  //console.log(data) // ここで取得したデータをログ出力

  return {
    props: {
      blog: data,
    },
  };
};
```

それでは、それぞれの部分について詳しく見ていきましょう。

#### モジュールのインポートと型定義

最初の部分では、必要なモジュールをインポートしています。また、取得したブログ記事のデータに対する型を定義しています。`Blog`型は一つのブログ記事を表し、`Eyecatch`型は記事のアイキャッチ画像に関する情報を表しています。

#### `BlogId`コンポーネント

`BlogId`は React の関数コンポーネントで、ブログ記事を表示するためのものです。props として`blog`を受け取り、記事のアイキャッチ画像、タイトル、日付、カテゴリー名、そして本文を表示します。本文は HTML 形式で取得されるため、`dangerouslySetInnerHTML`属性を使っています。

#### `getStaticPaths`関数

この関数は Next.js の静的生成（Static Generation）に必要なもので、生成すべきパスのリストを返します。ここではまず`client.get`を使って全てのブログ記事を取得し、その結果から各記事に対応するパス（`/blog/<記事のID>`）を生成しています。

#### `getStaticProps`関数

この関数も Next.js の静的生成に必要なもので、各パスに対する props（ここでは`blog`）を返します。ここでは引数の`context`から記事の ID を取り出し、それを使って`client.get`でその記事のデータを取得しています。

### ドキュメント

以上、microCMS と Next.js を使ってブログを作成する方法を説明しました。詳しいサービスの使い方は、[Next\.js との連携｜ microCMS ドキュメント](https://document.microcms.io/tutorial/next/next-top)を参照してください。


Next.js と TypeScript を使用し、サーバレスなヘッドレス CMS、microCMS の導入方法を詳しく解説します。

Next.js と TypeScript で、microCMS を導入する流れ


## TL;DR

この記事では、TypeScript のリテラル型という便利な機能と、それを Next.js の開発にどのように活用できるかについて詳しく見ていきます。

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

### リテラル型とは？

リテラル型とは、TypeScript の機能の一つで、特定の決まった値のみを持つことができる型を表します。例えば、`type Direction = "north" | "south" | "east" | "west"`とすると、`Direction`型はこの 4 つの値しか受け取ることができません。

リテラル型という言葉は少し難しそうに聞こえますが、実際にはとてもシンプルな概念です。言葉の遊びで考えてみましょう。

例えば、「好きな色は何？」という質問があります。そして答えは「赤」、「青」、「緑」の中から選べるとします。これはちょっとしたクイズのようなものですね。

TypeScript のリテラル型もこれと同じ考え方です。型（つまり答え方のルール）が「赤」、「青」、「緑」のどれかと指定されています。だから、「黄色」や「紫」と答えることはできません。

他に、例えば学校の給食について考えてみましょう。

ある日の給食で、メインのおかずは「カレー」、「ハンバーグ」、「天ぷら」の 3 つから選べるとします。この選択肢は「カレー」、「ハンバーグ」、「天ぷら」のみに限られていて、「寿司」や「ピザ」は選べません。これがリテラル型の考え方と似ています。

TypeScript でのリテラル型は、特定の値しか許さない型を定義します。例えば、以下のような型を考えてみましょう。

```tsx
type Lunch = 'カレー' | 'ハンバーグ' | '天ぷら'
```

ここで定義した`Lunch`型は、「カレー」、「ハンバーグ」、「天ぷら」のいずれかの値しか取れません。つまり、「寿司」や「ピザ」を`Lunch`型の値として使おうとすると、TypeScript はエラーを出してくれます。これにより、プログラムに間違った値が設定されるのを防ぐことができます。

他にも、交通信号の色を表す型を定義する例です。

```tsx
type TrafficLight = 'Red' | 'Yellow' | 'Green'
```

この`TrafficLight`型では、「Red」、「Yellow」、「Green」の 3 つの値しか許されません。これは交通信号がこれら 3 つの色しか持たないからです。もし、「Blue」や「Purple」を`TrafficLight`型の値として使おうとすると、TypeScript はエラーを出してくれます。

また、オブジェクトのプロパティの型としてリテラル型を使うこともできます。例えば、特定のユーザーの役割を管理する場合にリテラル型を利用できます。

```tsx
type UserRole = 'Admin' | 'User' | 'Guest'

type User = {
  name: string
  role: UserRole
}

const user: User = {
  name: 'Taro',
  role: 'Admin', // "Admin"、"User"、"Guest"のいずれか
}
```

このように、リテラル型を使うと、プログラムがどんな答えを出すべきか、またはどんな答えを受け取るべきかを厳密に決めることができます。これにより、プログラムが予期しない答え（たとえば「黄色」や「紫」）を出したり受け取ったりするのを防ぐことができます。

これはプログラムを作るときにとても役立ちます。なぜなら、プログラムは指示された通りにしか動かないからです。リテラル型を使うと、プログラムがどんな指示を受け取り、どんな結果を出すべきかを明確にすることができます。

### Next.js で、リテラル型を実装

それでは、Next.js のプロジェクトでリテラル型を使ってみましょう。次の例では、リテラル型を用いてボタンコンポーネントの色を制御します。

`components/Button.tsx`

```tsx
type ButtonProps = {
  color: 'primary' | 'secondary'
}

const Button = ({ color }: ButtonProps) => {
  return <button className={color}>{color}</button>
}
```

`pages/index.tsx`

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

export default function HomePage() {
  return (
    <div>
      <Button color="primary" />
      <Button color="secondary" />
    </div>
  )
}
```

この例では、`Button`コンポーネントは`color`プロパティを受け取ります。`color`プロパティの型はリテラル型で、「primary」または「secondary」のいずれかの値を持つことができます。

### リテラル型を実装

リテラル型は、コンポーネント間のコミュニケーションをより堅牢にし、バグを防ぐための強力なツールです。また、他の型と組み合わせて、更に複雑な型を構築することも可能です。

```tsx
type Size = 'small' | 'medium' | 'large'
type ButtonProps = {
  color: 'primary' | 'secondary'
  size: Size
}

const Button = ({ color, size }: ButtonProps) => {
  return <button className={`${color} ${size}`}>{color}</button>
}
```

この例では、`Size`型を定義し、それを`ButtonProps`型で使用しています。これにより、ボタンのサイズを制御する新たな`size`プロパティが追加されました。

### Emotion で実装

CSS-in-JS ライブラリの一つである Emotion を使うと、リテラル型を活用して動的なスタイリングが可能になります。以下の例では、リテラル型を用いてボタンコンポーネントの色とサイズを制御します。

`components/Button.tsx`

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

type Size = 'small' | 'medium' | 'large'
type ButtonProps = {
  color: 'primary' | 'secondary'
  size: Size
}

const Button = ({ color, size }: ButtonProps) => {
  const styles = css`
    background-color: ${color === 'primary' ? 'blue' : 'gray'};
    padding: ${size === 'small' ? '5px' : size === 'medium' ? '10px' : '15px'};
  `

  return <button css={styles}>{color}</button>
}
```

この例では、Emotion の`css`関数を使って、`color`と`size`プロパティに基づいて動的にスタイルを生成しています。リテラル型の強力さを活用して、開発者が意図した値のみが使用されることを保証し、コードの堅牢さを向上させます。


Next.js と TypeScript の強力な組み合わせを使い、リテラル型の高度な活用方法を解説します。

Next.js と TypeScript で、リテラル型を学ぶ


## TL;DR

このページでは、Next.js と TypeScript を用いた Enum 型の実装方法について解説します。初心者から上級者まで、Enum 型の理解を深めるための情報を提供します。

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

### Enum 型とは何か？

Enum（enumerated）型は、名前付きの定数の集合を定義するための特殊な型です。主に一連の関連する値を一緒にグループ化する際に使われます。Enum 型を用いると、プログラム全体で一貫した値を保証でき、誤って期待外の値を割り当てることを防ぐことができます。

Enum 型は、英語の "Enumeration"（列挙）から来ています。これは、プログラム内で使用する一連の関連した値を名前で列挙（リストアップ）するための特殊な型です。それぞれの値は、プログラムの中で一意（他と重ならない）であることが保証されています。

例えば、Enum 型は「モンスターカード」のようなものです。例えば、"ファイヤードラゴン"、"ウォーターナイト"、"アースウィザード" など、それぞれのモンスターカードは一意の名前を持っていますよね。そして、これらのモンスターカードの集まりが Enum 型に相当します。つまり、Enum 型を使うと、それぞれ異なる特性を持つモンスターカードを一つのグループとして管理することができます。

この Enum 型が生まれた理由は、コードの安全性と可読性を向上させるためです。Enum 型を使うことで、プログラム内で一貫した値を使うことを強制でき、予期せぬエラーを防ぐことができます。また、Enum 型は名前がつけられているため、何を表しているのかが直感的にわかりやすくなります。

以上のように、Enum 型はコードを安全で読みやすくするために、とても便利な機能です。

例として、以下にフルーツの Enum 型を定義した TypeScript コードを見てみましょう。

```tsx
enum Fruit {
  Apple = 'APPLE',
  Banana = 'BANANA',
  Orange = 'ORANGE',
}

console.log(Fruit.Apple) // Output: 'APPLE'
```

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

具体的に、Enum 型を Next.js と TypeScript でどのように活用するか見てみましょう。以下のコードは、フルーツの色を判定する Enum を使ったコンポーネントの実装です。

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

```tsx
import React from 'react'

enum Fruit {
  Apple = 'APPLE',
  Banana = 'BANANA',
  Orange = 'ORANGE',
}

type FruitColorProps = {
  fruit: Fruit
}

const FruitColor = ({ fruit }: FruitColorProps) => {
  let color: string

  switch (fruit) {
    case Fruit.Apple:
      color = 'red'
      break
    case Fruit.Banana:
      color = 'yellow'
      break
    case Fruit.Orange:
      color = 'orange'
      break
    default:
      color = 'unknown'
      break
  }

  return (
    <div>
      The color of the {fruit} is {color}.
    </div>
  )
}

export default FruitColor
```

このコードでは、Enum 型 `Fruit` が定義されており、それぞれのフルーツにそれぞれの色を割り当てています。`FruitColor` コンポーネントは `Fruit` 型の `fruit` プロパティを受け取り、それに応じて色を判定しています。

### Enum 型の活用法

Enum 型を使うことで、プログラムの安全性と可読性を向上させることができます。具体的な応用例として、API のレスポンスステータスを管理するための Enum 型を見てみましょう。

```tsx
enum HttpStatus {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  InternalServerError = 500,
}

type ApiResponseProps = {
  status: HttpStatus
}

const ApiResponse = ({ status }: ApiResponseProps) => {
  let message: string

  switch (status) {
    case HttpStatus.OK:
      message = 'The request was successful.'
      break
    case HttpStatus.BadRequest:
      message = 'The request was invalid.'
      break
    case HttpStatus.Unauthorized:
      message = 'You are not authorized to perform this action.'
      break
    case HttpStatus.InternalServerError:
      message = 'Something went wrong on our end.'
      break
    default:
      message = 'An unknown error has occurred.'
      break
  }

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

export default ApiResponse
```

このコードでは、HTTP ステータスコードを Enum 型で定義し、それに応じてメッセージを制御しています。これにより、ステータスコードが一貫した値を持つことを保証し、誤ったステータスコードを割り当てるリスクを軽減できます。

### Emotion を使ったスタイリング

Enum 型を使ったスタイリングも可能です。Emotion を使うと、Enum 型で定義したフルーツごとに異なるスタイルを適用することができます。

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

enum Fruit {
  Apple = 'APPLE',
  Banana = 'BANANA',
  Orange = 'ORANGE',
}

type FruitColorProps = {
  fruit: Fruit
}

const FruitColor = ({ fruit }: FruitColorProps) => {
  let color: string

  switch (fruit) {
    case Fruit.Apple:
      color = 'red'
      break
    case Fruit.Banana:
      color = 'yellow'
      break
    case Fruit.Orange:
      color = 'orange'
      break
    default:
      color = 'black'
      break
  }

  return (
    <div
      css={css`
        color: ${color};
      `}
    >
      The color of the {fruit} is {color}.
    </div>
  )
}

export default FruitColor
```

このコードでは、`FruitColor` コンポーネントが `Fruit` 型の `fruit` プロパティを受け取り、それに応じて色を判定し、その色をテキストの色に適用しています。Emotion の `css` プロパティを使って、動的にスタイルを適用することが可能です。


Next.js と TypeScript における Enum 型の使い方を解説します。具体的なソースコードとその解説を通じて、Enum 型の実装と活用法を理解できます。

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


## TL;DR

このページでは、Next.js と TypeScript の組み合わせにおける Union 型の活用方法について解説します。コードの可読性と保守性を向上させるテクニックとして、TypeScript の Union 型の知識は不可欠です。

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

### Union 型とは何か

Union 型は、TypeScript の型システムの一部で、一つの値が複数の型のいずれかを取りうることを表現します。たとえば、以下のように定義できます。

```tsx
type Name = string | null
```

この型は、`Name`が文字列または null となることを表しています。

### Next.js における Union 型の利用

以下のコードは、Next.js のコンポーネントで Union 型を活用したシンプルな例ですね。

```tsx
// components/Button.tsx

type Props = {
  variant: 'primary' | 'secondary'
  children: React.ReactNode
}

const Button = ({ variant, children }: Props) => {
  const buttonStyle = variant === 'primary' ? 'bg-blue-500' : 'bg-green-500'

  return <button className={buttonStyle}>{children}</button>
}
```

この `Button` コンポーネントは、`variant`プロパティを使って表示スタイルを切り替えます。`variant`の型は、Union 型の 'primary' | 'secondary' で、この二つの値のみを許容します。これにより、想定外のスタイル指定を事前に排除でき、安全にコンポーネントを利用することができます。

### Union 型を活用した高度なテクニック

さらに複雑なシナリオでは、Union 型を使って異なるプロパティの組み合わせをハンドリングすることもできます。以下にその一例をお見せします。

```tsx
// components/ComplexComponent.tsx

type BaseProps = {
  children: React.ReactNode
}

type VariantAProps = BaseProps & {
  variant: 'A'
  propA: string
}

type VariantBProps = BaseProps & {
  variant: 'B'
  propB: number
}

type Props = VariantAProps | VariantBProps

const ComplexComponent = (props: Props) => {
  switch (props.variant) {
    case 'A':
      return <div>{props.propA}</div>
    case 'B':
      return <div>{props.propB}</div>
  }
}
```

この `ComplexComponent` コンポーネントは、プロパティ `variant` の値に応じて異なるプロパティを必要とします。Union 型を活用することで、このような動的なプロパティセットを型安全に扱うことができます。

### Emotion での Union 型の利用

Emotion を使う場合も、Union 型を活用することでスタイルのバリエーションを効果的に扱うことができます。以下にその一例をお見せします。

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

type Variant = 'info' | 'warning'

type Props = {
  variant: Variant
  children: React.ReactNode
}

const variantStyles: Record<Variant, ReturnType<typeof css>> = {
  info: css`
    background-color: lightblue;
    color: darkblue;
  `,
  warning: css`
    background-color: lightyellow;
    color: darkred;
  `,
}

const Alert = ({ variant, children }: Props) => {
  return <div css={variantStyles[variant]}>{children}</div>
}
```

この `Alert` コンポーネントは、`variant`プロパティにより表示スタイルを切り替えます。Union 型を使って `variant` の値を制限し、それに対応するスタイルを定義します。Emotion の `css` 関数を使って、それぞれのスタイルを切り替えます。

### Discriminated Unions

ここでは、TypeScript の Union 型と Discriminated Unions（判別される Union 型）を使って、異なるステータスを持つ非同期データを取り扱う方法について説明します。このテクニックは、API リクエストの結果を扱う際に特に役立ちます。

まず、以下のように API リクエストのステータスを表現する型を定義します。

```tsx
type DataStatus =
  | { status: 'loading' } //
  | { status: 'success'; data: any }
  | { status: 'error'; error: Error }
```

ここでは、3 つのステータスを表現しています：

- データがまだロード中である（`loading`）
- データのロードが成功し、データが利用可能である（`success`）
- データのロードがエラーとなった（`error`）

次に、この型を使って非同期データを取り扱う React コンポーネントを作成します：

```tsx
import React from 'react'

type DataStatus =
  | { status: 'loading' } //
  | { status: 'success'; data: any }
  | { status: 'error'; error: Error }

type DataComponentProps = {
  dataStatus: DataStatus
}

const DataComponent = ({ dataStatus }: DataComponentProps) => {
  switch (dataStatus.status) {
    case 'loading':
      return <div>Loading...</div>
    case 'success':
      return <div>{JSON.stringify(dataStatus.data)}</div>
    case 'error':
      return <div>Error: {dataStatus.error.message}</div>
  }
}
```

このコンポーネントは `dataStatus` プロパティに基づいて異なる描画を行います。このプロパティは上で定義した `DataStatus` 型を持つため、TypeScript は `switch` 文内でそれぞれのケースに対する型を正しく推論することができます。これにより、例えば `dataStatus.data` を `loading` や `error` のステータスで誤ってアクセスすると、TypeScript はこれをエラーとして報告します。

このように、TypeScript の Union 型と Discriminated Unions を使用することで、非同期データの取り扱いを型安全に行うことができます。これは API リクエストやその他の非同期処理を行う React コンポーネントで非常に役立つテクニックです。

以上が、Next.js と TypeScript における Union 型の利用法です。型の安全性を保ちながら、コードの可読性と保守性を向上させるために、Union 型を適切に活用することが重要です。


Next.js と TypeScript を用いて Union 型を活用する方法を紹介します。これにより、コードの可読性と保守性が向上します。

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


## TL;DR

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

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

### Emotion の Global Styles とは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```tsx
// pages/_app.tsx

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

type Props = AppProps

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

export default MyApp
```

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

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

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

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

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

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

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

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

export default DarkModeToggle
```

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

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

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

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

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

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

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

```tsx
// styles/GlobalStyles.tsx

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

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

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

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

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

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

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

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

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

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


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

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


## TL;DR

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

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

### Media Queries とは？

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

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

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

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

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

import { useEffect, useState } from 'react'

type UseMediaQueryType = (width: number) => boolean

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

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

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

  return targetReached
}

export default useMediaQuery
```

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

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

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

type Props = {
  text: string
}

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

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

export default DynamicStyledComponent
```

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

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

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

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

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

type Props = {
  content: string
}

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

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

export default ResponsiveComponent
```

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

### styled を使う

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

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

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

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

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

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

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

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

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


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

2023-06-10

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

2023-06-08

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

2023-06-08

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

2023-06-08

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

2023-06-08

Next.js と TypeScript で、microCMS を導入する流れ

2023-06-06

Next.js と TypeScript で、リテラル型を学ぶ

2023-06-06

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

2023-06-06

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

2023-06-03

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

2023-06-03

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