
## 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 を使用し、クロージャーの理解から、その有効な使用方法までを網羅的に解説します。

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


## TL;DR

このページでは、オブジェクトの実装方法について解説しますね。オブジェクトとは、複数のデータを一つにまとめたものです。

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

### オブジェクトとは？

オブジェクトはプログラミングの世界で頻繁に出てくる考え方で、データとそのデータに関連する機能をひとまとめにしたものを指します。JavaScript や TypeScript において、オブジェクトはキーと値のペアをまとめたもので、多くの場合、値はデータや関数を含むことができます。これにより、関連するデータと機能をグループ化し、コードの再利用性と可読性を高めることができます。

例えば、人物についてのデータをオブジェクトで表現すると以下のようになります。この user オブジェクトは name、age、greet の 3 つのプロパティを持ちます。

```tsx
const user = {
  name: 'Taro',
  age: 25,
  greet: () => `Hello, I'm Taro.`,
}
```

例えば、人物についてのデータを TypeScript のオブジェクトで表現すると以下のようになります。

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

const user: User = {
  name: 'Taro',
  age: 25,
  greet() {
    console.log(`Hello, I'm ${this.name}.`)
  },
}
```

この例では、User という型のオブジェクト user を定義しています。この user オブジェクトは name、age、greet という 3 つのプロパティを持ち、それぞれがユーザーの名前、年齢、挨拶の機能を表現しています。こういった形でオブジェクトを用いると、関連する情報や機能を一箇所にまとめることができ、コードの管理がしやすくなります。

### プロパティアクセス

JavaScript と TypeScript では、オブジェクトのプロパティにアクセスするための 2 つの主な方法があります。それらは、ドット記法とブラケット記法です。

#### ドット記法

ドット記法は、プロパティ名が有効な識別子である場合に使用できます。例えば、次のように使用します。

```tsx
let obj = { name: 'John', age: 30 }
console.log(obj.name) // "John"
```

この方法は、プロパティ名が事前にわかっている場合や、プロパティ名が有効な識別子である場合に便利です。

#### ブラケット記法

ブラケット記法は、プロパティ名が動的である場合や、有効な識別子でない場合（例えば、空白やハイフンを含む文字列）に使用できます。例えば、次のように使用します。

```tsx
let obj = { name: 'John', age: 30, 'favorite color': 'blue' }
let propName = 'age'
console.log(obj[propName]) // 30
console.log(obj['favorite color']) // "blue"
```

この方法は、プロパティ名が変数に格納されている場合や、有効な識別子として表現できない文字列をプロパティ名として使用する場合に便利です。

TypeScript では、これらのアクセス方法を適切に使用することで、オブジェクトのプロパティに安全にアクセスすることができます。また、TypeScript の型検査機能により、存在しないプロパティにアクセスしようとするとコンパイル時にエラーを通知してくれます。

### object 型と、{}型

TypeScript には、オブジェクトを表現するためのいくつかの方法があります。その中でも特によく使われるのが `object` 型と `{}` 型です。それぞれの特性と使い方について詳しく見ていきましょう。

#### object 型

`object` 型は、TypeScript で任意のオブジェクトを表すための型です。`object` 型を使用すると、任意のオブジェクトを受け入れることができます。

```ts
let obj: object
obj = { name: 'Taro' } // OK
obj = [1, 2, 3] // OK
obj = function () {} // OK
```

しかし、`object` 型はあまりにも広範で、それが持つプロパティに対するアクセスや、それが持つメソッドの呼び出しを安全に行うことができません。

```ts
let obj: object
obj = { name: 'Taro' }

console.log(obj.name) // Error: Property 'name' does not exist on type 'object'.
```

#### {}型

一方、`{}` 型もまたオブジェクトを表すための型ですが、これは「形状が全く定義されていないオブジェクト」を意味します。

```ts
let obj: {} // `obj` is an object with no known properties
obj = {} // OK
obj = { name: 'Taro' } // OK
```

ただし、`{}` 型のオブジェクトでは、それが持つプロパティに対するアクセスや、それが持つメソッドの呼び出しを行うことはできません。

```ts
let obj: {}
obj = { name: 'Taro' }

console.log(obj.name) // Error: Property 'name' does not exist on type '{}'.
```

#### オブジェクトのプロパティを型として定義する

オブジェクトのプロパティに対するアクセスを型安全に行うためには、そのオブジェクトが持つプロパティを型として定義する必要があります。このために TypeScript では、オブジェクトの形状を定義するための`interface`や`type`が提供されています。

```ts
interface Person {
  name: string
}

let obj: Person
obj = { name: 'Taro' } // OK

console.log(obj.name) // OK
```

ここでは、`Person` インターフェースを定義し、それを型として使用しています。これにより、`name` プロパティへのアクセスが型安全に行えます。

### TypeScript のオブジェクトは、連想配列ではない

TypeScript のオブジェクトは、一部の特性を連想配列と共有していますが、それらは厳密に同じものではありません。

#### オブジェクトと連想配列

オブジェクトとは、キー（プロパティ名）とそれに関連づけられた値を持つデータ構造を指します。JavaScript や TypeScript でのオブジェクトは、この定義に従います。つまり、キーと値のペアを持つデータ構造です。

一方、連想配列（またはマップ、ハッシュマップ、辞書とも呼ばれます）もまた、キーと値のペアを保持するデータ構造です。しかし、連想配列は一般的には、キーとして任意のデータ型を許容し、キーの比較にはキーの内部構造を用います。

これは JavaScript のオブジェクトとは異なります。JavaScript のオブジェクトは基本的には文字列のキーのみを許容し（ES2015 からは Symbol も許容）、キーの比較には文字列としての等価性が用いられます。

#### TypeScript のオブジェクトと連想配列

TypeScript は JavaScript のスーパーセットであるため、JavaScript のオブジェクトの性質はそのまま TypeScript にも引き継がれています。ただし、TypeScript では更に厳密な型検査が可能であり、特定のキーと値の型を持つオブジェクトを定義することが可能です。

さらに TypeScript では`Map`という組み込みオブジェクトも提供されており、これは真の意味での連想配列（ハッシュマップ）として機能します。`Map`オブジェクトは、任意の値をキーとして許容し、キーと値のペアの挿入と検索を高速に行うことができます。

結論として、TypeScript のオブジェクトは、一部の特性を連想配列と共有していますが、それらは全く同じものではありません。しかし、`Map`オブジェクトを使用することで、TypeScript でも真の連想配列の機能を利用することができます。

### 三項演算子

オブジェクトリテラルの中でも三項演算子を使用することが可能です。オブジェクトのプロパティの値を動的に設定するためによく使われます。

以下に一例を示します。

```tsx
let isVIP = true

