
## TL;DR

このページでは、React のライフサイクルの仕組みの実装方法について解説しますね。一言でいうと React のライフサイクルとは、React コンポーネントが生成され、更新され、最終的に破棄されるまでの流れを表すものです。

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

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

React のライフサイクルとは、React コンポーネントが生成され、更新され、最終的に破棄されるまでの流れを表す考え方です。この流れを理解することで、React コンポーネントがどのように動作するのか、いつどのような処理を書くべきなのかがわかります。

React のライフサイクルは大きく分けて以下の 3 つのフェーズに分類されます。

- マウントフェーズ（Mounting）：コンポーネントが DOM に挿入されるフェーズ
- 更新フェーズ（Updating）：コンポーネントが再レンダリングされるフェーズ
- アンマウントフェーズ（Unmounting）：コンポーネントが DOM から削除されるフェーズ

それぞれのフェーズで特定のライフサイクルメソッドが呼び出されます。以下に基本的なソースコードを示します。

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

const Component = ({ message }: Props) => {
  // マウントフェーズ
  React.useEffect(() => {
    console.log('Component mounted')

    // アンマウントフェーズ
    return () => {
      console.log('Component will unmount')
    }
  }, [])

  // 更新フェーズ
  React.useEffect(() => {
    console.log('Component updated')
  })

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

このコードでは `useEffect` フックを使って、マウントフェーズとアンマウントフェーズ、更新フェーズを示しています。ここで重要なのは、`useEffect` の第二引数に空の配列 `[]` を渡していることです。これにより、このエフェクトはコンポーネントがマウントされた時にのみ（そしてクリーンアップ関数はアンマウント時にのみ）実行されます。

React のライフサイクルは、React コンポーネントが生成（マウント）されてから破棄（アンマウント）されるまでの一連のステージを表しています。これらのステージは特定のメソッド、いわゆる「ライフサイクルメソッド」を通じて制御され、それぞれのステージで特定の処理を実行することが可能です。

React のライフサイクルは主に 3 つのフェーズに分けられます：

1. **マウント（Mounting）** - コンポーネントが DOM に最初に作成されるフェーズです。このフェーズでは以下のメソッドが順に呼び出されます：

- `constructor()`
- `static getDerivedStateFromProps()`
- `render()`
- `componentDidMount()`

2. **更新（Updating）** - プロパティの変更やステートの更新によりコンポーネントが再レンダリングされるフェーズです。以下のメソッドがこのフェーズで呼び出されます：

- `static getDerivedStateFromProps()`
- `shouldComponentUpdate()`
- `render()`
- `getSnapshotBeforeUpdate()`
- `componentDidUpdate()`

3. **アンマウント（Unmounting）** - コンポーネントが DOM から削除されるフェーズです。このフェーズでは次のメソッドが呼び出されます：

- `componentWillUnmount()`

これらのライフサイクルメソッドは、特定のタイミングで特定の処理を実行するために使用します。たとえば、API からデータを取得する処理は通常、`componentDidMount()`メソッドで行います。これは、このメソッドがコンポーネントが DOM に初めてマウントされた直後に一度だけ呼び出されるためです。

なお、上記はクラスコンポーネントのライフサイクルについて説明したものですが、関数コンポーネントでは React Hooks（特に`useState`と`useEffect`）を用いて同等の処理を実装することができます。それぞれのライフサイクルメソッドの詳細な動作や、それぞれのメソッドがいつ、どのように使用されるべきかを理解することは、React の理解を深めるために重要です。

### マウント時のフェーズ

React のライフサイクルのマウント時のフェーズは、次の順序で進行します：

1. `constructor`：コンポーネントの初期化時に呼ばれます。主に状態の初期化やイベントハンドラのバインディングなどが行われます。

2. `render`：React コンポーネントのレンダリングを行います。コンポーネントが描画すべき内容を返します。このメソッド内では状態の更新や副作用を持つ処理を行ってはいけません。

3. React が DOM を更新する：`render` メソッドで返された結果に基づき、実際の DOM が更新されます。

4. `componentDidMount`：コンポーネントが DOM にマウントされた後に呼ばれるメソッドです。ここで外部リソースの取得やサブスクリプションの設定などの作業を行います。

以上のフェーズがマウント時のライフサイクルです。ただし、これらのメソッドは React の古いライフサイクル API に基づくもので、現在では Hooks API を使ってこれらの機能をよりシンプルに実装することが推奨されています。例えば、`componentDidMount` の機能は `useEffect` フックに空の依存配列 `[]` を渡すことで同じように実装することができます。

React のライフサイクルを、例えば人間の一日にたとえてみましょう。

1. `constructor`：これは一日の始まり、朝起きるときと似ています。目を覚まして、これからの一日の準備をします。React では、ここで初期設定を行います。

2. `render`：これは一日の中で、学校や仕事で過ごす時間と似ています。コンポーネントが何を描画すべきかを決めます。これは、どのように一日を過ごすかを決めることに似ています。

3. React が DOM を更新する：これは、あなたが計画した通りに一日を過ごすことと似ています。描画すべき内容が決まった後、その内容が実際に画面上に表示されます。

4. `componentDidMount`：これは一日の終わり、寝る前の時間と似ています。一日を振り返って、次の日のための準備をします。React では、コンポーネントが表示された後に何か追加の作業が必要な場合に、ここで行います。

以上のように、React のライフサイクルは一日の過ごし方に似ています。朝起きて一日が始まり（`constructor`）、どう過ごすかを決め（`render`）、その通りに一日を過ごし（DOM 更新）、寝る前に次の日の準備をする（`componentDidMount`）。これが、React コンポーネントが生まれてから表示されるまでの流れです。

### Next.js で、React のライフサイクルを実装

それでは、Next.js を使って React のライフサイクルを具体的に実装してみましょう。以下は `pages/index.tsx` のソースコードです。

```tsx
import React from 'react'

type Props = {
  message: string
}

const Home = ({ message }: Props) => {
  // マウントフェーズ
  React.useEffect(() => {
    console.log('Component mounted')

    // アンマウントフェーズ
    return () => {
      console.log('Component will unmount')
    }
  }, [])

  // 更新フェーズ
  React.useEffect(() => {
    console.log('Component updated')
  })

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

Home.getInitialProps = () => {
  return { message: 'Hello, World!' }
}

export default Home
```

このコードでは、Next.js のページコンポーネント `Home` が定義されています。そしてその中で React のライフサイクルを `useEffect` フックを用いて実装しています。`getInitialProps` メソッドを使って、サーバサイドで初期プロパティを取得しています。

### React のライフサイクルを実装

さらに高度な例として、ライフサイクル中で状態を管理し、API からデータを取得して表示する例を見てみましょう。この例では、`useEffect` と `useState` フックを使います。

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

type Data = {
  id: number
  title: string
}

const Component = () => {
  const [data, setData] = useState<Data[]>([])

  // マウントフェーズ
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('https://jsonplaceholder.typicode.com/posts')
      setData(result.data)
    }
    fetchData()

    // アンマウントフェーズ
    return () => {
      setData([])
    }
  }, [])

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  )
}
```

このコードでは、`useState` フックを使って `data` 状態を管理し、`useEffect` フックの中で非同期関数 `fetchData` を定義してデータを取得しています。そして、取得したデータを `setData` で更新しています。これにより、コンポーネントがマウントされたときに一度だけデータの取得が行われ、その結果がコンポーネントの状態として保存され、レンダリングされます。そして、コンポーネントがアンマウントされる際には、`setData` を使ってデータを空にしています。

以上が React のライフサイクルの基本的な理解と、それを Next.js と TypeScript を使って実装する一例です。この知識を元に、より複雑なアプリケーションのライフサイクルを理解し、効率的なコードを書くことができます。


React のライフサイクルの仕組みを理解し、それを Next.js と TypeScript で実装する方法について、初学者でも理解できるように詳細に解説します。

Next.js と TypeScript で、React のライフサイクルの仕組みを理解する


## TL;DR

このページでは、React の仮想 DOM の実装方法について解説しますね。一言で言えば、仮想 DOM とは React がパフォーマンスを高めるために使用する効率的な更新手法です。

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

### 仮想 DOM とは？

まずはじめに、React が提供している仮想 DOM という考え方について理解しましょう。

みなさんがお絵かきをするときに、ちょっと難しい絵を描きたいと思ったことはありますか？例えば、大きな城や美しい風景などです。そのような複雑な絵を一発で完璧に描くのは難しいですよね。

そんなとき、どうしたらいいでしょう？まず、下書きをすると思います。下書きでは、全体の形をざっくりと描いたり、どこに何を描くかを決めたりします。そして、その下書きを見ながら、本番の絵を少しずつ描いていくと、難しい絵でも上手に描くことができます。

仮想 DOM（Virtual DOM）は、その下書きのようなものです。コンピュータがウェブサイトを描くときに、まず仮想 DOM という下書きを作ります。そして、その下書きを見ながら本当のウェブサイト（本番の絵）を描きます。これにより、効率よく美しいウェブサイトを描くことができます。

また、ウェブサイトで何か更新があったときには、全部を描き直すのではなく、変更があった部分だけ新しく描きます。これも下書きの力を利用しています。下書きと本番の絵を比較し、違いがある部分だけを新しく描くのです。

このように、仮想 DOM はコンピュータがウェブサイトを効率よく描くための下書きのようなものです。それが「仮想 DOM」という名前の由来でもあります。

それでは、ネイティブな React を使って仮想 DOM の仕組みを解説しましょう。そのために、とても簡単な React のアプリケーションを作成します。

JavaScript フレームワークである React は、ユーザーインターフェースの作成を助けます。React が特に優れている部分の一つは、仮想 DOM という機能を通じて、ウェブページのレンダリングを最適化することです。

実際の DOM（Document Object Model）は、ウェブページの各要素（タグ）を表現するための JavaScript オブジェクトのツリー構造です。ユーザーが何かアクションを取るたびに（例えば、ボタンをクリックするなど）、対応する部分の DOM が更新されます。ただし、DOM の更新は高コストな操作であり、頻繁に行うとパフォーマンスに影響を及ぼす可能性があります。

ここで、React の仮想 DOM が役立ちます。仮想 DOM は実際の DOM の複製であり、React はこの仮想 DOM を使って実際の DOM の変更を最小限に抑えることができます。これは、React が新しい状態をもとに新しい仮想 DOM ツリーを作り、それを既存の仮想 DOM ツリーと比較することで行われます。この比較を「差分検出」または「リコンシリエーション」と呼びます。

まずは、単純な React コンポーネントを作成し、その状態を更新することで仮想 DOM がどのように働くかを見てみましょう。このコンポーネントは、ボタンをクリックするとテキストが切り替わるものです。

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

type Props = {
  initialText: string
  updatedText: string
}

const SimpleComponent = ({ initialText, updatedText }: Props) => {
  const [text, setText] = useState(initialText)

  const handleClick = () => {
    setText(updatedText)
  }

  return (
    <div>
      <p>{text}</p>
      <button onClick={handleClick}>Change Text</button>
    </div>
  )
}

export default SimpleComponent
```

