
## 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 を実装するための独自の指南です。

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


## TL;DR

この記事では、Next.js と TypeScript を用いて、Emotion Styled Components の効果的な実装方法について解説します。具体的なソースコードを通じて、最新の React 18 に対応した実装スタイルを深掘りします。

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

### Emotion Styled Components とは？

Emotion Styled Components は、React で使われる CSS-in-JS の一つで、JavaScript の中に CSS を書くことができます。つまり、コンポーネントにスタイルを直接適用することができ、それぞれのコンポーネントが独立したスタイルを持つことができます。この技術は、大規模なアプリケーションにおいて特に有効で、コンポーネントの再利用性を高め、コードの可読性とメンテナンス性を向上させます。

以下に基本的な Emotion Styled Components の使用例をお見せします。

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

// Button コンポーネントの作成
const Button = styled.button`
  color: white;
  background-color: hotpink;
  font-size: 24px;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: darkorange;
  }
`

// Container コンポーネントの作成
const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`

// App コンポーネントで Button と Container を使用
export default function App() {
  return (
    <Container>
      <Button>Click me!</Button>
    </Container>
  )
}
```

このコードは、ホットピンクの背景色と白い文字色を持つボタンを作成しています。さらに、ボタンはマウスオーバーすると色がダークオレンジに変わります。また、Container コンポーネントは要素を中央に配置するためのフレックスボックスコンテナとして機能します。このコンポーネントはビューポートの高さ全体を占め、内部の要素を中央に配置します。

