
## TL;DR

Next.js で開発していて、メールフォームを作ったとします。しかし、フォームが正常に稼働するか不安なのでメールフォームが届かない人のために、保険としてメールアドレスを Web 上に貼り付けたい。しかし、スパムメールが気になるのでメールアドレスを html に書きたくない。どのように mailto を実装すればよいでしょうか？

メールアドレスを直接公開すると、スパムボットによって収集されてしまう可能性があります。スパムメールを避けるためには、メールアドレスを表示する方法を工夫する必要があります。

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

### 実装

次のコードでは、generateMailtoLink 関数を使用して、mailto リンクを動的に生成しています。これにより、JavaScript がブラウザ上で実行される時点でメールアドレスが表示され、スパムボットがメールアドレスを容易に収集することができなくなります。

例えば、コンタクトページに次のように記述します。

```tsx
const generateMailtoLink = (user: string, domain: string) => {
  return `mailto:${user}@${domain}`
}

const FormPage = () => {
  const mailUser = 'info'
  const mailDomain = 'XXXX.jp'
  const mailtoLink = generateMailtoLink(mailUser, mailDomain)

  return (
    <>
      <Section>
        <p>
          メールが送信エラーになる場合は、
          <a href={mailtoLink} className="underline">
            こちらからお願いします。
          </a>
        </p>
      </Section>
    </>
  )
}

export default FormPage
```

### 他の対処法

#### サーバーサイドレンダリング (SSR)

メールアドレスをサーバーサイドで生成し、クライアント側には表示しない方法も考えられます。これにより、スパムボットが直接メールアドレスを収集することができなくなります。

#### CAPTCHA の使用

メールフォームに CAPTCHA を導入することで、スパムボットのアクセスを制限することができます。CAPTCHA は人間のみが解答できるような認証手法であり、スパムメールのリスクを軽減することができます。


Next.js と TypeScript を活用して、ウェブサイト上のメール連絡先を公開しつつスパムメールを避ける mailto の実装方法を解説します。

Next.js と TypeScript で、スパムメールを避ける mailto の実装方法


## TL;DR

このページでは、Next.js と TypeScript を使った開発における CORS (Cross-Origin Resource Sharing) の問題とその解決方法について解説します。Web 開発において CORS は避けて通れない問題です。

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

### エラー内容

開発ツールで見ると、次のようなエラーが出ることがあります。一体このエラーはどういう意味なのでしょうか。

「「A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).」」

これはどういうことかというと、あるウェブページが、別のウェブページからデータを取得しようとした時に、ブロックされてしまったようです。この問題は、ブラウザのセキュリティ機能の一つである「CORS（クロスオリジンリソース共有）」に関連しています。

CORS とは、異なるウェブページ間でデータを共有するためのルールです。ウェブブラウザは、セキュリティ上の理由から、CORS のルールに違反するリクエストをブロックしてしまいます。

このエラーメッセージでは、リクエストや事前確認リクエストのレスポンスヘッダーに、正しくない値が設定されているか、ヘッダーが欠落しているためにブロックされたと言っています。正しいヘッダーを使用してレスポンスを返すことで、この問題を解決できます。

もしも、ブラウザへのレスポンスが不要であれば、リクエストのモードを「no-cors」に設定することで、CORS が無効になります。ただし、この場合はレスポンスの内容にはアクセスできません。

要するに、このエラーメッセージは、「ウェブページが別のウェブページからデータを取得しようとしているけれど、CORS のルールに違反しているためにブロックされた」ということを伝えています。正しいヘッダーを設定するか、必要であればリクエストのモードを変更して解決する必要があります。

### CORS 問題の説明と対策

まずはじめに、CORS の問題とその原因を理解しましょう。CORS（Cross-Origin Resource Sharing）とは、異なるオリジン間でのリソース共有を制御するための仕組みです。サーバーが CORS ポリシーを適切に設定していない場合、ブラウザはセキュリティ上の理由から外部オリジンからのリクエストを拒否します。

### allowCors 関数

Vercel プラットフォームを使用すると、開発者はリクエストの受信時に応答ヘッダーを指定できます。次の allowCors 関数を使うとラッパーとして機能し、渡されるサーバーレス関数の CORS を有効にできます。

```ts
const allowCors = (fn) => async (req, res) => {
  res.setHeader('Access-Control-Allow-Credentials', true)
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT')
  res.setHeader('Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version')
  if (req.method === 'OPTIONS') {
    res.status(200).end()
    return
  }
  return await fn(req, res)
}

const handler = (req, res) => {
  const d = new Date()
  res.end(d.toString())
}

module.exports = allowCors(handler)
```

ソースコードは、[How to Enable CORS on Vercel](https://vercel.com/guides/how-to-enable-cors)から引用しました。

上記のコードは Next.js の API ルートに CORS を設定する一例です。ここでは、`Access-Control-Allow-Origin` ヘッダーを設定して、全てのオリジンからのリクエストを許可しています。

### next.config.js

もう一つの解決法は、next.config.js で CORS を設定する方法です。こちらの方が簡単です。

```tsx
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 全ての API routes にマッチ
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
          { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' },
        ],
      },
    ]
  },
}

module.exports = nextConfig
```

### API からのレスポンスの処理

次のコードは、Next.js の API ルートに CORS を設定する一例です。ここでは、Access-Control-Allow-Origin ヘッダーを設定して、全てのオリジンからのリクエストを許可しています。

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

const helloAPI = (req: NextApiRequest, res: NextApiResponse) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.status(200).json({ name: 'Hello' })
}

export default helloAPI
```

フロントエンド側からこの API を呼び出し、レスポンスを受け取る方法を見てみましょう。

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

const HomePage = () => {
  const [message, setMessage] = useState('')

  useEffect(() => {
    fetch('/api/hello')
      .then((res) => res.json())
      .then((data) => setMessage(data.name))
  }, [])

  return (
    <div>
      <p>{message}</p>
    </div>
  )
}

export default HomePage
```

このコードは、API `/api/hello` からデータをフェッチし、取得したメッセージを表示するコンポーネントです。

### コード解説

それぞれのコードについて解説していきましょう。まず、`pages/api/hello.ts` では、`Access-Control-Allow-Origin` ヘッダーを設定し、すべてのオリジンからのリクエストを許可しています。通常、このヘッダーの値は特定のオリジンを指定しますが、この例ではワイルドカード（`*`）を使用して全てのオリジンからのアクセスを許可しています。

次に、`pages/index.tsx` では、`useEffect` フックを使ってコンポーネントのマウント時に API を呼び出しています。`fetch` 関数で API を呼び出し、その結果を `message` ステートにセットしています。

この例では、Next.js のサーバーサイドルーティングを利用していますので、CORS の問題は発生しません。しかし、異なるオリジンの API を使用する場合には、CORS の問題が発生する可能性がありますので、対応が必要となります。この記事で解説した方法を参考に、CORS による問題を解決し、安全な Web 開発を行ってください。

