
## TL;DR

このページでは、`Date()` コンストラクターの活用法について解説しますね。一言でいうと`Date()`コンストラクターとは、JavaScript で日付や時間を扱うためのオブジェクトを生成するためのものです。

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

### Date() コンストラクターとは？

JavaScript の`Date()`コンストラクターは、日付や時間を扱うための Date オブジェクトを生成します。Date オブジェクトは、1970 年 1 月 1 日 00:00:00 UTC（協定世界時）からのミリ秒単位での経過時間を表します。

具体的な使用方法は以下の通りです。

```tsx
// 現在の日時を取得する
const now = new Date()
console.log(now) // 現在の日付と時間が表示されます

// 特定の日時を設定する
const specificDate = new Date('2023-06-29T12:00:00')
console.log(specificDate) // '2023-06-29T12:00:00'の日時が表示されます
```

このように、`new Date()`をそのまま使用すると現在の日付と時間を取得でき、引数に特定の日時を指定するとその日時の Date オブジェクトが生成されます。

また、Date オブジェクトには様々なメソッドが用意されており、年や月、日、時間、分、秒を個別に取得したり設定したりすることも可能です。

```tsx
const now = new Date()

// 年を取得する
const year = now.getFullYear()
console.log(year) // 現在の年が表示されます

// 月を取得する（0〜11で表され、0が1月、11が12月）
const month = now.getMonth()
console.log(month) // 現在の月が表示されます
```

以上が、`Date()`コンストラクターの基本的な使い方となります。

### 現在の日付を表示する

それでは、Next.js のアプリケーションで `Date()` コンストラクターを活用してみましょう。具体的には、現在の日付を表示するコンポーネントを作成します。

ソースコードのファイル名: `/components/ShowDate.tsx`

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

type Props = {
  locale?: string
}

const ShowDate = ({ locale = 'ja-JP' }: Props) => {
  const [date, setDate] = useState(new Date())

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date())
    }, 1000)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return <div>現在の日時: {date.toLocaleString(locale)}</div>
}

export default ShowDate
```

このコンポーネントでは、React の`useState`と`useEffect`フックを使って、現在の日時を管理しています。

useState フックで日付を管理するための state（`date`）を作成し、初期値として現在の日時（`new Date()`）を設定しています。そして、useEffect フックを使って 1 秒ごとに`setDate`関数を呼び出し、`date`の値を更新しています。

表示する部分では、`date.toLocaleString(locale)`を使って日時を文字列に変換しています。`toLocaleString`メソッドは、Date オブジェクトの日時を指定されたロケールに基づいてフォーマットした文字列を返します。ここではプロパティで受け取ったロケール（デフォルトは'ja-JP'）を指定しています。

コンポーネント `ShowDate` では、現在の日付と時間が毎秒更新されて表示されます。このコンポーネントを日本語環境で使用すると、出力は次のようになります（実際の日付と時間によります）。

```
現在の日時: 2023年6月29日 12:00:00
```

次の 1 秒後、結果は以下のように更新されます。

```
現在の日時: 2023年6月29日 12:00:01
```

そして、それが続けて表示されます。

### toLocaleDateString()

`toLocaleDateString()` は、JavaScript の Date オブジェクトのメソッドで、その日付を文字列として表現します。このメソッドは、ホスト環境の地域設定（ロケール）を使用して日付を書式化します。

このメソッドは、引数をとることもできます。最初の引数には、特定の地域設定を表す文字列（例えば "en-US" や "ja-JP" など）を指定できます。二つ目の引数には、日付の書式を制御するオプションのオブジェクトを指定できます。

以下に一部の使用例を示します。

```javascript
const date = new Date()

// 日本のロケールを使用
console.log(date.toLocaleDateString('ja-JP'))
// 出力： "2023/6/29" （実行した日によります）

// アメリカのロケールを使用
console.log(date.toLocaleDateString('en-US'))
// 出力： "6/29/2023" （実行した日によります）

// オプションを指定して、年月日と曜日を表示
console.log(date.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }))
// 出力： "2023年6月29日木曜日" （実行した日によります）
```

なお、ロケールとオプションは指定しなくても、デフォルトのロケール（通常はユーザーの OS の設定に基づく）とデフォルトのオプションを使用して日付を書式化します。

したがって、`toLocaleDateString()`メソッドは、日付をユーザーの地域や言語に応じて適切に表示するのに非常に便利なツールです。

### toLocaleTimeString()

`toLocaleTimeString()`というメソッドもあります。このメソッドは、Date オブジェクトを表現する際に現地の時間を文字列で返すものです。その使い方は以下の通りです。

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

const DisplayJapaneseTime = () => {
  const [now, setNow] = useState(new Date())

  useEffect(() => {
    const timerId = setInterval(() => {
      setNow(new Date())
    }, 1000)

    // クリーンアップ関数を返す
    return () => {
      clearInterval(timerId)
    }
  }, [])

  return <p>現在の時刻: {now.toLocaleTimeString('ja-JP')}</p>
}

export default DisplayJapaneseTime
```

このコンポーネントは、現在の時刻を日本の時間形式で表示します。また、1 秒ごとに時間を更新します。

たとえば、午後 12 時 30 分 15 秒に表示した場合、次のように表示されます。

```
現在の時刻: 12:30:15
```

そして、この表示は 1 秒ごとに更新されます。このメソッドも、日付や時間を地域や言語に応じて適切に表示するのに非常に便利です。

### Date() コンストラクターをより深く理解する

先程は現在の日付と時間を表示する基本的な例を見ましたが、ここでは`Date()` コンストラクターをより高度に活用した例を紹介します。具体的には、特定の日時までのカウントダウンタイマーを作成します。

ソースコードのファイル名: `/components/CountdownTimer.tsx`

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

type Props = {
  targetDate: string;
};

const CountdownTimer = ({ targetDate }: Props) => {
  const calculateTimeLeft = () => {
    const difference = +new Date(targetDate) - +new Date();
    let timeLeft = {};

    if (difference > 0) {
      timeLeft = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    }

    return timeLeft;
  };

  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTime

Left());
    }, 1000);

    return () => clearTimeout(timer);
  });

  return (
    <div>
      {Object.entries(timeLeft).map(([unit, value]) => (
        <div key={unit}>
          {unit}: {value}
        </div>
      ))}
    </div>
  );
};

export default CountdownTimer;
```

このコンポーネントでは、`Date()` コンストラクターを使って特定の日時までの残り時間を計算しています。`calculateTimeLeft` 関数では、目標の日時から現在の日時を引いて、その差をミリ秒単位で取得しています。

また、`useState` と `useEffect` フックを活用して、1 秒ごとに残り時間を再計算し、その値を更新しています。

表示部分では、計算した残り時間（`timeLeft`）を`Object.entries`を使って配列に変換し、各時間単位（日、時間、分、秒）とその値を列挙して表示しています。

`CountdownTimer`コンポーネントでは、特定の日付までの残り時間が表示されます。たとえば、ターゲット日付を`2023年7月1日 00:00:00`とすると、その 1 日と 12 時間前（`2023年6月29日 12:00:00`）には、次のような結果が得られます。

```
days: 1
hours: 12
minutes: 0
seconds: 0
```

次の 1 秒後、結果は以下のように更新されます。

```
days: 1
hours: 11
minutes: 59
seconds: 59
```

そして、これが続けて表示されます。ターゲット日付が到来すると、全ての値が 0 になります。

以上が、`Date()` コンストラクターの基本的な使い方と、その高度な活用法についての説明です。JavaScript の`Date()` コンストラクターは、日時に関する処理を行う際の重要なツールですので、ぜひマスターしてみてください。


Next.js と TypeScript を使い、Date() コンストラクターの基本的な活用法から高度なテクニックまで、詳細に説明します。

Next.js と TypeScript で学ぶ、Date() コンストラクター


## TL;DR

この記事では、replace() メソッドの実装方法について詳しく解説しますね。一言でいうと replace() メソッドとは、文字列や配列内の特定の値を別の値に置き換えるためのものです。

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

### replace() メソッドとは？

replace() メソッドは、文字列内で特定のパターンまたは値を見つけて新しい値に置き換える際に使用される JavaScript のメソッドです。特定のパターンは、文字列または正規表現で指定できます。また、新しい値は、文字列または関数で指定できます。この方法は、非常に強力で、さまざまな文字列操作に活用できます。

### 最初にマッチしたもののみを置換する

基本的な使用例を見てみましょう。

```tsx
const str = 'こんにちは、世界'
const newStr = str.replace('世界', 'みなさん')
console.log(newStr) // "こんにちは、みなさん"
```

この例では、'世界'という文字列を'みなさん'に置き換えています。

### 複数の文字列を置換する

複数の文字列を置換するためには、replace() メソッドをチェインすることで実現できます。以下に、その例を示します。

```tsx
let str = '今日は晴れです。でも、明日は雨です。'

str = str.replace('晴れ', '雨').replace('明日', '今日')

console.log(str) // "今日は雨です。でも、今日は雨です。"
```

この例では、元の文字列 '今日は晴れです。でも、明日は雨です。' の '晴れ' を '雨' に、そして '明日' を '今日' に置換しています。結果として出力される文字列は '今日は雨です。でも、今日は雨です。' となります。

ただし、この方法では最初にマッチした文字列のみが置換されます。したがって、もし同じ文字列が複数回出現し、それら全てを置換したい場合は正規表現を用いると良いでしょう。以下にその例を示します。

```tsx
let str = '今日は晴れです。でも、明日は晴れです。'

str = str.replace(/晴れ/g, '雨').replace(/明日/g, '今日')

console.log(str) // "今日は雨です。でも、今日は雨です。"
```

この例では、正規表現 '/晴れ/g' と '/明日/g' を使用しています。'/g' は正規表現のグローバル検索フラグで、これを使用することで文字列中の全ての '晴れ' と '明日' が置換対象となります。

### 正規表現で置換する

正規表現により、文字列内の特定のパターンを探して置換するということが可能になります。

以下に簡単な例を示します。

```tsx
const str = '私は犬が好きです。でも、犬は私が好きですか？'
const newStr = str.replace(/犬/g, '猫')

