
## TL;DR

この記事では、Next.js と TypeScript を使用した三項演算子の活用方法について解説します。三項演算子は一見シンプルですが、それを適切に使用することでコードの可読性と効率性を飛躍的に向上させることが可能です。本記事ではその具体的な実装法を学び、日々の開発に役立てていきましょう。

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

### 三項演算子とは？

三項演算子は、JavaScript 及び TypeScript における特殊な演算子で、三つのオペランドを取ります。その形式は `condition ? exprIfTrue : exprIfFalse` となります。条件式（`condition`）が真（truthy）である場合、`exprIfTrue` が評価され、偽（falsy）である場合、`exprIfFalse` が評価されます。

```ts
const isEven = (num: number) => (num % 2 === 0 ? 'Even' : 'Odd')

console.log(isEven(5)) // "Odd"
console.log(isEven(6)) // "Even"
```

### Next.js で、三項演算子を活用

コンポーネント内で三項演算子を用いることで、柔軟にレンダリングを制御できます。具体的な例を見ていきましょう。

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

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

type ThemeProps = {
  theme: 'light' | 'dark'
}

const ThemeSwitcher = ({ theme }: ThemeProps) => {
  return (
    <div
      css={css`
        background-color: ${theme === 'light' ? '#FFF' : '#333'};
        color: ${theme === 'light' ? '#333' : '#FFF'};
      `}
    >
      {theme === 'light' ? 'Light Theme' : 'Dark Theme'}
    </div>
  )
}

export default ThemeSwitcher
```

このコンポーネントは、渡された`theme`プロパティが`light`か`dark`に応じて、異なるスタイルとテキストをレンダリングします。三項演算子を使用して、これを一つのコンポーネント内で実現しています。

### 三項演算子の高度な活用

次に、三項演算子を使ったもう少し高度な例を見てみましょう。

ファイル名: `pages/index.tsx`

```tsx
import { useState } from 'react'
import ThemeSwitcher from '../components/ThemeSwitcher'

const HomePage = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')

  const handleThemeSwitch = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'))
  }

  return (
    <div>
      <ThemeSwitcher theme={theme} />
      <button onClick={handleThemeSwitch}>Switch Theme</button>
    </div>
  )
}

export default HomePage
```

ここでは、useState フックと三項演算子を組み合わせてテーマの切り替えを実装しています。ボタンがクリックされるたびに、`handleThemeSwitch`関数が呼び出され、三項演算子を使用して現在のテーマを切り替えます。

以上が三項演算子の基本的な活用方法になります。このように三項演算子は、一見シンプルな機能ですが、Next.js と TypeScript のコードの中で効率的に利用することで、可読性や保守性を向上させ、コードの効率を高めることができます。

### Emotion との組み合わせ

Emotion を用いた高度な例を挙げてみましょう。

Emotion の一部として提供されている`css`関数は、プロパティの値として関数を受け取ることができます。これを利用して、引数に応じて動的にスタイルを変更することが可能です。

以下にその例を示します。

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

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

type ResponsiveContainerProps = {
  width: string
  children: React.ReactNode
}

const responsiveWidthStyles = (width: string) => css`
  width: 100%;

  @media (min-width: 768px) {
    width: ${width};
  }
`

const ResponsiveContainer = ({ width, children }: ResponsiveContainerProps) => {
  return <div css={responsiveWidthStyles(width)}>{children}</div>
}

export default ResponsiveContainer
```

この`ResponsiveContainer`コンポーネントは、`width`プロパティを受け取り、それを基にレスポンシブな幅を持つコンテナを生成します。ここでのポイントは、`responsiveWidthStyles`関数です。この関数は、`width`引数を受け取り、それを基に CSS を生成します。

そして、これを`css`関数の中で利用することで、受け取った`width`に応じて動的にスタイルを生成することが可能になります。

利用例は以下の通りです。

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

const HomePage = () => {
  return (
    <ResponsiveContainer width="800px">
      <h1>Welcome to My Website!</h1>
      <p>This is some sample text.</p>
    </ResponsiveContainer>
  )
}

export default HomePage
```

ここでは、`ResponsiveContainer`コンポーネントに`800px`を指定しています。これにより、ビューポートが 768px 以上の時、このコンテナの幅は 800px になります。それ以下のビューポート幅では、100%になります。

以上が Emotion と三項演算子を活用した高度な使用例になります。これを使えば、props によって動的にスタイルを変更することが可能となり、大変パワフルなツールとなりますよ。


Next.js と TypeScript を使用し、三項演算子を適切に使用することで、コードの可読性と効率性を高める方法を解説します。

Next.js と TypeScript で、三項演算子を鮮やかに扱う


## TL;DR

このページでは、JavaScript の Truthy（ツゥルーシー）と Falsy（フォルシー）の概念について、Next.js と TypeScript の観点から詳しく解説します。Truthy と Falsy の概念は、JavaScript を使った開発において頻繁に遭遇するので、しっかり理解しておくことは大切です。

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

### Truthy と Falsy とは？

JavaScript では、ブール値として評価されるときに「真」とみなされる値を `Truthy`、逆に「偽」とみなされる値を `Falsy` と言います。これらは Boolean 型に変換される時の結果を表しています。

Falsy な値は次のものです。

- `false`
- `0`
- `""`（空文字列）
- `null`
- `undefined`
- `NaN`

これ以外の値は全て Truthy です。

### Next.js で、Truthy と Falsy を活用

Truthy と Falsy の概念は、条件文やショートサーキット評価で頻繁に利用されます。以下に、Next.js のコンポーネントでその利用例を見てみましょう。

ファイル名：`components/TruthyFalsyExample.tsx`

```tsx
type Props = {
  name?: string
}