このコードは、初期状態で`initialText`を表示し、ボタンをクリックすると`updatedText`にテキストが切り替わるというコンポーネントです。`useState`フックを使って`text`という状態を作り、`handleClick`関数でその状態を更新しています。

これを起動すると、ボタンをクリックすると画面のテキストが切り替わることを確認できます。これは React（つまり仮想 DOM）が、状態の変更を検知して UI を更新する様子を示しています。

しかし、画面全体が更新されているわけではありません。React（仮想 DOM）は、状態が変更された部分だけを特定し、その部分だけを効率的に更新します。この仕組みにより、大規模な Web アプリケーションでもスムーズに動作します。

このように、React（そして仮想 DOM）は、状態の変更を効率的に画面に反映させるための強力な仕組みを提供します。この概念は、React を学ぶ上で非常に重要なので、しっかりと理解しておきましょう。

### レンダリングとは？

例えば、みんなが日曜日の朝に絵を描くことが好きだとしましょう。色鉛筆やペン、クレヨンを使って、絵を描きますよね。レンダリングも、そのような絵を描く作業に似ています。

あなたがウェブサイトを開くと、コンピューター（あるいはスマホやタブレット）は、そのウェブサイトを描きます。しかし、色鉛筆やクレヨンは使わず、HTML、CSS、JavaScript という特別な言語を使います。それらの言語を使ってウェブサイトのページを描くことが「レンダリング」です。

さらに、もしウェブサイトで何かをクリックしたり、入力したりすると、コンピュータはその部分を新しく描き直すことがあります。この描き直す作業もレンダリングの一部です。それはまるで絵に何かを追加したり、一部を修正したりするようなものですね。

だから、レンダリングは、ウェブサイトがコンピュータ上で描かれる方法のことを指します。そして、それは私たちがインターネットを利用するために必要な作業なのです。

### Next.js で、仮想 DOM を実装

それでは、Next.js と TypeScript を使って、仮想 DOM の動きを確認するシンプルな例を見ていきましょう。以下に`pages/index.tsx`での実装例を示します。

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

type ButtonProps = {
  onClick: () => void
  children: React.ReactNode
}

const Button = ({ onClick, children }: ButtonProps) => {
  console.log('Button component rendered')
  return <button onClick={onClick}>{children}</button>
}

const IndexPage = () => {
  const [count, setCount] = useState(0)
  const handleClick = () => setCount(count + 1)

  console.log('IndexPage component rendered')
  return (
    <div>
      <p>You clicked {count} times</p>
      <Button onClick={handleClick}>Click me</Button>
    </div>
  )
}

export default IndexPage
```

このコードでは、`Button`コンポーネントと`IndexPage`コンポーネントが定義されています。`Button`コンポーネントは再利用可能なボタンの役割を果たし、クリック時に親から渡された`onClick`関数を実行します。`IndexPage`コンポーネントは、ボタンをクリックするたびにカウンターを増やす機能を持ちます。

また、各コンポーネントがレンダリングされた際にコンソールにログを出力するようにしています。この例を通じて、React がどのコンポーネントを再レンダリングするかを観察できます。ボタンをクリックすると、`IndexPage`コンポーネントと`Button`コンポーネントの両方が再レンダリングされます。これは、親コンポーネントが再レンダリングされると、その子コンポーネントもデフォルトで再レンダリングされるためです。

### 仮想 DOM を活用

さらに高度なテクニックとして、React の`React.memo`関数を使って、子コンポーネントの不要な再レンダリングを防ぐ方法を見てみましょう。

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

type ButtonProps = {
  onClick: () => void
  children: React.ReactNode
}

const Button = React.memo(({ onClick, children }: ButtonProps) => {
  console.log('Button component rendered')
  return <button onClick={onClick}>{children}</button>
})

const IndexPage = () => {
  const [count, setCount] = useState(0)
  const handleClick = () => setCount(count + 1)

  console.log('IndexPage component rendered')
  return (
    <div>
      <p>You clicked {count} times</p>
      <Button onClick={handleClick}>Click me</Button>
    </div>
  )
}

export default IndexPage
```

ここでは、`Button`コンポーネントを`React.memo`でラップしています。これにより、`Button`コンポーネントに渡される props が変更されない限り、React はそのコンポーネントの再レンダリングをスキップします。つまり、`Button`コンポーネントは、`onClick`関数や`children`が変更されたときにのみ再レンダリングされます。

これが仮想 DOM の力です。`React.memo`は、仮想 DOM と差分検出アルゴリズムを活用して、必要なレンダリングのみを行い、パフォーマンスを向上させる方法を提供します。

以上が React の仮想 DOM についての基本的な理解と、Next.js と TypeScript を用いた具体的な利用例です。この力を理解し、自身のプロジェクトに活用してパフォーマンスの向上を図ることができます。


Next.js と TypeScript を活用して、React の仮想DOMの概念を詳細に理解し、その活用方法を説明します。

Next.js と TypeScript で、React の仮想DOMを理解する


## TL;DR

このページでは、Nullish coalescing 演算子 (??) の活用法について解説しますね。一言でいうと、Nullish coalescing 演算子とは、ある変数が null や undefined であれば、デフォルトの値を設定するための JavaScript の演算子です。

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

### Nullish coalescing 演算子とは？

Nullish coalescing 演算子 (??) は、JavaScript の新たな演算子で、左辺の値が null や undefined のときに、右辺の値を返す特性を持っています。Nullish coalescing 演算子を使うと、ある変数が null または undefined であるかどうかを簡単に確認し、それに応じて代替値を設定することができます。

それでは、まず基本的なソースコードから見ていきましょう。

```js
let undefinedValue
let defaultValue = 'Hello, World!'

console.log(undefinedValue ?? defaultValue) // 出力: 'Hello, World!'
```

このコードでは、`undefinedValue` は undefined であり、`defaultValue` には 'Hello, World!' という文字列が設定されています。`console.log(undefinedValue ?? defaultValue);` の行では、`undefinedValue` が undefined であるため、Nullish coalescing 演算子の右側にある `defaultValue` の値が出力されます。

### ?? や || との違い。使い分け

JavaScript では、`||`演算子は「論理 OR」を表し、左辺の値が「falsy」（false に評価される値：`false`, `0`, `''`, `null`, `undefined`, `NaN`）である場合に右辺の値を評価し、返します。

一方、`&&`演算子は「論理 AND」を表し、左辺の値が「truthy」（true に評価される値）である場合に右辺の値を評価し、返します。

これらの演算子は「短絡評価（Short-circuit evaluation）」と呼ばれる特性を持ちます。つまり、`||`演算子は左辺が truthy であれば、すぐにその値を返し、右辺は評価しない。逆に、`&&`演算子は左辺が falsy であればすぐにその値を返し、右辺は評価しない、という動作をします。

一方、`??`演算子は「Nullish coalescing 演算子」と呼ばれ、左辺の値が`null`または`undefined`である場合のみ、右辺の値を評価し、返します。

それでは、これらの演算子の使い分けについて見てみましょう。