CORS は複雑そうに見えますが、理解しておくと大変役立ちます。実際にコードを書いて試してみると、もっと理解が深まると思います。


Next.js と TypeScript での CORS (Cross-Origin Resource Sharing) 問題を解決するための方法を紹介します。

Next.js と TypeScript で、CORS 問題を解決する


## TL;DR

この記事では、Web ページで頻繁に使用される Next.js のリダイレクトの実装方法について解説します。特別なプログラミングは必要なく、`next.config.js`ファイルに設定を追加するだけで実装できます。

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

### リダイレクトの実装

例えば、 `https://XXXX/archives/495` を `https://XXXX/495` にリダイレクトさせるには、どうすればよいのでしょうか？

Next.js と Vercel を使用している場合、`next.config.js`ファイルにリダイレクトの設定を追加できます。

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/archives/:slug',
        destination: '/:slug',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig
```

この設定では、`/archives/495`のような URL が`/495`にリダイレクトされます。`:slug`という部分は動的な部分を表しており、ここには任意の文字列が入ることができます。非常に簡単ですね。.htaccess を使わなくていいのは、とても楽です。

### ビルドとデプロイ

これを設定したら、再度ビルドとデプロイを行う必要があります。

なお、`permanent: true`は 301（恒久的な）リダイレクトを指定するものです。これは、ブラウザがリダイレクト先を記憶するため、SEO に有利です。一方で、`permanent: false`を指定すると 302（一時的な）リダイレクトになります。

以上の方法でリダイレクトを設定することができます。試してみてください。

### オプション

Next.js のリダイレクトにはいくつかの追加オプションがあります。

#### `basePath` (boolean)

リダイレクトが basePath を無視するかどうかを制御します。デフォルトは `false` です。

#### `locale` (boolean)

リダイレクトがロケールを無視するかどうかを制御します。デフォルトは `false` です。

例えば、`basePath`を無視したい場合は次のように設定できます:

```javascript
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/archives/:slug',
        destination: '/:slug',
        permanent: true,
        basePath: false,
      },
    ]
  },
}
```

これらのオプションは、より具体的なリダイレクトの振る舞いを制御するために使われます。また、リダイレクトだけでなく、リライトやヘッダーのカスタマイズも `next.config.js` ファイルで行うことができます。これらの詳細については、Next.js の公式ドキュメンテーションをご覧ください。

[next\.config\.js Options: redirects \| Next\.js](https://nextjs.org/docs/pages/api-reference/next-config-js/redirects)


Next.js と TypeScript を使い、リダイレクトさせる方法を丁寧に解説します。

Next.jsで、リダイレクトさせる


## TL;DR

このページでは、Google Adsense の実装方法について解説します。Next.js と TypeScript を使用した具体的なステップとソースコードを提供します。Google Adsense を既存の Next.js アプリケーションに組み込む際の参考にしてください。

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

### Google Adsense の設定

まず、Google Adsense の設定を行います。次のステップを実施してください。

- Google Adsense のサイトにログインします
- 広告の種類を選択します（例えば、ディスプレイ広告）
- 広告コードを取得します

この広告コードを Next.js のプロジェクトに追加することで Google Adsense を実装します。

### 全体のコード

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

type GoogleAdsenseProps = {
  client: string
  slot: string
  style?: React.CSSProperties
}

declare global {
  interface Window {
    adsbygoogle: { [key: string]: unknown }[]
  }
}

const GoogleAdsense = ({ client, slot, style }: GoogleAdsenseProps) => {
  useEffect(() => {
    const adsScript = document.createElement('script')
    adsScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
    adsScript.async = true
    document.body.appendChild(adsScript)

    try {
      ;(window.adsbygoogle = window.adsbygoogle || []).push({})
    } catch (err) {
      console.error(err)
    }

    return () => {
      document.body.removeChild(adsScript)
    }
  }, [])

  return (
    <div
      css={css`
        text-align: center;
      `}
    >
      <ins className="adsbygoogle" style={style} data-ad-client={client} data-ad-slot={slot} data-ad-format="auto" data-full-width-responsive="true"></ins>
    </div>
  )
}

export default GoogleAdsense
```

このコードでは、Google Adsense 広告を表示するためのコンポーネント `GoogleAdsense` を定義しています。主要な部分を順に解説します。

まず、`GoogleAdsenseProps` という TypeScript の型を定義しています。これは `GoogleAdsense` コンポーネントの props を型付けするためのもので、`client`、`slot` という文字列と、オプションで `style` を含んでいます。`client` と `slot` は Google Adsense の広告コードです。

次に、`window` オブジェクトに `adsbygoogle` プロパティを追加するために、`declare global` を使用しています。`adsbygoogle` は配列で、その要素はキーが文字列で値が未知のオブジェクトです。

`GoogleAdsense` コンポーネントでは、`useEffect` フックを使用して Google Adsense のスクリプトをダイナミックにロードしています。スクリプトタグを作成し、その `src` に Google Adsense の JavaScript ファイルの URL を設定しています。

そして、このスクリプトタグを HTML ドキュメントの body 要素に追加しています。この操作は、コンポーネントがマウントされたとき（つまり、初めて描画されたとき）に一度だけ行われます。

また、広告のロードをトリガーするために、`window.adsbygoogle` 配列に空のオブジェクトを push しています。この処理もエラーハンドリングを含んでいます。

そして、クリーンアップ関数を定義しています。これは、コンポーネントがアンマウントされたときに実行される関数で、これによりスクリプトタグが body 要素から削除されます。

コンポーネントが返す JSX の部分では、広告を表示するための `<ins>` タグを作成しています。`className` に `adsbygoogle` を設定し、広告コードを `data-ad-client` と `data-ad-slot` に設定しています。

さらに、`<ins>` タグを中央寄せの `<div>` タグでラップしています。これには Emotion の `css` prop を使用しています。これにより、スタイルを直接コンポーネントに適用することができます。この例では、テキストを中央寄せにしています。

以上が、このコードの大まかな解説です。

### 呼び出し方法

`GoogleAdsense` コンポーネントを使う際は、`client`、`slot`、そしてオプションで `style` プロパティを指定して利用します。ローカルでの Google Adsense の読み込みを抑制するには、環境変数を使うのが一般的なアプローチです。process.env.NODE_ENV を使うことで現在の環境が開発環境か本番環境かを判別できます。NODE_ENV は Next.js のビルド時に自動的に設定されます。

```tsx
<div>
  {process.env.NODE_ENV !== 'development' && (
    <GoogleAdsense
      client="ca-XXX-XXXXXXXX" //
      slot="XXXXXXXXXX"
      style={{ display: 'block' }}
    />
  )}
</div>
```