const TruthyFalsyExample = ({ name }: Props) => {
  return <div>{name || 'Guest'}</div>
}

export default TruthyFalsyExample
```

このコンポーネントは、`name` プロパティが存在すればその値を表示し、存在しない（つまり、Falsy な値）場合は "Guest" を表示します。これがショートサーキット評価の一例で、JavaScript の Truthy と Falsy の特性を活用したものです。

このコードは、「`name`が Truthy ならそれを返す、Falsy なら "Guest" を返す」というロジックを簡潔に表現しています。

ちょっとした UI の切り替えやデフォルト値の設定など、こういった Truthy と

Falsy の特性を活用することで、コードが簡潔で理解しやすくなりますよね。

ただし、このようなショートサーキット評価は Falsy な値が意図した値である場合には注意が必要です。上述の例で `name` が空文字列（`""`）であることが意図されている場合でも "Guest" が表示されてしまいます。このようなケースでは、明示的なチェックを行う必要があります。

### Nullish Coalescing Operator の活用

JavaScript の ES2020 では、Nullish Coalescing Operator (`??`) が導入されました。これは左辺が nullish（`null` または `undefined`）である場合にのみ、右辺を評価する演算子です。

これを使うことで、上述のようなケースでも、意図したデフォルト値を適用することが可能となります。以下にその例を示します。

ファイル名：`components/NullishCoalescingExample.tsx`

```tsx
type Props = {
  name?: string
}

const NullishCoalescingExample = ({ name }: Props) => {
  return <div>{name ?? 'Guest'}</div>
}

export default NullishCoalescingExample
```

このコンポーネントでは、`name` プロパティが `null` や `undefined` の場合のみ "Guest" を表示し、それ以外（空文字列や `0` など）では `name` の値をそのまま表示します。これにより、Falsy な値が意図した値である場合でも適切にハンドリングできます。

Nullish Coalescing Operator は TypeScript でも利用可能で、型安全なデフォルト値の設定などに利用できます。JavaScript の Truthy と Falsy の概念と一緒に、Nullish Coalescing Operator の使用方法も覚えておくと、より強力なコードを書くことができるようになると思います。

さらに実践的な Truthy と Falsy の活用例をご紹介しましょう。

### フォームのバリデーション

Web アプリケーション開発において、フォームのバリデーションはよく見かける課題ですよね。入力項目が正しい形式であるか、必要な項目が全て入力されているかなど、多くのチェックが必要になる場合があります。Truthy と Falsy の概念はこうしたバリデーションを簡潔に記述するのに役立ちます。

以下に、Next.js と TypeScript を使用して、フォームのバリデーションを行うシンプルなコンポーネントを示します。

ファイル名：`components/FormValidationExample.tsx`

```tsx
import { useState } from 'react'

type FormState = {
  name: string
  email: string
}

const FormValidationExample = () => {
  const [formState, setFormState] = useState<FormState>({
    name: '',
    email: '',
  })

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    })
  }

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()

    if (!formState.name || !formState.email) {
      alert('名前とメールアドレスの入力は必須です。')
      return
    }

    // 続けてサーバーへの送信などの処理を行う
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formState.name} onChange={handleChange} placeholder="名前" />
      <input type="email" name="email" value={formState.email} onChange={handleChange} placeholder="メールアドレス" />
      <button type="submit">送信</button>
    </form>
  )
}

export default FormValidationExample
```

このコンポーネントでは、フォームの状態を `useState` フックで管理し、`handleChange` 関数で入力の変更をハンドリングしています。`handleSubmit` 関数では、フォームが送信されたときに実行されるバリデーションを行っています。

ここでのポイントは、`if (!formState.name || !formState.email)` の部分です。ここでは、`formState.name` と `formState.email` が Falsy（空文字列など）であるかどうかをチェックし、もし Falsy であればエラーメッセージを表示して処理を終了しています。このように Truthy と Falsy の概念を活用することで、簡潔かつ直感的なバリデーションを行うことができるんですね。


JavaScript の Truthy と Falsy の概念を Next.js と TypeScript で解説します。そのユースケースと注意点も深掘りします。

Next.js と TypeScript で、Truthy と Falsy の深淵を解明


## TL;DR

この記事では、論理積演算子と論理和演算子の使い方について解説します。Next.js と TypeScript を用いて、これらの演算子がどのように動作し、それらがコードの効率性と可読性をどのように改善するかについて学びます。

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

### 論理積 (&&)演算子と論理和 (||)演算子とは？

論理積演算子と論理和演算子は、論理値（真または偽）の操作に使用される基本的な演算子です。

論理積演算子 (`&&`)は、両方のオペランド（つまり演算子が作用する値）が真であるときに真を返します。

「論理積」という言葉は「AND」演算子を表し、それ自体が論理学とプログラミングの両方でよく使われる用語ですね。論理積は全ての条件が真であるときのみ真となる論理演算を指します。JavaScript や TypeScript では `&&` 演算子がこれに対応しています。

同様に、「論理和」は「OR」演算子を指し、少なくとも一つの条件が真であるときに真となる論理演算を指します。JavaScript や TypeScript では `||` 演算子がこれに対応しています。

論理和演算子 (`||`)は、少なくとも一方のオペランドが真であるときに真を返します。

```ts
let isSunny = true
let isHoliday = false