- `||`演算子は、デフォルトの値を設定する際によく使われます。しかし、左辺の値が`0`や`''`（空文字列）のような falsy な値であっても、それが意図した値（有効な値）である場合には、期待する動作をしないことがあります。

```js
let count = 0
let displayCount = count || 'No count' // "No count"となるが、0を表示したい場合は望ましくない。
```

- `&&`演算子は、特定の条件が満たされている（truthy である）場合に限り、何かを行いたいときによく使われます。

```js
let isLoggedIn = true
isLoggedIn && console.log('User is logged in.') // isLoggedInがtrueであればログを出力
```

- `??`演算子は、`null`または`undefined`の場合に限りデフォルト値を設定したい場合に使います。この演算子は`||`演算子の「0 や空文字列が falsy である」問題を解決します。

```js
let count = 0
let displayCount = count ?? 'No count' // 0と表示され、期待する動作となる
```

こうした特性を理解することで、JavaScript や TypeScript の`||`、`&&`、そして`??`演算子を適切に使い分けることができます。

### Next.js で、Nullish coalescing 演算子を活用

それでは、次に Nullish coalescing 演算子を Next.js と TypeScript でどのように利用するかについて見ていきましょう。

例えば、ユーザーから入力されたデータを扱う場合、Nullish coalescing 演算子を使うと便利です。ユーザーからの入力がない場合には、デフォルトの値を設定することができます。

以下に、Next.js と TypeScript で書かれたコンポーネントの例

を示します。

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

import React from 'react'

type Props = {
  name?: string
}

const UserGreeting = ({ name }: Props) => {
  const displayName = name ?? 'Guest'
  return (
    <div>
      <p>{`Hello, ${displayName}!`}</p>
    </div>
  )
}

export default UserGreeting
```

上記のコードは、`UserGreeting` というコンポーネントです。このコンポーネントは `name` というプロパティを受け取りますが、この `name` が提供されていない場合には 'Guest' というデフォルトの値を使用します。

ここで `const displayName = name ?? 'Guest';` の行が重要で、ここで Nullish coalescing 演算子が使われています。`name` が null または undefined であれば、`displayName` は 'Guest' になります。そうでなければ、`displayName` は `name` の値になります。

### 高度な Nullish coalescing 演算子の活用

以上のように、Nullish coalescing 演算子は非常にシンプルで便利な機能を提供しますが、さらに複雑なケースでも利用できます。

例えば、オブジェクトのプロパティにアクセスする際に、そのプロパティが存在しない場合にデフォルトの値を設定することも可能です。

以下のソースコードをご覧ください。

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

import React from 'react'

type User = {
  name: string
  age?: number
}

type Props = {
  user: User
}

const UserProfile = ({ user }: Props) => {
  const displayAge = user.age ?? '年齢非公開'
  return (
    <div>
      <p>{`${user.name}さん (${displayAge}歳)`}</p>
    </div>
  )
}

export default UserProfile
```

このコードでは、`UserProfile` コンポーネントが `user` オブジェクトをプロパティとして受け取ります。そして、`user.age` が存在しない場合には、'年齢非公開' というデフォルトの値を表示します。

Nullish coalescing 演算子は、このように複雑なオブジェクトのプロパティに対しても、簡潔で直感的な方法でデフォルトの値を設定することを可能にします。

以上が、Next.js と TypeScript での Nullish coalescing 演算子の基本的な使用法と、さらに高度な使用法についての解説でした。この演算子を活用することで、コードを簡潔にし、可能なエラーを防ぐことができます。開発の際にはぜひ活用してみてください。


この記事では、Next.js と TypeScript を使用して Nullish coalescing 演算子をどのように活用するかを実例と共に解説します。

Next.js と TypeScript で、Nullish coalescing 演算子(??)を使う


## TL;DR

このページでは、"オプショナルプロパティ"の実装方法について解説しますね。一言でいうとオプショナルプロパティとは、プロパティが存在しなくてもエラーにならないようにするための記述法です。

| 開発環境   | バージョン |
| :--------- | :--------- |
| 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
}
```

このコードでは`User`という型を定義しています。`name`は必ず存在するプロパティで、その型は`string`となっています。一方で、`age`は`number`型のプロパティであると同時に、末尾に`?`がついていることで、これがオプショナルプロパティであることを示しています。

言い換えれば、プロパティは undefined でもよい、ということです。この機能は、オブジェクトのプロパティが必ずしもすべて存在しない場合や、オプショナルな設定がある場合などに非常に便利です。

この`User`型を使ったオブジェクトを作るとき、`age`プロパティが存在しなくてもエラーは出ません。

```tsx
const user1: User = {
  name: 'John',
}

const user2: User = {
  name: 'Jane',
  age: 25,
}
```

`user1`は`age`が未指定でも問題ありません。しかし、`name`を省略した場合や`age`に文字列を入れようとした場合には、TypeScript は型エラーを出します。

### Next.js で、オプショナルプロパティを実装

では、Next.js のプロジェクトでオプショナルプロパティを実際に使ってみましょう。ここでは、ユーザーの情報を表示するコンポーネントを作ります。その際に、ユーザーの年齢は必ずしも存在しないとします。

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

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

type UserProps = {
  name: string
  age?: number
}

const UserProfile = ({ name, age }: UserProps) => {
  return (
    <div css={containerStyle}>
      <div>名前: {name}</div>
      {age && <div>年齢: {age}</div>}
    </div>
  )
}

const containerStyle = css`
  width: 200px;
  border: 1px solid #333;
  padding: 20px;
  margin-bottom: 20px;
`

export default UserProfile
```

この`UserProfile`コンポーネントでは、`UserProps`という型で`name`と`age`を定義しています。`name`は必須のプロパティで、`age`はオプショナルプロパティとなっています。

コンポーネントの中で、`age`が存在すればその値を表示し、存在しなければ何も表示しないという条件分岐を行っています。これにより、`age`が未定義でもエラーが起こることはありません。

### 高等なオプショナルプロパティの実装

さらに高度な例として、オプショナルプロパティがネストしたオブジェクトに対する取り扱いを見てみましょう。

```tsx
type Address = {
  city?: string
  zipCode?: string
}

type User = {
  name: string
  age?: number
  address?: Address
}

const UserProfile = ({ name, age, address }: User) => {
  return (
    <div css={containerStyle}>
      <div>名前: {name}</div>
      {age && <div>年齢: {age}</div>}
      {address?.city && <div>都市: {address.city}</div>}
      {address?.zipCode && <div>郵便番号: {address.zipCode}</div>}
    </div>
  )
}
```

ここでは、`Address`という型を新しく定義して、その型を`User`の`address`プロパティの型として使っています。そして、その`address`もまたオプショナルプロパティとなっています。

コンポーネント内では、`address`が存在する場合だけ、そのプロパティ`city`と`zipCode`を表示します。ここでは Optional Chaining(`?.`)を用いて、`address`が`undefined`または`null`の場合にエラーを出さないようにしています。

これらのオプショナルプロパティを理解して使うことで、存在しないかもしれないプロパティを安全に扱うことができます。


Next.js と TypeScript でのオプショナルプロパティの扱い方について、具体的なソースコードを交えて解説します。

Next.js と TypeScript で、オプショナルプロパティ(?)を使う


## TL;DR

このページでは、OR 演算子の実装方法について詳しく解説しますね。一言でいうと、OR 演算子とは、複数の条件のうち、一つでも真であれば全体が真となる演算子のことです。これにより、プログラム内で複数の条件を柔軟に扱うことができます。

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

### OR 演算子とは？

OR 演算子は、論理演算子の一つで、複数の条件式の中から少なくとも一つの条件式が真であれば全体を真と評価する役割があります。JavaScript や TypeScript では、「||」という記号を使って表現します。

以下に、基本的な使用例を示します。

```js
const conditionA = true
const conditionB = false

if (conditionA || conditionB) {
  console.log('少なくとも一つの条件が真です。')
}
```

上記のコードでは、`conditionA`は真、`conditionB`は偽ですが、OR 演算子が使われているため、「少なくとも一つの条件が真です。」というメッセージが出力されます。

### 短絡評価

JavaScript の OR 演算子(`||`)は「短絡評価」（short-circuit evaluation）という概念を用いて動作します。これは、OR 演算子の左辺が`true`に評価された場合、その時点で全体の結果が`true`であることが確定するため、右辺の評価をスキップする、という動作のことを指します。

さらに詳しく説明すると、JavaScript の OR 演算子は左から右に評価を進めます。左辺の評価結果が`true`（あるいは`true`に変換される値、たとえば非空の文字列や非ゼロの数値など）であれば、その時点で全体の結果が`true`であることが確定するので、右辺の評価は省略されます。これが「短絡（short-circuit）」の名前の由来です。

また、JavaScript の OR 演算子は、`true`または`false`というブール値を返すだけでなく、評価された値そのものを返すという特性も持っています。このため、以下のようなコードが可能です。

```js
const value1 = 0 // falsy value
const value2 = 'Hello' // truthy value

const result = value1 || value2
console.log(result) // "Hello"
```

上記のコードでは、`value1`は`false`に変換される値（`falsy`）であり、`value2`は`true`に変換される値（`truthy`）です。そのため、`value1 || value2`の結果は、`value2`の値（`"Hello"`）そのものが返されます。