console.log(newStr) // "私は猫が好きです。でも、猫は私が好きですか？"
```

このコードでは、`/犬/g` が正規表現です。`/犬/g` は文字列中の全ての "犬" を指定します。ここで、`g` は "global" の略で、全体の文字列を対象に置換を行うことを意味します。

したがって、このコードは文字列中の全ての "犬" を "猫" に置換します。

また、正規表現では大文字小文字を無視する `i` フラグも利用できます。例えば、`/犬/gi` とすると、大文字の "犬" も小文字の "犬" も全て "猫" に置換します。

このように、正規表現を用いると非常に柔軟な置換が可能となります。

### 全ての部分文字列を置換する

`replaceAll()` というメソッドも存在します。このメソッドは、指定した全ての部分文字列を置換するという機能を提供しています。

`replace()` メソッドが最初にマッチしたもののみを置換するのに対し、`replaceAll()` メソッドは指定した部分文字列全てを置換します。そのため、正規表現を使わなくても全ての部分文字列を置換することができます。

以下に、`replaceAll()` メソッドを使用した例を示します：

```tsx
let str = '今日は晴れです。でも、明日は晴れです。'

str = str.replaceAll('晴れ', '雨').replaceAll('明日', '今日')

console.log(str) // "今日は雨です。でも、今日は雨です。"
```

この例では、文字列中の全ての '晴れ' と '明日' がそれぞれ '雨' と '今日' に置換されています。

ただし、`replaceAll()` メソッドは比較的新しいメソッドであり、全ての環境でサポートされているわけではない点に注意が必要です。サポートされていない環境では代わりに正規表現と `replace()` メソッドを用いることで同様の結果を得ることができます。

### 第二引数として特殊な置換パターンを使用する

文字列の置換を行う際に、replace() メソッドの第二引数として特殊な置換パターンを用いることができます。これらのパターンは、特定の意味を持つ文字列に置き換えられます。

以下に、それらの置換パターンを一覧表としてまとめます。

| パターン  | 説明                                                                                |
| :-------- | :---------------------------------------------------------------------------------- |
| `$$`      | 「$」という文字を挿入します。                                                       |
| `$&`      | マッチした部分全体を挿入します。                                                    |
| `$``      | マッチした部分より前の部分を挿入します。                                            |
| `$'`      | マッチした部分より後の部分を挿入します。                                            |
| `$n`      | n 番目のキャプチャグループ（n は 1 から 9 までの整数）を挿入します。                |
| `$<name>` | name という名前のキャプチャグループを挿入します。名前付きキャプチャグループの特性。 |

それぞれのパターンの使用例を以下に示します。

```tsx
const str = 'こんにちは、世界'
let newStr = str.replace('世界', '$$')
console.log(newStr) // "こんにちは、$"

newStr = str.replace('世界', '$&')
console.log(newStr) // "こんにちは、世界"

newStr = 'こんにちは、世界、こんにちは'.replace(/(こんにちは)、(世界)、\1/, '$1')
console.log(newStr) // "こんにちは、こんにちは"
```

注意：置換パターンは、文字列置換の第二引数として使用されます。関数を置換として使用する場合、これらのパターンは適用されません。関数を使用した置換では、関数自体が置換の結果を決定します。

### 第二引数として関数を指定する

replace() メソッドの第二引数として関数を指定する場合、その関数は以下の引数を受け取ることができます。これらの引数は、関数が呼び出される際に自動的に渡されます。

以下に、それらの引数を一覧表としてまとめます。

| 引数名      | 値の説明                                                                           |
| :---------- | :--------------------------------------------------------------------------------- |
| `match`     | マッチした部分全体の文字列です。                                                   |
| `p1, p2, …` | 括弧によりキャプチャされた各部分の文字列です。（キャプチャグループが存在する場合） |
| `offset`    | マッチした部分が元の文字列で始まる位置（インデックス）です。                       |
| `string`    | replace() メソッドが呼び出された元の文字列です。                                   |
| `groups`    | 名前付きキャプチャグループのオブジェクトです。（存在する場合）                     |

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

```tsx
const str = 'こんにちは、世界'

const newStr = str.replace(/(世界)/, (match, p1, offset, string) => {
  console.log(`Match: ${match}`)
  console.log(`Capture Group 1: ${p1}`)
  console.log(`Offset: ${offset}`)
  console.log(`Original String: ${string}`)

  return 'Universe'
})

console.log(newStr) // "こんにちは、Universe"
```

このコードスニペットでは、replace() メソッドに関数を指定し、その関数内でマッチした部分、キャプチャグループ 1、マッチの位置、そして元の文字列をログ出力しています。そして、関数は 'Universe' を返しており、これにより元の文字列中の '世界' が 'Universe' に置換されます。

### Next.js で、replace() メソッドを実装

Next.js と TypeScript で replace() メソッドを使った簡単な例を見ていきましょう。

`components/Greeting.tsx`

```tsx
import React from 'react'

type Props = {
  greeting: string
}

const Greeting = ({ greeting }: Props) => {
  const replaceWorld = () => {
    return greeting.replace('世界', 'Next.jsユーザー')
  }

  return <h1>{replaceWorld()}</h1>
}

export default Greeting
```

`pages/index.tsx`

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

const Home = () => {
  return <Greeting greeting="こんにちは、世界" />
}

export default Home
```

`Greeting.tsx` コンポーネントでは、greeting というプロパティを受け取り、その中の '世界' を 'Next.js ユーザー' に置き換えています。この置

き換えられた挨拶は、最終的に `<h1>` タグ内で表示されます。

### API データを取得して、一部の単語を置換する

さらに一歩進んで API の値を変更します。microCMS からデータを取得した後に、特定の単語を置換してみましょう。

この場合、Next.js のサーバーサイドレンダリング(SSR)やサーバーレス関数(API Routes)を使って microCMS からデータを取得します。そして、その取得したデータの中の特定の文字列を置換します。

ここでは、Next.js の API Routes を使って microCMS からデータを取得し、取得したデータの中から特定の単語を別の単語に置換するサンプルコードを示します。

まず、`pages/api/data.ts`という API エンドポイントを作成します。

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

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const { data } = await axios.get('microCMSのエンドポイントURL', {
    headers: {
      'X-API-KEY': 'microCMSのAPIキー',
    },
  })

  const replacedData = data.map((item: any) => {
    return {
      ...item,
      title: item.title.replace('置換前の単語', '置換後の単語'),
    }
  })

  res.status(200).json(replacedData)
}

export default handler
```

このコードは、microCMS からデータを非同期に取得し、取得したデータの中の特定の単語を別の単語に置換しています。

ここで `replace('置換前の単語', '置換後の単語')` という部分が `replace()` メソッドの使用箇所です。このコードは `item.title` の中の '置換前の単語' を '置換後の単語' に置換します。

このように、Next.js と TypeScript、そして `replace()` メソッドを使って、API から取得したデータ内の特定の単語を別の単語に置換することができます。

### 関数を新しい値として使う

ここでは、さらに高度な replace() メソッドの使用例を見ていきます。具体的には、関数を新しい値として使って特定のパターンを置き換える方法を見てみましょう。

`components/AdvancedGreeting.tsx`

```tsx
import React from 'react'

type Props = {
  greeting: string
}

const AdvancedGreeting = ({ greeting }: Props) => {
  const replaceFunction = () => {
    return greeting.replace(/世界/g, (match) => {
      return match === '世界' ? 'Next.jsユーザー' : '世界'
    })
  }

  return <h1>{replaceFunction()}</h1>
}

export default AdvancedGreeting
```

`pages/advanced.tsx`

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

const AdvancedHome = () => {
  return <AdvancedGreeting greeting="こんにちは、世界" />
}

export default AdvancedHome
```

ここでは、replace() メソッドに関数を渡しています。この関数は、マッチしたパターンごとに呼び出され、その返り値がマッチしたパターンの新しい値となります。このようにすることで、より高度な文字列の置き換え処理が可能となります。


JavaScript・Next.js・TypeScript を使った replace() メソッドの理解と効果的な活用方法について詳しく解説します。

JavaScript：文字列を置換するreplace()を極める


## TL;DR

このページでは、`filter` メソッドの実装方法について解説しますね。一言でいうと`filter` メソッドとは、配列の中から特定の条件を満たす要素だけを抽出し、新たな配列を作成するメソッドです。

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

### 「filter() メソッド」とは？

「filter() メソッド」は JavaScript の配列に用意されているメソッドの一つで、配列の要素のうち、ある条件を満たすものだけを取り出して新しい配列を生成します。そのため、配列の中から特定の条件に一致する要素を抽出したいときに活用できます。

それでは具体的な使用例を見てみましょう。

```tsx
const numbers = [1, 2, 3, 4, 5]

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0
})

console.log(evenNumbers) // [2, 4]
```

上記のコードでは、`filter`メソッドを使って偶数だけを抽出しています。`filter`メソッドに渡す関数（この場合は`(number) => { return number % 2 === 0; }`）は各要素に対して呼び出され、その結果が`true`と評価される要素だけが新しい配列に含まれます。

### 特定の文字を含む要素を抽出する

次に、文字列の配列から特定の文字を含む要素を抽出する例を示します。

```tsx
const fruits = ['apple', 'banana', 'grape', 'orange', 'watermelon']

const aFruits = fruits.filter((fruit) => fruit.includes('a'))

console.log(aFruits) // ["apple", "banana", "grape", "watermelon"]
```

このコードでは、`fruits`という文字列の配列から、文字列が`'a'`を含むものだけを抽出して新たな配列`aFruits`を作成しています。`filter`メソッドを使うことで、このように特定の文字列を含む要素を抽出することができます。

また、次のように、オブジェクトの配列から特定のキーと値を持つ要素を抽出することも可能です。

```tsx
type User = {
  id: number
  name: string
  isActive: boolean
}

const users: User[] = [
  { id: 1, name: 'John', isActive: true },
  { id: 2, name: 'Jane', isActive: false },
  { id: 3, name: 'Bob', isActive: true },
  { id: 4, name: 'Alice', isActive: false },
]