console.log(isSunny && isHoliday) // false
console.log(isSunny || isHoliday) // true
```

次は複数のコンポーネントを制御する例。

```tsx
type Props = {
  isRed: boolean
  isYellow: boolean
  isGreen: boolean
}

const TrafficLight = ({ isRed, isYellow, isGreen }: Props) => {
  return (
    <div>
      {isRed && <p>赤信号です。止まりましょう。</p>}
      {isYellow && <p>黄信号です。注意しましょう。</p>}
      {isGreen && <p>緑信号です。進みましょう。</p>}
      {!isRed && !isYellow && !isGreen && <p>信号故障中です。十分に注意してください。</p>}
    </div>
  )
}

export default TrafficLight
```

このコンポーネントでは、信号機の各状態（赤、黄、緑）に対応する 3 つのプロパティを受け取ります。論理積演算子 (`&&`) を使用して、各信号状態が `true` のときに対応するメッセージを表示します。また、すべての信号状態が `false` の場合（信号機が故障していると想定）には、別のメッセージを表示します。これは `!` 演算子（否定演算子）と `&&` 演算子を組み合わせて表現されています。

### Next.js で、論理積演算子と論理和演算子を実装

Next.js では、論理積演算子と論理和演算子を使用して、コンポーネントの表示を制御することが多いです。

`components/WeatherReport.tsx`:

```tsx
type Props = {
  isSunny: boolean
  isHoliday: boolean
}

const WeatherReport = ({ isSunny, isHoliday }: Props) => {
  return (
    <div>
      {isSunny && isHoliday && <p>素晴らしい日ですね！</p>}
      {isSunny || isHoliday ? <p>楽しんでください！</p> : <p>頑張ってください！</p>}
    </div>
  )
}

export default WeatherReport
```

このコンポーネントでは、`isSunny` と `isHoliday` の 2 つのプロパティを受け取り、論理積演算子と論理和演算子を使用して表示するメッセージを制御します。

ここで論理積演算子 (`&&`) は、両方の条件が真である場合にのみ `<p>素晴らしい日ですね！</p>` をレンダリングします。つまり、`isSunny` と `isHoliday` が両方とも `true` の場合にのみ表示されます。

一方で、論理和演算子 (`||`) は、少なくとも一方の条件が真である場合に `<p>楽しんでください！</p>` をレンダリングします。そうでなければ、 `<p>頑張ってください！</p>` が表示されます。これは、晴れているか、休日である場合にメッセージが表示されるという意味です。

### 短絡評価

論理積演算子 (`&&`) と論理和演算子 (`||`) は、短絡評価と呼ばれる特別な動作をします。

短絡評価（Short-Circuit Evaluation）は、論理演算子が左から右に評価される時、最初の値だけで結果が確定する場合に、残りの値の評価をスキップする動作を指します。JavaScript や TypeScript では、`&&`（論理積）と `||`（論理和）の 2 つの論理演算子が短絡評価を行います。

`&&`演算子の場合、最初の値が falsy（false として扱われる値）である場合、その時点で評価は終了し、その値がそのまま返されます。逆に、最初の値が truthy（true として扱われる値）であれば、次の値に進んで評価が行われます。

```tsx
console.log(false && 'Hello') // Output: false
console.log(true && 'Hello') // Output: 'Hello'
```

`||`演算子の場合、最初の値が truthy である場合、その時点で評価は終了し、その値がそのまま返されます。逆に、最初の値が falsy であれば、次の値に進んで評価が行われます。

```tsx
console.log(false || 'Hello') // Output: 'Hello'
console.log(true || 'Hello') // Output: true
```

短絡評価は、条件式を簡略化したり、特定の条件下でだけある処理を実行したりする際に便利です。例えば、オブジェクトのプロパティにアクセスする前にそのオブジェクトが null または undefined でないことを確認する際などによく使用されます。

他の例として、次のコードは、環境変数`process.env.BASE_URL`の値が設定されているかどうかにより、どの URL を使用するかを決定するコードです。

```tsx
process.env.BASE_URL || 'http://localhost:3000'
```

この式は、`||`（論理和）演算子を使用しています。この演算子は左から右に評価され、最初に truthy（true と同等の値）が見つかった時点でその評価を停止します。そしてその truthy な値を返します。

Vercel で、環境変数`process.env.BASE_URL`が設定（truthy）されている場合、その設定値が使用されます。逆に`process.env.BASE_URL`が設定（truthy）されていない場合（つまり falsy の場合、例えば undefined や空文字列など）、デフォルト値として`'http://localhost:3000'`が使用されます。

このような構造は、開発環境と本番環境で異なる設定をする場合などに便利です。開発環境では環境変数を設定せず、デフォルトの URL を使用し、本番環境では環境変数を設定して本番用の URL を使用する、といった使い方ができます。

もう一つの例として、こちらをご覧ください。

```tsx
process.env.NODE_ENV !== 'development' && 本番環境でのみ実行したい処理
```

この条件式`process.env.NODE_ENV !== 'development'`は、「現在の環境が開発環境（development）ではない場合」を意味します。

`process.env.NODE_ENV`は、多くの JavaScript 環境（特に Node.js やそのフレームワーク）で、現在の実行環境を識別するために使用されます。典型的な値は `'development'`、`'production'`、`'test'`などです。

`!==`は、JavaScript や TypeScript の厳密な不等価演算子で、左辺と右辺が厳密に等しくないときに true を返します。この演算子は、左右の値の型も考慮するため、型変換による誤解釈を防ぐことができます。

したがって、`process.env.NODE_ENV !== 'development'`という表現は、「現在の環境が "development" ではないとき（つまり "production" や "test" などの場合）」を判断しています。

そして、この条件式の後に`&&`演算子が続いている場合、この条件が真（true）であるときのみ、その後ろの処理が実行されます。これは短絡評価の特性を利用したもので、現在の環境が開発環境ではないときに特定の操作を行うようなケースで使用されます。

例えば、アドセンス広告を本番のみ表示して、ローカルでは非表示にするときに使えます。

### 終わりに

論理演算子は JavaScript の基本的な要素であり、TypeScript も同様です。これらを上手に活用することで、コードの条件分岐を簡潔に表現できますよね。さらに深く理解するためには、実際に手を動かしてみることが一番です。ぜひとも試してみてくださいね！


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     |

### 論理否定（!）とは？

論理否定（Logical Negation）は、与えられた条件式の真偽値を反転させる演算子です。条件式の真偽値が `true` であれば `false` に、`false` であれば `true` に変換します。JavaScript や TypeScript では、論理否定演算子として `!` を使用します。論理否定を使う頻度は高いです。

以下に、論理否定の基本的な使用例を示します。

```tsx
const value = true
const negatedValue = !value
console.log(negatedValue) // Output: false
```

論理否定演算子は、条件式の真偽値を反転させるため、条件分岐やフラグの切り替えなどで頻繁に使用されます。

### Next.js での論理否定の実装

Next.js では、TypeScript を使用してコンポーネントを作成することができます。論理否定を使用した条件分岐や真偽値の反転を、Next.js のコンポーネント内で簡単に実装する方法を紹介します。

まず、以下のようなコンポーネントを作成します。

**LogicalNegation.tsx**

```tsx
import React from 'react'