これは、短絡評価という概念と合わせて利用されることで、デフォルト値の指定などによく使われます。例えば、関数の引数が省略された場合のデフォルト値の設定などに活用できます。

```js
function greet(name) {
  name = name || 'Guest'
  console.log('Hello, ' + name + '!')
}

greet('John') // Hello, John!
greet() // Hello, Guest!
```

上記の例では、`greet`関数が引数なしで呼び出された場合、`name`は`undefined`となり、その結果`name || "Guest"`は`"Guest"`を返します。これにより、`name`が省略されたときのデフォルト値として`"Guest"`が設定されるわけです。

OR 演算子(`||`)も同じように短絡評価が行われます。具体的には、OR 演算子の左辺の評価結果が`true`になる値であれば、その時点で全体の評価を終え、その値を結果として返します。つまり、右辺の評価はスキップされます。

基本的な OR 演算子の短絡評価の例をご紹介しましょう。

```js
console.log(true || false) // true
console.log(false || true) // true
console.log('Hello' || '') // 'Hello'
console.log('' || 'World') // 'World'
```

ここで、重要なのは JavaScript における`true`と評価される値（truthy な値）と`false`と評価される値（falsy な値）を理解することです。例えば、空文字列や数値の`0`は falsy な値として扱われます。それに対して、空でない文字列や`0`以外の数値は truthy な値として扱われます。

続いて、OR 演算子の短絡評価を利用したデフォルト値の設定の例を見てみましょう。

```ts
type User = {
  name: string
  age: number
  bio?: string
}

const user: User = {
  name: 'Taro',
  age: 30,
}

const bio = user.bio || 'No bio available'
console.log(bio) // 'No bio available'
```

上記の例では、`user.bio`が`undefined`（つまり設定されていない）場合には、`'No bio available'`というデフォルト値を設定しています。

このように、OR 演算子を用いた短絡評価は、デフォルト値の設定など、様々な場面で有用なテクニックとなります。ただし、これも AND 演算子と同様に、使用する際は注意が必要です。特に、期待する値が falsy な値である可能性がある場合（例えば、`false`や`0`が正当な値である場合など）には、不適切なデフォルト値が設定されてしまう可能性があるため、注意が必要です。

短絡評価は、JavaScript において非常に便利な機能で、様々な場面で用いられます。以下に、その一部をご紹介します。

#### オブジェクトのプロパティへのアクセス

JavaScript において、存在しないオブジェクトのプロパティにアクセスしようとすると、`undefined`が返されます。これをそのまま利用すると問題になる場面があるため、通常は存在チェックを行います。

```tsx
type User = {
  name: string
  age: number
  profile?: {
    bio: string
    website?: string
  }
}

const user: User = {
  name: 'Taro',
  age: 30,
  profile: {
    bio: 'Hello, world!',
  },
}

const website = user.profile && user.profile.website ? user.profile.website : 'N/A'
console.log(website) // 'N/A'
```

上記の例では、`user.profile.website`が存在しない場合には、デフォルト値として`'N/A'`を設定しています。

#### 条件付き関数の実行

特定の条件が真の場合のみ関数を実行したい、という場合もあります。以下の例では、`isDebugMode`が`true`の場合のみ、デバッグメッセージをコンソールに出力します。

```tsx
const isDebugMode = true

isDebugMode && console.log('Debugging...')
// "Debugging..."と出力されます

const isDebugMode = false

isDebugMode && console.log('Debugging...')
// 何も出力されません
```

これは短絡評価の特性を利用したコードで、`isDebugMode`が`false`の場合、`console.log('Debugging...')`は実行されません。

以上のように、短絡評価はコードを簡潔に記述するための強力なツールとなります。ただし、それが結果的にコードの可読性を下げるような使い方をすることは避けてください。つまり、複雑な条件式を短絡評価で処理するのではなく、適切な制御構文（if 文や switch 文など）を使用する方が良い場合もあります。また、短絡評価の結果を変数に格納する場合、その変数がどのような型の値を持つ可能性があるのかを明確にすることも重要です。

### Next.js で、OR 演算子を実装

それでは、Next.js と TypeScript を使って、OR 演算子を使用する状況を具体的に見ていきましょう。ここでは、ユーザーが特定の権限を持っているかどうかを判定するコンポーネントを作成します。

まずは、`components/PermissionChecker.tsx`というコンポーネントを作ります。

```tsx
// components/PermissionChecker.tsx

type Props = {
  isAdmin: boolean
  isModerator: boolean
}

const PermissionChecker = ({ isAdmin, isModerator }: Props) => {
  if (isAdmin || isModerator) {
    return <div>管理者権限を持っています。</div>
  } else {
    return <div>管理者権限を持っていません 。</div>
  }
}

export default PermissionChecker
```

上記のコンポーネントでは、props として`isAdmin`と`isModerator`を受け取り、ユーザーが管理者(`isAdmin`)かモデレーター(`isModerator`)のいずれかであれば「管理者権限を持っています。」というメッセージを表示します。OR 演算子が使われているため、いずれか一つでも真であれば「管理者権限を持っています。」と表示されます。

### OR 演算子を実装

さらにテクニカルな例として、Next.js でのページ遷移を制御するためのコードを考えてみましょう。例えば、ユーザーがログインしているか、または特定の条件を満たしている場合にのみページ遷移を許可するようなケースです。

```tsx
// pages/Dashboard.tsx

import { useRouter } from 'next/router'
import { useEffect } from 'react'

type Props = {
  isLoggedIn: boolean
  isSpecialCondition: boolean
}

const Dashboard = ({ isLoggedIn, isSpecialCondition }: Props) => {
  const router = useRouter()

  useEffect(() => {
    if (!(isLoggedIn || isSpecialCondition)) {
      router.push('/login')
    }
  }, [isLoggedIn, isSpecialCondition, router])

  return <div>ダッシュボード</div>
}

export default Dashboard
```

上記のコードでは、`isLoggedIn`（ログイン状態）か`isSpecialCondition`（特定の条件）のいずれかが真でなければ、`/login`ページへリダイレクトします。これは、`!(isLoggedIn || isSpecialCondition)`という式により、どちらも偽である場合に限り真となるように実装されています。

以上、OR 演算子の使い方とその活用例を Next.js と TypeScript の視点から解説しました。これらを理解し活用することで、より柔軟な条件分岐を実装できるようになるでしょう。


OR演算子の基本的な使い方からNext.jsとTypeScriptを使った実装例まで詳しく解説します。初学者でも理解できるように、具体的なソースコードとともに説明します。

Next.js と TypeScript で、OR演算子（||）を使う


## TL;DR

このページでは、try...catch 構文の実装方法について解説しますね。一言でいうと、try...catch 構文とは、エラーの発生を前提としたコードの書き方で、エラーが発生したときにその場でキャッチして処理を続行できる素晴らしい考え方です。

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

### try...catch 構文とは？

まず、基本的な考え方から解説しますね。エラーハンドリングはプログラミングにおいて重要な要素で、それを行う一つの方法が try...catch 構文です。プログラムがエラーをスローする可能性がある部分を try ブロックに包み、エラーが発生した際に実行される処理を catch ブロックに書きます。

それでは、基本的な使い方を見てみましょう。

```tsx
try {
  // エラーが投げられる可能性があるコード
} catch (error) {
  // ここでエラー処理を行う
}
```

ここで `error` はエラーオブジェクトを受け取る変数で、エラーが発生した際にはその詳細が格納されます。

例えば、不適切な操作でエラーが発生する可能性のある配列へのアクセスを try ブロックに書くことができます。

```tsx
try {
  const array = [1, 2, 3]
  console.log(array[5]) // 存在しないインデックスへのアクセス
} catch (error) {
  console.error('エラーが発生しました:', error)
}
```

このコードでは、存在しない配列のインデックスへアクセスしようとしています。しかし、JavaScript ではこれはエラーを発生させません。それではエラーが発生するコードを書いてみましょう。

```tsx
try {
  throw new Error('意図的にエラーを発生させます') // エラーを発生させる
} catch (error) {
  console.error('エラーが発生しました:', error)
}
```

この例では、`throw` ステートメントを使用して人為的にエラーを発生させています。このエラーは catch ブロックによって捕捉され、エラーメッセージがコンソールに表示されます。

### Next.js で、try...catch 構文を実装

それでは、Next.js で try...catch 構文をどのように使うのかを見てみましょう。ここでは、API からデータを取得するときに、エラーハンドリングを行います。

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

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

type Data = {
  /* Data definition */
}

const HomePage = () => {
  const [data, setData] = useState<Data | null>(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('/api/data')
        if (!res.ok) {
          throw new Error('サーバーエラーが発生しました')
        }
        const data: Data = await res.json()
        setData(data)
      } catch (error) {
        console.error('エラーが発生しました:', error)
      }
    }
    fetchData()
  }, [])

  return <div>{/* Data display */}</div>
}