上記のコードは process.env.NODE_ENV !== 'development' という条件式で Google Adsense のコンポーネントをラップしています。この条件式が true の時（つまり現在の環境が開発環境（'development'）でない時）のみ、Google Adsense のコンポーネントがレンダリングされます。

つまり、開発環境（ローカル）では Google Adsense の広告は表示されず、本番環境では表示されるようになります。

Vercel でアプリケーションをデプロイする場合、特別な設定は必要ありません。ただし、環境変数を利用する場合は Vercel のダッシュボードから設定する必要があります。

今回の場合、`process.env.NODE_ENV` を使って環境を判断しているので、特に追加で設定する必要はありません。`NODE_ENV` はビルド時に Next.js が自動的に設定する環境変数です。

Vercel では、ビルド時には `NODE_ENV` が `production` として設定され、開発環境では `development` として設定されます。したがって、本番環境でのみ Google Adsense のコードが読み込まれるようになります。

#### `client`

これは Google Adsense の広告コードの一部であり、あなたのアカウントを特定します。"ca-pub-XXXXXXXXXXXXXXXX" のような形式で提供されます。

#### `slot`

これも Google Adsense の広告コードの一部で、具体的な広告ブロックを特定します。Google Adsense の管理画面で広告ブロックを作成すると、"XXXXXXXXXX" のような形式で提供されます。

#### `style`

広告のスタイルをカスタマイズするために使用します。これは React のインラインスタイルと同じ形式で指定します。ここでは、広告をブロック要素として表示するために `display: 'block'` を指定しています。

上記のように指定することで、`GoogleAdsense` コンポーネントが適切な広告を表示します。

### 終わりに

なお、`client` と `slot` の具体的な値は、Google Adsense の管理画面で取得できます。そのため、これらの値はあなたの Google Adsense のアカウントに紐づいています。

以上の方法で、あなたの Next.js のアプリケーションに Google Adsense の広告を組み込むことができます。これにより、Web サイトからの収益を得ることが可能になります。

以上が Next.js と TypeScript を使用して Google Adsense を実装する方法です。


Next.js と TypeScript で、Google Adsense を表示させる


## TL;DR

この記事では、Next.js と TypeScript の環境下で Swiper を用いたスライダーの実装方法について解説します。モダンなフロントエンド開発におけるスライダーコンポーネントの作成は一般的なタスクの一つであり、Swiper はその実装を容易にしてくれるライブラリです。

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

それでは、今回、2 つの実装方法を紹介します。

### インストール

最新バージョンの Swiper をインストールするには、以下のコマンドを実行します。

```bash
npm install swiper@latest
```

また、React と連携するために、Swiper の React パッケージも最新バージョンにする必要があります。以下のコマンドを実行してみてください。

```bash
npm install swiper/react@latest
```

インストールが完了したら、プロジェクトを再起動してみてください。

### Swiper の実装方法

次のコードは Next.js と Swiper を用いてスライダー（カルーセル）を作成するものですが、いくつかの追加機能や Next.js の Image コンポーネントを使っている点で後述するコードと異なります。

public ディレクトリに dummy/1.jpg 〜 3.jpg を配置しておきます。

```tsx
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

// カルーセルにする画像のソースをリストにします
const images = ['/dummy/1.jpg', '/dummy/2.jpg', '/dummy/3.jpg']

const Slider = () => {
  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      slidesPerView={1} //一度に表示するスライドの数
      pagination={{
        clickable: true,
      }} //何枚目のスライドかを示すアイコン、スライドの下の方にある
      navigation //スライドを前後させるためのボタン、スライドの左右にある
      loop={true}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
    >
      {images.map((src: string, index: number) => {
        return (
          <SwiperSlide key={`${index}`}>
            <Image src={src} layout="responsive" width={640} height={400} alt="test_image" />
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

export default Slider
```

まず、このコードでは Pagination と Navigation という Swiper の追加機能を使用しています。Pagination はスライドの下部に表示される、現在何枚目のスライドを表示しているかを示すインジケータ（通常はドット）のことを指します。Navigation はスライドの左右に表示される、スライドを前後に移動するためのボタンを指します。これらの機能を Swiper に組み込むために、SwiperCore.use 関数を使っています。

次に、カルーセルに表示する画像のソースをリストとして定義しています。画像のソースは文字列の配列で表現され、各画像は SwiperSlide 内部で Image コンポーネントを使用して表示されています。

ここで重要なのが、Next.js の Image コンポーネントの使用です。このコンポーネントは Next.js 独自の機能であり、自動的に最適なサイズにリサイズされ、遅延ロードされるなど、パフォーマンスに優れた画像の表示を可能にします。Image コンポーネントには画像のソース(src)、レイアウト(layout)、幅(width)、高さ(height)、および代替テキスト(alt)を指定します。

Swiper コンポーネントのプロパティでは、一度に表示するスライドの数(slidesPerView)、Pagination の設定(pagination)、Navigation の有効化(navigation)、そしてループの有効化(loop)を設定しています。ループを true に設定すると、最後のスライドの次に最初のスライドが表示され、スライドが無限に続くようになります。

### Swiper コンポーネントの基本的な使い方

このセクションは実装ではないので、読み飛ばしても構いません。
まず、Swiper コンポーネントを実装します。以下のように Slider コンポーネントを作成します。

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

```tsx
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.min.css'

type SlideItem = {
  id: number
  content: string
}

type SliderProps = {
  items: SlideItem[]
}

const Slider = ({ items }: SliderProps) => {
  return (
    <Swiper spaceBetween={50} slidesPerView={1}>
      {items.map((item) => (
        <SwiperSlide key={item.id}>
          <div>{item.content}</div>
        </SwiperSlide>
      ))}
    </Swiper>
  )
}

export default Slider
```

そして、この Slider コンポーネントを以下のように呼び出すことができます。

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

// ここにスライダーで表示する内容を書く
const items = [
  { id: 1, content: 'Slide 1' },
  { id: 2, content: 'Slide 2' },
  { id: 3, content: 'Slide 3' },
]

const Page = () => {
  return <Slider items={items} />
}