let user = {
  name: 'John',
  age: 30,
  accessLevel: isVIP ? 'VIP' : 'Regular',
}

console.log(user.accessLevel) // "VIP"
```

この例では、`isVIP`という真偽値に基づいて`accessLevel`プロパティの値を動的に設定しています。`isVIP`が`true`の場合、`accessLevel`の値は`"VIP"`になります。それ以外の場合、`"Regular"`になります。

このような動的なプロパティ設定は、オブジェクトの作成時に状態や条件によってそのプロパティ値を変えたい場合に特に便利です。また、JavaScript や TypeScript では三項演算子を用いることで簡潔にこのような条件分岐を表現することができます。

### スプレッド構文

スプレッド構文を使うと、オブジェクトの作成時にプロパティを別のオブジェクトからコピーすることができます。

スプレッド構文を使用したオブジェクトリテラルの例をご紹介いたします。スプレッド構文は、オブジェクトのプロパティや配列の要素を展開する際によく用いられます。

```tsx
const baseConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
}

const devConfig = {
  ...baseConfig,
  debugMode: true,
}

console.log(devConfig)
// Output: { apiUrl: 'https://api.example.com', timeout: 5000, debugMode: true }
```

上記の例では、`baseConfig`というオブジェクトを持っており、開発環境の設定である`devConfig`に対して、`baseConfig`のすべてのプロパティをコピーしています。その上で、開発環境特有の設定`debugMode`を追加しています。

これは、複数の環境（開発環境、テスト環境、本番環境など）で共通する設定とそれぞれの環境固有の設定を管理する際に便利なパターンです。スプレッド構文を使用することで、既存のオブジェクトを簡単にコピーし、新たなプロパティを追加したり既存のプロパティを上書きしたりすることができます。

### アロー関数

アロー関数を使用したオブジェクトリテラルの例を紹介いたします。オブジェクトリテラルのプロパティには、値だけでなく、関数を割り当てることも可能です。アロー関数を用いると、シンタックスが簡潔になり、`this`のスコープについても直感的に扱うことができます。

以下に、オブジェクトリテラル内でアロー関数を使用した例を示します。

```tsx
const mathOperations = {
  add: (a: number, b: number) => a + b,
  subtract: (a: number, b: number) => a - b,
  multiply: (a: number, b: number) => a * b,
}

console.log(mathOperations.add(5, 3)) // Output: 8
console.log(mathOperations.subtract(5, 3)) // Output: 2
console.log(mathOperations.multiply(5, 3)) // Output: 15
```

この例では、`mathOperations`というオブジェクトには、加算、減算、乗算を行うための 3 つのアロー関数がプロパティとして格納されています。これらの関数はそれぞれ引数を 2 つ取り、計算結果を返します。オブジェクトのプロパティを通じてこれらの関数にアクセスし、計算を行うことができます。

このように、アロー関数をオブジェクトリテラルのプロパティとして使用することで、複数の関数をまとめて管理することができます。また、関数を値として持つオブジェクトを作ることで、関数の名前空間を管理することも可能となります。

### Next.js で、オブジェクトを活用

Next.js と TypeScript を使って、オブジェクトを活用する具体的な例を見てみましょう。まず、`User`というオブジェクトを受け取り、それを表示するコンポーネント `User` を作ります。

```tsx
// components/User.tsx

type UserProps = {
  user: {
    name: string
    age: number
    greet: () => string
  }
}

const User = ({ user }: UserProps) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.age} years old</p>
      <button onClick={() => alert(user.greet())}>Greet</button>
    </div>
  )
}

export default User
```

このコンポーネント `User` は `UserProps` という型のプロパティを受け取ります。`UserProps` はオブジェクト `user` をプロパティとして持ちます。この `user` は `name` と `age` というプロパティと、`greet`というメソッドを持つオブジェクトです。

そして、この `User` コンポーネントは、渡された `user` オブジェクトの `name` と `age` を表示します。さらに、`greet` メソッドを実行するボタンも用意しています。

`greet: () => string`というコードは、TypeScript の型注釈における関数の型定義を表しています。

- `greet:`はオブジェクトのプロパティ名を指定します。
- `() => string`は関数の型を定義します。この場合、引数を取らずに（`()`）、文字列型（`string`）の値を返す関数を指定しています。

つまり、このコードは、「`greet`という名前のプロパティがあり、そのプロパティは引数を取らずに文字列を返す関数である」という情報を表現しています。

次に、この型注釈を用いた具体的なオブジェクトの例を見てみましょう：

```tsx
const obj: { greet: () => string } = {
  greet: () => 'Hello, World!',
}