export default HomePage
```

このコードでは、`fetchData` 関数内で try ブロックを使用しています。ここで、非同期処理を行う `fetch` 関数を呼び出しています。この関数は Promise を返し、その Promise が reject されたとき、または `fetch` 関数内でエラーが投げられたときに catch ブロックが実行されます。

catch ブロック内では、エラーメッセージをコンソールに表示しています。これにより、API の呼び出しに失敗した原因を特定しやすくなります。

このコードの一部では、API から返されたレスポンスのステータスを確認し、それが `ok` プロパティ（レスポンスが成功した場合に true）でない場合には新しいエラーをスローしています。これにより、サーバーからエラーレスポンスが返された場合にもエラーハンドリングが可能となります。

### try...catch 構文を深掘り

さらに深く掘り下げて、更に高度なテクニックを見てみましょう。それはエラーの型を自分で定義し、それに基づいてエラーハンドリングを行う方法です。

まず、自分で定義したエラー型を紹介します。

```tsx
class MyError extends Error {
  constructor(message?: string) {
    super(message)
    this.name = 'MyError'
  }
}
```

`MyError`は、JavaScript の組み込みオブジェクトである`Error`を継承したクラスです。これにより、標準的なエラーオブジェクトと同じ性質を持つ独自のエラー型を作成することができます。

それでは、これを使ってエラーハンドリングを行ってみましょう。

```tsx
try {
  // エラーを発生させる
  throw new MyError('これは自分で定義したエラーです')
} catch (error) {
  if (error instanceof MyError) {
    console.error('MyErrorが発生しました:', error)
  } else {
    console.error('未知のエラーが発生しました:', error)
  }
}
```

この例では、`throw` ステートメントで `MyError` を投げています。catch ブロック内では、エラーが `MyError` のインスタンスかどうかを `instanceof` 演算子で判断しています。これにより、エラーの型に基づいた条件付きのエラーハンドリングが可能となります。

以上が try...catch 構文の基本的な使い方と応用例です。これらのテクニックを使うことで、エラーが発生したときのプログラムの挙動をより詳細に制御することができます。エラーハンドリングは、プログラムが安定して動作することを保証する重要な部分であるため、是非この知識を活かしてください。


Next.js と TypeScript を使って、try...catch 構文の使い方を初学者にもわかりやすく解説します。

Next.js と TypeScript で、try...catch 構文を理解する


## TL;DR

このページでは、JavaScript の基本となる`AND演算子`の実装方法について解説しますね。一言でいうと、`AND演算子`とは、すべての条件が真であるときに真となる論理演算子です。

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

### AND 演算子 とは？

JavaScript では、`&&`というシンボルを使って AND 演算子を表現します。AND 演算子は 2 つの値を取り、両方の値が`true`の場合にのみ`true`を返します。もし一方または両方の値が`false`であれば、結果も`false`となります。

```tsx
const a = true
const b = false
console.log(a && b) // falseが出力されます。
```

この考え方は複数の条件を一度に確認する場合に非常に役立ちます。例えば、ユーザーがログインしていて、そのユーザーが特定の役割を持っているかどうかをチェックするケースなどです。

### 短絡評価

JavaScript の AND 演算子 (`&&`) は、「短絡評価」または「短絡論理」を行います。これは、左辺の評価結果が `false` の場合、右辺は評価されずにすぐに `false` を返すことを意味します。それにより、不必要な計算を避けることができます。

しかしながら、左辺の評価結果が `true` の場合、右辺が評価され、その結果が最終的な結果として返されます。

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

```javascript
console.log(true && 'hello') // "hello"
console.log(false && 'hello') // false
```

上記の例では、最初の行では左辺が `true` なので、右辺の `'hello'` が出力されます。一方、2 行目では左辺が `false` なので、その結果は評価されずに `false` が出力されます。

### オプショナルチェイニングと併用

AND 演算子はとても多用途で、特にオプショナルチェイニング（`?.`）と併用した場合、Null または Undefined が参照されるエラーを回避するのに有効です。

例えば、次のようなコードがあるとします。

```tsx
const userInfo = {
  name: 'Taro',
  address: {
    city: 'Tokyo',
    country: 'Japan',
  },
}

console.log(userInfo.address.city) // "Tokyo"と出力
```

この場合、`address`プロパティが存在するときは問題ありませんが、それが存在しない場合にはエラーが発生します。

```tsx
const userInfo = {
  name: 'Taro',
}

console.log(userInfo.address.city) // エラー: Cannot read property 'city' of undefined
```

この問題を回避するために、オプショナルチェイニングと AND 演算子を組み合わせて利用することができます。

```tsx
const userInfo = {
  name: 'Taro',
}

console.log(userInfo.address?.city && userInfo.address.city) // Undefined
```

このコードでは、`address`プロパティが存在しない場合でもエラーを回避でき、`undefined`が返されます。これは、JavaScript のショートサーキット評価の原則に基づいています。`&&`演算子の前半の式（`userInfo.address?.city`）が`false`を返すと（つまり、`address`が存在しないと）、その後の式は評価されません。

このような方法で、AND 演算子はコードの安全性を高め、予期せぬエラーを避けるための重要なツールとなります。

### Next.js で、AND 演算子を実装

このセクションでは、Next.js と TypeScript で、AND 演算子を活用した具体的なコード例を見てみましょう。まずは、ログイン状態とユーザーの権限をチェックする簡単なコンポーネントを作ります。

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

```tsx
import { useContext } from 'react'
import { UserContext } from '../contexts/UserContext'

type Props = {
  requiredRole: string
}

const CheckUser = ({ requiredRole }: Props) => {
  const { user } = useContext(UserContext)

  if (user.isLoggedIn && user.role === requiredRole) {
    return <p>許可されたアクセスです。</p>
  } else {
    return <p>許可されていないアクセスです。</p>
  }
}

export default CheckUser
```

このコードの中で、`user.isLoggedIn && user.role === requiredRole`という部分が AND 演算子を活用した箇所です。ユーザーがログインしていて、そのユーザーが必要な権限を持っている場合にのみ、「許可されたアクセスです。」というメッセージを表示します。

### ショートサーキット評価

前述した短絡評価と同じ意味である「ショートサーキット評価」があります。これは、JavaScript が AND 演算子を評価する際に、最初の値が`false`であるとすぐに全体の評価を終える特性を活用したものです。次のコードはその例です。

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

```tsx
import { useContext } from 'react'
import { UserContext } from '../contexts/UserContext'

const ShowGreeting = () => {
  const { user } = useContext(UserContext)

  return <>{user.isLoggedIn && <p>こんにちは、{user.name}さん。</p>}</>
}

export default ShowGreeting
```

このコードでは、ユーザーがログインしている場合にのみ、そのユーザー名で挨拶を表示します。もしユーザーがログインしていない場合（`user.isLoggedIn`が`false`）、`&&`の後ろの部分は評価されず、何も表示されません。

以上のように、AND 演算子はその基本的な特性を活用するだけでなく、JavaScript の特性を巧みに利用することでコードをより洗練されたものにできます。


Next.js と TypeScript の環境下で AND 演算子の使い方とその応用例について説明します。基本から応用までのコード例と共に理解を深めます。

Next.js と TypeScript で、AND 演算子（&&）を使う


## TL;DR

このページでは、React カスタムフックの実装方法について解説しますね。一言でいうと、React カスタムフックとは、複数のコンポーネントでロジックを共有するための強力なツールです。

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

### 「カスタムフック」 とは？

React のカスタムフックとは、独自のロジックを含む関数を作成し、それを他のコンポーネントで再利用することができる仕組みです。これにより、コードの重複を避け、テストや保守が容易になります。

カスタムフックの基本的な形は以下のようになります。

```tsx
const useCustomHook = () => {
  // 独自のロジック
}