次に[公式サイトのコード](https://emotion.sh/docs/styled)を解説します。

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

const Basic = ({ className }) => <div className={className}>Some text</div>

const Fancy = styled(Basic)`
  color: hotpink;
`

render(<Fancy />)
```

このコードは、ウェブページ上のテキストに特別な色とスタイルを付けるものです。具体的には、普通のテキスト（"Some text"）をホットピンク色にするという役割を果たしています。

まず最初に、`Basic`という名前の部品（コンポーネント）を作ります。この部品はただの箱（`<div>`）で、中に"Some text"という文字が入っています。`className`という特別な情報をこの箱につけることができます。この`className`は、箱にどんなスタイル（見た目）をつけるかを決める情報です。

次に、`Fancy`という新しい部品を作ります。この部品は`Basic`部品を基にして作られ、更にスタイルを追加しています。具体的には、`color: hotpink;`というスタイルを追加して、テキストの色をホットピンクに変更しています。

最後に、`<Fancy />`を表示することで、ホットピンク色の"Some text"というテキストがウェブページ上に現れます。

### Next.js で、Emotion Styled Components を実装

Emotion Styled Components を Next.js プロジェクトに導入してみましょう。

まず、必要なパッケージをインストールします。

```bash
npm install @emotion/react @emotion/styled
```

次に、Emotion を利用した Button コンポーネントを作成します。

`components/Button.tsx`

```tsx
/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled'

type ButtonProps = {
  label: string
  primary?: boolean
}

const StyledButton = styled.button<ButtonProps>`
  padding: 10px 20px;
  font-size: 16px;
  color: ${(props) => (props.primary ? 'white' : 'black')};
  background-color: ${(props) => (props.primary ? 'hotpink' : 'white')};
  border: none;
  border-radius: 4px;
  cursor: pointer;
`

const Button = ({ label, primary }: ButtonProps) => {
  return <StyledButton primary={primary}>{label}</StyledButton>
}

export default Button
```

この Button コンポーネントは、プロパティ`primary`に基づいて異なるスタイルを適用します。`primary`が true の場合、ボタンはホットピンクの背景色と白い文字色を持ちます。

この Button コンポーネントを利用するために、以下のようにページから呼び出します。

`pages/index.tsx`

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

export default function Home() {
  return (
    <div>
      <Button label="Primary Button" primary />
      <Button label="Secondary Button" />
    </div>
  )
}
```

### テーマ機能で、レイアウトを一元管理する

Emotion Styled Components をさらに活用するために、テーマ機能を利用してみましょう。これにより、全体の色調やフォントなどを一元的に管理することができます。

まず、テーマを定義します。

`theme.ts`

```tsx
const theme = {
  colors: {
    primary: 'hotpink',
    secondary: 'black',
    background: 'white',
  },
  fonts: {
    base: 'Arial, sans-serif',
  },
}

export default theme
```

そして、Emotion の`ThemeProvider`を使用して、これをアプリ全体で利用できるようにします。

`pages/_app.tsx`

```tsx
import { ThemeProvider } from '@emotion/react'
import theme from '../theme'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp
```

これにより、スタイル定義の中からテーマを参照することが可能になります。

`components/Button.tsx`

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

type ButtonProps = {
  label: string
  primary?: boolean
}

const StyledButton = styled.button<ButtonProps>`
  padding: 10px 20px;
  font-size: 16px;
  color: ${(props) => (props.primary ? props.theme.colors.background : props.theme.colors.secondary)};
  background-color: ${(props) => (props.primary ? props.theme.colors.primary : props.theme.colors.background)};
  border: none;
  border-radius: 4px;
  cursor: pointer;
`

const Button = ({ label, primary }: ButtonProps) => {
  return <StyledButton primary={primary}>{label}</StyledButton>
}

export default Button
```

これにより、一貫したデザインを簡単に実装することができます。また、将来的なデザインの変更も容易になります。


Next.js と TypeScript で Emotion Styled Components を活用したデザインの実装方法を詳細に説明します。

Next.js と TypeScript で、Emotion Styled Components を学ぶ

### Next.js のメタデータの最適化について

Next.js 13.4 の App Router において 便利な Metadata API が使えるようになりました。これを使うことで、アプリケーションのメタデータ（例えば、HTML の head 要素内の meta タグや link タグ）を簡単に定義することができるんですね。SEO（検索エンジン最適化）が向上します。Pages Router に比べると、シンプルに記述できるようになりました。

メタデータをアプリケーションに追加する方法は主に 2 つあります。

#### 設定ベースのメタデータ

layout.js ファイルや page.js ファイルで静的なメタデータオブジェクトをエクスポートするか、動的な generateMetadata 関数をエクスポートします。

#### ファイルベースのメタデータ

ルートセグメントに静的または動的に生成された特別なファイルを追加します。

これらのオプションを使用すると、Next.js は自動的にページのための適切な `<head>` 要素を生成します。また、ImageResponse コンストラクタを使用して、動的な OG（Open Graph）イメージを作成することも可能です。

### 主要な用語のまとめ

まずは、主要な用語を表形式でまとめてみました。今回は、Metadata API を中心に解説していきます。

| 用語                  | 説明                                                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Metadata API          | Next.js が提供する API で、アプリケーションのメタデータを定義するために使用します。                                                               |
| Config-based Metadata | layout.js ファイルや page.js ファイルで静的なメタデータオブジェクトをエクスポートするか、動的な generateMetadata 関数をエクスポートする方法です。 |
| File-based Metadata   | ルートセグメントに静的または動的に生成された特別なファイルを追加する方法です。                                                                    |
| ImageResponse         | Next.js のコンストラクタで、JSX と CSS を使用して動的なイメージを生成するために使用します。OGP やアイキャッチ画像に最適。                         |
| Static Metadata       | layout.js ファイルや静的な page.js ファイルから Metadata オブジェクトをエクスポートします。                                                       |
| Dynamic Metadata      | generateMetadata 関数を使用して、動的な値が必要なメタデータを取得します。                                                                         |

### ソースコードの解説

[Building Your Application: Routing \| Next\.js](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)を参考に、ソースコードを紐解いていきます。

#### 静的メタデータ

以下に示すのは、静的なメタデータを定義するためのコード例です。layout.js ファイルまたは page.js ファイルから Metadata オブジェクトをエクスポートします。この例では、特定のページ（例えば、ホームページ）のメタデータを設定しています。非常にシンプルになりましたね。

```tsx
// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'サイトのタイトル',
  description: 'サイトの説明',
  openGraph: {
    title: 'サイトのタイトル',
    description: 'サイトの説明',
    images: ['/path-to-your-image.jpg'],
  },
}

export default function HomePage() {
  // ここにコンテンツを記述します。
}
```

このコードは、ホームページのメタデータを設定します。タイトル、説明、Open Graph タグ（タイトル、説明、イメージ）を設定しています。

こちらは、OGP の設定例。非常にシンプルに記述できます。

```tsx
export const metadata = {
  openGraph: {
    title: 'サイトのタイトル',
    description: 'サイトの説明',
    url: 'https://example.com',
    siteName: 'サイトのタイトル',
    images: [
      {
        url: 'https://example.com/og.png',
        width: 800,
        height: 600,
      },
      {
        url: 'https://example.com/og-alt.png',
        width: 1800,
        height: 1600,
        alt: '代替テキスト',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}
```

#### title.template

結構便利だなと思ったのがこちらです。これは、ページの名前の前後に、追加の言葉をつけることができる機能のことです。

`title.template`を使うと、子ルートで定義されたタイトルに接頭辞や接尾辞を追加できます。layout.js で定義された `title.template` は、同じルートの page.js で定義されたタイトルには適用されません。

```tsx
// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | タイトル',
  },
}
```

```tsx
// app/about/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About',
}