export default Page
```

それでは、上記のコードについて一つずつ解説していきます。

まず最初に、Swiper と SwiperSlide コンポーネントを import しています。これらのコンポーネントは Swiper ライブラリから提供されています。そして、Swiper の CSS を読み込んでいます。これにより、Swiper の基本的なスタイリングが適用されます。

次に、SlideItem 型と SliderProps 型を定義しています。SlideItem は各スライドの内容を表す型で、SliderProps は Slider コンポーネントのプロパティを表す型です。

Slider コンポーネント内部では、Swiper コンポーネントを使ってスライダーを作成しています。Swiper コンポーネントには様々なプロパティがあり、ここでは spaceBetween と slidesPerView を設定しています。spaceBetween は各スライド間の距離を、slidesPerView は一度に表示するスライドの数を指定します。

そして、props から受け取った items を用いて、SwiperSlide コンポーネントをマッピングしています。これにより、各スライドが作成されます。

最後に、Page コンポーネント内部で Slider コンポーネントを使用しています。items にはスライドの内容を配列として指定します。この配列は Slider コンポーネントに props として渡されます。

以上が、このコードの全体的な解説になります。具体的な用途や課題に応じて、Swiper の機能や設定を調整して使用することができます。より詳細な設定方法については、次の公式ドキュメントを参照してください。

### ドキュメント

以下は、Swiper に関する情報を得るための主要なリソースの一部です。これらのサイトは Swiper の開発者やコミュニティによって維持されていて、学習リソース、API ドキュメンテーション、例、およびその他の参考資料を提供しています。

| タイトル                                                           | 説明                                                                                                                                            |
| :----------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
| [Swiper Official Website](https://swiperjs.com/)                   | Swiper の公式ウェブサイト。基本的な使用方法、API ドキュメンテーション、デモなどが提供されています。                                             |
| [Swiper GitHub Repository](https://github.com/nolimits4web/swiper) | Swiper の公式 GitHub リポジトリ。ソースコード、リリースノート、イシュートラッキング、およびコントリビューションガイドラインが提供されています。 |
| [Swiper React Component](https://swiperjs.com/react)               | Swiper 公式ウェブサイト内の React 向けのページ。React での Swiper の使用方法について詳しく解説されています。                                    |
| [Swiper on npm](https://www.npmjs.com/package/swiper)              | Swiper の npm パッケージページ。最新のバージョン、ダウンロード統計、依存関係などが表示されます。                                                |


Next.js と TypeScript を使って Swiper を用いたスライダーの実装方法について説明します。

Next.js と TypeScript で、Swiper スライダーを実装する


## TL;DR

Open Graph プロトコルと @vercel/og ライブラリを使用して、ソーシャルメディア画像生成の最適化方法を解説します。動的な Open Graph（OG）画像を生成するために、Vercel の `@vercel/og` ライブラリを使用して、Vercel Edge Functions を用いてソーシャルカード画像を計算・生成することができます。

つまり、分かりやすくいうと、**CSS とテキストを使って画像を自動生成できる** ということです。今までのようにアイキャッチ画像や OGP 画像を記事ごとに作る必要が無くなるので、とても便利です。

### 利点

画像生成に必要なコード量が少ないため、Edge Functions はほぼ瞬時に開始することができます。これにより、画像生成プロセスが迅速に行われ、Open Graph Debugger のようなツールによって認識されます。

HTML と CSS を使用して画像を定義し、ライブラリはマークアップから動的に画像を生成します。

@vercel/og は、エッジで計算済みの画像をキャッシュするための適切なヘッダーを自動的に追加して、コストの削減と再計算の軽減ができるそうです。

### サポートされている機能

- flexbox や絶対位置付けを含む基本的な CSS レイアウト
- カスタムフォント、テキストの折り返し、中央揃え、ネストされた画像
- Google Fonts からフォントのサブセット文字をダウンロードする能力
- Vercel でデプロイされた任意のフレームワークやアプリケーションと互換性

### はじめに

最初に `@vercel/og` をインストールします。

```bash
npm i @vercel/og
```

[Open Graph $OG$ Image Generation \| Vercel Docs](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) を参考に、/pages/api の下に og.tsx を追加して API エンドポイントを作成します。

pages/api/og.tsx

```tsx
import { ImageResponse } from '@vercel/og'
import { NextRequest } from 'next/server'
import Image from 'next/image'

export const config = {
  runtime: 'edge',
}

export default function handler(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)

    // ?title=<title>
    const hasTitle = searchParams.has('title')
    const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : 'My default title'

    return new ImageResponse(
      (
        <div
          style={{
            backgroundColor: 'black',
            backgroundSize: '150px 150px',
            height: '100%',
            width: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            flexWrap: 'nowrap',
          }}
        >
          <div
            style={{
              fontSize: 60,
              fontStyle: 'normal',
              letterSpacing: '-0.025em',
              color: 'white',
              marginTop: 30,
              padding: '0 120px',
              lineHeight: 1.4,
              whiteSpace: 'pre-wrap',
            }}
          >
            {title}
          </div>
          <div
            style={{
              marginTop: 30,
              display: 'flex',
              // alignItems: 'center',
              justifyContent: 'center',
              justifyItems: 'center',
            }}
          >
            <img alt="" height={75} src="http://localhost:3000/logo.png" style={{ margin: '0 30px' }} width={320} />
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    )
  } catch (e: any) {
    console.log(`${e.message}`)
    return new Response(`Failed to generate the image`, {
      status: 500,
    })
  }
}
```

### 呼び出し

`process.env.NODE_ENV`を使って現在の環境が開発（ローカル）か本番かを判断することができます。環境によって URL を動的に切り替えるためのコードは以下のようになります：

```jsx
<img src={`${process.env.BASE_URL || 'http://localhost:3000'}/api/og?title=${postData.id}`} alt="" />
```

Vercel において環境変数を設定するには、以下の手順を実施します：

1. Vercel ダッシュボードにログインします。
2. 対象のプロジェクトを選択します。
3. プロジェクトダッシュボードの左側のメニューで、"Settings" をクリックします。
4. "Settings" メニューの中から "Environment Variables" を選択します。
5. "Add" ボタンをクリックします。
6. "Name" フィールドに環境変数名（例：`BASE_URL`）を入力し、"Value" フィールドに対応する値（例：`https://あなたのドメイン`）を入力します。
7. "Add" ボタンをクリックして環境変数を保存します。

これで、環境変数は次回のデプロイ時に適用されます。

これにより、ローカル環境では`'http://localhost:3000'`が使われ、Vercel では設定した`BASE_URL`が使われます。

### ImageResponse コンストラクタ

`@vercel/og` で、うまく表示できないときは、ImageResponse コンストラクタを使うとよさそうです。

Next.js の`ImageResponse`コンストラクタは、JSX と CSS を使用して動的な画像を生成するためのものです。これは、Open Graph イメージや Twitter カードなどのソーシャルメディアの画像を生成するのに便利です。

以下のように`ImageResponse`をインポートし、新しい`ImageResponse`オブジェクトを生成することができます：

```javascript
import { ImageResponse } from 'next/server'

new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
    fonts?: {
      name: string,
      data: ArrayBuffer,
      weight: number,
      style: 'normal' | 'italic'
    }[]
    debug?: boolean = false

    // Options that will be passed to the HTTP response
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)
```