const activeUsers = users.filter((user) => user.isActive)

console.log(activeUsers) // [{ id: 1, name: 'John', isActive: true }, { id: 3, name: 'Bob', isActive: true }]
```

このコードでは、`users`というユーザ情報が格納された配列から、`isActive`のプロパティが`true`のユーザだけを抽出して新たな配列`activeUsers`を作成しています。`filter`メソッドを使うことで、オブジェクトの特定のプロパティに基づいて要素を抽出することができます。

`filter`メソッドは非常に強力なツールであり、多種多様な場面での活用が可能です。上記の例を参考に、自分の必要に応じて適切に使用してみてください。

### Next.js で、filter メソッドを実装

それでは、Next.js と TypeScript を使って、filter メソッドを使う具体的なコードを見ていきましょう。

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

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

type NumberArray = number[]

const EvenNumbers = () => {
  const [numbers, setNumbers] = useState<NumberArray>([1, 2, 3, 4, 5])
  const [evenNumbers, setEvenNumbers] = useState<NumberArray>([])

  useEffect(() => {
    setEvenNumbers(numbers.filter((number) => number % 2 === 0))
  }, [numbers])

  return (
    <div>
      {evenNumbers.map((number) => (
        <div key={number}>{number}</div>
      ))}
    </div>
  )
}

export default EvenNumbers
```

`useState`を使って配列`numbers`を定義し、初期値として`[1, 2, 3, 4, 5]`を設定しています。そして、抽出した偶数を保持するための`evenNumbers`も同様に定義しています。

次に、`useEffect`フックを使って、`numbers`の値が変化したときに`filter`メソッドを実行し、結果を`evenNumbers`に設定します。

最後に、`evenNumbers`の各要素を`div`要素としてレンダリングしています。

### filter メソッドを活用

`filter`メソッドを使うと、より複雑な条件で要素を抽出することも可能です。以下に、オブジェクトの配列から特定のプロパティを持つ要素を抽出する例を示します。

```tsx
type Student = {
  id: number
  name: string
  score: number
}

const students: Student[] = [
  { id: 1, name: 'Alice', score: 90 },
  { id: 2, name: 'Bob', score: 70 },
  { id: 3, name: 'Charlie', score: 85 },
  { id: 4, name: 'Dave', score: 60 },
]

const highScoreStudents = students.filter((student) => student.score >= 80)
```

上記のコードでは、`students`という学生の情報が格納された配列から、スコアが 80 点以上の学生だけを抽出して新たな配列`highScoreStudents`を作成しています。`filter`メソッドを使うことで、このように複雑な条件に一致する要素を効率的に抽出することができます。

以上が`filter`メソッドの基本的な使い方と Next.js と TypeScript 環境での実装例になります。特定の条件に一致する要素だけを効率よく抽出するために、ぜひ活用してみてください。


JavaScript の配列メソッドである filter の働きと、その実装方法を Next.js と TypeScript の環境で詳しく解説します。

Next.js と TypeScript で、filter() メソッドを使う


## TL;DR

このページでは、引数を無視するパラメータ`_`の実装方法について解説しますね。たまに、関数の引数で`_`を見かけることがあるかと思います。この引数を無視するパラメータ`_`は、関数やメソッドの引数のうち、使用されないものを明示的に示す記法です。

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

### 引数を無視するパラメータ`_`とは？

初めに、引数を無視するパラメータ`_`とは何かを説明いたします。JavaScript や TypeScript を使って関数を書く時、関数が引数を受け取ることがあります。これらの引数は、関数内で具体的な動作を行うための入力値となります。

しかし、時として関数の中で全ての引数を使う必要がない場合があります。特に TypeScript を使用すると、型システムが全ての引数を要求する場合もあります。ここで引数を無視するパラメータ`_`が活躍します。この記法を使用すると、引数が関数内で使用されないことを明示的に示せます。

以下の TypeScript のソースコードは、その例を示しています。

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

const Component = ({ name, _ }: Props) => {
  return <div>{name}</div>
}
```

この例では、`Component`という関数が`Props`型の引数を受け取ります。ここで、`_`という引数は、`Props`型の`age`フィールドを表していますが、関数の中で全く使われていません。これが、引数を無視するパラメータ`_`の一例です。

### モック関数やテストコードでの使用

JavaScript や TypeScript でテストコードを書く際には、特定の関数をモック（つまり偽の関数）に置き換えて、その関数が呼ばれたことだけを確認することがあります。こうした場合、関数の実装自体は重要ではなく、引数も無視されることが多いです。ここで`_`を使用することで、引数が無視されることを明示的に示すことができます。

```tsx
jest.mock('./path/to/module', () => ({
  someFunction: (_: any) => {
    // 実装は重要ではない、引数も無視
  },
}))
```

### Promise.all の結果を無視する

JavaScript の`Promise.all`関数は、複数の Promise を並行して実行し、それら全てが解決されたときに結果を返します。しかし、全ての結果が必要でない場合、`_`を使用して無視することができます。

```javascript
const promise1 = fetchDataFromAPI1()
const promise2 = fetchDataFromAPI2() // この結果は無視する

Promise.all([promise1, promise2]).then(([data1, _]) => {
  // promise2の結果は無視し、data1だけを利用する
  console.log(data1)
})
```

### イベントハンドラーでイベントオブジェクトを無視する

ブラウザや React 等のフロントエンドのフレームワークでは、イベントハンドラー（ボタンのクリックなどのイベントを処理する関数）には、デフォルトでイベントオブジェクトが引数として渡されます。しかし、このイベントオブジェクトは必ずしも利用されるわけではありません。この場合も、`_`を使用してイベントオブジェクトを無視することができます。

```tsx
const handleClick = (_: React.MouseEvent) => {
  // イベントオブジェクトは無視し、固定の処理を行う
  console.log('Button clicked!')
}

;<button onClick={handleClick}>Click me!</button>
```

このように、引数を無視するパラメータ`_`は、さまざまな場面で利用することが可能です。無視される引数を明示的に示すことで、コードの可読性を高め、何が重要で何が重要でないかを明示的に示すことができます。

### Next.js で、引数を無視するパラメータ`_`を実装

では、Next.js でこの引数を無視するパラメータ`_`をどのように利用できるのか見ていきましょう。

```tsx
// pages

/index.tsx

import type { NextPage, GetServerSideProps } from 'next'

type Props = {
  data: string,
}

const Home: NextPage<Props> = ({ data }) => {
  return <div>{data}</div>
}

export const getServerSideProps: GetServerSideProps<Props> = async (_) => {
  const data = 'Hello, world!'
  return { props: { data } }
}

export default Home
```

このコードは、Next.js のサーバーサイドレンダリングの一例です。ここで注目すべきは、`getServerSideProps`関数の引数部分です。この関数は、`context`という引数を受け取ることが一般的ですが、今回の例ではその引数が`_`になっています。つまり、`context`はこの関数の中で一切使われないことを示しています。こうすることで、コードの読み手に対して関数が何を期待しているか、何を利用していないかを明確に伝えることができます。

### 引数を無視するパラメータ`_`を実装

ここで、さらに進んだテクニカルな例を見てみましょう。この例では、配列の分割代入を用いた際の引数を無視するパラメータ`_`の使用を見ていきます。

```tsx
const array = ['apple', 'banana', 'cherry']

const [first, _, third] = array

console.log(first) // "apple"
console.log(third) // "cherry"
```

この例では、配列`array`から分割代入を行っています。分割代入では、配列の要素を個別の変数に一度に代入することができます。ここで、`_`は配列の 2 番目の要素（`'banana'`）を受け取っていますが、それが後続のコードで使用されることはありません。

このように、引数を無視するパラメータ`_`を用いることで、コードの可読性を高め、何が重要で何が重要でないかを明示的に示すことができます。


Next.js と TypeScript における引数を無視するパラメータ`_`の使用方法を実際のソースコードを交えて初学者向けに解説します。

Next.js と TypeScript で、関数の引数を無視するパラメータ`_`の使い所


## TL;DR

このページでは、`slice()` メソッドを使ったページネーションの実装方法について詳しく解説しますね。一言で言えば `slice()` とは、配列や文字列から特定の範囲を切り出すためのメソッドです。

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

### `slice()` メソッドとは？

そもそも `slice()` メソッドとは何でしょうか。`slice()` メソッドは、配列や文字列から特定の範囲を取り出すためのメソッドです。このメソッドを使うことで、新たな配列や文字列を作成することができます。

`slice()` メソッドは、元の配列や文字列を変更せずに、新たな配列や文字列を作成するという特性を持つため、非破壊的な操作を行いたい場合に非常に便利です。

基本的な使い方は以下のようになります。

```tsx
const array = [1, 2, 3, 4, 5]
const newArray = array.slice(1, 3)
console.log(newArray) // Output: [2, 3]
```

このコードでは、配列 `array` の 1 番目のインデックスから 3 番目のインデックスまでの範囲を `slice()` メソッドを使って切り出しています。このとき、新たに作成された `newArray` は `[2, 3]` という値を持ちます。

また、`slice()` メソッドは文字列にも利用できます。以下にその例を示します。

```tsx
const str = 'Hello, World!'
const newStr = str.slice(0, 5)
console.log(newStr) // Output: "Hello"
```

この例では、文字列 `str` の 0 番目から 5 番目までの範囲を `slice()` メソッドで切り出しています。その結果、`newStr` は `"Hello"` という値を持ちます。

### ページネーションの実装

ページネーションとは、データを分割して表示する方法の一つで、主に大量のデータを一度に表示することが難しい場合に使用されます。ウェブページやアプリケーションでは、一覧表示をする際に多くの場合、ページネーションが利用されます。

JavaScript の`slice()`メソッドはこのページネーションを実装する際に非常に役立ちます。`slice()`メソッドを使用することで、配列から特定の範囲の要素を取り出すことができます。この機能を利用して、表示するデータの範囲を動的に変更することで、ページネーションを実現できます。

例えば、以下のようなソースコードでデータの一部を切り出して表示することが可能です。

```tsx
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const perPage = 5
const currentPage = 1