console.log(obj.greet()) // Output: "Hello, World!"
```

ここでは、`obj`というオブジェクトが作成されています。このオブジェクトは`greet`という名前のプロパティを持ち、そのプロパティは引数を取らずに文字列を返す関数であることが型注釈によって指定されています。具体的な関数としては、"Hello, World!"という文字列を返す関数が設定されています。

このコンポーネントを使って、オブジェクトを表示してみましょう。

```tsx
// pages/index.tsx

import User from '../components/User'

const HomePage = () => {
  const user = {
    name: 'Taro',
    age: 25,
    greet: () => `Hello, I'm Taro.`,
  }

  return <User user={user} />
}

export default HomePage
```

この `HomePage` コンポーネントでは、`User` コンポーネントをインポートし、`user` オブジェクトを作成しています。その後、この `user` オブジェクトを `User` コンポーネントに渡しています。これにより、作成した `User` コンポーネントで `user` オブジェクトの内容を表示できます。

### 高度なオブジェクトの活用

ここでは、もう少し高度なオブジェクトの活用例を見てみましょう。具体的には、オブジェクトを使った状態管理です。React では、`useState` フックを使ってコンポーネントの状態を管理します。しかし、状態が複雑になった場合や、複数の状態を一緒に更新したい場合はどうすれば良いでしょうか。そのような場合には、オブジェクトを使って複数の状態をまとめて管理することができます。

```tsx
// components/UserWithState.tsx

import { useState } from 'react'

type UserProps = {
  user: {
    name: string
    age: number
    greet: () => string
  }
}

const UserWithState = ({ user }: UserProps) => {
  const [userState, setUserState] = useState(user)

  const birthday = () => {
    setUserState((prevState) => ({ ...prevState, age: prevState.age + 1 }))
  }

  return (
    <div>
      <h2>{userState.name}</h2>
      <p>{userState.age} years old</p>
      <button onClick={birthday}>Birthday</button>
      <button onClick={() => alert(userState.greet())}>Greet</button>
    </div>
  )
}

export default UserWithState
```

この `UserWithState` コンポーネントでは、`useState` フックを使って `user` オブジェクトを状態として管理します。そして、「Birthday」ボタンを押すと、`userState` の `age` が 1 増えるようになります。このように、オブジェクトを使って複数の状態をまとめて管理することで、状態の更新をより直感的に、そして一緒に行うことができます。

以上、Next.js と TypeScript でオブジェクトを理解し、活用する方法について解説しました。オブジェクトは JavaScript の中心的な要素であり、Next.js と TypeScript でもその能力を最大限に活用することで、より高度なコードを書くことができます。


この記事では、Next.js と TypeScript を使って、オブジェクトを理解し、活用する方法について解説します。

Next.js と TypeScript で、オブジェクトを理解する


## TL;DR

Web Storage API を使ってユーザーの閲覧履歴を表示する方法を詳しく教えます。

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

### Web Storage API とは？

Web Storage API はブラウザ上でデータを安全に保存できる方法の一つです。Web Storage API には、データを一時的に保存する「sessionStorage」や、データを永続的に保存する「localStorage」の 2 つのメイン機能があります。

- `localStorage`：データは永続的に保存され、ブラウザを閉じてもデータは消えません。容量は通常 5MB です。
- `sessionStorage`：データはセッション中にのみ保存され、ブラウザを閉じるとデータは消えます。容量は通常 5MB です。

使い方は非常に簡単で、以下のように `setItem`、`getItem` メソッドを使ってデータを保存、取得できます。

```tsx
// 保存
localStorage.setItem('key', 'value')

// 取得
const value = localStorage.getItem('key') // 'value'
```

### Next.js で、Web Storage API を実装

この項では、Next.js で、Web Storage API を用いてユーザーの閲覧履歴を表示する具体的な実装を見せます。

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

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

type Props = {
  url: string
}

const HomePage = ({ url }: Props) => {
  const [history, setHistory] = useState<string[]>([])

  useEffect(() => {
    // 過去の閲覧履歴を取得
    const storedHistory = JSON.parse(localStorage.getItem('history') || '[]')
    // 過去の閲覧履歴に新しいURLを追加
    const newHistory = [...storedHistory, url]
    // 閲覧履

    歴を保存
    localStorage.setItem('history', JSON.stringify(newHistory))
    // 閲覧履歴をstateにセット
    setHistory(newHistory)
  }, [url])

  return (
    <div>
      <h1>閲覧履歴</h1>
      <ul>
        {history.map((url, index) => (
          <li key={index}>{url}</li>
        ))}
      </ul>
    </div>
  )
}

export default HomePage
```

上記コードでは、ページが読み込まれるとき(`useEffect` 内)に、閲覧履歴を `localStorage` から取得し、新たな URL を追加して保存しています。そして、それを `state` にセットして画面に表示しています。

`JSON.parse()`は JavaScript のビルトイン関数で、JSON 形式の文字列を JavaScript のオブジェクトに変換します。"JSON"は JavaScript Object Notation の略で、データの形式の一つです。

具体的には、次のように動作します：

```js
let jsonStr = '{"name":"John", "age":30, "city":"New York"}'
let obj = JSON.parse(jsonStr)

console.log(obj.name) // "John"
console.log(obj.age) // 30
console.log(obj.city) // "New York"
```

上記の例では、`jsonStr`という JSON 形式の文字列を`JSON.parse()`を使って JavaScript のオブジェクトに変換しています。その結果、生成されたオブジェクトのプロパティにアクセスすることが可能になります。

逆に、JavaScript のオブジェクトを JSON 形式の文字列に変換したい場合には`JSON.stringify()`を使います。例えば：

```javascript
let obj = { name: 'John', age: 30, city: 'New York' }
let jsonStr = JSON.stringify(obj)

console.log(jsonStr) // '{"name":"John","age":30,"city":"New York"}'
```