// カスタムフックの使用例
const Component = () => {
  const value = useCustomHook()
  // ...
}
```

ここでは、独自のロジックを定義した `useCustomHook` というカスタムフックを作成しました。そして、`Component` というコンポーネント内で `useCustomHook` を呼び出すことでそのロジックを利用しています。

### カスタムフックのルール

React フックのルールは、カスタムフックでも同様に適用されます。React フックを使用する際には以下の 2 つの主要なルールがあります。

#### 1. フックはトップレベルでのみ呼び出す

フックはループ、条件文、ネストされた関数内で呼び出すべきではありません。これにより、React がフックの状態を正しく保持できます。

#### 2. フックは React 関数内からのみ呼び出す

React の関数コンポーネントやカスタムフック内からフックを呼び出すことができます。しかし、通常の JavaScript 関数からはフックを呼び出さないでください。

これらのルールは React がフックの呼び出し順序を追跡して、フックの状態とライフサイクルを正しく管理するために必要です。また、React チームはこれらのルールを遵守するための ESLint プラグインも提供しています（`eslint-plugin-react-hooks`）。

カスタムフックを作成する際にも、これらのルールを遵守する必要があります。また、カスタムフックの名前は `use` で始まるべきです。これはカスタムフックが特別なフックルールに従うべき関数であることを示す一方、コードを読んでいる人にその関数がフックであることを知らせる役割も果たします。

上記のルールに違反すると、フックが正常に動作しない、または予期しないバグを引き起こす可能性があります。したがって、これらのルールを理解し、遵守することは重要です。

### どうったケースで使われるか？

React のカスタムフックは、コンポーネント間でロジックを共有するために主に使われます。フックはステートフルなロジックを再利用することを可能にし、それをコンポーネント間で簡単に共有できます。例えば以下のようなケースでカスタムフックが使用されることが多いです。

#### データフェッチ

API からデータをフェッチするロジックは、アプリケーション全体で頻繁に行われるため、カスタムフックとして定義して再利用することがあります。カスタムフックはデータのローディング状態、成功時のデータ、エラー状態などを管理するのに役立ちます。

#### フォームハンドリング

フォームの値の状態管理、バリデーション、サブミットハンドリングなど、フォーム関連のロジックをカスタムフックで抽象化することもよく行われます。

#### タイマーまたはインターバル

一定時間ごとに何かを行うタイマーやインターバルのロジックは、カスタムフックとしてまとめると再利用が可能です。

これらは一例であり、カスタムフックの使用ケースは無限大です。基本的には、どのようなステートフルなロジックもカスタムフックにまとめ、コンポーネント間で共有できます。これにより、コードの重複を避け、可読性と保守性を高めることができます。

### Next.js で、カスタムフックを実装

次に具体的な例を見てみましょう。ここでは、ユーザーのブラウザの幅と高さを返すカスタムフック、`useWindowSize` を作成します。

`/hooks/useWindowSize.ts`：

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

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight })
    }

    window.addEventListener('resize', handleResize)
    handleResize()

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

  return windowSize
}

export default useWindowSize
```

`useWindowSize` は幅と高さを含むオブジェクトを状態として保持します。`useState` フックを使って、その状態を `windowSize` として初期化し、その更新関数を `setWindowSize` としています。

次に `useEffect` フックを使って、コンポーネントがマウントされた後と、ブラウザサイズが変更された時に `setWindowSize` を呼び出しています。その際、`window.innerWidth` と `window.innerHeight` の値を新しい状態として設定しています。

このカスタムフックを使うと、どのコンポーネントでもブラウザのサイズを知ることができます。例えば次のようなコンポーネントが考えられます。

`/components/WindowSizeDisplay.tsx`：

```tsx
import useWindowSize from '../hooks/useWindowSize'

const WindowSizeDisplay = () => {
  const size = useWindowSize()

  return (
    <div>
      現在のウィンドウのサイズ: 幅 {size.width}px、高さ {size.height}px
    </div>
  )
}

export default WindowSizeDisplay
```

このコンポーネントは、ウィンドウの幅と高さを表示します。`useWindowSize` カスタムフックを呼び出し、得られた結果をレンダリングに使用しています。

### カスタムフックを実装

次に、非同期データフェッチにカスタムフックを適用してみましょう。このような場合には、`useState` と `useEffect` を組み合わせて使用することが一般的です。

以下に、外部 API からデータを取得し、その結果を提供する `useFetch` カスタムフックを示します。

`/hooks/useFetch.ts`：

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

type State<T> = {
  data?: T
  loading: boolean
  error?: Error
}

const useFetch = <T,>(url: string): State<T> => {
  const [state, setState] = useState<State<T>>({
    data: undefined,
    loading: true,
  })

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url)
        const data = await response.json()
        setState({ data, loading: false })
      } catch (error) {
        setState({ loading: false, error })
      }
    }

    fetchData()
  }, [url])

  return state
}

export default useFetch
```

このカスタムフックは、`url` を引数に取り、その URL からデータをフェッチします。フェッチの結果を保持するために、`data`、`loading`、および `error` の 3 つの状態を `useState` で定義しています。

その後、`useEffect` フックの中で非同期関数 `fetchData` を呼び出しています。`fetchData` は `url` をフェッチし、成功した場合は取得したデータを `data` 状態に設定し、`loading` を `false` に設定します。何らかのエラーが発生した場合は、そのエラーを `error` 状態に設定し、`loading` を `false` に設定します。

これにより、API からデータをフェッチする必要がある任意のコンポーネントでこのカスタムフックを使用できます。次にその使用例を示します。

`/components/User.tsx`：

```tsx
import useFetch from '../hooks/useFetch'

type User = {
  id: number
  name: string
  email: string
}

const User = ({ id }: { id: number }) => {
  const { data: user, loading, error } = useFetch<User>(`/api/user/${id}`)

  if (loading) return <div>読み込み中...</div>
  if (error) return <div>エラー: {error.message}</div>

  return (
    <div>
      <h2>{user?.name}</h2>
      <p>{user?.email}</p>
    </div>
  )
}

export default User
```

このコンポーネントは `useFetch` カスタムフックを使用してユーザー情報を取得し、それを表示します。取得中は "読み込み中..." を、エラーが発生した場合はエラーメッセージを表示します。

以上で、React のカスタムフックについての解説を終えます。カスタムフックは非常に強力なツールであり、同じロジックを再利用したり、複雑なロジックを抽象化したりすることが可能です。適切に使用することでコードの可読性と再利用性を大いに向上させることができますので、積極的に利用してみてください。


Next.js と TypeScript による React カスタムフックの活用方法について、初学者にも理解できるように解説します。

Next.js と TypeScript で、React カスタムフックを使う


## TL;DR

このページでは、アロー関数の実装方法について解説しますね。一言でいうとアロー関数とは、JavaScript（とその派生言語である TypeScript）における新しい関数の定義方法の一つで、従来の関数よりもコードがスッキリし、`this` の扱いが容易になる特性があります。

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

### アロー関数とは？

アロー関数は、JavaScript ES6 から導入された新しい関数の定義方法で、特にコードがシンプルに書ける点と、`this`の振る舞いが従来の関数とは異なる点が特徴として挙げられます。`this` については後述します。

#### 基本構文

従来の関数定義は以下のように記述されます。

```ts
function square(n) {
  return n * n
}
```

一方、アロー関数では次のように表記できます。

```ts
const square = (n) => {
  return n * n
}
```

これは更に省略して以下のように書くこともできます。

```ts
const square = (n) => n * n
```

それぞれの場合について、簡単なアロー関数の例を以下に示します。

#### 引数がない場合

アロー関数に引数がない場合、引数リストを空の丸括弧 `()` で表現します。以下は、"Hello, World!"をコンソールに出力するアロー関数の例です。

```ts
const greet = () => {
  console.log('Hello, World!')
}

greet() // "Hello, World!" を出力
```

#### 引数が一つの場合

アロー関数がただ一つの引数を取る場合、その引数を囲む丸括弧を省略することが可能です。以下は、与えられた数値を 2 倍にして返すアロー関数の例です。

```ts
const double = (num) => {
  return num * 2
}

console.log(double(3)) // 6 を出力
```

#### 本体が一文である場合

アロー関数の本体が一つの文だけで構成されている場合、その文を波括弧 `{}` で囲む必要はありません。さらに、その一文が表現式である場合、その結果は自動的にリターンされます。以下は、与えられた数値を 2 倍にして返すアロー関数の例ですが、この場合は本体が一文であるため波括弧と `return` を省略しています。

```ts
const double = (num) => num * 2

console.log(double(3)) // 6 を出力
```

これらの例からわかるように、アロー関数はコードを簡潔に記述するための有用なツールです。ただし、その振る舞いは従来の関数とは異なるため、使用の際には注意が必要です。

### アロー関数の様々な使い方

アロー関数の様々な使い方をご紹介します。

#### デフォルト値を持つパラメータ

JavaScript の関数では、パラメータにデフォルト値を設定することができます。アロー関数でも同じように設定することが可能です。次の例では、`greet` 関数の引数 `name` にデフォルト値として `'World'` を設定しています。

```ts
const greet = (name = 'World') => `Hello, ${name}!`

console.log(greet()) // Hello, World!
console.log(greet('User')) // Hello, User!
```

#### 可変長引数

JavaScript では、関数のパラメータに `...` を前置することで、任意の数の引数を配列として受け取ることができます。これを「可変長引数」と呼びます。アロー関数でも同様に可変長引数を使用することができます。

```ts
const sum = (...numbers: number[]) => numbers.reduce((acc, num) => acc + num, 0)

console.log(sum(1, 2, 3, 4, 5)) // 15
```

#### オブジェクトリテラルを返す

関数の戻り値としてオブジェクトリテラルを返す際、括弧`()`で囲むことで正しくオブジェクトとして解釈させることができます。

```ts
const createPerson = (name: string, age: number) => ({ name, age })

console.log(createPerson('John', 30)) // { name: 'John', age: 30 }
```

#### 高階関数（関数を返す関数）

関数の戻り値として別の関数を返すことも可能です。これは高階関数と呼ばれるパターンで、関数型プログラミングの一部としてよく利用されます。

```ts
const addPrefix = (prefix: string) => (name: string) => `${prefix} ${name}`

const greetMr = addPrefix('Mr.')

console.log(greetMr('John')) // Mr. John
```

#### 即時実行関数

JavaScript では関数を定義と同時に実行することができます。これを「即時実行関数」と呼びます。アロー関数も即時実行することが可能です。

```ts
const result = ((num1: number, num2: number) => num1 * num2)(3, 4)