const start = perPage * (currentPage - 1)
const end = start + perPage

const displayData = data.slice(start, end)

console.log(displayData) // [1, 2, 3, 4, 5]
```

ここで、`perPage` は 1 ページあたりに表示するデータの数、`currentPage` は現在のページ番号を表します。`start` と `end` は `slice()` メソッドの引数として使用され、データのどの範囲を切り出すかを指定します。

### Next.js で、ページネーションを実装

それでは、具体的に Next.js のプロジェクトでどのようにページネーションを実装するか見てみましょう。以下のソースコードは、`pages/index.tsx` となります。

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

type DataProps = {
  data: number[]
}

const perPage = 5

const IndexPage = () => {
  const allData = Array.from({ length: 50 }, (_, i) => i + 1)
  const [currentPage, setCurrentPage] = useState(1)

  const handlePageChange = (page: number) => {
    setCurrentPage(page)
  }

  const start = perPage * (currentPage - 1)
  const end = start + perPage
  const data = allData.slice(start, end)

  return (
    <div>
      <DataList data={data} />
      <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
        Prev
      </button>
      <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(allData.length / perPage)}>
        Next
      </button>
    </div>
  )
}

const DataList = ({ data }: DataProps) => {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  )
}

export default IndexPage
```

このコードでは、まず 1 から 50 までの数字を含む配列`allData`を作成しています。そして、現在のページ番号を保持するための state `currentPage`を設定しています。そして、`handlePageChange`関数を定義して、ページを切り替える際に使用します。

そして、表示するデータの範囲を`slice()`メソッドで切り出し、`DataList`コンポーネントに渡しています。最後に、ページ切り替えのためのボタンを配置して、それぞれのボタンが押されたときに`handlePageChange`関数を呼び出して、ページを切り替えるようにしています。

ここで、ページネーションを構成する主要な部分は以下の部分です。

1. `slice()`を使用して、現在のページに対応するデータを切り出す部分
2. ページを切り替えるためのボタンとその処理

この 2 つの要素があれば、基本的なページネーションの機能を実装することが可能です。

### 複雑なデータ構造でのページネーションの実装

次に、より複雑なデータ構造でページネーションを実装する例を見てみましょう。例えば、オブジェクトの配列が与えられて、その配列をページネーションする場合を考えてみます。

```tsx
type Product = {
  id: number
  name: string
}

type DataProps = {
  data: Product[]
}

const perPage = 5

const IndexPage = () => {
  const allData: Product[] = Array.from({ length: 50 }, (_, i) => ({ id: i + 1, name: `Product ${i + 1}` }))
  // idが1から50までの、名前がそれぞれ"Product 1"から"Product 50"までの商品を作成し、それらを配列にしてallDataという変数に代入している
  const [currentPage, setCurrentPage] = useState(1)

  const handlePageChange = (page: number) => {
    setCurrentPage(page)
  }

  const start = perPage * (currentPage - 1)
  const end = start + perPage
  const data = allData.slice(start, end)

  return (
    <div>
      <DataList data={data} />
      <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
        Prev
      </button>
      <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(allData.length / perPage)}>
        Next
      </button>
    </div>
  )
}

const DataList = ({ data }: DataProps) => {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

export default IndexPage
```

このコードでは、`Product`という型を定義し、その型の配列をページネーションします。それぞれの商品は一意の`id`と`name`を持っています。これらのデータは、`DataList`コンポーネントで表示されます。

そして、次のコードを見てみましょう。

```tsx
const allData: Product[] = Array.from(
  // 50 個の空の要素を持つ配列を作成
  { length: 50 },
  (_, i) => ({
    // 新たな配列の各要素に対して実行する関数を定義
    id: i + 1,
    name: `Product ${i + 1}`,
  })
)
```

この行のコードは、「商品リスト」を作成している部分です。商品は、それぞれ「id」と「名前（name）」を持つと定義しています。そして、その「商品」を 50 個作るというのが、このコードの目的です。

それでは、このコードの各部分を一つずつ見てみましょう。

- `Array.from({ length: 50 }, ...)`:

  これは、長さが 50 の配列を作成する部分です。`Array.from`は配列を作成する関数で、`{ length: 50 }`とすることで、50 個の空の要素を持つ配列を作成します。

- `(_, i) => ({ id: i + 1, name: `Product ${i + 1}` })`:

  これは、上で作成した空の配列の各要素に対して実行する関数を指定しています。ここで、`_`は配列の要素（この場合は`undefined`）を、`i`はその要素のインデックス（0 から 49 まで）を表します。そして、この関数は`{ id: i + 1, name: `Product ${i + 1}` }`というオブジェクトを返します。つまり、インデックスに 1 を足した値を id として、その id を含む名前を商品名とする商品を作成しています。

つまり、このコードの全体を見ると、「id が 1 から 50 までの、名前がそれぞれ"Product 1"から"Product 50"までの商品を作成し、それらを配列にして`allData`という変数に代入している」ということになります。これで、後のページネーションのためのデータが準備できました。

### Next.js で、`slice()` メソッドを実装

他のケースとして、Next.js と TypeScript を使って `slice()` メソッドを活用する例を見てみましょう。以下のソースコードは、`pages/index.tsx` となります。

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

type DataProps = {
  data: number[]
}

const IndexPage = () => {
  const [data, setData] = useState<number[]>([1, 2, 3, 4, 5])

  const handleSlice = () => {
    const newData = data.slice(1, 4)
    setData(newData)
  }

  return (
    <div>
      <button onClick={handleSlice}>Slice data</button>
      <DataList data={data} />
    </div>
  )
}