これらの関数はデータをサーバーとクライアント間でやり取りしたり、ブラウザのローカルストレージにデータを保存したりする際に非常に便利です。

### Web Storage API を実装

次に、`localStorage` だけでなく、`sessionStorage` を用いた高度な例を見せます。

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

type Props = {
  url: string
}

const HomePage = ({ url }: Props) => {
  const [sessionHistory, setSessionHistory] = useState<string[]>([])

  useEffect(() => {
    // セッション中の閲覧履歴を取得
    const storedHistory = JSON.parse(sessionStorage.getItem('history') || '[]')
    // セッション中の閲覧履歴に新しいURLを追加
    const newHistory = [...storedHistory, url]
    // 閲覧履歴を保存
    sessionStorage.setItem('history', JSON.stringify(newHistory))
    // 閲覧履歴をstateにセット
    setSessionHistory(newHistory)
  }, [url])

  return (
    <div>
      <h1>このセッションでの閲覧履歴</h1>
      <ul>
        {sessionHistory.map((url, index) => (
          <li key={index}>{url}</li>
        ))}
      </ul>
    </div>
  )
}

export default HomePage
```

ここでは `sessionStorage` を用いていますので、ユーザーがブラウザを閉じたら閲覧履歴は消えます。これは一時的なデータの保存に適しています。

### Emotion で実装

最後に、Emotion を用いて閲覧履歴の表示を美しく整えます。`css` プロパティを活用して、閲覧履歴のリストにスタイルを適用します。

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

type Props = {
  url: string
}

const listStyle = css`
  list-style: none;
  padding: 0;
  li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
`

const HomePage = ({ url }: Props) => {
  const [history, setHistory] = useState<string[]>([])

  useEffect(() => {
    const storedHistory = JSON.parse(localStorage.getItem('history') || '[]')
    const newHistory = [...storedHistory, url]

    localStorage.setItem('history', JSON.stringify(newHistory))
    setHistory(newHistory)
  }, [url])

  return (
    <div>
      <h1>閲覧履歴</h1>
      <ul css={listStyle}>
        {history.map((url, index) => (
          <li key={index}>{url}</li>
        ))}
      </ul>
    </div>
  )
}

export default HomePage
```

これにより、閲覧履歴リストにパディングが追加され、リスト項目間に罫線が引かれます。Emotion は非常に強力な CSS-in-JS ライブラリで、JavaScript の全機能を使って CSS を記述できます。

以上が、Next.js と TypeScript を用いた、Web Storage API を使って閲覧履歴を表示する一連の流れです。


Next.js と TypeScript を使って、Web Storage API を活用し、ユーザーの閲覧履歴を記録、表示する方法を解説します。

Next.js と TypeScript で、ユーザーの閲覧履歴を表示する方法


## TL;DR

このページでは、`JSON.parse()` の実装方法について解説しますね。一言でいうと`JSON.parse()`とは、JSON 形式の文字列を JavaScript のオブジェクトに変換するためのメソッドです。

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

### `JSON.parse()` とは？

まず初めに、`JSON.parse()` とは何かを説明します。`JSON.parse()` は、JavaScript の標準組み込みオブジェクトである `JSON` のメソッドで、JSON 形式の文字列を JavaScript のオブジェクトに変換します。これにより、サーバーから受け取った JSON 形式のデータを、JavaScript で扱える形式に変換できます。

以下は、`JSON.parse()` の基本的な使い方の例です。

```tsx
const jsonString = '{"name":"John", "age":30, "city":"New York"}'
const jsonObject = JSON.parse(jsonString)
console.log(jsonObject.name) // John
```

この例では、JSON 形式の文字列 `jsonString` を `JSON.parse()` で JavaScript のオブジェクト `jsonObject` に変換しています。変換後の `jsonObject` からは、`.` 演算子を使ってプロパティにアクセスできます。

しかし、この `JSON.parse()` には注意点があります。`JSON.parse()` は、形式が正しい JSON 文字列でなければエラーを投げます。そのため、正しくない JSON 文字列を解析しようとすると、プログラムは停止します。

```tsx
const invalidJsonString = "{name:'John', age:30, city:'New York'}" // シングルクォートは JSON 形式では無効
try {
  const jsonObject = JSON.parse(invalidJsonString) // エラー
} catch (error) {
  console.error(error)
}
```

### `JSON.stringify()` とは？

他に、`JSON.stringify()` というメソッドも存在します。`JSON.parse()` が JSON 形式の文字列を JavaScript のオブジェクトに変換するのに対して、`JSON.stringify()` は JavaScript のオブジェクトを JSON 形式の文字列に変換します。

`JSON.stringify()` は以下のように使用します：

```tsx
const user = {
  name: 'Taro',
  age: 25,
  city: 'Tokyo',
}

const jsonString = JSON.stringify(user)
console.log(jsonString) // '{"name":"Taro","age":25,"city":"Tokyo"}'
```

ここでは、JavaScript のオブジェクト `user` を `JSON.stringify()` で JSON 形式の文字列に変換しています。

さらに、`JSON.stringify()` にはリプレイサー関数というものを使って、文字列化の挙動をカスタマイズすることもできます。例えば以下のように利用できます：

```tsx
const user = {
  name: 'Taro',
  age: 25,
  city: 'Tokyo',
}

const replacer = (key: string, value: any) => {
  if (typeof value === 'string') {
    return value.toUpperCase()
  }
  return value
}

const jsonString = JSON.stringify(user, replacer)
console.log(jsonString) // '{"name":"TARO","age":25,"city":"TOKYO"}'
```

この例では、リプレイサー関数 `replacer` を使って、すべての文字列値を大文字に変換するように `JSON.stringify()` の挙動をカスタマイズしています。