console.log(result) // 12
```

これらの特性も合わせて理解することで、アロー関数をより深く活用することができます。

### this の振る舞い

このように、アロー関数はコードの見通しが良くなるだけでなく、`this`の振る舞いが改善されるという特性も持っています。

従来の関数では`this`は実行コンテクストに依存しますが、アロー関数では定義した時点のスコープの`this`を引き継ぎます。これにより、`this`の振る舞いに頭を悩ますことが少なくなりました。

`this`とは、JavaScript（および TypeScript）で使用されるキーワードで、オブジェクト自身を参照します。`this`の値は、それが使用されるコンテクストにより異なります。例えば、以下のコードでは、`this`はオブジェクト`myObject`を指します。

```js
const myObject = {
  property: 'Hello',
  method: function () {
    console.log(this.property)
  },
}

myObject.method() // "Hello"を出力
```

この場合、`this`は`myObject`を参照し、そのプロパティ`property`の値を出力します。しかし、関数やメソッドの中で`this`を使用すると、その振る舞いは関数がどのように呼び出されるかによって変わります。これは、特にコールバック関数やイベントハンドラなどで問題となることがあります。

この問題を解決するのがアロー関数です。アロー関数は、自身の`this`がないため、`this`は周囲のスコープから引き継がれます。これは、それ自体が定義されたスコープの`this`を「記憶」するという特性を持ちます。この特性により、コールバック関数やイベントハンドラなどで問題となる`this`の振る舞いを簡単に制御することが可能になります。

### TypeScript でのアロー関数

以下に TypeScript を用いたアロー関数の基本的な例をいくつかお見せします。

#### Interface を用いた例

TypeScript では、関数の引数や戻り値の型を定義するために Interface を用いることができます。以下の例では、`Person`という Interface を定義し、`Person`型の引数を取るアロー関数を作成しています。

```ts
interface Person {
  name: string
  age: number
}

const greet: (person: Person) => void = (person) => {
  console.log(`Hello, my name is ${person.name} and I'm ${person.age} years old.`)
}

greet({ name: 'John', age: 25 }) // "Hello, my name is John and I'm 25 years old."
```

この例では、`greet`関数の引数`person`が`Person`型であることを確実にするために TypeScript の Interface を使用しています。

#### ジェネリクスを用いた例

TypeScript のジェネリクスは、型の再利用や抽象化を可能にします。以下の例では、ジェネリクスを用いてアロー関数を定義しています。

```ts
const identity: <T>(arg: T) => T = (arg) => arg

let output = identity<string>('myString') // type of output will be 'string'
```

この例では、`identity`関数は任意の型`T`を引数として受け取り、同じ型`T`を返す関数として定義されています。このようにジェネリクスを用いることで、より汎用的なコードを書くことが可能になります。

### アロー関数のメリット

アロー関数の他の特徴やメリットには以下のようなものがあります。

1. 短縮構文： アロー関数は関数を宣言するための短縮構文を提供します。これにより、コードの冗長さが減り、可読性が向上します。

2. 明示的なリターン： アロー関数の本体が波括弧(`{}`)で囲まれていない場合、その結果は自動的にリターンされます。これは、シンプルな関数やラムダ式を記述する際に便利です。

3. 引数の省略： アロー関数がただ一つの引数を取る場合、その引数を囲む丸括弧を省略することが可能です。これにより、さらにコードのシンプルさが増します。

ただし、アロー関数は`arguments`オブジェクトや、新たなインスタンスを生成するための`new`キーワードとの互換性がありません。そのため、すべての場面で従来の関数を置き換えるものではないことを理解しておくことが重要です。

### アロー関数を使うべきではないケース

アロー関数はその特性から、多くの場面で活用されますが、次のようなケースでは従来の関数を使うべきです。

#### メソッドの定義

オブジェクトのメソッドとして関数を定義する際には、アロー関数を使うと`this`が期待するオブジェクトを指さないため、従来の関数を使います。

```ts
const person = {
  name: 'John',
  greet: function () {
    return `Hello, my name is ${this.name}`
  },
}

console.log(person.greet()) // "Hello, my name is John"
```

この例では、`greet`メソッド内の`this`が`person`オブジェクトを指します。もしアロー関数を使用した場合、`this`は`person`オブジェクトではなく、外部のスコープを指してしまうため、意図した動作になりません。

#### イベントハンドラー

ブラウザのイベントハンドラーでは、アロー関数を使うと`this`が期待する要素を指さないため、従来の関数を使います。

```ts
document.querySelector('button').addEventListener('click', function () {
  this.classList.toggle('active')
})
```

この例では、`addEventListener`のコールバック関数で`this`を使っていて、`this`はクリックされたボタン要素を指します。アロー関数を使用すると、`this`はグローバルオブジェクトまたは`undefined`を指すため、クリックされた要素にアクセスできません。

#### コンストラクター関数

`new`キーワードと一緒に呼び出されるコンストラクター関数では、アロー関数を使うことはできません。アロー関数は自身の`this`を持たないため、新しいインスタンスを作成することができません。

```ts
function Person(name: string) {
  this.name = name
}

const john = new Person('John')
```

この例では、`Person`関数を`new`キーワードと共に呼び出して新しいオブジェクトを作成します。このとき、`Person`関数内の`this`は新しく作成されたオブジェクトを指します。アロー関数を使うと、`this`が新しいオブジェクトを指さないため、このようなパターンは不適切です。

アロー関数は便利であり、コードの簡潔性や可読性を向上させますが、上記のようなケースでは従来の関数が適切です。関数の選択は、それぞれの特性と利用するコンテキストによります。

### Next.js で、アロー関数を実装

それでは Next.js と TypeScript のコードにおけるアロー関数の使用例を見てみましょう。この例では、Next.js のページコンポーネントの中でアロー関数を使っています。

`/pages/index.tsx` の内容を示します。

```tsx
import { NextPage } from 'next'
import React from 'react'

type Props = {
  message: string
}

const IndexPage: NextPage<Props> = ({ message }) => {
  const showMessage = () => {
    alert(message)
  }

  return (
    <div>
      <button onClick={showMessage}>メッセージを表示</button>
    </div>
  )
}

IndexPage.getInitialProps = async () => {
  const message = 'こんにちは、Next.js!'
  return { message }
}

export default IndexPage
```

このコードでは、アロー関数を 2 つ使用しています。

1 つ目は`const IndexPage: NextPage<Props> = ({ message }) => {...}`の部分で、これは`IndexPage`という名前の React コンポーネントをアロー関数を使って定義しています。このコンポーネントは、`message`という名前の props を受け取ります。

2 つ目は、`const showMessage = () => {...}`の部分です。この内部でアロー関数を定義し、その中で`alert`を使ってメッセージを表示する処理を行っています。ここでもアロー関数を使っているため、シンプルで直感的な記述を実現しています。

### 高等技術としてのアロー関数の実装

次に、アロー関数を使ったより高度な実装例をご紹介します。

```tsx
type ComplexProps = {
  numbers: number[]
  handleSum: (sum: number) => void
}

const ComplexComponent: React.FC<ComplexProps> = ({ numbers, handleSum }) => {
  React.useEffect(() => {
    const sum = numbers.reduce((a, b) => a + b, 0)
    handleSum(sum)
  }, [numbers, handleSum])

  return <div>...</div>
}
```

この例では、アロー関数を 2 つ使用しています。1 つ目は`const ComplexComponent: React.FC<ComplexProps> = ({ numbers, handleSum }) => {...}`という部分で、`ComplexComponent`という React コンポーネントをアロー関数を使って定義しています。

2 つ目は`React.useEffect`の中の`const sum = numbers.reduce((a, b) => a + b, 0);`という部分です。配列の`reduce`メソッドを使い、各要素を加算しています。ここでもアロー関数が使われており、コールバック関数を簡潔に記述できています。

このように、アロー関数はコードをシンプルにし、可読性と保守性を高めるために重要なツールと言えます。


Next.js と TypeScript の組み合わせによるアロー関数の使用法を解説します。アロー関数の特性と具体的な利用例について詳しく説明します。

Next.js と TypeScript で、アロー関数を学びなおす


## TL;DR

このページでは、クロージャーの実装方法について解説しますね。一言でいうとクロージャーとは、関数が作成された環境を「記憶」する仕組みです。これにより、関数はその外部スコープの変数にアクセスできます。

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

### 「クロージャー」とは？

クロージャーは、プログラミングの重要な考え方で、特に JavaScript や TypeScript などの言語では頻繁に見られます。

まずクロージャーの考え方を、おもちゃの箱を使った例え話で説明します。

まず、大きな箱（関数）があります。この箱の中には、小さなおもちゃ（変数やデータ）が入っています。そして、この箱の中には、小さな箱（別の関数）も入っています。小さな箱が親の大きな箱から出て行ったときでも、小さな箱は親の箱からおもちゃ（データ）を持ち出すことができます。この小さな箱がまさしくクロージャーです。小さな箱（クロージャー）は、親の大きな箱から離れていても、親の箱にあるおもちゃ（変数やデータ）を自由に使うことができます。

それでは、この考え方をもとに、簡単なクロージャーのコードを見てみましょう。

```tsx
function createCounter() {
  let count = 0

  return function () {
    count++
    console.log(count)
  }
}

