
## 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 を活用してモーダルウィンドウのコンポーネントを作る手順を詳しく解説します。

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     |

### タブ切り替えコンポーネントの実装

まず、具体的なコードを見てみましょう。

```tsx
// components/Tabs.tsx

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

type TabProps = {
  tabs: string[]
}

const Tabs = ({ tabs }: TabProps) => {
  const [activeTab, setActiveTab] = useState(tabs[0])

  return (
    <div>
      {tabs.map((tab) => (
        <button
          key={tab}
          onClick={() => setActiveTab(tab)}
          css={css`
            background-color: ${tab === activeTab ? 'blue' : 'white'};
            color: ${tab === activeTab ? 'white' : 'black'};
          `}
        >
          {tab}
        </button>
      ))}
      <div>{activeTab} content</div>
    </div>
  )
}

export default Tabs
```

このコードは、タブのリストを受け取り、各タブをクリックするとアクティブなタブが変更され、その内容が表示されるコンポーネントを定義します。

呼び出し

タブ切り替えコンポーネントを任意のページから利用するためには、以下のようにコンポーネントをインポートし、タブのリストを `tabs` プロパティとして渡します。

```tsx
// pages/index.tsx

import Tabs from '../components/Tabs'

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Tabs tabs={['Tab1', 'Tab2', 'Tab3']} />
    </div>
  )
}

export default HomePage
```

このように `Tabs` コンポーネントをページに配置し、`tabs` プロパティにタブの名前を配列で渡すだけで、タブ切り替え機能が手に入ります。かなりスッキリと実装できるのが、コンポーネントベースの設計の良いところですよね。

### コード解説

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

まず、`useState` フックを使用して `activeTab` の状態を管理します。初期値は `tabs` 配列の最初の要素とします。

次に、 `tabs` 配列をマップして、各タブに対応するボタンを作成します。ボタンがクリックされると `setActiveTab` が呼び出され、 `activeTab` の値がそのタブに設定されます。

そして、Emotion を用いてボタンの背景色と文字色を設定します。アクティブなタブは背景色が青で文字色が白になり、非アクティブなタブは背景色が白で文字色が黒になります。

最後に、アクティブなタブの内容を表示します。ここではシンプルにタブの名前と "content" を表示していますが、実際のアプリケーションでは、ここにタブに関連するコンポーネントやデータを表示することになります。

### タブ切り替えコンポーネントを学ぶ

さらに深く学びたい方のために、ドキュメントを紹介します。