このように、`JSON.stringify()` を使うと、JavaScript のオブジェクトを JSON 形式の文字列に変換することができ、さらにその変換処理をリプレイサー関数でカスタマイズすることもできます。これは、サーバーにデータを送信する際に非常に便利な機能です。

### Next.js で、`JSON.parse()` を実装

それでは、Next.js と TypeScript で、`JSON.parse()` を使った実装を見ていきましょう。

ソースコード：`/pages/index.tsx`

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

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

export default function Home() {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    fetch('/api/user')
      .then((response) => response.text())
      .then((data) => {
        const userData = JSON.parse(data)
        setUser(userData)
      })
  }, [])

  return (
    <div>
      {user && (
        <div>
          {user.name} lives in {user.city} and is {user.age} years old.
        </div>
      )}
    </div>
  )
}
```

ここでは、Next.js のページコンポーネント `/pages/index.tsx` を定義しています。このコンポーネントでは、React の `useEffect` フックを使って、ページがレンダリングされたときに `/api/user` からユーザー情報を取得します。

取得したデータは JSON 形式の文字列として返されます。そこで、`JSON.parse()` を使って、この JSON 形式の文字列を JavaScript のオブジェクトに変換します。そして、そのオブジェクトを `useState` フックで管理されている `user` ステートにセットします。

この `user` ステートは、取得したユーザー情報を表示するために使われます。`user` ステートが `null` でなければ（つまり、ユーザー情報が取得されていれば）、そのユーザー情報を `<div>` 要素内で表示します。

### `JSON.parse()` を活用する

さて、ここまで見てきたように `JSON.parse()` は、サーバーから取得した JSON 形式のデータを JavaScript のオブジェクトに変換するための有用なメソッドです。

では、さらに応用的な例として、`JSON.parse()` の第二引数にリバイバー関数を指定することで、変換処理をカスタマイズする方法を見てみましょう。

```tsx
const jsonString = '{"date":"2023-06-21T00:00:00.000Z"}'

const dateReviver = (key: string, value: any) => {
  const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/
  if (typeof value === 'string' && dateFormat.test(value)) {
    return new Date(value)
  }
  return value
}

const jsonObject = JSON.parse(jsonString, dateReviver)
console.log(jsonObject.date) // 2023-06-21T00:00:00.000Z (Date object)
```

この例では、`JSON.parse()` の第二引数にリバイバー関数 `dateReviver` を指定しています。リバイバー関数は、変換前のキーと値を引数に取り、変換後の値を返す関数です。

`dateReviver` は、値が ISO 8601 形式の日付文字列であるかどうかをチェックし、日付文字列であれば `Date` オブジェクトに変換します。そうでなければ、値をそのまま返します。

このように、`JSON.parse()` を使うと、JSON 形式のデータを簡単に JavaScript のオブジェクトに変換することができ、さらに変換処理をリバイバー関数でカスタマイズすることも可能になります。これは、サーバーとの通信を行う際に非常に役立つテクニックで、より高度なアプリケーションを開発する際にも必要な知識となります。


Next.js と TypeScript での JSON.parse() の基本的な使い方と応用例について、初学者でも理解できるように解説します。

Next.js と TypeScript で、JSON.parse()を理解する


## TL;DR

このページでは、TypeScript の重要な要素の一つである「型ガード」について詳しく解説します。型ガードが何であるか、それがどのように動作し、そして何故それが役立つのか、具体的なソースコードを通じて一緒に学んでいきましょう。

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

### 「型ガード」 とは？

型ガードとは、TypeScript で使われる特別な機能で、ある変数が特定の型であることを確認するために使用されます。JavaScript は動的に型が変わる言語なので、一つの変数が異なる型の値を保持する可能性があります。しかし、TypeScript を使うと、コンパイル時に型のエラーを検出できます。それが型ガードの役割です。

型ガードの基本的な形式は以下の通りです。

```tsx
if (typeof variable === 'type') {
  // variable is guaranteed to be 'type' within this block
}
```

これが型ガードの基本的な考え方で、この`if`ブロック内では`variable`は`type`として扱われます。

### 使い所

型ガードは、以下のようなシチュエーションで有効に利用できます。

#### 異なる型を持つ可能性がある変数の取り扱い

TypeScript では、異なる型を持つ変数を安全に扱うために、型ガードを使用することがよくあります。たとえば、ある関数が文字列または数値を返す可能性がある場合、その関数の戻り値を適切に処理するには、戻り値がどの型であるかを判断する必要があります。型ガードを使用すると、このような場合にコードの安全性を保証することができます。

#### ユーザー定義型の確認

複雑な型やユーザー定義の型を扱う場合、そのオブジェクトが特定の型を持つことを保証するために型ガードを使用することができます。この場合、型ガードはオブジェクトが必要なプロパティを持つことを確認し、型安全性を保証します。

#### API から返されるデータの取り扱い

外部 API からデータを取得する際、返されるデータの形式が確定していない場合もあります。型ガードを使用すると、API から返されるデータが予期した形式を持つことを確認し、データを安全に操作することができます。

#### コンポーネントのプロップスの型判定

React のコンポーネントでは、プロップスの型を判定するために型ガードを使用することがあります。これにより、異なるプロップスに応じて異なる動作をコンポーネントが実行することができます。

これらのケースは、型ガードが有効に利用できる例です。その他の多くのシチュエーションでも、型ガードはコードの安全性と可読性を向上させ、バグの発生を防ぐ強力なツールとなります。

### Next.js で、型ガードを実装

それでは、具体的なコードを見てみましょう。Next.js と TypeScript を用いた型ガードの例を紹介します。

##### pages/index.tsx

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

type Props = {
  data: string | number
}

const IndexPage: NextPage<Props> = ({ data }) => {
  if (typeof data === 'string') {
    // data is guaranteed to be a string here
    return <div>{data.toUpperCase()}</div>
  } else {
    // data is guaranteed to be a number here
    return <div>{data * 10}</div>
  }
}

export default IndexPage
```