const DataList = ({ data }: DataProps) => (
  <ul>
    {data.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
)

export default IndexPage
```

このコードでは、`slice()` メソッドを使って配列 `data` の一部を取り出し、その結果を新たな `data` としてセットしています。具体的には、`handleSlice` 関数で `data.slice(1, 4)` を呼び出し、その結果を `setData(newData)` で `data` にセットしています。この操作を行うことで、元の配列 `data` は `[2, 3, 4]` という新たな配列になります。

また、`DataList` コンポーネントで配列 `data` を受け取り、それを元にリストを描画しています。これにより、`slice()` メソッドを使った操作結果をリアルタイムに画面上に表示することができます。

### `slice()` メソッドの応用

さらに、`slice()` メソッドは応用的な使い方もできます。例えば、ある文字列から特定の文字を取り出して新たな文字列を作る、といった操作が可能です。以下にその例を示します。

```tsx
type NameProps = {
  name: string
}

const NameComponent = ({ name }: NameProps) => {
  const firstName = name.slice(0, name.indexOf(' '))
  const lastName = name.slice(name.indexOf(' ') + 1)

  return (
    <div>
      <p>First name: {firstName}</p>
      <p>Last name: {lastName}</p>
    </div>
  )
}
```

このコードでは、フルネームから姓と名を分けて表示する `NameComponent` コンポーネントを作成しています。ここで、`slice()` メソッドを用いて、名前の部分と姓の部分を取り出しています。このように、`slice()` メソッドを活用すれば、文字列や配列を非破壊的に操作することができます。


slice() メソッドは配列や文字列を効果的に操作するための重要なツールです。この記事では、Next.js と TypeScript を用いて、その使い方と応用方法を詳しく解説します。

Next.js と TypeScript で、slice() メソッドを使いページネーションを作る


## TL;DR

このページでは、オブジェクトの型注釈の実装方法について解説しますね。一言でいうと、オブジェクトの型注釈とは、TypeScript でオブジェクトのプロパティの型を定義するための機能です。これにより、プロパティの型が間違っていないかをコンパイル時にチェックでき、エラーを早期に発見することができます。

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

### オブジェクトの型注釈とは？

TypeScript では、オブジェクトのプロパティや関数の引数、戻り値などに型を指定することができます。これにより、意図しない型の値が設定されることを防ぎ、開発者が安全にコードを書くことを支援します。これを「型注釈」と言います。

特に、オブジェクトの型注釈は、オブジェクトが持つプロパティの名前とその型を定義します。この考え方を基本的なコードで見てみましょう。

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

const user: User = {
  name: 'John Doe',
  age: 30,
  isActive: true,
}
```

ここで、`User`という型を定義し、その後に`user`というオブジェクトを作りました。`user`オブジェクトは、`User`型に従っていますので、`name`、`age`、`isActive`というプロパティを持ち、それぞれが指定した型の値を持つことが必要です。

### オブジェクト内のメソッドとは？

そもそも、オブジェクト内のメソッドとは何なのか解説します。まず、"オブジェクト"とは、いろんなもの（値や機能）を一緒にまとめたものを指します。それはまるで、ランチボックスにいろんなおかずを入れて持ち歩くようなものです。

次に、"メソッド"とは、そのオブジェクトができること、つまりオブジェクトの動作や機能を指します。例えば、おもちゃのロボットを考えてみてください。ロボットの「動く」や「話す」などの機能は、ロボットオブジェクトのメソッドと言えます。

それでは、実際のソースコードで説明しましょう。

```tsx
const robot = {
  name: 'ロボットA',
  color: '銀色',
  sayHello: function () {
    console.log('こんにちは、私の名前は' + this.name + 'です。')
  },
}

robot.sayHello()
```

ここで、`robot`という名前のオブジェクトを作りました。この`robot`は`name`と`color`というプロパティ（情報）と、`sayHello`というメソッド（機能）を持っています。

`sayHello`メソッドは、`console.log`を使って挨拶を出力します。`this.name`は、「このオブジェクトの`name`」を意味します。だから、`robot.sayHello()`を実行すると、「こんにちは、私の名前はロボット A です。」と出力されます。

これがオブジェクト内のメソッドの基本的な考え方です。オブジェクトとはランチボックスで、メソッドはその中に入れるおかずのようなものと覚えておくと理解しやすいですよ。

### オブジェクト内のメソッドに型注釈をつける

オブジェクトのプロパティとしてのメソッドも、その他のプロパティと同様に型注釈をつけることができます。これにより、メソッドが期待する引数の型と返り値の型がコード上で明示的に宣言され、より安全なコードの記述を実現します。

以下に、オブジェクト内のメソッドに型注釈をつけた例を見てみましょう。

```tsx
type Person = {
  name: string
  age: number
  greet: (message: string) => void
}

const john: Person = {
  name: 'John',
  age: 25,
  greet: (message: string) => {
    console.log(message + ', ' + john.name)
  },
}

john.greet('Hello')
```

上記の例では、`Person`という型を定義し、`name`、`age`、そして`greet`というメソッドを持つことを宣言しています。`greet`メソッドは引数として文字列を受け取り、何も返さない（void）ことが型から読み取れます。

その後で`Person`型の`john`オブジェクトを定義し、適切なプロパティとメソッドを持つようにします。この`greet`メソッドは、文字列を引数に取り、そのメッセージと`john.name`を結合したものをコンソールに表示します。

このように、オブジェクトのプロパティとしてのメソッドに型注釈を付けることで、そのメソッドが期待する引数の型や返り値の型を明示的にすることができます。これにより、エラーを早期に発見し、コードの品質を向上させることが可能になります。

### メソッドを持つオブジェクトリテラルでも型推論が効く

TypeScript は非常に強力な型推論システムを持っており、メソッドを持つオブジェクトリテラルでも型推論が機能します。

以下に具体的な例を見てみましょう。

```tsx
const john = {
  name: 'John',
  age: 25,
  greet: (message: string) => {
    console.log(message + ', ' + john.name)
  },
}

john.greet('Hello')
```

上記の例では、`john`というオブジェクトを定義していますが、その型注釈を明示的に書いていないにも関わらず、TypeScript は`john`の各プロパティとメソッドの型を自動的に推論します。したがって、このケースでは`john.name`が文字列であること、`john.age`が数値であること、そして`john.greet`がメソッドであることを TypeScript は理解しています。

そのため、型注釈を省略した場合でも、型の一貫性や型安全性は保たれます。しかし、これは初期値が設定されているプロパティに限ります。もしプロパティが初期化されずに宣言だけされている場合、そのプロパティの型は`any`となり、型安全性が損なわれる可能性があります。

結論として、メソッドを持つオブジェクトリテラルでも型推論は働きますが、可能な限り明示的な型注釈を使用することが、より堅牢で安全なコードを書く上で推奨されます。

### Next.js で、オブジェクトの型注釈を実装

Next.js のコンポーネントにおいても、オブジェクトの型注釈は重要な役割を果たします。ここでは、`UserCard`というコンポーネントを作ってみましょう。このコンポーネントは、

ユーザーの情報を表示します。

`/components/UserCard.tsx`:

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

type User = {
  name: string
  age: number
  isActive: boolean
}

type Props = {
  user: User
}

const UserCard = ({ user }: Props) => {
  const { name, age, isActive } = user

  return (
    <div css={cardStyle}>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  )
}

const cardStyle = css`
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
`

export default UserCard
```

ここでは、`UserCard`コンポーネントは`Props`という型の props を受け取ります。`Props`型は`user`という`User`型のプロパティを持ちます。そして、`User`型は`name`、`age`、`isActive`というプロパティを持つオブジェクトの型注釈です。

### 異なる型を持つプロパティ

さらに高等な技術として、オプショナルなプロパティや、異なる型を持つプロパティを持つオブジェクトの型注釈を扱うことがあります。以下に例を示します。

```tsx
type Product = {
  id: number
  name: string
  price: number
  description?: string
  metaData: {
    [key: string]: string | number
  }
}

const product: Product = {
  id: 1,
  name: 'Book',
  price: 1500,
  metaData: {
    weight: 500,
    color: 'blue',
  },
}
```

ここで、`Product`型を定義しています。この型には`id`、`name`、`price`、`description`、そして`metaData`というプロパティが存在します。

注目すべきは、`description`と`metaData`です。`description`は`?`が付いているため、このプロパティはオプショナルです。つまり、`Product`型のオブジェクトを作る際に、`description`を設定しなくても問題ありません。

また、`metaData`は`[key: string]: string | number;`という形で定義されています。これは、`metaData`オブジェクトが任意のキーを持ち、その値は文字列または数値であることを表しています。これにより、開発者は柔軟に`metaData`オブジェクトを扱うことができます。

以上が、TypeScript でのオブジェクトの型注釈の基本的な使い方と、それを Next.js のプロジェクトで使用する方法についてでした。型注釈を活用することで、コードの品質を向上させ、エラーを早期に発見し、予防することができます。


Next.js と TypeScript を使ったオブジェクトの型注釈の使い方と実装例について詳しく解説します。

Next.js と TypeScript で、オブジェクト内のメソッドに型注釈をつける


## TL;DR

このページでは、JSX の基礎の実装方法について解説しますね。一言でいうと JSX とは、JavaScript 内で HTML のような記述を可能にする記法です。React や Next.js を使った開発において必要不可欠な知識となります。

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

### JSX とは？

JSX (JavaScript XML) は、React や Next.js で利用される JavaScript の拡張文法です。これにより、JavaScript の中で直感的に HTML のようなマークアップが記述でき、見た目に関する部分とロジックを一元的に扱うことができます。

基本的な JSX のコードは以下のようになります。

```tsx
const element = <h1>Hello, world!</h1>
```

ここで `<h1>Hello, world!</h1>` が JSX の部分で、HTML のように見えますが実は JavaScript の一部です。JSX の特徴は、タグの中に JavaScript の変数や関数を `{}` で囲んで埋め込むことができる点です。この機能により、動的な UI の生成が容易となります。

例えば、以下のコードは変数 `name` を JSX 内で参照しています。

```tsx
const name = 'John Doe'
const element = <h1>Hello, {name}</h1>
```

JSX の表現力はこれだけに留まりません。条件分岐や配列の操作など、JavaScript のあらゆる機能を駆使することが可能です。

### JSX のルール

JSX には特定のルールと特性がありますので、それらについて詳しく説明いたします。

### 最上位の要素は一つ

JSX では、一つのコンポーネント内で複数の要素を返す場合、それら全ての要素は一つの親要素で囲まれなければなりません。

```tsx
const ValidComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to my website.</p>
    </div>
  )
}
```

### フラグメント

ただし、全ての要素を無意味な `<div>` タグで囲むのは好ましくない場合もあります。そのような場合、React はフラグメントという機能を提供しています。フラグメントは `<></>` タグで表され、これにより無駄なタグを生成せずに複数の要素を返すことができます。

```tsx
const FragmentComponent = () => {
  return (
    <>
      <h1>Hello, world!</h1>
      <p>Welcome to my website.</p>
    </>
  )
}
```

### 要素は閉じる

全ての JSX タグは閉じる必要があります。通常の HTML では閉じタグが省略できる要素がありますが（例えば、`<input>`、`<img>` など）、JSX ではそれが許可されません。JSX 内では、閉じタグを省略すると構文エラーが発生します。

以下のように自己閉鎖タグ（self-closing tag）を使います。

```tsx
const ValidComponent = () => <input type="text" />
```

### `className` 属性

HTML の `class` 属性は JavaScript の予約語なので、JSX では代わりに `className` 属性を使用します。

```tsx
const ClassComponent = () => <div className="myClass">Hello, world!</div>
```

### JavaScript Expression

JSX の中に JavaScript の式（expression）を埋め込むことができます。これは `{}` カッコで囲むことで行います。

```tsx
const data = {
  name: 'John Doe',
  age: 30,
}

const ExpressionComponent = () => {
  return (
    <div>
      <h1>Hello, {data.name}!</h1>
      <p>You are {data.age} years old.</p>
    </div>
  )
}
```

### コンポーネントの生成

JSX は新しいコンポーネントを生成するのにも使用できます。新しいコンポーネントは大文字で始まる必要があり、小文字で始まるものは HTML タグとして解釈されます。

```tsx
import MyComponent from './MyComponent'

const Component = () => {
  return <MyComponent />
}
```

ここでは、`MyComponent`という新しいコンポーネントをインポートして使用しています。`<MyComponent />`は JSX で新たなコンポーネントを生成します。

### プロップスの渡し方

JSX を使用して、親コンポーネントから子コンポーネントへデータを渡すことができます。これを"props（プロパティ）"といいます。これにより、コンポーネント間でデータを共有できます。

```tsx
const ChildComponent = ({ text }: { text: string }) => {
  return <p>{text}</p>
}

const ParentComponent = () => {
  return <ChildComponent text="Hello from Parent Component" />
}
```

ここでは、`ParentComponent`から`ChildComponent`にテキストデータをプロップスとして渡しています。

### 子要素の使用

JSX では、`props.children`という特別なプロップを使用して、コンポーネントの開始タグと終了タグの間にあるコンテンツにアクセスできます。

```tsx
type ContainerProps = {
  children: React.ReactNode
}

const Container = ({ children }: ContainerProps) => {
  return <div>{children}</div>
}