| タイトル（リンク）                                                  | 説明                            |
| ------------------------------------------------------------------- | ------------------------------- |
| [React 公式ドキュメント](https://reactjs.org/docs/hooks-state.html) | useState フックの詳しい説明     |
| [Next.js 公式ドキュメント](https://nextjs.org/docs)                 | Next.js の詳細なドキュメント    |
| [TypeScript 公式ドキュメント](https://www.typescriptlang.org/docs/) | TypeScript の詳細なドキュメント |
| [Emotion 公式ドキュメント](https://emotion.sh/docs/introduction)    | Emotion の詳細なドキュメント    |

以上、Next.js と TypeScript を使用してタブ切り替えコンポーネントを作成する方法について解説しました。これを使って 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     |

### パンくずリストのコンポーネントをつくる

初めに、パンくずリストを表示するためのコンポーネントを作成します。以下にそのソースコードを示します。

```tsx
import Link from 'next/link'
import { useRouter } from 'next/router'

type BreadcrumbItem = {
  text: string
  href?: string
}

type BreadcrumbProps = {
  items: BreadcrumbItem[]
}

const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
  const router = useRouter()

  return (
    <nav aria-label="Breadcrumb">
      <ol>
        {items.map((item, index) => {
          const isCurrent = index === items.length - 1

          if (isCurrent || !item.href) {
            return <li key={index}>{item.text}</li>
          }

          return (
            <li key={index}>
              <Link href={item.href}>
                <a>{item.text}</a>
              </Link>
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

export default Breadcrumb
```

このコンポーネントでは、パンくずリストを生成するために必要な各アイテムが、`BreadcrumbItem` 型の配列として `items` プロパティで渡されます。そして、配列の各アイテムは、表示するテキストとリンク先の URL（必要な場合）を含むオブジェクトになります。

それぞれのアイテムがパンくずリストの最後のアイテムかどうかを判定するために、`isCurrent` を使用しています。これにより、現在のアイテム（最後のアイテム）にリンクを表示しないようにしています。これは一般的なパンくずリストの挙動と合致

します。

### パンくずリストの利用

上記のコンポーネントを用いて、具体的にどのようにパンくずリストを実装できるかを見てみましょう。以下は、その一例です。

```tsx
import Breadcrumb from './Breadcrumb'

const MyPage = () => {
  const breadcrumbItems = [{ text: 'Home', href: '/' }, { text: 'Blog', href: '/blog' }, { text: 'My Article' }]

  return (
    <div>
      <Breadcrumb items={breadcrumbItems} />
      <h1>My Article</h1>
      <p>This is my article.</p>
    </div>
  )
}

export default MyPage
```

`MyPage` コンポーネント内で、`Breadcrumb` コンポーネントを呼び出しています。パンくずリストの各アイテムは `breadcrumbItems` 配列に定義されており、その配列を `Breadcrumb` コンポーネントの `items` プロパティに渡しています。

### パンくずリストを学ぶ

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

| リンク                                                                                     | 説明                                                                   |
| ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| [Breadcrumb Navigation UX](https://www.nngroup.com/articles/breadcrumb-navigation-useful/) | パンくずリストのユーザーエクスペリエンスについて解説している記事です。 |
| [A Complete Guide to Breadcrumbs](https://css-tricks.com/a-complete-guide-to-breadcrumbs/) | パンくずリストの作成とその使用方法についての詳細なガイドです。         |
| [Breadcrumb in Next.js](https://flaviocopes.com/nextjs-breadcrumb/)                        | Next.js でのパンくずリストの作成について具体的に解説している記事です。 |


この記事では、Next.js と TypeScript を用いて、パンくずリストのコンポーネントを作成する手法を解説します。

Next.js と TypeScript で、パンくずリストを実装する方法


## TL;DR

本記事では Next.js と TypeScript を使って Google Analytics のコンポーネントを作り、ウェブサイトに統合する方法を詳しく説明します。

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

### Google Analytics のコンポーネント作成

まず初めに、Google Analytics のコンポーネントを作成しましょう。具体的には、Google Analytics と通信するためのカスタムフックを作成します。これは、アプリケーションのライフサイクルに応じて Google Analytics へのイベントを送信するために使用されます。

```tsx
// components/GoogleAnalytics.tsx
import { useRouter } from 'next/router'
import { useEffect } from 'react'

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

declare global {
  interface Window {
    gtag: (...args: any[]) => void
  }
}

const GoogleAnalytics = () => {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (typeof window.gtag === 'function') {
        window.gtag('config', GA_MEASUREMENT_ID, {
          page_path: url,
        })
      }
    }

    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return null
}

export default GoogleAnalytics
```

こちらのソースコードを解説します。

このコードは、Next.js アプリケーションで Google Analytics(GA4) を利用するためのコンポーネントです。特に、SPA（シングルページアプリケーション）におけるページビューのトラッキングに対応しています。

```tsx
const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
```

上記のコードで、環境変数から Google Analytics(GA4) の計測 ID（`GA_MEASUREMENT_ID`）を取得しています。Next.js では、`NEXT_PUBLIC_` で始まる環境変数はブラウザに公開されるため、このようにしてブラウザ側のスクリプトで利用することが可能です。

```tsx
declare global {
  interface Window {
    gtag: (...args: any[]) => void
  }
}
```

Google Analytics(GA4) は、`gtag.js` というグローバルな関数を介して操作します。しかし、この `gtag` 関数はデフォルトの TypeScript の型定義には存在しないため、ここではグローバルな `Window` インターフェースを拡張して `gtag` 関数の型定義を追加しています。

```tsx
const GoogleAnalytics = () => {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (typeof window.gtag === 'function') {
        window.gtag('config', GA_MEASUREMENT_ID, {
          page_path: url,
        })
      }
    }

    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return null
}
```

ここが本ソースコードの中心部分です。`useEffect` という React のフックを使って、ルート（ページ）が変わる度に `handleRouteChange` 関数を呼び出します。`handleRouteChange` 関数は `gtag` 関数を用いて Google Analytics(GA4) に新しいページビュー情報を送信します。

Next.js の `useRouter` フックを使って取得した `router` オブジェクトの `events` メソッドを通じて、ルートの変更イベント（具体的には `routeChangeComplete` イベント）を購読しています。

`return` の部分では、このコンポーネントがアンマウントされるとき（つまり、このコンポーネントがページから削除されるとき）に、イベントの購読を解除する関数を返しています。これは React のフックのクリーンアップ関数として機能します。

そして最後に、`GoogleAnalytics` コンポーネントが何も描画しないことを明示するために、`return null` を記述しています。

### .env.local ファイルの作成

`.env.local` に、Google Analytics(GA4) の計測 ID（G-xxxxx） する場合は次のように記述しますが、本番では反映されません。

```bash
# google analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=ここに GA4 の ID を入力
```

※ だだし、これはローカル用なのでアップロードされません。Vercel にデプロイした後は、Vercel の管理画面から上述した環境変数を設定する必要があります。「=」は含めないでください。

### コンポーネントでの利用

`_document.tsx` で、次のように設定します。

```tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document(this: any) {
  const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
  return (
    <Html lang="ja">
      <Head>
        {/* Google Analytics 本番環境のみ動作する。ローカル環境で確認したいときは、{process~  をコメントアウトして確認する */}
        {process.env.NODE_ENV === 'production' && (
          <>
            <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`} />
            <script
              dangerouslySetInnerHTML={{
                __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', '${GA_MEASUREMENT_ID}');
                  `,
              }}
            />
          </>
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

あとは `_app.tsx` に作成したカスタムフックを任意のコンポーネントで使用します。

```tsx
import GoogleAnalytics from 'components/GoogleAnalytics'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <GoogleAnalytics />
      <Component {...pageProps} />
    </Layout>
  )
}
```

以上で Google Analytics のコンポーネント作成は完了しました。

### Google シグナルを有効にする

Google Analytics の Universal Analytics（UA）から Google Analytics 4（GA4）への移行に伴い、Google シグナルのデータ収集を有効にする必要があります。

#### GA4 プロパティの作成

Google Analytics の管理画面に行き、アカウントを選択します。その後、「プロパティ」を選択し、「プロパティの作成」をクリックします。新しい GA4 プロパティを作成します。詳細な設定を選択し、プロパティを作成します。

#### データストリームの設定

GA4 プロパティを作成したら、データストリームを設定します。これは、ウェブサイトやアプリからのデータを収集するためのものです。データストリームを作成し、ウェブサイトの URL やアプリの情報を入力します。

#### トラッキングコードの設定

作成した GA4 プロパティのデータストリームから、新しい GA4 トラッキングコードを取得します。これをウェブサイトの適切な部分に追加します。これにより、新しい GA4 プロパティがデータを収集することができます。

#### UA と GA4 の並行運用

移行期間中は、UA のトラッキングコードを削除せずにそのままにします。これにより、UA と GA4 の両方からデータを収集することができ、比較・検証を行うことができます。

#### イベントと目標の設定

GA4 では、イベントとしてデータを収集し、それを基にレポートを作成します。thanks ページなど、必要に応じて、UA で設定していた目標に相当するイベントを GA4 で設定します。

#### レポートの作成

GA4 では、データの視覚化と分析のためにレポートを作成します。UA で利用していたレポートに相当するものを GA4 で作成します。

これで Next.js の各ページで Google Analytics の情報を収集できるようになりました。

### Google Analytics を学ぶ

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

| タイトル                                                                                                              | 説明                                                                                          |
| --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| [Google Analytics 4 認定試験の全問題を解説！](https://www.webanalytics.jp/work/ga4-questions/)                        | Google Analytics 4 の試験問題とその解答を解説しています。                                     |
| [Google アナリティクス公式ガイド](https://support.google.com/analytics/answer/9304153)                                | Google 自身が提供する公式ガイドです。基本的な使い方から高度な機能まで詳しく説明されています。 |
| [Next.js with Google Analytics Example](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics) | Next.js 公式の Google Analytics 例です。ソースコードとともに説明がついています。              |

ここまでで、Google Analytics のコンポーネントを Next.js と TypeScript を使って作成する方法を学びました。お疲れ様でした！


Next.js と TypeScript を使用して Google Analytics のコンポーネントを作成し、ウェブサイトに統合する方法を解説します。

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 で、モーダルウィンドウを実装する方法

2023-05-24

Next.js と TypeScript で、タブ切り替えコンポーネントを作る

2023-05-23

Next.js と TypeScript で、パンくずリストを実装する方法

2023-05-23

Next.js と TypeScript で、Google Analytics(GA4) を導入する