このコードは Next.js のページコンポーネントで、型ガードを使用して`data`が文字列型か数値型かを確認しています。`if`ブロック内では、`data`は文字列として扱われ、そのため`.toUpperCase()`メソッドを安全に使用できます。一方、`else`ブロックでは、`data`は数値として扱われ、そのため数値の演算を行うことができます。

### 型ガードを実装

さらに進んだ型ガードの実装を見ていきましょう。TypeScript ではユーザー定義の型ガードを作ることもできます。これにより、より複雑な型の検査が可能になります。

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

function isUser(obj: any): obj is User {
  return obj && typeof obj.name === 'string' && typeof obj.age === 'number'
}

const IndexPage: NextPage<Props> = ({ data }) => {
  if (isUser(data)) {
    // data is guaranteed to be User here
    return (
      <div>
        {data.name} - {data.age}
      </div>
    )
  } else {
    // data is not User
    return <div>Not a user</div>
  }
}

export default IndexPage
```

ここでは、`isUser`という型ガード関数を定義し、`data`が`User`型であることを検証しています。これにより、`data`が`User`型であると確認された場所では、`User`型のプロパティに安全にアクセスすることができます。

### Emotion で実装

最後に、Emotion という CSS-in-JS ライブラリを使った実装例を見てみましょう。このライブラリは、スタイルをコンポーネントレベルで管理することを可能にしています。

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

type Props = {
  data: string | number
}

const textStyles = css`
  font-size: 18px;
  color: blue;
`

const IndexPage: NextPage<Props> = ({ data }) => {
  if (typeof data === 'string') {
    return <div css={textStyles}>{data.toUpperCase()}</div>
  } else {
    return <div css={textStyles}>{data * 10}</div>
  }
}

export default IndexPage
```

ここでは、`data`の型に基づいて異なるテキストを表示していますが、どちらの場合も同じスタイル（`textStyles`）を使用しています。Emotion を使うことで、スタイルを再利用し、コンポーネントの見た目を一貫性を保つことができます。

以上が、Next.js と TypeScript を使って型ガードを活用する方法についての解説です。型ガードは TypeScript の強力な機能で、コードの安全性と予測可能性を高める重要なツールです。


Next.js と TypeScript を使い、型ガードの考え方と活用方法を初学者にも理解しやすいように解説します。

Next.js と TypeScript で、型ガードを扱う方法


## TL;DR

このページでは、Web Storage API の実装方法について解説しますね。Next.js と TypeScript を使用し、データの保存や読み出しを行うための具体的な手順とコードをご紹介します。

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

### Web Storage API とは？

Web Storage API は、ブラウザによるデータの保存を可能にする機能の一つです。キーと値の組み合わせによってデータを保存し、そのデータを後で取り出すことができます。主に、セッションストレージとローカルストレージの 2 つの種類があります。

セッションストレージは、ブラウザのタブが閉じられるとそのデータが消去されます。一方で、ローカルストレージはブラウザを閉じてもデータが残ります。これらの違いを理解し、目的に応じて適切なストレージを選ぶことが大切です。

基本的な使い方は次の通りです。まずデータを保存するには、`setItem`メソッドを使います。`setItem`は 2 つの引数を取ります。1 つ目の引数はキー、2 つ目の引数は値です。

```ts
localStorage.setItem('key', 'value')
```

データを取得するには`getItem`メソッドを使います。このメソッドは 1 つの引数、つまり取得したいデータのキーを指定します。

```ts
const value = localStorage.getItem('key')
```

また、データを削除するには`removeItem`メソッドを使います。削除するデータのキーを引数に渡します。

```ts
localStorage.removeItem('key')
```

### どのようなときに使うのか？

Web Storage API を利用することで、以下のような機能を実装できます。

#### ダークモードとライトモードの切り替え

ユーザーがサイトの見た目をダークモードとライトモードの間で切り替えられるようにします。この設定はローカルストレージに保存され、次回訪問時もユーザーの選択が反映されます。

#### ブックマークの保存

ユーザーが特定のコンテンツをブックマークできるようにします。これらのブックマークはローカルストレージに保存され、ユーザーが後で簡単にアクセスできます。

#### 最近閲覧したアイテムのリスト

商品や記事など、ユーザーが最近閲覧したアイテムのリストを提供します。このリストはローカルストレージに保存され、ユーザーが後でアクセスできます。

#### フォームの自動完成

ユーザーが以前に入力したフォームの情報を保存しておくことで、同じフォームを再度訪れたときに自動的に情報を入力する機能を提供します。

#### ゲームのスコアや進行状況の保存

ブラウザゲームでプレイヤーのスコアや進行状況をローカルストレージに保存し、ゲームを再開するときにその情報を復元します。

#### オフライン時のデータキャッシュ

オフライン時でも特定のデータを表示できるように、一部の情報をローカルストレージに保存します。

※ Web Storage API の利用には注意が必要です。これは、大量のデータを保存するためのものではなく、また、敏感な情報（パスワードや個人情報など）を保存するためのものでもありません。そのため、データの量や種類に注意しながら適切に使用することが重要です。

### 保存期間

Web Storage API には 2 つの主要なストレージタイプがあり、それぞれが異なる保存期間を持っています。

#### セッションストレージ（sessionStorage）