const Component = () => {
  return (
    <Container>
      <p>Hello, world!</p>
    </Container>
  )
}
```

ここでは、`Container`コンポーネントが`children`プロップを受け取り、それを描画しています。`Component`コンポーネントでは、`Container`コンポーネントの中に`<p>`タグを配置しています。

### インラインスタイルの適用

JSX では、インラインスタイルを適用するためにはオブジェクトの形式でスタイルを指定します。そして、プロパティ名は camelCase（キャメルケース）で記述します。

```tsx
const Component = () => {
  return <div style={{ color: 'red', fontSize: '16px' }}>Hello, world!</div>
}
```

上記の例では、`<div>`要素に対してインラインスタイルを適用しています。色を赤にし、フォントのサイズを 16px に設定しています。

### JavaScript 式の埋め込み

JSX では、波括弧 `{}` を使用して JavaScript 式を埋め込むことができます。これを使うと、動的なコンテンツを JSX 要素の中に直接書き込むことができます。

```tsx
const Component = () => {
  const name = 'World'
  return <div>Hello, {name}!</div>
}
```

上記の例では、`name`という変数を定義し、それを波括弧を使用して `<div>` 要素の中に埋め込んでいます。

### ブール値、Null、Undefined は表示されない

JSX では、ブール値（`true`や`false`）、`null`、そして`undefined`はレンダリングされません。そのため、これらを返すことでコンポーネントの出力を制御することができます。

```tsx
const Component = ({ shouldDisplay }: { shouldDisplay: boolean }) => {
  if (!shouldDisplay) {
    return null
  }

  return <div>Hello, world!</div>
}
```

上記の例では、`shouldDisplay`というプロップが`false`のときに`null`を返しています。これにより、`<div>`要素は表示されません。

### 関数を渡す

JSX では、要素の属性として関数を渡すことができます。これは、特にイベントハンドラ（onClick、onChange など）に関数を渡す際によく使います。

```tsx
const Component = () => {
  const handleClick = () => {
    alert('Button clicked!')
  }

  return <button onClick={handleClick}>Click me</button>
}
```

この例では、`handleClick`という関数を定義し、その関数を`onClick`属性としてボタン要素に渡しています。このボタンがクリックされると、`handleClick`関数が呼び出され、アラートが表示されます。

### 配列をレンダリングする

JSX では、要素の子として配列を使用することができます。これを使用すると、配列の各項目を要素としてレンダリングすることができます。

```tsx
const Component = () => {
  const items = ['Apple', 'Banana', 'Cherry']

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  )
}
```

この例では、`items`という配列を定義し、その配列を`.map`メソッドで処理しています。この処理により、配列の各項目を`<li>`要素としてレンダリングしています。

### JSX におけるコメントの書き方

JSX では、JavaScript の通常のコメント`//`や`/* */`は使用できません。その代わりに、JSX 内でコメントを書くためには`{/* Comment */}`のように、波括弧とアスタリスクを使った記法を使用します。

```tsx
const Component = () => (
  <div>
    {/* This is a comment */}
    <p>Hello, world!</p>
  </div>
)
```

### 複数の要素をラップするための React.Fragment

React.Fragment (または短縮形として `<>` と `</>` ) を使うことで、複数の JSX 要素を一つの要素にまとめることができます。これは、特に React が単一の親要素を必要とする場合に便利です。

```tsx
const Component = () => (
  <>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </>
)
```

### 制御構文の活用

JSX では、JavaScript の制御構文（`if`、`for`など）を直接書くことはできませんが、波括弧`{}`を使って JavaScript の式を埋め込むことができます。そのため、複雑な制御フローを扱う場合でも、適切な JavaScript の式を作成することで対応可能です。

```tsx
const Component = ({ condition }) => <div>{condition ? <p>Condition is true</p> : <p>Condition is false</p>}</div>
```

### コンポーネントへの参照（ref）

React では、DOM 要素への参照を保存するために ref を使うことがあります。これは、フォーカスの管理、テキストの選択、メディアの再生など、直接的な DOM 操作が必要となる場合に役立ちます。

JSX では、ref を使って次のようにコンポーネントへの参照を作成することができます。

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

const Component = () => {
  const inputRef = useRef(null)

  const handleClick = () => {
    // refを通じてDOMにアクセス
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  )
}
```

このコードでは、`useRef` フックを使って新たな ref を作成し、その ref を `<input>` 要素に設定しています。そして、ボタンがクリックされたとき、その ref を使って直接 `<input>` 要素にアクセスし、その要素にフォーカスを当てるようにしています。

### Emotion

Emotion は CSS-in-JS ライブラリの一つで、コンポーネントのスタイリングを行うために利用されます。

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

const Component = () => (
  <div
    css={css`
      color: hotpink;
    `}
  >
    This is hotpink.
  </div>
)
```

`@emotion/react` の `css` 関数を使って CSS を記述し、JSX 要素の `css` プロパティに渡します。

### Styled Components

Styled Components も CSS-in-JS ライブラリの一つで、特定のコンポーネントにスタイルを適用するために用いられます。

```jsx
import styled from 'styled-components'

const StyledDiv = styled.div`
  color: hotpink;
`

const Component = () => <StyledDiv>This is hotpink.</StyledDiv>
```

`styled` 関数を使って新しいスタイリングされたコンポーネントを作成します。そのコンポーネントは JSX でそのまま使用することができます。

いずれのライブラリも、JSX の中で直接スタイルを記述して適用することができ、コンポーネントの見た目と機能を密接に連携させることができます。このため、コンポーネントの再利用性と保守性が向上します。

### React Router

React Router は React アプリケーションにルーティング機能を提供するライブラリです。`<Route>` や `<Link>` などの JSX 要素を提供しています。

```tsx
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const App = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)
```

### Material-UI

Material-UI は React 用の UI コンポーネントライブラリで、さまざまな UI コンポーネントを JSX 要素として提供しています。

```tsx
import Button from '@material-ui/core/Button'

const App = () => (
  <Button variant="contained" color="primary">
    Hello World
  </Button>
)
```

### Ant Design

Ant Design はエンタープライズレベルの UI デザイン体系と React ベースの実装を提供するライブラリで、たくさんの独自の JSX コンポーネントを提供しています。

```tsx
import { Button } from 'antd'

const App = () => <Button type="primary">Click Me</Button>
```

### React Bootstrap

React Bootstrap は、Bootstrap の React 版で、Bootstrap の各コンポーネントを React コンポーネントとして提供します。

```tsx
import Button from 'react-bootstrap/Button'

const App = () => <Button variant="primary">Click Me</Button>
```

### Next.js で、JSX を実装

では、Next.js と TypeScript を使って、具体的に JSX の基礎を学んでいきましょう。

#### `components/Hello.tsx`

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

const Hello = ({ name }: Props) => {
  return <h1>Hello, {name}</h1>
}

export default Hello
```

ここでは `Hello` というコンポーネントを定義しています。このコンポーネントは `name` というプロパティを受け取り、`<h1>` タグの中に "Hello, {name}" と表示します。`{name}` の部分は JSX の中で JavaScript の変数を参照しています。

#### `pages/index.tsx`

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

const Home = () => {
  return <Hello name="World" />
}

export default Home
```

ここでは先程作成した `Hello` コンポーネントを `import` し、`name` プロパティに "World" を渡して呼び出しています。その結果、ブラウザ上で "Hello, World" と表示されます。

### JSX を実装

では、さらに具体的な JSX のコードを見てみましょう。

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

const Person = ({ name, age }: PersonProps) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age} years old</p>
    </div>
  )
}
```

ここで定義した `Person` コンポーネントは、`name` と `age` という 2 つのプロパティを受け取り、それらを元に HTML に似たマークアップを生成します。`<div>` タグで囲んだ複数の JSX 要素は、一つの親要素に囲まれているため、正しい JSX の形となっています。

また、このコンポーネントを使う側は以下のように書くことができます。

```tsx
const App = () => {
  return (
    <div>
      <Person name="John Doe" age={22} />
      <Person name="Jane Doe" age={24} />
    </div>
  )
}
```

ここで、`Person` コンポーネントを 2 回呼び出し、それぞれ異なるプロパティを渡しています。これにより、同じ `Person` コンポーネントを利用しつつも、それぞれ異なる内容を表現することができます。


Next.js と TypeScript を使った JSX の基礎について、具体的なコードと共に初学者にもわかるように解説します。

React が少し分かるようになる！JSX チートシート


## TL;DR

TypeScript では、関数の引数の中に「？」を入れることで、オプションパラメーター（オプション引数）を定義できます。この記事では、オプションパラメーターの活用方法についてお話しします。一言で言えば、オプションパラメーターとは、関数に渡す引数が必須ではなく、省略可能であるという意味です。それでは詳しく見ていきましょう。

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

### オプションパラメーターとは？

TypeScript では、関数の引数を定義する際に、それが必須なのか、任意なのかを決定できます。これがオプションパラメーターです。TypeScript ではオプションパラメーターは引数名の後に`?`を追加することで指定できます。例えば、以下のような形になります。

```tsx
function greeting(name: string, age?: number) {
  if (age) {
    return `Hello, ${name}. You are ${age} years old.`
  }
  return `Hello, ${name}.`
}
```

上記のコードでは、`greeting`という関数が定義されています。この関数は 2 つの引数を受け取ります。`name`は必須の引数で、`age`はオプションです。つまり、`age`は指定しなくてもこの関数は正常に動作します。

この特性を利用すれば、関数が柔軟に動作するように設計できます。例えば、何らかの API へのリクエストを送る関数を考えてみてください。その API が複数のオプションパラメーターを受け入れるとします。関数内でそれらのパラメーターをオプションとして扱うことで、API へのリクエストを柔軟にコントロールすることができます。

### オプションパラメーターの順番

通常、TypeScript（または JavaScript）ではオプション引数は最後に記述する必要があります。これは、関数が引数を順番に読み取るためで、もし必須の引数がオプション引数の後に来てしまうと、オプション引数が省略された時にどの引数が省略されたのかが不明確になります。そのため、一般的にはオプション引数は最後に配置されます。

たとえば以下の関数は、エラーとなります。

```tsx
function greeting(age?: number, name: string) {
  // ここでエラーが発生します。
}
```

なぜなら、`name` 引数は必須ですが、`age` 引数が省略可能なため、`greeting("John")`というような呼び出し方が可能かどうかが曖昧になってしまうからです。

しかし、オブジェクトを引数に取る場合はこの制限はなくなります。その場合、オプションパラメーターと必須パラメーターはどの順番でも構いません。

```tsx
type Options = {
  name: string
  age?: number
}

function greeting({ name, age }: Options) {
  // 順番は問題ありません
}
```

上記のコードでは、`name`は必須であり、`age`はオプションですが、それぞれがオブジェクトのプロパティとして指定されているため、引数としての順序は問類ありません。

### Next.js で、オプションパラメーターを活用

Next.js のコンテキストを考えて、オプションパラメーターの活用例を見てみましょう。以下のコードは、Next.js のページコンポーネントの一部です。

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

```tsx
import React from 'react'

type Props = {
  title?: string
  message?: string
}

const HomePage = ({ title = 'Welcome', message = 'This is home page' }: Props) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{message}</p>
    </div>
  )
}