[Functions: ImageResponse \| Next\.js](https://nextjs.org/docs/app/api-reference/functions/image-response)

この構造体には、以下のオプションが用意されています。

| オプション | データ型                                                 | デフォルト値 | 説明                                                                                                                                                                  |
| ---------- | -------------------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| element    | ReactElement                                             | -            | 描画する ReactElement                                                                                                                                                 |
| width      | number                                                   | 1200         | 画像の幅                                                                                                                                                              |
| height     | number                                                   | 630          | 画像の高さ                                                                                                                                                            |
| emoji      | string ('twemoji' \| 'blobmoji' \| 'noto' \| 'openmoji') | 'twemoji'    | 使用する絵文字のセット                                                                                                                                                |
| fonts      | Array                                                    | -            | 画像内で使用するカスタムフォントの配列。各フォントは、フォント名、フォントデータ（ArrayBuffer）、フォントの重み、およびスタイル（'normal'または'italic'）を指定します |
| debug      | boolean                                                  | false        | デバッグモードを有効にするかどうか                                                                                                                                    |
| status     | number                                                   | 200          | HTTP レスポンスのステータスコード                                                                                                                                     |
| statusText | string                                                   | -            | HTTP レスポンスのステータステキスト                                                                                                                                   |
| headers    | Record<string, string>                                   | -            | HTTP レスポンスに追加するヘッダーのレコード                                                                                                                           |


@vercel/og ライブラリを使って、ソーシャルメディア画像を生成します

Next.js と TypeScript で、vercel/og のOG画像を生成する


## TL;DR

コムテブログ（このサイト）と、<a href="https://www.commte.co.jp/" target="_blank">会社ホームページ</a>を、WordPress から Next.js へリニューアルしました。速度・安全性・SEO スコア・メンテナンス性・開発体験など、様々な観点で改善したのでリニューアルしてよかったです。

![](images/pagespeed.webp)

### before after

こちらの表は、リニューアル前と後の比較表です。情報が古い記事やテック以外の記事はごっそり削除しました。

| 項目                      | リニューアル前 | リニューアル後           |
| ------------------------- | -------------- | ------------------------ |
| プラットフォーム          | VPS            | Vercel Pro               |
| フレームワーク/ライブラリ | WordPress      | Next.js 13               |
| プログラミング言語        | PHP            | TypeScript               |
| データベース              | MySQL          | （使用なし）             |
| テンプレートエンジン      | PHP            | JSX                      |
| スタイリング              | SCSS           | Emotion.js, Tailwind CSS |
| コンテンツ管理            | WordPress CMS  | Markdown                 |
| サーバーなど              | nginx          | Vercel (Serverless)      |
| 記事数                    | 350            | 110                      |

### 要件定義

結構面倒な部分がありましたが、要件定義は次の通りです。できる限り外部 Web サービスに依存しないようにしました。問い合わせフォームは、react-hook-form で実装しました。react-hook-form は、ローカルでも送信テストができて便利です。

記事は Markdown で管理します。Markdown で管理することによって、VSCode で記事を編集・プレビューできます。

| 項目                                                    | 解説                                          |
| ------------------------------------------------------- | --------------------------------------------- |
| リアルタイム検索                                        | ページ遷移なしで記事を表示させる              |
| Emotion.js, Tailwind CSS                                | CSS-in-JS ライブラリ、CSS フレームワーク      |
| TOC、SNS シェアボタン、関連記事、シンタックスハイライト | 詳細記事に実装する機能                        |
| GSAP, Three.js                                          | アニメーションや 3D グラフィックス            |
| Markdown, MDX 対応                                      | VSCode で編集して github へ push              |
| Google Analytics                                        | Vercel で G4 の ID 設定                       |
| WordPress の記事を、Markdown に変換                     | Markdown 形式に変換し、frontmatter を組み込む |
| 非公開処理                                              | frontmatter で切り替え                        |
| SEO/OGP, サイトマップの設定                             | おまじない                                    |
| 問い合わせフォーム, thanks ページ                       | react-hook-form で実装                        |
| 画像読み込み最適化、自動圧縮                            | 画像のロード時間を短縮                        |
| ページネーション自動分割（一覧、詳細、アーカイブ）      | 長くなる場合は自動で調整する                  |

Next.js には、プラグインなどがないので、コンポーネントはゼロから構築するわけですが、特に工数がかかったところは、タグのページネーションと関連記事の実装ですかね。Markdown のデータを加工しなくちゃいけないので、面倒でした。

### リニューアルの流れ

WordPress から Next.js へのリニューアルの流れは次の通りです。

1. 要件定義などをまとめる
2. GitHub で新しいリポジトリを作成する
3. ローカルでプロジェクト作成
4. 新しく作成したプロジェクトを GitHub のリポジトリに push
5. 開発環境を設定する。TypeScript、Tailwind CSS、Emotion.js など
6. 開発。ページの作成、API routes の設定、CSS スタイリングなど
7. テスト。Jest や React Testing Library など
8. WordPress の記事を、Markdown に変換する
9. ローカルでデプロイテスト
10. Vercel で、新しいプロジェクトを作成
11. Vercel で、GitHub と連携
12. Vercel で、デプロイ
13. Vercel のダッシュボードからカスタムドメインを追加
14. レジストラで、Vercel のネームサーバーを設定
15. Vercel で、Google Analytics などの環境設定
16. サイトマップの生成・設定
17. Vercel Pro にアップグレード

※ レジストラでは、www あり・なしの 2 つを設定する必要があります。

※ Vercel では、複数のサブドメインを一つのドメインにリダイレクトするように設定できます。

Next.js を始めてみたい方のために、チュートリアルを作成しました。<br />
[Next\.js、Typescript のチュートリアル](https://www.commte.co.jp/docs)

### Vercel Pro にアップグレード

結局、2 つとも Vercel Pro にアップグレードしました。トライアル版と適用版を選択できます。

こちらは、Vercel の各プラン（Hobby, Pro, Enterprise）の比較表です。Vercel Pro だと、2023/05 時点で、月額 $20.00 ですね。企業サイトであれば Pro プランが適していると言えます。特に、頻繁に更新が必要なサイト、チームで開発を行うサイト、大量のリソースを必要とするサイト、商用利用、アドセンス広告を貼る場合には、Pro プランの利用を検討してよいでしょう。また、サポートが必要な場合も Pro プランが適しています。

| 項目                               | Hobby            | Pro              | Enterprise |
| ---------------------------------- | ---------------- | ---------------- | ---------- |
| 料金                               | $0               | $20/ユーザー/月  | カスタム   |
| 1 日のデプロイ数                   | 100              | 3,000            | カスタム   |
| Edge Functions の実行ユニット      | 500,000          | 1 million        | カスタム   |
| サーバーレス関数の実行             | 100 GB-hours     | 1,000 GB-hours   | カスタム   |
| サーバーレス関数の実行タイムアウト | 10 秒            | 60 秒            | 900 秒     |
| ビルド実行                         | 6,000 分         | 24,000 分        | カスタム   |
| イメージ最適化                     | 1,000 ソース画像 | 5,000 ソース画像 | カスタム   |

### 記事の移行

WordPress の記事を、Markdown に変換する方法はいくつかありますが、ショートコードの変換ができなかったり、記事の冒頭に frontmatter を組み込む必要があったり、一括置換はうまくいきませんでした。なので、自前で変換ツールを作って変換しました。ツールはテストが終わったら公開する予定です。

テック系の記事を増やす方針なので、技術記事に画像は不要かと思いまして、全ての記事から画像と古い記事を削除しました。なぜかというと「**古い記事や画像は時間が経過し過ぎていて、誤った情報になるので削除したほうがいい**」と思ったからです。

そのかわり、vercel の関数を使って、自動でアイキャッチ画像を生成するようにしたので、記事作成が非常に楽になりました。

記事を大幅に削除したら、トラフィックが減るのではないか？という不安はありましたが、そんなことはなく、むしろトラフィックは好調に伸びつつあります。Google は、古い記事を削除することを歓迎しているような気もしますね。

**記事を増やすだけでなくて、古い記事を削除しつつ、新しい情報が書かれている記事を増やすという方法は SEO において有効だと思います。**

### WordPress をやめた理由

WordPress を 10 年以上扱ってました。「いつか Next.js に乗り換えたい！」と思っていたので非常に感慨深いです。

WordPress は、プラグインをインストールするだけで、誰でも簡単に機能実装できる素晴らしい CMS だと思います。ただ、個人的に、WordPress が「誰でも簡単に開発できる」ことと「TypeScript で作れない」ことが、少し引っかかっていました。自分が好きな言語で開発できないのは辛いです。

Next.js は、セキュリティや表示速度だけでなくて、そのあたりの条件をクリアしています。そして適度な難易度もあり、自由度も高いので、WordPress から乗り換えることにしました。


会社ホームページを WordPress から Next.js へリニューアルしました。

コムテブログを、WordPressからNext.jsへリニューアルしました


## TL;DR

この記事では、Next.js と TypeScript を活用し、SNS ボタンを作成する方法を紹介します。

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

### 全体のコード

次のコードは、Next.js と TypeScript、そして Emotion を利用して 2 つの SNS ボタン (Twitter、Facebook) を作成するものです。各ボタンは、指定された URL と タイトルを利用して対象の SNS でのシェア機能を持つようになっています。

```tsx
// components/SnsBtn.tsx
import React from 'react'
import styled from '@emotion/styled'

const SnsButtons = styled.div`
  margin-bottom: 20px;
  display: grid;
  gap: 8px;
`

const Button = styled.a`
  display: grid;
  place-content: center;
  width: 30px;
  height: 30px;
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
`

const TwitterButton = styled(Button)`
  background-color: #55acee;
  color: #fff;
`

const FacebookButton = styled(Button)`
  background-color: #3b5998;
  color: #fff;
`

type Props = {
  url: string
  title: string
}

const SnsBtn = ({ url, title }: Props) => {
  const encodedUrl = encodeURIComponent(url)
  const encodedTitle = encodeURIComponent(title)

  return (
    <SnsButtons>
      <TwitterButton href={`https://twitter.com/share?url=${encodedUrl}&text=${encodedTitle}`} target="_blank" rel="noopener noreferrer">
        <img src="/icon/white/twitter-brands.svg" alt="Twitter" width="20" height="20" />
      </TwitterButton>
      <FacebookButton href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`} target="_blank" rel="noopener noreferrer">
        <img src="/icon/white/facebook-brands.svg" alt="Facebook" width="20" height="20" />
      </FacebookButton>
    </SnsButtons>
  )
}

export default SnsBtn
```

### コードの解説

それではコードを詳しく見ていきましょう。

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

まず、React と Emotion の `styled` 関数をインポートしています。Emotion の `styled` 関数は、CSS in JS を利用して React コンポーネントのスタイリングを行うことができます。

```tsx
const SnsButtons = styled.div`
  margin-bottom: 20px;
  display: grid;
  gap: 8px;
`
```

ここでは SNS ボタンを格納するためのコンテナとなる `SnsButtons` コンポーネントを定義しています。grid ディスプレイが設定され、ボタン間のギャップも定められています。

```tsx
const Button = styled.a`
  display: grid;
  place-content: center;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
`
```

次に、一般的なボタンスタイルを持つ `Button` コンポーネントを定義しています。このスタイルは、すべての SNS ボタンで共通して適用されます。

```tsx
const TwitterButton = styled(Button)`
  background-color: #55acee;
  color: #fff;
`

const FacebookButton = styled(Button)`
  background-color: #3b5998;
  color: #fff;
`
```

上記では、各 SNS に特有の色を背景色として設定し、テキストの色を白に設定することで、Twitter と Facebook のボタンを個別にスタイリングしています。

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

ここで、コンポーネントの Props を定義しています。これらの Props は、各 SNS のシェア機能で使用されます。

```tsx
const SnsBtn = ({ url, title }: Props) => {
  const encodedUrl = encodeURIComponent(url)
  const encodedTitle = encodeURIComponent(title)
  //...
}
```

コンポーネント `SnsBtn` は、受け取った `url` と `title` をエンコードし、それぞれを `encodedUrl` と `encodedTitle` として保存します。

```tsx
return (
  <SnsButtons>
    <TwitterButton href={`https://twitter.com/share?url=${encodedUrl}&text=${encodedTitle}`} target="_blank" rel="noopener noreferrer">
      <img
        src="/icon/twitter.svg"
        alt="Twitter"
        width="20

"
        height="20"
      />
    </TwitterButton>
    <FacebookButton href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`} target="_blank" rel="noopener noreferrer">
      <img src="/icon/facebook.svg" alt="Facebook" width="20" height="20" />
    </FacebookButton>
  </SnsButtons>
)
```

`return` にて、エンコードされた `url` と `title` を用いて Twitter と Facebook のボタンがレンダリングされます。これらのボタンはそれぞれの SNS のシェアリンクを持っており、ボタンをクリックすると新しいタブで該当のシェアリンクが開きます。

最後に、コンポーネントをエクスポートします。他のファイルからこのコンポーネントをインポートして使用できるようにするためのステップです。

### コンポーネントを呼び出す

この `SnsBtn` コンポーネントを呼び出すには、以下のような形で行います。

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

// あるコンポーネント内での利用例
function ExampleComponent() {
  const url = 'https://example.com' // シェアしたいURL
  const title = 'Example title' // シェアしたいタイトル

  return (
    <div>
      <h1>Some content here...</h1>
      <SnsBtn url={url} title={title} />
    </div>
  )
}

export default ExampleComponent
```

上記の例ではまず、`SnsBtn` コンポーネントを `import` 文を用いてインポートしています。次に、`ExampleComponent` 内で `SnsBtn` コンポーネントを使用しています。

`SnsBtn` コンポーネントは、`url` と `title` の 2 つの props を必要とします。これらの値は、各 SNS のシェアリンクを生成するために使用されます。

`url` prop はシェアしたいウェブページの URL、`title` prop はそのページのタイトルを表しています。上記の例では `'https://example.com'` と `'Example title'` をそれぞれの値として設定していますが、実際の使用では、対象となるウェブページの URL とタイトルを指定します。

このようにして `SnsBtn` コンポーネントを呼び出すと、指定した URL とタイトルで各 SNS にシェアするためのボタンが表示されます。ユーザーがこれらのボタンをクリックすると、新しいタブが開き、該当の SNS で指定された URL とタイトルをシェアすることができます。

### 環境変数を使う

記事ごとに動的なタイトルを呼び出すには、次のように環境変数を使用します。

Next.js では、`[id].tsx` のような動的ルーティングが利用できます。その際、ブログ記事などの特定のコンテンツを指すために、その ID を URL の一部として用いることが多いです。

以下に、Next.js の動的ページで、環境変数を使って SNS シェアボタンを実装する例を記載します。

まず、`.env.local` ファイル（あるいは対応する環境設定ファイル）にウェブサイトのベース URL を設定します。`NEXT_PUBLIC_SITE_URL` という名前で設定します。

```txt
NEXT_PUBLIC_SITE_URL=https://example.com
```

そして、 `[id].tsx` ファイルを次のように実装します。

```tsx
// pages/[id].tsx
import { GetStaticProps, GetStaticPaths } from 'next'
import SnsBtn from '../components/SnsBtn'

type PostData = {
  id: string
  title: string
  // 必要に応じて他のフィールドを追加
}

type Props = {
  postData: PostData
}

const PostPage = ({ postData }: Props) => {
  const url = `${process.env.NEXT_PUBLIC_SITE_URL}/${postData.id}`

  return (
    <div>
      <h1>{postData.title}</h1>
      {/* ブログ記事の内容を表示 */}
      <SnsBtn url={url} title={postData.title} />
    </div>
  )
}

export default PostPage

export const getStaticPaths: GetStaticPaths = async () => {
  // ブログ記事のIDを全て取得し、paths を生成
  const paths = /* IDの配列を取得する処理 */
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  // ブログ記事のデータを取得
  const postData: PostData = /* IDをもとにデータを取得する処理 */
  return { props: { postData } }
}
```

ここでは、動的なページの生成を行う `getStaticPaths` と `getStaticProps` を利用しています。それぞれが必要なデータの取得やパスの生成を行います。

`getStaticPaths` は静的生成が必要な全てのパス（この場合、全ブログ記事の ID）を返します。そして `getStaticProps` は、各パスに対するプロパティ（この場合、各ブログ記事のデータ）を返します。

このようにすることで、各ブログ記事ページに適切な URL とタイトルが設定された SNS シェアボタンが配置されます。


Next.js と TypeScript を用いて独自のSNSボタンの作成方法を丁寧に解説します。独自性と可読性を重視したコードで実装します。

Next.js と TypeScript で、SNSボタンを作る


## TL;DR

Emotion.js の styled を使って、アコーディオンコンポーネントを実装します。

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

### 全体のコード

/components/Animation/Accordion.tsx

```tsx
import { useState } from 'react'
import styled from '@emotion/styled'

interface AccordionProps {
  title: string
  content: React.ReactNode // ReactNode は、React の要素を表す型
  closedIcon: string
  openedIcon: string
}

const AccordionButton = styled.button`
  width: 100%;
  height: 80px;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  color: black;

  &:focus {
    outline: none;
  }
`

const AccordionIcon = styled.img`
  width: 20px;
  height: 20px;
`

const AccordionContent = styled.div`
  margin-bottom: 20px;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #fff;
  box-sizing: border-box;
  transition: height 0.3s ease-in-out;
  p {
    padding: 24px;
  }
`

const Accordion = ({ title, content, closedIcon, openedIcon }: AccordionProps) => {
  const [isOpen, setIsOpen] = useState(false)

  const toggleAccordion = () => {
    setIsOpen(!isOpen)
  }

  return (
    <div>
      <AccordionButton onClick={toggleAccordion}>
        <span>{title}</span>
        <AccordionIcon src={isOpen ? openedIcon : closedIcon} alt={isOpen ? 'opened' : 'closed'} />
      </AccordionButton>
      <AccordionContent style={{ height: isOpen ? 'auto' : 0 }}>{content}</AccordionContent>
    </div>
  )
}

export default Accordion
```

呼び出し

```tsx
// 型定義
import { NextPage, GetStaticProps } from 'next'
// Acordion
import Accordion from 'components/Animation/Accordion'

const Home: NextPage = () => {
  const handleTabClick = (index: number) => {
    console.log(`Tab ${index + 1} is clicked!`)
  }
  return (
    <>
      {/* Accordion */}
      <TTL>Accordion</TTL>
      <Accordion title="Accordion 1" content={<p>Content for Accordion 1 goes here.</p>} closedIcon="./icon/triangle-under.svg" openedIcon="./icon/triangle.svg" />
      <Accordion title="Accordion 2" content={<p>Content for Accordion 2 goes here.</p>} closedIcon="./icon/triangle-under.svg" openedIcon="./icon/triangle.svg" />
      <Accordion title="Accordion 3" content={<p>Content for Accordion 3 goes here.</p>} closedIcon="./icon/triangle-under.svg" openedIcon="./icon/triangle.svg" />
    </>
  )
}

export default Home
```

### 解説

上のコードを解説します。

こちらのコードでは、React を使ってアコーディオンコンポーネントを作成しています。`styled`を使ってスタイリングされたコンポーネントも使用しています。では、一部分ずつ見ていきましょう。

#### Accordion コンポーネント

```tsx
interface AccordionProps {
  title: string
  content: React.ReactNode // ReactNode は、React の要素を表す型
  closedIcon: string
  openedIcon: string
}
```

まずはじめに、Accordion コンポーネントが受け取る props の型を定義しています。`title` は文字列で、`content` は React のノード（つまり、何らかの JSX）です。`closedIcon`と`openedIcon`は、それぞれ閉じているときと開いているときに表示されるアイコンの URL を表します。

```tsx
const [isOpen, setIsOpen] = useState(false)

const toggleAccordion = () => {
  setIsOpen(!isOpen)
}
```

次に、Accordion コンポーネントの内部状態を表す `isOpen` を定義しています。これはアコーディオンが開いているか閉じているかを表すブール値です。`toggleAccordion` 関数は、その値をトグルするためのものです。

```tsx
return (
  <div>
    <AccordionButton onClick={toggleAccordion}>
      <span>{title}</span>
      <AccordionIcon src={isOpen ? openedIcon : closedIcon} alt={isOpen ? 'opened' : 'closed'} />
    </AccordionButton>
    <AccordionContent style={{ height: isOpen ? 'auto' : 0 }}>{content}</AccordionContent>
  </div>
)
```

そして、このコンポーネントが返す JSX を定義しています。アコーディオンのタイトルとアイコンが含まれるボタンと、コンテンツ部分があります。ボタンがクリックされると `toggleAccordion` 関数が呼び出され、アコーディオンが開いたり閉じたりします。また、アイコンとコンテンツ部分の表示は `isOpen` の値によって変わります。

#### スタイル付きコンポーネント

このコードでは Emotion の `styled` 関数を使ってスタイル付きコンポーネントを作成しています。この関数を使うと、通常の React コンポーネントと同じようにスタイル付きコンポーネントを使用できます。これにより CSS の再利用や動的なスタイリングが可能になります。

#### Home コンポーネント

こちらはアコーディオンコンポーネントを実際に使用している例です。それぞれのアコーディオンに異なるタイトルとコンテンツ、そして同じアイコンを設定しています。これで、このコードの全体像が掴めたかと思います。どうでしょうか？それぞれの部分の役割や働きが理解できましたか？

### アコーディオンを学ぶ

ここまで読んで、「もっと詳しく学びたい！」という方は、以下のリンクを参考にしてみてください。

| タイトル                                                                                       | 説明                                                                                             |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) | MDN では、基本的な HTML のアコーディオン要素について説明しています。                             |
| [W3Schools - How TO - Accordion](https://www.w3schools.com/howto/howto_js_accordion.asp)       | W3Schools では、JavaScript を用いたアコーディオンの基本的な実装方法を紹介しています。            |
| [Material-UI: Accordion](https://mui.com/components/accordion/)                                | Material-UI の公式サイトでは、既製のアコーディオンコンポーネントを提供しており、その使用方法を詳 |


Next.js と TypeScript を使ったアコーディオンコンポーネントの作成方法を、手を動かしながら詳しく解説します。

Next.js と TypeScript で、アコーディオンコンポーネントを作成


## TL;DR

この記事では、Next.js と TypeScript を用いてモーダルウィンドウのコンポーネントを作成する手法について解説します。あくまで一例として見ていただき、自身のプロジェクトに適応させていきましょう。

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

### モーダルウィンドウの実装

それでは、早速モーダルウィンドウを実装してみましょう。まずは、全体のソースコードを見ていただきます。ここでは ModalComponent とその呼び出し方法を示します。

ファイル名：`ModalComponent.tsx`

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

type ModalProps = {
  buttonLabel: string
}

const ModalComponent = ({ buttonLabel }: ModalProps) => {
  const [isOpen, setIsOpen] = useState(false)

  const toggleModal = () => {
    setIsOpen(!isOpen)
  }

  return (
    <>
      <button onClick={toggleModal} css={buttonStyle}>
        {buttonLabel}
      </button>
      {isOpen && (
        <div css={overlayStyle}>
          <div css={modalStyle}>
            <p>This is a modal window.</p>
            <button onClick={toggleModal}>Close</button>
          </div>
        </div>
      )}
    </>
  )
}

const buttonStyle = css`
  /* Button styling */
`

const overlayStyle = css`
  /* Overlay styling */
`

const modalStyle = css`
  /* Modal window styling */
`

export default ModalComponent
```

#### 呼び出し

作成したモーダルウィンドウコンポーネントを実際に呼び出してみましょう。

ファイル名：`home.tsx`

```tsx
import ModalComponent from './ModalComponent'

const Home = () => {
  return (
    <div>
      <h1>Hello, Next.js</h1>
      <ModalComponent buttonLabel="Open Modal" />
    </div>
  )
}

export default Home
```

この `App` コンポーネント内で `ModalComponent` を呼び出しています。ボタンのラベルとして `buttonLabel` プロパティに "Open Modal" を渡しています。これで、モーダルウィンドウが完成しました。ボタンをクリックするとモーダルウィンドウが表示され、再度クリックすると閉じます。

### コード解説

上記のソースコードを分解しながら詳しく見ていきましょう。今回のコードでは、Emotion という CSS-in-JS ライブラリを用いています。

まず、`useState` を使ってモーダルウィンドウが開いているかどうかを管理する `isOpen` という state を作成します。初期値は `false` として、モーダルウィンドウを閉じた状態から始めます。

次に `toggleModal` 関数を定義します。この関数はボタンがクリックされるたびに `isOpen` の値を反転させ、モーダルウィンドウを開閉します。

そして、JSX 内でボタンとモーダルウィンドウをレンダリングします。モーダルウィンドウは `isOpen` の値が `true` のときだけ表示します。

最後に、それぞれの要素に対する CSS を定義します。この部分はお好みでデザインしてください。

### モーダルウィンドウを理解する

ここまで読んで、「もっと詳しく学びたい！」という方は、以下のリンクを参考にしてみてください。

| タイトル                                                                                         | 説明                                                                 |
| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- |
| [MDN Web Docs: Dialog Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) | HTML のモーダルウィンドウについての基本的な説明が書かれています。    |
| [CSS-Tricks: Creating a Modal Dialog](https://css-tricks.com/considerations-styling-modal/)      | モーダルウィンドウをデザインする際の考慮事項について解説しています。 |
| [React 公式ドキュメント: ポータル](https://ja.reactjs.org/docs/portals.html)                     | React のポータルはモーダルウィンドウの実装によく用いられます。       |

### モーダルウィンドウの活用

このモーダルウィンドウのコンポーネントは、ユーザーにメッセージを伝えるため、フォームの入力を求めるためなど、さまざまな場面で活用できます。

モーダルウィンドウのポップアップスタイルは、ユーザーの注意を引くのに非常に有効です。ただし、頻繁に表示するとユーザー体験を阻害する可能性があるため、適度な使用が望まれます。

また、モーダルウィンドウの内容は明確で簡潔にすることが重要です。ユーザーは素早く情報を摂取し、続けてアクションを取ることが期待されます。これらを踏まえて、ユーザー体験を向上させるための効果的なモーダルウィンドウを設計しましょう。


Next.js と TypeScript を活用してモーダルウィンドウのコンポーネントを作る手順を詳しく解説します。

2023-05-27

Next.js と TypeScript で、スパムメールを避ける mailto の実装方法

2023-05-27

Next.js と TypeScript で、CORS 問題を解決する

2023-05-27

Next.jsで、リダイレクトさせる

2023-05-26

Next.js と TypeScript で、Google Adsense を表示させる

2023-05-26

Next.js と TypeScript で、Swiper スライダーを実装する

2023-05-26

Next.js と TypeScript で、vercel/og のOG画像を生成する

2023-05-25

コムテブログを、WordPressからNext.jsへリニューアルしました

2023-05-25

Next.js と TypeScript で、SNSボタンを作る

2023-05-24

Next.js と TypeScript で、アコーディオンコンポーネントを作成

2023-05-24

Next.js と TypeScript で、モーダルウィンドウを実装する方法