このタイプのストレージは、ブラウザのタブまたはウィンドウが閉じられたときに自動的にクリアされます。つまり、セッションストレージに保存されたデータは、ブラウザを閉じると失われます。同じブラウザでも、新しいタブやウィンドウを開いた場合、それぞれが独自のセッションストレージを持ちます。

#### ローカルストレージ（localStorage）

このタイプのストレージは永続的で、ブラウザを閉じてもデータは保持されます。データは手動でクリアしない限り、無期限に保持されます。また、同じブラウザの異なるタブやウィンドウ間で共有されます。

保存期間が必要な場合や、セキュリティ上の理由で自動的にデータをクリアしたい場合は、セッションストレージを利用します。一方、永続的にデータを保存したい場合や、ブラウザを閉じてもデータを保持したい場合は、ローカルストレージを利用します。ただし、どちらのストレージタイプも、ユーザー自身がブラウザの設定でデータをいつでも削除できることを覚えておくことが重要です。

### メソッド

ローカルストレージを操作するためには、以下のメソッドが主に利用されます。

- `setItem(key, value)`: ローカルストレージに新しいデータを保存します。`key`はデータの名前を表し、`value`は保存するデータそのものです。`value`は文字列である必要があるため、オブジェクトや配列を保存する場合は、`JSON.stringify()`を用いて文字列化する必要があります。

- `getItem(key)`: ローカルストレージからデータを取得します。引数の`key`に対応するデータが存在すればそのデータが文字列として返されます。なお、`setItem()`で保存した際に文字列化したオブジェクトや配列を取得する場合は、`JSON.parse()`を用いて元のデータ型に戻す必要があります。

- `removeItem(key)`: ローカルストレージから指定した`key`のデータを削除します。

- `clear()`: ローカルストレージの全てのデータを削除します。

これらのメソッドを使うことで、ブラウザのローカルストレージを操作し、データの保存、取得、削除を行うことができます。

### ストレージイベント

ストレージイベントについてお話ししますね。このイベントは、localStorage または sessionStorage のデータが変更されるたびに発生します。一つのタブやウィンドウでデータが変更されると、他の全てのタブやウィンドウでこのイベントが発生します。これにより、同一ブラウザ内の異なるタブやウィンドウ間でデータを同期することができます。

ただし、注意すべき点として、同一のページでデータが変更された場合、そのページ自体ではストレージイベントは発生しません。つまり、イベントは常に他のページからの変更を監視するために存在します。

以下に、ストレージイベントがどのように機能するかを示す基本的な例を見てみましょう。この例では、一つのタブでデータが変更されたときに他のタブがそれを検知し、反応します。

```tsx
// 他のタブでの変更を監視する
window.addEventListener('storage', function (event) {
  if (event.key == 'myData') {
    alert('データが変更されました: ' + event.newValue)
  }
})

// データを変更する
localStorage.setItem('myData', '新しいデータ')
```

このように、ストレージイベントを使うと、ブラウザのタブ間でデータをリアルタイムに同期することができます。例えば、ユーザーがブックマークを追加または削除したとき、開いている他の全てのタブでその変更を反映することが可能になります。

### Next.js で、Web Storage API を実装

では、Next.js と TypeScript を使って、具体的なソースコードを書いてみましょう。

まずは、次のようなファイルを作成します：`components/StorageExample.tsx`

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

type Props = {
  initialKey: string
  initialValue: string
}

const StorageExample = ({ initialKey, initialValue }: Props) => {
  const [storageValue, setStorageValue] = useState<string | null>(null)

  useEffect(() => {
    localStorage.setItem(initialKey, initialValue)
    const storedValue = localStorage.getItem(initialKey)
    setStorageValue(storedValue)
  }, [initialKey, initialValue])

  return <div>Stored Value: {storageValue}</div>
}

export default StorageExample
```

このコンポーネントでは、`initialKey`と`initialValue`という 2 つのプロップスを受け取り、それをローカルストレージに保存します。保存した値はその後取得され、`storageValue`というステートに保存されます。そして、その値は画面上に表示されます。

### Web Storage API を活用

では、次により具体的な実装を見てみましょう。例えば、ユーザーがサイトにログインした際の情報をローカルストレージに保存し、その情報を元にページの表示を制御するような機能を考えてみます。

次のようなファイルを作成します：`components/Login.tsx`

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

type User = {
  name: string
  token: string
}

type Props = {
  user: User
}

const Login = ({ user }: Props) => {
  const [isLogged, setIsLogged] = useState<boolean>(false)

  useEffect(() => {
    localStorage.setItem('user', JSON.stringify(user))
    const storedUser = JSON.parse(localStorage.getItem('user') || '')
    if (storedUser && storedUser.token) {
      setIsLogged(true)
    }
  }, [user])

  return <div>Welcome {isLogged ? user.name : 'Guest'}</div>
}

export default Login
```

### Emotion で実装

では最後に、スタイルの適用について見てみましょう。ここでは、Emotion を使用してスタイルを適用します。例えば、ログインしているユーザーの名前を強調表示することを考えてみます。

`components/StyledLogin.tsx` というファイルを作成します。

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

type User = {
  name: string
  token: string
}

type Props = {
  user: User
}

const loginStyle = css`
  font-size: 1.5em;
  font-weight: bold;
  color: blue;
`

const Login = ({ user }: Props) => {
  const [isLogged, setIsLogged] = useState<boolean>(false)

  useEffect(() => {
    localStorage.setItem('user', JSON.stringify(user))
    const storedUser = JSON.parse(localStorage.getItem('user') || '')
    if (storedUser && storedUser.token) {
      setIsLogged(true)
    }
  }, [user])

  return <div css={isLogged ? loginStyle : undefined}>Welcome {isLogged ? user.name : 'Guest'}</div>
}