export default HomePage
```

この`HomePage`コンポーネントは`title`と`message`という 2 つのプロパティを受け取ります。しかし、どちらのプロパティもオプションで、デフォルト値が設定されています。このようにオプションパラメーターは、デフォルト値と組み合わせることで非常に有用なツールになります。

### オプションパラメーターを実装

更に深く理解するために、よりテクニカルな実装例を見てみましょう。以下の例では、API からデータを取得する関数を定義しています。

```tsx
type ApiFetchOptions = {
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
  headers?: { [key: string]: string }
  body?: any
}

async function fetchData(url: string, options?: ApiFetchOptions) {
  const response = await fetch(url, options)
  const data = await response.json()
  return data
}
```

上記の`fetchData`関数は 2 つの引数を受け取ります。`url`は API のエンドポイントで、これは必須です。しかし、`options`引数はオプションで、特にメソッド、ヘッダー、ボディなど、fetch 関数に与えることができるオプションを表現しています。

この関数を使って、データを取得する方法は多く、次のような形になります。

```tsx
const data1 = fetchData('https://example.com/api/data')

const data2 = fetchData('https://example.com/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }),
})
```

このように、オプションパラメーターは、関数がさまざまな状況に対応できるようにするための強力なツールと言えるでしょう。本記事を通じて、その基本的な使用法と Next.js と TypeScript における具体的な使用例を理解できたことと思います。


オプションパラメーターとは何か、そしてNext.js と TypeScript を用いて、それをどのように活用するのかについて詳細に解説します。

Next.js と TypeScript で、オプションパラメーター(?)を使う


## TL;DR

この記事では、React 関数コンポーネントの基礎について詳しく見ていきますね。一言でいうと、React 関数コンポーネントとは React のコンポーネントを関数で定義する方法です。

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

### 関数コンポーネントとは？

React.js では、UI の一部分をコンポーネントと呼ばれる単位に分割し、これらを組み合わせることで Web アプリケーションを構築します。そして、そのコンポーネントの定義方法として「関数コンポーネント」があります。関数コンポーネントは、関数として定義されるコンポーネントで、最もシンプルな形式の React コンポーネントです。

```tsx
const Greeting = () => <h1>こんにちは！</h1>
```

上記の例は、文字列"こんにちは！"を表示する関数コンポーネント Greeting を定義しています。このように、関数コンポーネントは、状態を持たず、ライフサイクルも持たないシンプルな UI 部品を構築するのに適しています。

ただし、React Hooks の導入により、関数コンポーネントでも状態管理やライフサイクルメソッドに相当する機能を利用することができるようになりました。これにより、クラスコンポーネントと同等の機能を持つ関数コンポーネントを作ることが可能となりました。

### Next.js で、関数コンポーネントを実装

それでは、Next.js と TypeScript を用いて、具体的な関数コンポーネントを作ってみましょう。以下に、"Hello, Next.js!"というメッセージを表示する簡単なコンポーネントを作成する方法を示します。

```tsx
// pages/index.tsx
import type { NextPage } from 'next'

const HomePage: NextPage = () => {
  return <h1>Hello, Next.js!</h1>
}

export default HomePage
```

上記のソースコードは、`pages/index.tsx` というファイルに記述され、Next.js のエントリーポイント（アプリケーションの開始点）となるコンポーネントを定義しています。

この`HomePage`は、Next.js の固有の型`NextPage`を使用しています。これにより、このコンポーネントが Next.js 特有のプロパティ（例えば`getInitialProps`）を持つことが保証されます。また、Next.js はファイルベースのルーティングを提供しており、この`pages/index.tsx`ファイルは自動的に`/`（ルート）パスにマッピングされます。

`return <h1>Hello, Next.js!</h1>;`により、ブラウザに表示される HTML 要素が生成されます。この`<h1>`は、React 要素を生成する JSX という構文を用いて記述されています。

### 関数コンポーネントをさらに理解する

それでは、よりテクニカルな側面を含む関数コンポーネントを見ていきましょう。具体的には、props と状態管理について考えてみます。

props は、コンポーネントの外部から渡されるデータを表し、コンポーネントはこれを受け取ります。これにより、コンポーネントは再利用可能となり、異なるデータを表示することができます。

また、React では「状態」という考え方を導入しており、これはコンポーネント内で変化するデータを扱うためのものです。React Hooks を用いると、関数コンポーネントでも状態を管理することができます。

以下に、props と状態を使った関数コンポーネントの例を示します。

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

type CounterProps = {
  initialCount: number
}

const Counter = ({ initialCount }: CounterProps) => {
  const [count, setCount] = useState(initialCount)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter
```

この`Counter`コンポーネントは、`initialCount`という props を受け取り、これを初期値とするカウンターを提供します。そして、ユーザがボタンをクリックするとカウンターが増加します。カウンターの現在の値は、状態として管理され、`useState`フックによって設定と更新が行われます。

### コンポーネントの作成とインポート

では、先程作成した `Counter` コンポーネントを使って、他のコンポーネントからインポートする方法を解説いたします。この `Counter` コンポーネントを `HomePage` からインポートし、使用する例を見ていきましょう。

まずは、`Counter` コンポーネントを `HomePage` にインポートするためのコードを示します。その後、そのコードを分解して説明していきます。

```tsx
// pages/index.tsx
import type { NextPage } from 'next'
import Counter from '../components/Counter'

const HomePage: NextPage = () => {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <Counter initialCount={0} />
    </div>
  )
}

export default HomePage
```

この `HomePage` コンポーネントでは、まず初めに `Counter` コンポーネントをインポートしています。ここでのパス `'../components/Counter'` は、`Counter.tsx` ファイルが存在する場所を指しています。

そして、JSX の中で `<Counter initialCount={0} />` という形で `Counter` コンポーネントを使います。ここで、`initialCount={0}` としている部分が props の渡し方を示しています。この例では、`initialCount` という名前の props を `Counter` コンポーネントに渡し、その初期値を `0` に設定しています。

以上が、関数コンポーネントを作成し、それを他のコンポーネントからインポートする基本的な手順です。この手順を理解し、再利用可能なコンポーネントを作成することで、効率的な開発を行うことができます。

### テクニカルな関数コンポーネントの例

では、さらにテクニカルな関数コンポーネントの例として、ユーザーの一覧を表示する `UserList` コンポーネントを作成してみましょう。この `UserList` コンポーネントでは、props として渡されたユーザーのデータを元に、ユーザーの一覧を描画します。

```tsx
// components/UserList.tsx
type User = {
  id: number
  name: string
}

type Props = {
  users: User[]
}

const UserList = ({ users }: Props) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

export default UserList
```

この `UserList` コンポーネントでは、`User` という型を定義し、その配列である `User[]` を props として受け取ります。その後、`users.map()` を使って、ユーザー一人一人をリストの項目 `<li>` として描画します。この時、`key` 属性にはユーザーの `id` を設定します。React では、配列を元に描画する際に各要素がユニークであることを保証するために `key` 属性が必要です。

次に、この `UserList` コンポーネントを使う `HomePage` コンポーネントの例を見てみましょう。

```tsx
// pages/index.tsx
import type { NextPage } from 'next'
import UserList from '../components/UserList'

const users = [
  { id: 1, name: 'Taro' },
  { id: 2, name: 'Jiro' },
  { id: 3, name: 'Saburo' },
]

const HomePage: NextPage = () => {
  return (
    <div>
      <h1>User List</h1>
      <UserList users={users} />
    </div>
  )
}

export default HomePage
```

`HomePage` コンポーネントでは、先程作成した `UserList` コンポーネントをインポートし、`users` という名前の props を渡しています。ここで、`users` はユーザーのデータの配列です。

以上が、テクニカルな関数コンポーネントの作成と使用の例です。この例を通じて、関数コンポーネントがどのようにデータを受け取り、それを元に描画を行うのか理解できたかと思います。これらの知識を応用して、さまざまなコンポーネントを作成し、再利用性の高いコードを書いていきましょう。


Next.js と TypeScript を使い、React 関数コンポーネントの基礎をわかりやすく解説します。

Next.js と TypeScript で、React 関数コンポーネントの基礎を理解する


## TL;DR

このページでは、Next.js と TypeScript を使って、"React フックが少し分かる！React フックチートシート"の実装方法について解説しますね。一言でいうと、React フックとは状態管理やライフサイクルを関数コンポーネントから制御するための仕組みです。

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

### React フックとは？

React フックとは、React の関数コンポーネントで状態やライフサイクルを制御するための仕組みです。

#### ライフサイクルとは？

React コンポーネントの「ライフサイクル」は、人間が生まれてから成長し、そして歳をとる過程に少し似ています。ライフサイクルは、コンポーネントが生まれる（マウント）から消える（アンマウント）までの過程を指します。それでは、その詳細を見てみましょう。

1. 誕生（マウント）：
   コンポーネントが誕生するとき、まず必要なデータを準備します。例えば、親コンポーネントから受け取る情報（props）を用意したり、初期状態を設定したりします。そして、最初の描画が行われ、コンポーネントが画面（DOM）に現れます。

2. 成長（更新）：
   コンポーネントが一度表示された後も、何かしらの変更（例えば、ユーザーのクリック操作や新たな情報の受け取りなど）があると、コンポーネントは成長（更新）します。このとき、新しい状態や props に基づいて再描画が行われます。

3. 老い（アンマウント）：
   コンポーネントが必要なくなったとき、あるいはページが変わったときなど、コンポーネントは「老い」を迎えます。この状態をアンマウントといい、ここでコンポーネントは画面から消えます。これまで使用していたリソース（例えば、タイマーやネットワークリクエストなど）をきちんと片付けることが重要です。

これらすべてのステージが、React コンポーネントの「ライフサイクル」です。それぞれのステージで適切な処理を行うことで、ユーザーにとって快適な体験を提供することができます。

クラスコンポーネントでしか利用できなかった多くの機能を関数コンポーネントでも使用できるようにするものです。これにより、コンポーネントの再利用やコードの理解、読みやすさを向上させることができます。

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

// Props の型定義
type Props = {
  initialCount: number
}