const LogicalNegation = () => {
  const isTrue = true
  const isFalse = false

  return (
    <div>
      <h1>論理否定の実装例</h1>
      <p>isTrue の値: {isTrue ? 'true' : 'false'}</p>
      <p>isFalse の値: {!isFalse ? 'true' : 'false'}</p>
    </div>
  )
}

export default LogicalNegation
```

このコンポーネントでは、`isTrue` と `isFalse` という真偽値を持つ変数を定義し、

それぞれの値を画面に表示しています。また、`isFalse` の値に対して論理否定演算子を使用して値を反転させています。

上記コンポーネントを呼び出すページは以下のようになります。

**pages/index.tsx**

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

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <LogicalNegation />
    </div>
  )
}

export default Home
```

この `Home` ページでは、先ほど作成した `LogicalNegation` コンポーネントを呼び出しています。これにより、論理否定が正しく動作していることをブラウザで確認することができます。

### 二重否定（!!）との違い

二重否定とは、文字通り論理否定を 2 回適用したものを指します。**二重否定は値の真偽値を確認したい場合に便利に使用できます**。JavaScript や TypeScript では、`!!` を使用して二重否定を表現します。

具体的には、以下のような使用例があります。

```tsx
const value = true
const doubleNegatedValue = !!value
console.log(doubleNegatedValue) // Output: true
```

ここで、`value` が `true` なので、一回目の `!` により `false` になります。そして、再度 `!` を適用することで `false` が `true` に戻ります。つまり、二重否定は元の値を保持することになります。

ただし、二重否定の大きな特徴として「真偽値への変換」があります。JavaScript ではあらゆる値が論理演算の文脈で`true`または`false`に強制変換されます。この強制変換の挙動を利用することで、任意の値を明示的に`true`または`false`に変換することができます。

例えば、空文字列`""`は論理演算の文脈では`false`となりますが、それ以外の文字列は`true`となります。

```tsx
console.log(!!'Hello, World!') // Output: true
console.log(!!'') // Output: false
```

一方、論理否定は一度だけ否定を行うので、`true`は`false`に、`false`は`true`に変換します。論理否定は、条件式の真偽値を反転させるために使用されます。しかし、論理否定は二重否定と違って、値を強制的に`true`または`false`に変換する機能はありません。

このように、Next.js と TypeScript を使用すれば、論理否定を簡単に実装して条件式の真偽値を反転させることが可能なんですよ。以上、Next.js と TypeScript を使って論理否定を実装する方法について解説しました。


このページでは、Next.js と TypeScript を使用して、論理否定を実装する方法を解説します。

Next.js と TypeScript で、論理否定の実装方法を解説する


## TL;DR

この記事では、JavaScript の表現力を飛躍的に向上させるテンプレートリテラルについて詳しく解説します。Next.js と TypeScript の組み合わせで実装する際の注意点やベストプラクティスについても触れていきます。

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

### テンプレートリテラルとは