// 出力: <title>About | タイトル</title>
```

#### metadataBase

`metadataBase` は、基本 URL プレフィックスを設定する便利なオプションです。絶対 URL が必要なすべての URL ベースのメタデータフィールドは、metadataBase オプションで設定することができます。

```tsx
// layout.js / page.js
export const metadata = {
  metadataBase: new URL('https://example.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
```

出力結果はこのようになります。

```html

<link rel="canonical" href="https://example.com" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<meta property="og:image" content="https://example.com/og-image.png" />
```

参考：[Functions: generateMetadata \| Next\.js](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)

#### 動的メタデータ

次に、動的な値が必要なメタデータを取得するためのコード例です。generateMetadata 関数を使用します。

以下に、`generateMetadata`関数を使用して動的なメタデータを生成する例です。この例では、ブログ記事のページを想定しています。記事の ID をパラメータとして受け取り、その ID を使用して記事のデータをフェッチします。フェッチしたデータから、メタデータのタイトルと説明を設定します。

```tsx
import { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
}

export async function generateMetadata({ params }: Props, parent?: ResolvingMetadata): Promise<Metadata> {
  const id = params.id
  const post = await fetch(`https://your-api/posts/${id}`).then((res) => res.json())
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: post.title,
    description: post.summary,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function PostPage({ params }: Props) {}
```

このコードは、特定のブログ記事の情報を取得し、その情報を使用してメタデータを生成します。記事の情報は、記事の ID を使用してフェッチします。また、親のメタデータから Open Graph イメージを取得し、それを新たなメタデータに追加します。

Next.js と TypeScript を使って、アプリケーションのメタデータを最適化する方法を解説します。これにより、SEOとウェブの共有性が向上します。

Next.js と TypeScript で、Metadata APIを理解する


## TL;DR

このページでは、Google Fonts の実装方法について詳しく解説します。Google Fonts を Next.js と TypeScript のプロジェクトに適用し、ウェブページの見た目を一新する方法を実践的に学んでいきましょう。

以下の開発環境を基準に進めます。

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

### Google Fonts とは？

Google Fonts とは、Google が提供するフリーのフォントライブラリです。多種多様なフォントが用意されていいて、ウェブページで簡単に利用することができる便利なサービスです。

WordPress を扱うときに、Google Fonts を埋め込まれた方は多いのではないでしょうか？でも、読み込み速度が遅くなり、パフォーマンスが悪化するということがありましたよね。

Next.js での導入方法は非常にシンプルで、`next/font/google`を使って、フォントを関数としてインポートすることで Googel Font を扱うことができます。さらに、Next.js で使うメリットとしては、ブラウザから Google へのリクエストが送信されないことです。なので、パフォーマンスが悪化することはありません。

Google フォントは自動的に自己ホスティングされます。フォントはデプロイメントに含まれ、デプロイメントと同じドメインから提供されます。

軽量の Google Fonts の例をいくつか挙げると、以下のようなものがあります。

- Roboto
- Open Sans
- Lato
- Raleway
- Montserrat
- Nunito
- Poppins
- PT Sans
- Source Sans Pro
- Roboto Slab

これらのフォントは、すべて Google Fonts のウェブサイトから無料でダウンロードできます。Google Fonts のウェブサイトでは、フォントごとにファイルサイズを確認することができます。ファイルサイズが小さいほど、ページの読み込み速度は向上します。

### Next.js で、Google Fonts を実装

それでは具体的に、Next.js と TypeScript の環境で Google Fonts を利用する方法を見ていきましょう。

@next/font をインストールします。

```bash
npm install @next/font
```

次に、Google Fonts の Lato を App Router で使ってみます。

```tsx
// src/app/page.tsx

import { Lato } from 'next/font/google'

const Lato700 = Lato({
  weight: '700',
  preload: false,
})

export default function Home() {
  return (
    <>
      <main>
        <p>ここはFontが反映されません。</p>
        <h1 className={Lato700.className}>ここはFontが反映されます。</h1>
      </main>
    </>
  )
}
```

以上で反映されます。

### フォント関数の引数

[Components: Font \| Next\.js](https://nextjs.org/docs/pages/api-reference/components/font#display)から、フォントモジュールの詳細を確認することができます。以下に、フォントモジュールのオプションをまとめました。

| 用語               | 説明                                                                                                                           |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| src                | フォントファイルのパスを指定します。文字列またはオブジェクトの配列として指定できます。                                         |
| weight             | フォントのウェイトを指定します。文字列または配列として指定できます。                                                           |
| style              | フォントのスタイルを指定します。文字列または配列として指定できます。                                                           |
| subsets            | プリロードしたいフォントのサブセットを指定します。文字列の配列として指定します。                                               |
| axes               | 変数フォントの追加軸を指定します。文字列の配列として指定します。                                                               |
| display            | フォントの表示方法を指定します。文字列として指定し、可能な値は 'auto', 'block', 'swap', 'fallback', 'optional' です。          |
| preload            | フォントをプリロードするかどうかを指定します。ブール値として指定します。                                                       |
| fallback           | フォントがロードできない場合のフォールバックフォントを指定します。文字列の配列として指定します。                               |
| adjustFontFallback | レイアウトシフトを減らすための自動フォールバックフォントを使用するかどうかを指定します。ブール値または文字列として指定します。 |
| variable           | CSS 変数の名前を指定します。文字列として指定します。                                                                           |
| declarations       | 生成された@font-face をさらに定義するフォントフェース記述子のキー値ペアを指定します。オブジェクトの配列として指定します。      |

これらの用語は、Next.js の Font Optimization 機能を使用する際に重要なパラメーターとなります。これらを理解することで、フォントの最適化とパフォーマンス向上を実現することができます。

### フェイトの指定

可変フォントを使用できない場合は、次のようにウェイトを指定する必要があります。

[Building Your Application: Routing \| Next\.js](https://nextjs.org/docs/app/building-your-application/optimizing/fonts)に書かれているコードです。

```tsx
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}
```

#### 可変フォントとは？

可変フォント（Variable Fonts）というのは、1 つのフォントファイル内に複数のスタイルやウェイト（文字の太さ）の情報を格納できる新しいタイプのフォントテクノロジーです。従来のフォントシステムでは、異なるウェイトやスタイルのフォントそれぞれに個別のフォントファイルが必要でしたが、可変フォントでは 1 つのフォントファイルでこれらをすべてカバーします。

可変フォントの最大の利点は、その柔軟性と効率性です。デザイナーは、同じフォントファミリーの異なるウェイトやスタイルを個別にロードする代わりに、1 つの可変フォントファイルをロードするだけで済みます。これによって、ウェブサイトのパフォーマンスを向上させることができるんですね。

さらに、ウェイトや幅、スラントなどの軸を動的に調整することで、さまざまなデザイン表現が可能になります。これは、レスポンシブデザインやアニメーション、アクセシビリティの向上など、新しいデザインの可能性を広げる大きな要素となっています。

### 複数のウェイト・スタイルを指定する

配列に格納するだけです。

```ts
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})
```

### Noto Sans JP を使う場合

Google Fonts から Noto Sans JP を使用する場合、次のように指定します。

```typescript
import { Noto_Sans_JP } from 'next/font/google'