const Counter = ({ initialCount }: Props) => {
  const [count, setCount] = useState(initialCount)

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  )
}
```

このサンプルコードは、`useState` フックを使ってカウンターの状態を管理しています。`useState` フックは、初期値を引数に取り、状態の値とその状態を更新するための関数のペアを返します。

### useState

**useState は関数コンポーネント内で状態を維持・管理するためのフック（機能）** です。

状態の現在の値と、その値を更新するための関数をペアにして返します。具体的には、値を保持し、それを更新することが可能です。また、その値が変更されるとコンポーネントが再レンダリングされ、新しい値が画面に反映されます。

`useState`というのは、ある値（例えば数字や文字列、リストなど）を保存しておき、その値を変えたり見たりするための機能です。これは、例えばゲームをプレイしているときに、得点を記録しておくために使われます。

イメージとしては、`useState`は魔法の箱のようなものです。この箱に何かを入れておくと、後でその中身を取り出したり、新しいものに入れ替えたりできます。そして、その箱の中身が変わるたびに、React はそれを検知して画面を更新します。

例えば、あるボタンをクリックしたときに、得点を 1 増やすというケースを考えてみましょう。

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

const ScoreCounter = () => {
  const [score, setScore] = useState(0)

  const incrementScore = () => {
    setScore(score + 1)
  }

  return (
    <div>
      <p>得点: {score}</p>
      <button onClick={incrementScore}>得点を増やす</button>
    </div>
  )
}
```

このコードでは、`useState`を使って`score`という名前の箱を作り、初めは 0 を入れています。そして、「得点を増やす」ボタンをクリックするたびに、`setScore`を使って得点を 1 増やしています。これにより、ボタンを押す度に得点が増え、画面上の得点もそれに合わせて更新されます。

`useState`は、このように React で状態を管理するための重要なツールであり、関数コンポーネントの中で使われます。

[useState](./nextjs-usestate)

### useEffect

**useEffect はコンポーネントが描画された後に特定の処理を行うためのフック**です。

副作用（データのフェッチ、手動での DOM の更新、など）を実行するためのものです。

例えば、API からデータを取得する、タイマーを設定する、DOM の属性を直接操作するなど、コンポーネントが画面に表示された後に行いたい処理があるときに使います。

useEffect は、特定の処理をコンポーネントが描画された後に自動的に行います。例えば、ユーザーの操作を待つことなく API からデータを取得したり、タイマーを設定したりできます。これにより、アプリケーションはユーザーとスムーズに対話することが可能になります。

関数コンポーネントの中で直接副作用を起こすと、レンダリングのたびにそれらが実行されてしまう可能性があります。それを防ぐために、useEffect フックを使用します。

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

const Clock = () => {
  const [date, setDate] = useState(new Date())

  useEffect(() => {
    const timerID = setInterval(() => {
      setDate(new Date())
    }, 1000)

    return () => {
      clearInterval(timerID)
    }
  }, [])

  return <div>{date.toLocaleTimeString()}</div>
}
```

このコードでは、useEffect フックを使って 1 秒ごとに現在の時刻を更新するようにしています。また、クリーンアップ関数として clearInterval を返しています。

[useEffect](./nextjs-useeffect)

### useContext

**useContext フックは、React の Context API を使いやすくするためのものです。**

コンテキストを通じて、コンポーネントツリー全体にデータを提供することができます。このフックは、コンテキストオブジェクト（React.createContext で作成）を引数に取り、そのコンテキストの現在の値を返します。

```tsx
import React, { useContext } from 'react'

const ThemeContext = React.createContext('light')

const ThemedButton = () => {
  const theme = useContext(ThemeContext)

  return <button>{theme === 'light' ? 'Light Theme' : 'Dark Theme'}</button>
}
```

このコードでは、useContext フックを使ってテーマコンテキストの値を取得しています。この値は、ボタンのラベルに使用されています。

[useState](./nextjs-context)

### useRef

**useRef は不変の参照オブジェクトを生成するためのフックです。**

DOM 要素への参照（例えば、特定の input 要素）を保持したり、レンダリング間で値を維持する必要があるときに使用します。これは、時間経過やレンダリングにより変わらない値を持つことができるため、タイマーやインターバルの ID を保持する際などにも有用です。

`useRef` は、DOM 要素や時間をまたいで保持するべき値の参照を作成します。この参照は更新してもコンポーネントの再レンダリングを引き起こしません。例えば、特定の入力要素にアクセスしたいときや、特定のタイマーの ID を保存しておきたいときなどに使います。

`useRef` フックは、ミュータブルな ref オブジェクトを生成するためのものです。このオブジェクトのプロパティ.current は、初期化時に引数で与えられた値（初期値）を持ち、その値は変更できますが、その変更は再レンダリングを引き起こさない点が特徴です。

```tsx
import React, { useRef } from 'react'

const TextInput = () => {
  const inputRef = useRef<HTMLInputElement>(null)

  const handleClick = () => {
    inputRef.current?.focus()
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  )
}
```

このコードでは、useRef フックを使って input 要素への参照を作成しています。そして、ボタンがクリックされたときに、その input 要素にフォーカスを当てるようにしています。

### useMemo

**useMemo フックは、複雑な関数の結果をメモ化（一度計算した結果を再利用）するためのものです。**

関数とその依存配列を引数に取り、関数の返り値をメモ化します。依存配列の要素が変更されると、関数は再実行されます。

```tsx
import React, { useMemo } from 'react'

const calculateExpensiveValue = (a: number, b: number) => {
  // This is just an example of an expensive computation.
  let result = 0
  for (let i = 0; i < 1000000000; i++) {
    result = a * b + i
  }
  return result
}

const Component = ({ a, b }: { a: number; b: number }) => {
  const value = useMemo(() => calculateExpensiveValue(a, b), [a, b])

  return <div>Value: {value}</div>
}
```

このコードでは、useMemo フックを使って重い計算の結果をメモ化しています。この結果は、依存配列の値（ここでは a と b）が変更されるまで再計算されません。

[useMemo](./nextjs-usememo)

### useCallback

**useCallback フックは、useMemo フックと同様に、メモ化を利用しますが、この場合は関数そのものをメモ化します。**

これは、特に関数を props として下位コンポーネントに渡すときに便利です。

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

const Button = ({ onClick }: { onClick: () => void }) => <button onClick={onClick}>Increase</button>

const Counter = () => {
  const [count, setCount] = useState(0)

  const increase = useCallback(() => {
    setCount(count + 1)
  }, [count])

  return (
    <div>
      Count: {count}
      <Button onClick={increase} />
    </div>
  )
}
```

このコードでは、useCallback フックを使って関数をメモ化しています。この関数は、Button コンポーネントに props として渡されます。

[useCallback](./nextjs-usecallback)

### useReducer

**useReducer は、より複雑なコンポーネント状態ロジックを管理するためのフックです。**

useState よりも詳細な状態遷移を含む場合や、同じ状態遷移ロジックを多くのコンポーネント間で共有する場合に有効です。

```tsx
import React, { useReducer } from 'react'

type State = { count: number }
type Action = { type: 'increment' | 'decrement' }

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    default:
      return state
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 })

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  )
}
```

この例では、useReducer フックを使ってカウンターコンポーネントを作成しています。reducer 関数は現在の状態とアクションを引数に取り、新しい状態を返します。

### useLayoutEffect

`useLayoutEffect`は、`useEffect`と非常に似ていますが、レンダリングのフェーズが異なります。`useLayoutEffect`内の関数は、ブラウザが画面を描画する**前**に実行されます。これは、DOM の変更を即時に反映させたい場合や、レンダリングをブロックして副作用を先に行いたい場合に有効です。

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

const Component = () => {
  const [width, setWidth] = useState(window.innerWidth)

  useLayoutEffect(() => {
    const handleResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return <div>Window width: {width}</div>
}
```

この例では、`useLayoutEffect`を使ってウィンドウの幅を監視し、リサイズイベントが発生するたびにウィンドウの幅を更新しています。

### useDebugValue

**useDebugValue フックは、React 開発者ツールでカスタムフックをより便利にデバッグするためのフックです。**

このフックを使用すると、開発者ツールにカスタムフックからのデバッグ情報を表示することができます。

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

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null)

  // Show friend status in DevTools.
  useDebugValue(isOnline ? 'Online' : 'Offline')

  // ...
  return isOnline
}
```

この例では、`useDebugValue`を使って開発者ツールにフレンドのオンラインステータスを表示しています。

### カスタムフック

カスタムフックは、コンポーネントのロジックを共有するためのメカニズムです。独自のフックを作成することで、状態ロジックを再利用しやすくすることができます。

カスタムフックは、名前が "use" で始まる JavaScript の関数です。この関数内では、他のフック（useState、useEffect など）を呼び出すことができます。

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

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return width
}

const Component = () => {
  const width = useWindowWidth()

  return <div>Window width: {width}</div>
}
```

この例では、ウィンドウの幅を管理するロジックをカスタムフック`useWindowWidth`として作成しています。このカスタムフックは、他のコンポーネントで再利用可能です。

[カスタムフック](./nextjs-customhook)


この記事では、Next.js と TypeScript を使った React フックの基本的な使用方法を分かりやすく解説します。初学者の方でも理解できるように、各フックの目的と動作について詳しく説明します。

2023-06-29

Next.js と TypeScript で学ぶ、Date() コンストラクター

2023-06-29

JavaScript：文字列を置換するreplace()を極める

2023-06-28

Next.js と TypeScript で、filter() メソッドを使う

2023-06-28

Next.js と TypeScript で、関数の引数を無視するパラメータ`_`の使い所

2023-06-28

Next.js と TypeScript で、slice() メソッドを使いページネーションを作る

2023-06-28

Next.js と TypeScript で、オブジェクト内のメソッドに型注釈をつける

2023-06-27

React が少し分かるようになる！JSX チートシート

2023-06-27

Next.js と TypeScript で、オプションパラメーター(?)を使う

2023-06-27

Next.js と TypeScript で、React 関数コンポーネントの基礎を理解する

2023-06-27

React が少し分かるようになる！React フック一覧チートシート