バッククオートで囲う文字リテラルです。テンプレートリテラルは、JavaScript の表現法の 1 つで、文字列の中に変数や式を埋め込むことができます。従来の文字列表現では + や連結関数を用いて変数と文字列をつなげる必要がありましたが、テンプレートリテラルを用いると、より直感的で読みやすい形で文字列と変数を結合することが可能になります。

変数や式は `${}` の中に記述します。以下に基本的なテンプレートリテラルの使用例を示します。

```tsx
const name = 'John Doe'
const age = 25

// テンプレートリテラルを使用して文字列と変数を結合
const message = `Hello, ${name}! You are ${age} years old.`

console.log(message) // "Hello, John Doe! You are 25 years old." が出力される
```

このように、テンプレートリテラルは文字列と変数を直感的に結合できるため、コードの可読性を向上させることができます。また、改行や空白もそのまま反映されるため、複数行に渡る文字列を表現するのにも適しています。

### Next.js でテンプレートリテラルを実装する

以下に示すコードは、Next.js と TypeScript を用いてテンプレートリテラルを利用した例です。

ファイル名: pages/index.tsx

```tsx
type UserProps = {
  name: string
  age: number
}

const UserComponent = ({ name, age }: UserProps) => {
  const message = `Hello, ${name}! You are ${age} years old.`

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

export default function Home() {
  const user = { name: 'John Doe', age: 25 }

  return <UserComponent {...user} />
}
```

### コード解説

今回の例では、テンプレートリテラルを使ってユーザーへの挨拶メッセージを作成しています。まず `UserProps` という型を定義し、それをもとに `UserComponent` という関数コンポーネントを作りました。

`UserComponent` 内でテンプレートリテラルを使用しています。`${name}` と `${age}` は、テンプレートリテラル内で変数を展開するための記法ですね。これにより、文字列と変数を綺麗に結合することができます。

そして、このコンポーネントを `Home` 関数内で使用しています。`UserComponent` への props をスプレッド構文（`...user`）で渡しています。こうすることで、props を一括してコンポーネントに渡すことができるんですよ。

### Emotion.js でテンプレートリテラルを実装する

Emotion.js は CSS-in-JS の一つで、JavaScript 内で CSS を直接書くことができます。これを使うことで、コンポーネントのスタイルをコードと一緒に管理することができ、可読性とメンテナンス性が向上します。

そしてもちろん、Emotion.js の中でテンプレートリテラルを活用することができます。これにより、プロパティや状態に応じて動的にスタイルを変更することが可能になります。三項演算子も含め、JavaScript の機能は全て使用可能です。

以下に、Emotion.js とテンプレートリテラルを使った例を示します。

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

type ButtonProps = {
  primary: boolean
}

const Button = ({ primary }: ButtonProps) => {
  return (
    <button
      css={css`
        background-color: ${primary ? 'blue' : 'white'};
        color: ${primary ? 'white' : 'black'};
      `}
    >
      Click me
    </button>
  )
}

export default function Home() {
  return (
    <>
      <Button primary={true} />
      <Button primary={false} />
    </>
  )
}
```

この例では、`Button` コンポーネントの `primary` プロパティに応じてボタンの背景色と文字色を変更しています。テンプレートリテラルと三項演算子を組み合わせることで、動的にスタイルを切り替えることが可能になります。

このように、Emotion.js とテンプレートリテラルを活用することで、JavaScript の強力な表現力をスタイリングにも活かすことができます。

### 終わりに

テンプレートリテラルは、簡単に文字列と変数を組み合わせることができるのが一番のメリットです。また、改行や空白もそのまま反映されるため、複数行に渡る文字列を表現するのにも便利です。

さらに、関数を埋め込むことも可能です。これにより、文字列生成の際に計算を行うなど、さらに高度な操作が可能になります。

以上が、Next.js と TypeScript でテンプレートリテラルを活用する方法とそのメリットになります。一見、難しそうなテンプレートリテラルも実際にはシンプルで、色々な場面で活躍する便利な機能なんですよ。JavaScript の表現力を更に引き立ててくれるツールとして、ぜひ積極的に活用してみてください。


テンプレートリテラルはJavaScriptの文字列表現法で、複雑な文字列操作を簡単に行えます。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     |

### 型注釈（Type Annotation）

TypeScript の「Type Annotation」は日本語では「型注釈」または「型アノテーション」と呼ばれます。これは、変数や関数の返り値などに期待されるデータの型を明示的に指定するための構文です。これにより、コードが正しく型に従っているかを静的にチェックでき、エラーやバグの予防に役立ちます。

TypeScript では、変数や引数名の後ろに :型 のように型注釈と呼ばれる型情報を付与し、変数や引数に入れる値を制限することができます。

```tsx
const name: string = 'John'
const age: number = 20

function add(a: number, b: number): number {
  return a + b
}