const notoSansJP = Noto_Sans_JP({
  weight: '400', // あなたが必要とするウェイトを指定します
  subsets: ['japanese'], // 必要なサブセットを指定します
  display: 'swap', // フォントの表示方法を指定します
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja" className={notoSansJP.className}>
      <body>{children}</body>
    </html>
  )
}
```

このコードは、Noto Sans JP フォントをインポートし、それを HTML 要素に適用します。`weight`はフォントのウェイトを指定し、`subsets`は使用するフォントのサブセットを指定します。`display`はフォントがどのように表示されるかを指定します。

また、Google Fonts のページで Noto Sans JP の利用可能なウェイトやスタイルを確認し、それに基づいて`weight`や`style`を指定することができます。

#### className とは？

フォントの読み取り専用 CSS です。HTML 要素にクラス名を割り当てることで、その要素に特定のスタイルを適用することができます。

Next.js の Font Optimization 機能では、特定のフォントを適用するために`className`プロパティが使用されます。具体的には、`Noto_Sans_JP`などのフォント関数を呼び出すと、その戻り値としてフォントのクラス名が含まれるオブジェクトが返されます。このクラス名は、フォントを適用したい HTML 要素の`className`属性に指定します。

例えば、以下のコードでは`notoSansJP.className`を HTML 要素の`className`属性に指定しています。

```typescript
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja" className={notoSansJP.className}>
      <body>{children}</body>
    </html>
  )
}
```

これで、HTML 要素全体に Noto Sans JP フォントが適用されます。


Next.js と TypeScript を使用して、Google Fonts の導入と活用を行う実践的な方法を解説します。

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 を扱う

2023-06-03

Next.js と TypeScript で、Emotion Styled Components を学ぶ

2023-06-03

Next.js と TypeScript で、Metadata APIを理解する

2023-06-02

Next.js と TypeScript で、Google Fonts を活用する方法