const counter = createCounter()

counter() // "1" が出力される
counter() // "2" が出力される
```

ここでは、`createCounter`という大きな箱（関数）があります。そして、この中には`count`というおもちゃ（変数）があります。また、この中には別の小さな箱（関数）も存在します。

小さな箱（関数）は`createCounter`から出て行き、`counter`という新しい名前をつけて使われます。そして`counter`を呼び出す度に、`count`の値が 1 ずつ増えていきます。これは、小さな箱が親の大きな箱にあるおもちゃ（ここでは`count`）を使っているからです。

このように、クロージャーとは、関数とその関数が作られた環境（スコープ）との関係を表しているのです。

つまり、クロージャーは、関数が自身が定義されたスコープ（レキシカルスコープ）を「覚えて」いる状態を指します。これにより、関数は定義された場所の外部にある変数にアクセスでき、その値を操作することができます。

例えば、次のようなコードがあります。

```tsx
function outerFunction() {
  let outerVariable = 'outer'

  function innerFunction() {
    console.log(outerVariable)
  }

  return innerFunction
}

const myInnerFunction = outerFunction()
myInnerFunction() // "outer" をログに表示
```

この例では、`outerFunction` 関数内に `innerFunction` という別の関数があります。`innerFunction` は `outerVariable` という変数を参照していますが、この変数は `outerFunction` のスコープ内に定義されています。しかし、`innerFunction` は `outerFunction` から返され、`myInnerFunction` として呼び出される時には、元々定義された `outerFunction` のスコープからは外れています。にも関わらず、`innerFunction` はまだ `outerVariable` にアクセスでき、その値をログに出力します。これがクロージャーの働きです。

### レキシカルスコープ

レキシカルスコープ（静的スコープ）とは、プログラムの変数がどの範囲で参照できるか（スコープ）を、ソースコードを書く時点で決定するスコーピングの方法を指します。

通常、JavaScript や TypeScript では、関数やブロックによって新しいスコープが作られ、そのスコープ内で宣言された変数はそのスコープ内でのみ参照可能となります。これがレキシカルスコープの基本的なルールです。レキシカルスコープは「静的スコープ」とも呼ばれ、これはコードが実行される前、つまり静的な段階でスコープが決定されることを示しています。

たとえば以下のようなソースコードを考えてみましょう。

```tsx
let outerVar = 'I am outside!' // この行はグローバルスコープにあります。

function outerFunc() {
  let innerVar = 'I am inside!' // この行はouterFuncのスコープにあります。

  function innerFunc() {
    console.log(innerVar) // この行はinnerFuncのスコープにあります。
    console.log(outerVar) // この行もinnerFuncのスコープにあります。
  }

  innerFunc()
}

outerFunc()
```

このコードを実行すると、`innerFunc`関数内で宣言されていない`innerVar`と`outerVar`が出力されます。これはレキシカルスコープの性質によります。`innerFunc`のスコープ内では、直接`innerVar`と`outerVar`は宣言されていませんが、レキシカルスコープのルールにより、この関数は外側のスコープ（この場合は`outerFunc`とグローバルスコープ）を「見る」ことができます。

したがって、`innerVar`と`outerVar`は`innerFunc`内で利用可能となり、その結果これらの変数の値がコンソールに出力されます。これがレキシカルスコープの一例です。

なお、JavaScript では var や function で宣言された変数や関数は、その宣言が所属する最も近い関数のスコープに束縛されます。一方、let や const で宣言された変数は、ブロックスコープ（if 文や for 文などの {} で囲まれた範囲）に束縛されます。これもレキシカルスコープの一部として理解することができます。

簡単に言えば、レキシカルスコープとは「変数が参照できる範囲」のことを指します。その「範囲」はコードを書く時点、つまりソースコードがどのように書かれているかによって決まります。

さらに詳しく言うと、関数やブロック（if 文、for 文、while 文などの{}で囲まれた部分）ごとに新たなスコープが作られ、そのスコープ内で宣言された変数はそのスコープ内でのみ参照可能となります。そして、内部のスコープからは外部のスコープの変数を参照できますが、その逆はできません。

このように、変数がどの範囲で参照可能かを決定するこの仕組みがレキシカルスコープです。これにより、プログラム内で変数の名前が衝突することを防いだり、変数の有効範囲を制限してプログラムの安全性を高めるなどの役割を果たしています。

### アロー関数

アロー関数とクロージャーは、JavaScript と TypeScript のコーディングにおいて重要な役割を果たします。特に、アロー関数はクロージャーを作成する際に非常に便利なツールです。それでは、アロー関数とクロージャーの関係について詳しく見ていきましょう。

アロー関数は、短い構文で関数を定義できる機能です。アロー関数は、通常の関数とはいくつかの重要な違いがあります。その一つが「レキシカルスコープ」または「静的スコープ」と呼ばれる特性です。これは、アロー関数内部で変数を参照するときに、その変数が存在する場所を決定するためのルールです。

この特性により、アロー関数内部から外部の変数を参照することが可能となります。この振る舞いがまさしく「クロージャー」です。クロージャーとは、一つの関数が自身の外部スコープにある変数を「覚えている」状態を指します。

それでは具体的なコードを見てみましょう。

```tsx
let value = 0

const incrementValue = () => {
  value++
  console.log(value)
}

incrementValue() // 1 が出力される
incrementValue() // 2 が出力される
```

この例では、`incrementValue`というアロー関数があります。このアロー関数は外部の変数`value`にアクセスし、その値を増加させています。これはクロージャーの一例で、アロー関数が自身の外部スコープにある変数`value`を「覚えている」からです。

アロー関数を使用することで、簡潔な構文でクロージャーを作成し、関数が特定のスコープの変数を「記憶」することが可能となります。この特性は、関数の振る舞いを柔軟にコントロールすることを可能にし、様々なプログラミングパターンを実現します。

### Next.js で、クロージャーを実装

Next.js と TypeScript を使って、クロージャーをどのように使うのかを見ていきましょう。今回は、クロージャーを使ってカウンターを作る例を見てみましょう。

`pages/index.tsx`

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

type Props = {
  initialCount: number
}

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

  const increment = () => {
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default IndexPage
```

ここでのポイントは、`setCount` 関数内にある関数です。この関数は `prevCount` という現在の状態を引数に取り、新しい状態（つまり現在のカウントに 1 を足したもの）を返します。この関数は、実際には `setCount` が呼ばれたときのスコープ内で実行されます。それにもかかわらず、この関数は `count` の値にアクセスし、それを更新できます。これがクロージャーの一例です。

### クロージャーを実装

クロージャーは、より高度なテクニックでも活用できます。例えば、状態をカプセル化するためや、関数をメモ化するために使用できます。

次の例では、関数をメモ化するための簡単な `memoize` 関数を作成します。この関数は、引数として取った関数の結果をキャッシュし、同じ引数で再度呼ばれたときにはキャッシュから結果を返すという動作をします。

```tsx
function memoize(func) {
  const cache = {}

  return (...args) => {
    const argStr = JSON.stringify(args)
    if (cache[argStr]) {
      return cache[argStr]
    }

    const result = func(...args)
    cache[argStr] = result
    return result
  }
}

const slowFunction = (x) => {
  // 何か時間のかかる処理
}

const memoizedSlowFunction = memoize(slowFunction)
```

この `memoize` 関数は、まず空のキャッシュ（`cache`）を作成します。次に、新たな関数を返します。この関数は任意の数の引数（`args`）を受け取り、それらをキーとしてキャッシュをチェックします。キャッシュに結果が存在する場合、その結果が返されます。存在しない場合、引数を使って元の関数（`func`）が実行され、その結果がキャッシュに保存されて返されます。この挙動により、`slowFunction` が同じ引数で複数回呼ばれても、時間のかかる処理は一度しか実行されず、その後はキャッシュから結果が返されます。

このように、クロージャーは JavaScript と TypeScript の強力な特性であり、様々なケースで役立ちます。より詳しく学ぶためには、具体的なコードを書きながら挙動を理解していくと良いでしょう。


Next.js と TypeScript を使用し、クロージャーの理解から、その有効な使用方法までを網羅的に解説します。

2023-06-26

Next.js と TypeScript で、React のライフサイクルの仕組みを理解する

2023-06-26

Next.js と TypeScript で、React の仮想DOMを理解する

2023-06-25

Next.js と TypeScript で、Nullish coalescing 演算子(??)を使う

2023-06-25

Next.js と TypeScript で、オプショナルプロパティ(?)を使う

2023-06-25

Next.js と TypeScript で、OR演算子（||）を使う

2023-06-25

Next.js と TypeScript で、try...catch 構文を理解する

2023-06-24

Next.js と TypeScript で、AND 演算子（&&）を使う

2023-06-24

Next.js と TypeScript で、React カスタムフックを使う

2023-06-23

Next.js と TypeScript で、アロー関数を学びなおす

2023-06-23

Next.js と TypeScript で、クロージャーを理解する