add(1, 2) // 3
```

上のコードは、TypeScript で書かれたコードの例です。

`name` と `age` の変数はそれぞれ `string` と `number` の型を持つことを宣言しています。`add` 関数では、2 つの引数 `a` と `b` を `number` 型として受け取り、その合計を `number` 型で返すことを示しています。

そして `add(1, 2)` の呼び出しは、引数として `number` 型の値を渡しているので問題ありません。

なお、もし `add` 関数に数値以外の型（例えば文字列）を渡そうとすると、TypeScript はその型の不一致を検出しエラーを表示します。これにより、型の誤りを早期に発見することができます。

以上のように、TypeScript の型システムは、コードの安全性と可読性を向上させ、デバッグを助ける強力なツールとなります。

### Next.js で型定義する

それでは、型定義を活用するための簡単な Next.js プロジェクトを準備しましょう。ここでは、ユーザーの名前と年齢を表示するコンポーネントを作成します。

ファイル名：`components/UserProfile.tsx`

```tsx
type UserProfileProps = {
  name: string
  age: number
}

const UserProfile = ({ name, age }: UserProfileProps) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  )
}

export default UserProfile
```

呼び出し方は、以下のようになります。

ファイル名：`app/page.tsx`

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

const HomePage = () => {
  return (
    <div>
      <UserProfile name="Taro" age={25} />
    </div>
  )
}

export default HomePage
```

### コード解説

さて、それでは上記のコードについて詳しく解説していきます。まず始めに `UserProfile` コンポーネントから見ていきましょう。

```tsx
type UserProfileProps = {
  name: string
  age: number
}
```

この部分で `UserProfileProps` という型を定義しています。この型は、`UserProfile` コンポーネントの props に対する型定義で、name は文字列、age は数値となることを示しています。

```tsx
const UserProfile = ({ name, age }: UserProfileProps) => {
  ...
}
```

そして、この `UserProfile` コンポーネントでは、props として受け取る `name` と `age` の型を `UserProfileProps` として定義しています。これにより、props が期待する型と異なる値が渡されると、コード編集時

に TypeScript がエラーを表示し、バグの早期発見を支援してくれるんですね。

呼び出し側のコードも見てみましょう。

```tsx
<UserProfile name="Taro" age={25} />
```

ここでは `UserProfile` コンポーネントに対して、文字列型の `name` と数値型の `age` を渡しています。もし `age` に文字列を渡そうとすると、TypeScript が型の不一致を検出し、エラーを表示します。

このように、TypeScript の型定義を活用することで、コードの安全性と可読性を向上させることができるというわけなんです。

メリット

- 型の不一致を早期に発見でき、バグの発生を抑えられる
- コードが自己説明的になり、他の開発者が理解しやすくなる
- 定義した型を再利用でき、コードの保守性を向上させる

### 学習リソース

次は、学習に役立つリンクです。