export default Login
```

このコードでは、ログインしているユーザーの名前に対して、`loginStyle`というスタイルを適用しています。`loginStyle`では、フォントの大きさ、重さ、色を設定しており、これによりログインユーザーの名前が強調表示されます。

以上のように、Next.js と TypeScript を使用することで、Web Storage API を用いた具体的な機能を実装することが可能になります。そして、Emotion を利用することで、その機能に対して動的にスタイルを適用することもできます。


Next.js と TypeScript を組み合わせて Web Storage API を使う方法を解説します。基礎から応用まで詳しく説明し、理解を深めるための具体的なコード例も提供します。

Next.js と TypeScript で、Web Storage API を使う


## TL;DR

今日は Next.js と TypeScript を用いて、Web Storage API を使ったブックマーク機能の実装方法について深堀りしていきます。

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

### Web Storage API とは？

Web Storage API は、ウェブブラウザ上でキーと値のペアを保存するための API です。ブラウザ上でデータを保存したい場合、一般的には 2 つの方法、"localStorage" と "sessionStorage" があります。どちらも同じ Web Storage API を使用しますが、その振る舞いには微妙な違いがあります。

- localStorage: こちらはウェブページのセッション間（ブラウザを閉じて再開するなど）でもデータを保持します。つまり、永続的なデータストレージとなります。
- sessionStorage: こちらは現在開いているページのセッション中だけデータを保持します。ページやブラウザを閉じるとデータは消えてしまいます。

これらの特性を利用して、ブックマーク機能のようなユーザー固有のデータを保存する場合によく用いられます。

簡単な localStorage の使用例を見てみましょう。

```tsx
// データの保存
localStorage.setItem('myKey', 'myValue')

// データの取得
const data = localStorage.getItem('myKey') // myValue
```

### Next.js で、Web Storage API でブックマーク機能を実装

では、Next.js の環境でブックマーク機能を実装してみましょう。

ファイル名: `Bookmark.tsx`

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

type Props = {
  id: string
}

const Bookmark = ({ id }: Props) => {
  const [bookmarked, setBookmarked] = useState(false)

  useEffect(() => {
    setBookmarked(Boolean(localStorage.getItem(id)))
  }, [id])

  const toggleBookmark = () => {
    if (bookmarked) {
      localStorage.removeItem(id)
    } else {
      localStorage.setItem(id, 'bookmarked')
    }
    setBookmarked(!bookmarked)
  }

  return <button onClick={toggleBookmark}>{bookmarked ? 'Remove bookmark' : 'Add bookmark'}</button>
}
```

ここでは、ブックマークを追加・削除するための `Bookmark` コンポーネントを作成しました。コンポーネントはブックマークする項目の `id` を受け取ります。

初期化時、`useEffect` により `localStorage` をチェックし、該当 `id` のブックマークが存在するか確認します。存在すれば `bookmarked` を `true` に設定します。

`toggleBookmark` 関数は、ボタンがクリックされた時に呼び出され、ブックマークの追加と削除を行います。

### Web Storage API でブックマーク機能を実装

今度は、より発展的な例を見てみましょう。

ファイル名: `BookmarkList.tsx`

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

type Post = {
  id: string
  title: string
}

type Props = {
  posts: Post[]
}

const BookmarkList = ({ posts }: Props) => {
  const [bookmarks, setBookmarks] = useState<string[]>([])

  useEffect(() => {
    const storedBookmarks = Object.keys(localStorage)
    setBookmarks(storedBookmarks)
  }, [])

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <Bookmark id={post.id} />
        </li>
      ))}
    </ul>
  )
}
```

ここでは、投稿のリストを受け取り、それぞれの投稿にブックマークボタンを追加する `BookmarkList` コンポーネントを作成しました。ページロード時には、localStorage からすべてのブックマークを取得し、それを`bookmarks`ステートに設定します。

### Emotion で実装

最後に、Emotion を使ってブックマークボタンをスタイリングしてみましょう。

ファイル名: `Bookmark.tsx`

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

type Props = {
  id: string
}

const buttonStyles = css`
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: #333;
  font-size: 16px;
`

const Bookmark = ({ id }: Props) => {
  const [bookmarked, setBookmarked] = useState(false)

  useEffect(() => {
    setBook

    marked(Boolean(localStorage.getItem(id)))
  }, [id])

  const toggleBookmark = () => {
    if (bookmarked) {
      localStorage.removeItem(id)
    } else {
      localStorage.setItem(id, 'bookmarked')
    }
    setBookmarked(!bookmarked)
  }

  return (
    <button css={buttonStyles} onClick={toggleBookmark}>
      {bookmarked ? 'Remove bookmark' : 'Add bookmark'}
    </button>
  )
}
```

ここでは、Emotion の `css` 関数を使ってスタイルを定義し、そのスタイルをボタンに適用しています。

以上の例からわかるように、Web Storage API はブラウザにデータを保存し、ページを離れてもデータが残るようにする機能です。Next.js と TypeScript を使うと、この API を使ってユーザーのブックマークを管理する機能を簡単に実装できます。


Next.js と TypeScript を使った Web Storage API を用いたブックマーク機能の作成について説明します。独自の考え方とコード解説により、初学者でも理解できるように展開します。

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 で、クロージャーを理解する

2023-06-22

Next.js と TypeScript で、オブジェクトを理解する

2023-06-21

Next.js と TypeScript で、ユーザーの閲覧履歴を表示する方法

2023-06-21

Next.js と TypeScript で、JSON.parse()を理解する

2023-06-20

Next.js と TypeScript で、型ガードを扱う方法

2023-06-20

Next.js と TypeScript で、Web Storage API を使う

2023-06-20

Next.js と TypeScript で、ブックマーク機能を実装