| タイトル                                                                                                      | 説明                                                                                                                          |
| :------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------- |
| [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)                                | TypeScript の公式ドキュメンテーションです。TypeScript の全ての特性、包括的なガイド、詳細な API リファレンスが含まれています。 |
| [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)                                                | このオンライン書籍は TypeScript の各特性を詳細に解説しており、初心者から中級者までの読者に向けて書かれています。              |
| [MDN Web Docs: TypeScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/type) | MDN Web Docs はウェブ開発の信頼性の高いリソースであり、TypeScript の部分には基本的な情報から深い解説までが揃っています。      |
| [TypeScript - Type Annotations](https://www.tutorialsteacher.com/typescript/typescript-type-annotations)      | TypeScript の型注釈についての詳細なチュートリアルを提供しているサイトです。                                                   |
| [TypeScript Essentials Course on Egghead.io](https://egghead.io/courses/typescript-essentials)                | TypeScript の基本をビデオ形式で学べるコースです。各ビデオは短く、特定のトピックに集中しています。                             |

以上が Next.js と TypeScript を用いた基本的な型の定義についての解説でした。型をしっかりと定義することで、より安全で保守性の高いコードを書くことができるんですよね。


Next.js と TypeScript を使用して、型の定義の基本を学ぶ方法を解説します。具体的なソースコードを交えて説明します。

Next.js と TypeScript で、型注釈の基本を学ぶ


## TL;DR

このページでは、TypeScript のプリミティブ型とその具体的な使用法について解説します。Next.js のプロジェクト内で TypeScript を用いる際に、これらの基本的な型を理解することで、より強固で安全なコードを書くことが可能になります。

開発環境：

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

### プリミティブ型とは

プリミティブ型とは、プログラミング言語において、その言語の構成要素となる基本的な値のことですね。「原始的な」という意味があります。プリミティブ型は、その言語の文法によって定義されており、それらの型を組み合わせて、より複雑な型を作ることができます。

### TypeScript のプリミティブ型

TypeScript のプリミティブ型の一覧です。

| 型          | 解説                                                                                                                    |
| :---------- | :---------------------------------------------------------------------------------------------------------------------- |
| `number`    | 数値を表現します。整数も小数もこの型で表現します。                                                                      |
| `string`    | 文字列を表現します。シングルクォート(' ')、ダブルクォート(" ")、バッククォート(` `)で囲んだ文字列が該当します。         |
| `boolean`   | 真偽値を表現します。`true` または `false` の値を持つことができます。                                                    |
| `null`      | 値が存在しないことを明示的に表現する値です。                                                                            |
| `undefined` | 値が未定義であることを表現する値です。変数が宣言されているが値が設定されていない場合、その値は `undefined` となります。 |
| `symbol`    | ES6 から追加された型で、ユニークかつ不変の値を生成するために使用されます。                                              |
| `bigint`    | JavaScript の `number` 型が表現できる範囲を超える大きな整数を扱うための型です。ES2020 から追加されました。              |

これらのプリミティブ型を理解することで、さまざまな値を安全に扱うことができます。また、これらの型を用いて、複合型（オブジェクト型、配列型など）を作成することも可能です。

各プリミティブ型の簡単な使用例を示します。

```tsx
// number
const age: number = 25

// string
const name: string = 'John'

// boolean
const isMember: boolean = true

// null
const job: null = null

// undefined
let salary: number | undefined
salary = undefined

// symbol
const key: symbol = Symbol('key')

// bigint
const bigNumber: bigint = BigInt(9007199254740991)
```

各プリミティブ型の定義方法を理解し、適切に型を指定することで、コードの堅牢性と読みやすさを向上させることができます。それぞれの変数が何を表現しているのか、どのような値を持つ可能性があるのかを明示的に示すことで、あなた自身や他の開発者がコードを読んだときに理解しやすくなるんですよ。

### プリミティブ型を使った実装

ソースコードは以下の通りです。このコードでは、TypeScript のいくつかのプリミティブ型を用いたコンポーネントの作成とそれを呼び出す方法を示しています。

```tsx
// components/PrimitiveTypes.tsx

type PrimitiveTypesProps = {
  message: string
  count: number
  isActive: boolean
}

const PrimitiveTypes = ({ message, count, isActive }: PrimitiveTypesProps) => {
  return (
    <div>
      <p>{message}</p>
      <p>{count}</p>
      <p>{isActive ? 'Active' : 'Inactive'}</p>
    </div>
  )
}

export default PrimitiveTypes
```

呼び出しは次のようになります。

```tsx
// pages/index.tsx

import PrimitiveTypes from '../components/PrimitiveTypes'

export default function Home() {
  return <PrimitiveTypes message="Hello, TypeScript!" count={2023} isActive={true} />
}
```

### コード解説

ここでは、先程のソースコードを見ていきます。

まず、`PrimitiveTypesProps` という型を定義しています。この型は、`PrimitiveTypes` コンポーネントに渡すプロパティ（props）の型を指定しています。3 つのプロパティ `message`, `count`, `isActive` があり、それぞれ `string`, `number`, `boolean` というプリミティブ型を持っています。

次に、`PrimitiveTypes` という関数コンポーネントを定義しています。ここで、前述の `PrimitiveTypesProps` を用いてプロパティの型を指定しています。このコンポーネントは、渡された `message`, `count`, `isActive` を表示するだけのシンプルなものです

。

最後に、この `PrimitiveTypes` コンポーネントを `Home` コンポーネント内で呼び出しています。その際、プロパティとして文字列、数値、真偽値をそれぞれ渡しています。こうすることで、TypeScript はコンパイル時にこれらの値が `PrimitiveTypes` コンポーネントが期待する型と一致しているかをチェックしてくれるんですよ。

#### メリット

こうしたプリミティブ型を理解し、型を明示的に指定することにはいくつかのメリットがあります。

- バグの早期発見：型が不一致の場合、TypeScript はコンパイル時にエラーを吐きます。つまり、コードを実行する前に問題を発見できるというわけなんですよ。
- 自動補完とドキュメンテーション：型が明示的に指定されている場合、エディタはその型に基づいた自動補完を提供します。また、コードを読む人に対しても、それぞれの変数や関数が何を期待しているのかを明示的に示すことができます。
- 可読性と保守性の向上：明示的な型指定は、コードの可読性と保守性を向上させます。どの変数がどのような型を持つべきかを一目で理解できるからです。

以上が、TypeScript のプリミティブ型の理解とそれを活用した Next.js プロジェクトでのコーディングについての解説でした。


この記事では、Next.js と TypeScript のプリミティブ型について、その理解と使い方を具体的なソースコードと共に解説します。

Next.js と TypeScript で、プリミティブ型を理解する


## TL;DR

今回は、TypeScript を用いた変数の実装方法について解説します。Next.js のフレームワークを使い、実践的なアプリケーションの中でどのように変数を扱うのかを学びます。

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

### 変数の実装

変数の宣言には、基本的に、const を使います。変数名の後に、: 型名 を付けることで、変数の型を指定することができます。const はコンスタント（定数）の略で、変数の値を変更できないことを意味します。一度代入されると再代入できません。

TypeScript では主に `let`、`const`、`var` の 3 つのキーワードを使って変数を宣言します。これらにはそれぞれ異なる特性と使い方があります。

```ts
let userName: string = 'John Doe'
const birthYear: number = 1998
var isMember: boolean = true
```

上記のコードでは、それぞれのキーワードを使って変数を宣言し、初期値を設定しています。

### let の使い方

`let` を使って宣言した変数は、後で値を変更することができます。また、`let` はブロックスコープを持つため、その変数は宣言されたブロック内でのみアクセス可能です。

```ts
let age: number = 20
age = 21 // OK
```

### const の使い方

一方、`const` を使って宣言した変数は、再代入が不可能な定数となります。これもブロックスコープを持つため、宣言されたブロック内でのみアクセス可能です。

```ts
const country: string = 'Japan'
country = 'USA' // Error! `const`変数は再代入できません
```

### var の使い方

最後に、`var` を使って宣言した変数も、値の変更が可能です。しかし、`var` は関数スコープを持つため、宣言された関数内でのみアクセス可能となります。この挙動は JavaScript 由来で、現代の開発では `let` や `const` の使用が推奨されます。

```tsx
var city: string = 'Tokyo'
city = 'Kyoto' // OK
```

以上が TypeScript の変数宣言の基本的なパターンです。実際には、型推論や型アノテーション、オブジェクト型、配列型など、より高度な概念も含まれますが、これらの基本を理解することが第一歩となります。

### プリミティブ型

プリミティブとは、プログラミング言語において、基本的な値のことを指します。TypeScript の値は、プリミティブとオブジェクトの 2 つのカテゴリに分類されます。プリミティブは、原始的なという意味です。

TypeScript では JavaScript のプリミティブ型を拡張し、より強力な型システムを提供しています。以下にプリミティブ型とその説明を表にまとめました。

| 型          | 説明                                                                                                                 |
| :---------- | :------------------------------------------------------------------------------------------------------------------- |
| `boolean`   | 真偽値（`true` または `false`）を表す型です。                                                                        |
| `number`    | 数値を表す型で、整数値や浮動小数点数値を表現します。JavaScript と同様に、TypeScript の全ての数値は浮動小数点値です。 |
| `string`    | 文字列を表す型で、テキストデータを表現します。                                                                       |
| `null`      | 値が存在しないことを表す型です。通常、変数が意図的に値を持たない場合に使用します。                                   |
| `undefined` | 値が未定義であることを表す型です。値が設定されていない変数のデフォルトの値です。                                     |
| `symbol`    | ES6 で導入された新しいプリミティブ型で、一意で不変の値を表現します。                                                 |

これらの型を使用することで、変数が取りうる値の範囲を制限し、コードの安全性を向上させることができます。

それぞれの型の使用例を以下に示します。

```tsx
let isCompleted: boolean = false
let count: number = 10
let username: string = 'John Doe'
let nothing: null = null
let notAssigned: undefined = undefined
let uniqueKey: symbol = Symbol('key')
```

以上のように、TypeScript では変数の宣言時に型を明示することが一般的です。これにより、その変数がどのようなデータを扱うことができるかが明確になり、コードの可読性や安全性が向上します。また、IDE の型補完機能を最大限に活用することもできます。

### Next.js での変数の実装

TypeScript の型システムを用いて Next.js プロジェクト内で変数を正しく扱うことは重要です。以下に例として`pages/index.tsx`ファイルに追加するコードを示します。

```tsx
// pages/index.tsx

type User = {
  name: string
  age: number
}

const IndexPage = () => {
  const user: User = {
    name: 'John Doe',
    age: 25,
  }

  return (
    <div>
      <h1>Hello, {user.name}!</h1>
      <p>You are {user.age} years old.</p>
    </div>
  )
}

export default IndexPage
```

### コード解説

上述したソースコードは、TypeScript の変数をどのように宣言し、どのように扱うかを簡単に示しています。これをもう少し詳しく見てみましょう。

まず、ユーザー情報を保持するための新しい型 `User` を作成しています。これは、名前と年齢をプロパティとして持つオブジェクト型です。

```tsx
type User = {
  name: string
  age: number
}
```

次に、`User` 型の変数 `user` を宣言し、初期値として具体的なユーザー情報を設定します。

```tsx
const user: User = {
  name: 'John Doe',
  age: 25,
}
```

これにより、`user` 変数は TypeScript の型システムにより安全に扱うことができます。`name` プロパティは文字列で、`age` プロパティは数値であることが保証されます。

最後に、`user` 変数の情報を HTML 要素に描画します。

```tsx
return (
  <div>
    <h1>Hello, {user.name}!</h1>
    <p>You are {user.age} years old.</p>
  </div>
)
```

これらのコードを組み合わせることで、TypeScript の強力な型システムを活用しながら、Next.js のアプリケーションで変数を安全に扱うことができます。

### メリット

このように TypeScript を使用すると、以下のようなメリットがあります。

- 変数の型を明示的に指定することで、予期せぬエラーを防ぐことができます。
- 型が明確になることで、コードの可読性が向上します。
- IDE のオートコンプリート機能を活用でき、開発効率が向上します。

以上が Next.js と TypeScript を用いて変数を扱う基本的な方法です。さらに深く学びたい場合は、公式ドキュメントを参照すると良いでしょう。コードを書いて試すことで、理解が深まることでしょう。


Next.js と TypeScript を用いて、変数の定義と操作方法を学びます。この記事では、実用的なコードを通じて、TypeScriptの変数について深く理解することができます。

Next.js と TypeScript で、変数の使い方を学ぶ


## 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) 問題を解決するための方法を紹介します。

2023-05-29

Next.js と TypeScript で、三項演算子を鮮やかに扱う

2023-05-29

Next.js と TypeScript で、Truthy と Falsy の深淵を解明

2023-05-28

Next.js と TypeScript で、論理積演算子と論理和演算子を扱う

2023-05-28

Next.js と TypeScript で、論理否定の実装方法を解説する

2023-05-28

Next.js と TypeScript で、テンプレートリテラルの使い方を学ぶ

2023-05-28

Next.js と TypeScript で、型注釈の基本を学ぶ

2023-05-28

Next.js と TypeScript で、プリミティブ型を理解する

2023-05-28

Next.js と TypeScript で、変数の使い方を学ぶ

2023-05-27

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

2023-05-27

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