
## 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 を用いたブックマーク機能の作成について説明します。独自の考え方とコード解説により、初学者でも理解できるように展開します。

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


## TL;DR

このページでは、TypeScript の機能の一つである「export type」について具体的な実装方法を解説しますね。まずは基本からしっかりと理解し、その上で実際の Next.js プロジェクトに応用していきましょう。

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

### export type

TypeScript には、型情報を他のファイルに共有するための仕組みとして「export」が存在します。これを用いて、定義した型情報を外部のファイルから参照できます。そして、「export」には大きく分けて二つの種類があります。一つは「export」で、もう一つが「export type」です。

「export」は、変数、関数、クラス、型など様々な要素をエクスポートできます。一方、「export type」は型だけをエクスポートできる機能です。この「export type」を使用することで、コードの読み手に対して、「これは型情報だけをエクスポートしていますよ」と明示的に伝えることができます。

```tsx
// types.ts
export type User = {
  id: string
  name: string
}
```

### export interface

`export interface`は、TypeScript においてインターフェースを外部ファイルに共有するための方法です。これを使うことで他のファイルからそのインターフェースをインポートして利用することができます。インターフェースは、オブジェクトが持つべき構造を定義するのに用いられます。

以下に、`export interface`を使った例を示します。

```tsx
// types.ts
export interface IUser {
  id: string
  name: string
}

// pages/index.tsx
import { IUser } from '../types'

const HomePage = ({ user }: { user: IUser }) => {
  return (
    <div>
      <p>{user.name}</p>
    </div>
  )
}

export default HomePage
```

この例では、`types.ts`で`IUser`インターフェースを定義し、`export interface`を用いてそれを外部に公開しています。そして、`pages/index.tsx`ではその`IUser`インターフェースをインポートし、ユーザー情報を扱っています。

それでは、`export interface`を使ってインターフェースをエクスポートし、それを別のファイルからインポートする例を見てみましょう。

まず、`IUser`というインターフェースを`types.ts`というファイルで定義し、それをエクスポートします。

```tsx
// types.ts
export interface IUser {
  id: string
  name: string
}
```

次に、この`IUser`インターフェースを`App.tsx`というファイルでインポートします。

```tsx
// App.tsx
import { IUser } from './types'

const user: IUser = {
  id: '1',
  name: 'John Doe',
}

const App = () => {
  return (
    <div>
      <p>{`User Name: ${user.name}`}</p>
    </div>
  )
}

export default App
```

ここで、`IUser`インターフェースを使って`user`変数を定義しています。この`user`変数は、`id`と`name`プロパティを持つオブジェクトとして定義されています。これが`IUser`インターフェースの定義に一致しているため、TypeScript の型チェックを通過することができます。

なお、この`user`変数を`App`コンポーネントで利用して、ユーザーの名前を表示しています。

### export type と export interface の違い

実際には`export type`と`export interface`のどちらを使うかは開発者のスタイルやプロジェクトのルールに依存しますが、いくつか違いはあります。

- 拡張性： `interface`は拡張（extends）や実装（implements）が可能であるため、より複雑な型関係を表現するのに適しています。一方、`type`は主に既存の型を組み合わせて新しい型を定義するのに用いられます。
- 互換性： TypeScript の古いバージョンでは`interface`の方が多機能でしたが、TypeScript 2.7 以降では`type`も大抵の機能をサポートしています。
- 表現力： `type`は`interface`よりも表現力が高く、例えば Union 型や Intersection 型、タプル、リテラル型などを定義することができます。

そのため、実際の開発では、どちらを使うべきかは要件や利便性によるところが大きいです。また、`export type`があまり見かけないのは、TypeScript の早い段階では`interface`がより高機能であったため、既存のコードベースやスタイルガイドが`interface`を推奨している場合が多いからかもしれません。

### Next.js で、"export type" を実装

具体的な実装例を見てみましょう。以下に示すコードは Next.js でのページコンポーネントの一例です。User 型をエクスポートし、その型を利用してユーザーデータを扱います。

```tsx
// types.ts
export type User = {
  id: string
  name: string
}

// pages/index.tsx
import { User } from '../types'

const HomePage = ({ user }: { user: User }) => {
  return (
    <div>
      <p>{user.name}</p>
    </div>
  )
}

export default HomePage
```

このコードでは、`types.ts`から User 型をインポートし、HomePage コンポーネントの props として使用しています。このように、TypeScript では型情報を別ファイルに分けて管理し、必要な場所でインポートして使用することができます。

### export type を活用

さらに、「export type」を活用すると、より複雑な型の管理も可能になります。例えば、アプリケーションで使用するすべての型を一つのファイルで管理し、「export type」を用いて型情報を共有するという方法があります。

```tsx
// types.ts
export type User = {
  id: string
  name: string
}

export type Post = {
  id: string
  title: string
  author: User
}

// pages/index.tsx
import { User, Post } from '../types'

const HomePage = ({ user, post }: { user: User; post: Post }) => {
  return (
    <div>
      <p>{user.name}</p>
      <p>{post.title}</p>
    </div>
  )
}

export default HomePage
```

### Emotion で実装

Emotion を使って、「export type」を活用する場面を見てみましょう。Emotion を使用すると、props に基づいてスタイリングを動的に変更することが可能です。

```tsx
// styles.ts
import styled from '@emotion/styled'

export const UserCard = styled.div<{ isActive: boolean }>`
  padding: 20px;
  background: ${(props) => (props.isActive ? 'green' : 'red')};
`

// types.ts
export type User = {
  id: string
  name: string
  isActive: boolean
}

// pages/index.tsx
import { UserCard } from '../styles'
import { User } from '../types'

const HomePage = ({ user }: { user: User }) => {
  return (
    <UserCard isActive={user.isActive}>
      <p>{user.name}</p>
    </UserCard>
  )
}

export default HomePage
```

このコードでは、UserCard コンポーネントが受け取る props の型を明示的に定義しています。このように、「export type」を使うことで、コンポーネントが受け取る props の型を一元管理し、再利用することが可能です。これにより、型安全性が高まり、開発の効率が向上します。


Next.js と TypeScript を用いて、export type と interface を適切に使い分ける手法について詳しく解説します。

Next.js と TypeScript で学ぶ、export interface と type


## TL;DR

今日は「never 型」について話します。

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

### never 型とは？

never 型は、TypeScript では、「絶対に何も返さない」ときに使われる特殊な型です。なんだか難しそうですね。でも、実はとても便利な型なんです。

例えば、次のような関数を考えてみてください。

```tsx
function throwError(message: string): never {
  throw new Error(message)
}
```

この関数はエラーを投げるだけで、正常に終了することはないです。だから、この関数の戻り値の型は never になるんですね。

また、無限ループの関数も考えてみましょう。

```tsx
function infiniteLoop(): never {
  while (true) {}
}
```

この関数は終了しないので、戻り値の型は never になります。

never 型は、他のどんな型とも互換性がない特殊な型。だから、「この関数や処理は絶対に正常に終わらない」とコード上で表現することができるんです。

### void 型や never 型の違い

まず、TypeScript にはいくつかの特殊な型がありますが、その中に`void`型と`never`型があります。それぞれがどのような時に使われ、どのような意味を持つのかを説明します。

`void`型は、主に関数が特定の値を返さないことを表すために使用されます。具体的には、関数が値を返さず、`return`文を使わずに終了する場合に、その関数の戻り値の型として`void`を使います。

次に`never`型ですが、この型は、`void`型とは少し違った意味を持ちます。`never`型は、関数が絶対に正常に終了しないことを表すための型です。つまり、`never`型の関数は、例えばエラーを投げるか、無限ループするなど、必ず何らかの形で中断されます。

それぞれの違いを、具体的なコードを見ながら理解してみましょう。

```tsx
function sayHello(): void {
  console.log('Hello, world!')
  // この関数は値を返さない
}

function throwError(): never {
  throw new Error('This is an error!')
  // この関数は常にエラーを投げるため、正常に終了しない
}
```

上記の例で、`sayHello`関数は値を返さないため、戻り値の型として`void`が指定されています。一方、`throwError`関数はエラーを投げるため、常に中断されることを表す`never`型が戻り値として指定されています。

それぞれの型がどういったケースで使われるのか、具体的な例を見ていきましょうね。

#### void 型

`void`型は主に以下のようなケースで使われます。

ログを出力する関数: ログをコンソールに表示するだけで、特定の値を返す必要がない場合、その関数の戻り値は`void`になります。

```tsx
function logMessage(message: string): void {
  console.log(message)
}
```

イベントハンドラ: ボタンがクリックされたときや、フォームが送信されたときなど、特定のイベントが発生したときに実行する関数（イベントハンドラ）は、多くの場合、何も返す必要がありません。

```tsx
function handleClick(): void {
  alert('Button was clicked!')
}
```

#### never 型

一方、`never`型は以下のようなケースで使われます。

常にエラーをスローする関数: 何らかの理由で、特定の関数が呼び出されると常にエラーが発生する場合、その関数の戻り値は`never`になります。

```tsx
function alwaysThrowsError(): never {
  throw new Error('This function always throws an error')
}
```

無限ループ: 無限に処理を繰り返す関数や、特定の条件が満たされるまで処理を繰り返す関数でも、その条件が絶対に満たされないとわかっている場合、戻り値は`never`になります。

```tsx
function infiniteLoop(): never {
  while (true) {
    console.log('This is an infinite loop!')
  }
}
```

以上のように、それぞれの型は異なるケースで使われ、それぞれが異なる目的と機能を果たしています。この違いを理解することで、コードをより明確にし、意図しない動作を防ぐことができます。

これらの型を使うことで、関数の動作をより詳細に制御し、意図しない動作やエラーを防ぐことができるのです。`void`型と`never`型は似ているように見えますが、役割と使い方が大きく異なることを覚えておきましょうね。

### never 型は、どういうときに役立つのか？

`never`型は主に、以下のようなシーンで役立ちます。

#### エラーをスローする関数

`never`型は、関数が絶対に正常に終了しないことを示すのに役立ちます。例えば、エラーハンドリング用の関数などでよく使用されます。

```tsx
function throwError(message: string): never {
  // この関数は絶対に正常に終了しない
  throw new Error(message)
}
```

#### 絶対に終了しないループ

無限ループのように絶対に終了しないループも`never`型を返します。

```tsx
function infiniteLoop(): never {
  while (true) {
    // このループは絶対に終了しない
  }
}
```

#### 型ガード

TypeScript における型ガードでは、特定の型が期待する型であることを確認するための機能を提供します。`never`型は、全ての型のサブタイプとして、型ガードで非常に役立ちます。

```tsx
type Foo = { kind: 'foo'; foo: number }
type Bar = { kind: 'bar'; bar: number }
type Baz = Foo | Bar

function doSomething(arg: Baz) {
  switch (arg.kind) {
    case 'foo':
      return arg.foo
    case 'bar':
      return arg.bar
    default:
      const exhaustiveCheck: never = arg
      return exhaustiveCheck
  }
}
```

この`doSomething`関数では、`arg`が`Foo`型か`Bar`型かによって異なる値を返します。`default`のケースでは、`exhaustiveCheck`は`never`型として定義されていて、もし`Foo`か`Bar`以外の値が渡されるとコンパイルエラーが発生します。これによって、開発者が`Baz`型を更新して新たなサブタイプを追加した場合でも、それが`doSomething`関数で考慮されるようになります。

これらの例からわかるように、`never`型はコードが特定のパスを絶対に通らないことを明示するのに役立ちます。そのため、`never`型はエラーハンドリング、無限ループの作成、または型ガードといった、特定の動作を示す場合に特に有用です。

### Next.js で、never 型を実装

それでは、never 型を Next.js のコードでどう使うかを見てみよう。例えば、API のエラーハンドリングを考えてみましょう。

まずは、API からデータを取得する関数を作るね。エラーが発生した場合には never 型の関数を使ってエラーを投げます。

```tsx
// ファイル名: api.ts
type Data = {
  id: number
  name: string
}

function handleError(response: Response): never {
  throw new Error(`Failed to fetch data: ${response.status}`)
}

async function fetchData(): Promise<Data> {
  const response = await fetch('/api/data')

  if (!response.ok) {
    handleError(response)
  }

  const data: Data = await response.json()
  return data
}
```

次に、React コンポーネントでこの fetchData を呼び出します。

```tsx
// ファイル名: MyComponent.tsx
import { fetchData } from './api'

type Props = {
  /* props definition */
}

const MyComponent = ({}: Props) => {
  React.useEffect(() => {
    fetchData().catch((error) => console.error(error))
  }, [])

  return <div>My Component</div>
}
```

handleError 関数は never 型を返すので、正常に終了することはないよ。だから、もし fetchData がエラーを投げたら、それは catch でキャッチされてエラーメッセージがコンソールに表示されるんですね。

### never 型を実装

ここで、もう少し複雑な使い方を見てみよう。never 型は型安全を保つための有力なツールとなります。

たとえば、すべての TypeScript の型を網羅するような処理を書くときには、never 型が役立つんです。これを "exhaustive checking"（網羅的なチェック）と呼びます。

```tsx
type Animal = 'cat' | 'dog' | 'bird'

function getSound(animal: Animal): string {
  switch (animal) {
    case 'cat':
      return 'meow'
    case 'dog':
      return 'woof'
    case 'bird':
      return 'tweet'
    default:
      const unexpectedAnimal: never = animal
      throw new Error(`Unexpected animal: ${unexpectedAnimal}`)
  }
}
```

ここでは、Animal の型は "cat"、"dog"、"bird" の 3 つだけです。もし新しい動物を追加し忘れたら、never 型の unexpectedAnimal に割り当てられず、コンパイラがエラーを出すんです。これによって、すべての可能性を網羅したコードを書くことが強制され、バグを防げるんです。

### Emotion で実装

最後に、Emotion を使って、スタイルと never 型を組み合わせる例を見てみよう。CSS のプロパティ名と値を型安全に扱うために never 型を使います。

```tsx
// ファイル名: MyStyledComponent.tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

type CSSProperty = 'color' | 'background' | 'margin'
type CSSValue = 'red' | 'blue' | 'green' | '10px'

function getCSSValue(property: CSSProperty): CSSValue {
  switch (property) {
    case 'color':
      return

      'red'
    case 'background':
      return 'blue'
    case 'margin':
      return '10px'
    default:
      const unexpectedProperty: never = property
      throw new Error(`Unexpected property: ${unexpectedProperty}`)
  }
}

type Props = {
  property: CSSProperty
}

const MyStyledComponent = ({ property }: Props) => {
  const value = getCSSValue(property)
  const styles = css`
    ${property}: ${value};
  `

  return <div css={styles}>My Styled Component</div>
}
```

ここでは、getCSSValue 関数は CSS のプロパティ名に応じて適切な値を返すよ。もし存在しないプロパティ名を渡そうとしたら、never 型の unexpectedProperty に割り当てることができず、コンパイラがエラーを出すんです。これによって、CSS のプロパティ名と値が正しく組み合わされることを保証できます。


Next.js と TypeScript を活用し、never 型を理解し、実際に使えるようになるための解説をします。never 型の理解から、Next.js での実装例、さらにはEmotionとの連携まで、深く掘り下げて解説します。

Next.js と TypeScript で、never 型を学ぶ


## TL;DR

今回は「型推論」について一緒に楽しく学んでいきましょう！

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

### 「型推論」って何？

型推論っていうのは、コンピュータが魔法使いみたいになってくれて、我々が書くコードの「型」を自動的に判断してくれる技術です。これは TypeScript という言語に備わっている機能の一つなんですね。

まずは、「型」って何？から解説しましょう。「型」とは、数値や文字列など、データの種類を指す言葉です。例えば、数字の 5 は「数値型」、"hello" という文字は「文字列型」なんです。

```tsx
let number: number = 5 // これは「数値型」
let text: string = 'hello' // これは「文字列型」
```

さて、ここで型推論の出番です。TypeScript はスマートなので、我々が型を指定しなくても、自動的にそれを推測してくれます。

```tsx
let number = 5 // TypeScript はここが「数値型」だと推測してくれる
let text = 'hello' // ここは「文字列型」だと推測してくれる
```

こういう風に、型を明示的に書かなくても型を理解してくれるのが「型推論」の力です。

### 型推論を使えば、型を指定しなくてもよいのか？

型推論を使用すると、TypeScript はコードから変数の型を推測しようとします。このため、型宣言を必要としない場合があります。

しかし、これは型宣言が不要という意味ではありません。型推論は一部のシナリオで非常に有用ですが、常にすべてのケースで正確に型を推測できるわけではありません。また、明示的な型宣言はコードの可読性を向上させ、あなたの意図を明確に伝えることができます。

たとえば、以下のコードでは、TypeScript は`result`の型を推測できます。

```typescript
const add = (a: number, b: number) => {
  return a + b
}

const result = add(1, 2)
```

この場合、`result`は`add`関数の結果を保持しているため、TypeScript はそれが`number`型であると自動的に推測します。そのため、`result`の型を明示的に宣言する必要はありません。

しかし、型推論は常に十分ではない場合があります。例えば、関数の引数や複雑なオブジェクトについては、引数の型やオブジェクトの形状を明示的に宣言したほうが良い場合があります。これにより、エラーを早期にキャッチしたり、関数が何を期待しているのかを他の開発者に明確に伝えることができます。

要するに、型推論は非常に有用ですが、それだけに依存するのではなく、適切な場所で明示的な型宣言を行うことが、TypeScript を最大限に活用するための良い戦略です。

次の例を見てみましょう。

```tsx
const a = 2 + 3
```

上の例では、数値 2 と 3 を加算しています。その結果を変数`a`に格納しています。しかし、このコードには明示的な型宣言がありません。それでも TypeScript は型推論の力を使って、`a`の型が`number`であると自動的に認識します。

なぜなら、JavaScript（そして TypeScript も）は、2 と 3 のようなリテラル値が数値であると認識し、それらを加算するときに結果もまた数値になると理解しているからです。

そのため、次のように書いても結果は同じです。

```tsx
const a: number = 2 + 3
```

ただし、この場合は`a`の型を明示的に指定しています。このように型を明示的に書くことで、もし間違えた値を代入しようとした場合、TypeScript が型チェックを行い、エラーを通知してくれます。

TypeScript の型推論は、我々が明示的に型を書かなくても、適切な型を TypeScript が推測してくれるという強力な機能です。しかし、コードの可読性や型の安全性を確保するために、場合によっては型を明示的に書くことも重要です。

### リテラルと型の対応表

それぞれのリテラルとその対応する TypeScript の型を示した表を以下に作成しました。

| リテラル       | TypeScript の型 |
| :------------- | :-------------- |
| `"Hello"`      | string          |
| `123`          | number          |
| `true / false` | boolean         |
| `{}`           | object          |
| `null`         | null            |
| `undefined`    | undefined       |
| `[]`           | any[]           |
| `["Hello"]`    | string[]        |
| `[123, 456]`   | number[]        |

上記表は一部を表しています。TypeScript では複雑な型も表現できます。たとえばオブジェクトや配列の中にさまざまな型の値を格納することができます。また、カスタム型を定義することも可能です。

```tsx
// オブジェクトの例
const obj: { name: string; age: number } = { name: 'Alice', age: 20 }

// 配列の例
const arr: (string | number)[] = ['Alice', 20]
```

このように、TypeScript は JavaScript の動的な型システムに静的型付けの能力を加えることで、より安全で予測可能なコードを書くのを助けてくれます。

### コンポーネント呼び出し先の型推論

TypeScript は React コンポーネントの開発においても強力なツールとなります。特に、コンポーネントの props（プロパティ）に型を付けることで、エラーを早期に検出するのに役立ちます。また、コンポーネントが期待する props の型を明示的に示すことで、他の開発者がコンポーネントを正しく使う助けにもなります。

次に示すように、TypeScript で React コンポーネントを作るときには、まずコンポーネントが受け取る props の型を定義します。

```tsx
type ButtonProps = {
  onClick: () => void
  label: string
}

const Button = ({ onClick, label }: ButtonProps) => <button onClick={onClick}>{label}</button>
```

ここで、`ButtonProps`という型を定義し、それを`Button`コンポーネントに適用しています。この`ButtonProps`は 2 つのフィールドを持っています：`onClick`は関数であり、`label`は文字列です。

さて、このコンポーネントを呼び出すとき、TypeScript の型推論が役立ちます。

```tsx
<Button onClick={() => console.log('clicked!')} label="Click me" />
```

このコードを見て、TypeScript は`Button`コンポーネントが期待する props の型（つまり`ButtonProps`）を見て、渡された props がそれと一致するかどうかを確認します。この場合、`onClick`と`label`の両方が適切な型で提供されているため、問題ありません。

しかし、もし`label`として数値を渡そうとすると、

```tsx
<Button onClick={() => console.log('clicked!')} label={123} />
```

ここで、TypeScript は`Button`コンポーネントが`label`として文字列を期待していることを知っているので、型エラーをすぐに報告します。これにより、開発者はコードをデプロイする前にこのエラーを修正できます。

このように、TypeScript の型推論はコンポーネントの props の型の一貫性を保つための強力なツールとなります。

### Next.js で、「型推論」を使う

さて、Next.js の中で型推論をどのように使っていくか見ていきましょう。まずは、簡単なコンポーネントを作ってみよう。

```tsx
// pages/index.tsx

type Props = {
  name: string
}

const HomePage = ({ name }: Props) => {
  return <div>Hello, {name}!</div>
}

export default HomePage
```

このコンポーネントは、`name` というプロパティを受け取り、それを画面に表示するようになっています。`name` の型は `string`（文字列型）となっています。

この `HomePage` コンポーネントは、Next.js が自動的に `/` のパスで表示されるようになります。そして、`name` プロパティを渡すことで、「Hello, [name]!」と表示されます。

さて、ここで型推論の力を見せる時がきました。`HomePage` コンポーネントに `name` プロパティを渡す時、TypeScript はその型を推測してくれます。

```tsx
// pages/index.tsx

const HomePage = ({ name }) => {
  // TypeScript は `name` が `string` 型だと推測してくれます
  return <div>Hello, {name}!</div>
}

export default HomePage
```

このように、型推論を利用すれば、コードをシンプルに保ちつつ、安全性を確保することができます。

### 「型推論」を使うテクニカルな例

型推論は、もっと複雑な場面でも役立ちます。例えば、関数の引数や戻り値の型を自動的に推測することができます。次の例を見てみましょう。

```tsx
// utils/calculate.ts

type CalculateProps = {
  num1: number
  num2: number
}

const calculateSum = ({ num1, num2 }: CalculateProps) => {
  return num1 + num2
}

export default calculateSum
```

この `calculateSum` 関数は、`num1` と `num2` を受け取り、その和を返します。TypeScript は、この関数の引数と戻り値の型を自動的に推測してくれます。

```tsx
// utils/calculate.ts

const calculateSum = ({ num1, num2 }) => {
  // TypeScript は引数の型と戻り値の型を推測してくれます
  return num1 + num2
}

export default calculateSum
```

これにより、関数を使う側は、引数と戻り値の型を意識せずにコーディングを進めることができます。型推論は、より良い開発体験を提供します。

### Emotion での実装

最後に、Emotion を用いた型推論の活用例を見ていきましょう。Emotion は、CSS-in-JS のライブラリで、スタイルの定義も JavaScript で行います。これにより、型推論の恩恵を受けられます。

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

type ButtonProps = {
  color: string
}

const Button = ({ color }: ButtonProps) => {
  return (
    <button
      css={css`
        background-color: ${color};
      `}
    >
      Click me
    </button>
  )
}

export default Button
```

この `Button` コンポーネントは、`color` プロパティを受け取り、それを背景色に適用します。TypeScript は `color` プロパティの型を自動的に推測します。

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

const Button = ({ color }) => {
  // TypeScript は `color` が `string` 型だと推測してくれます
  return (
    <button
      css={css`
        background-color: ${color};
      `}
    >
      Click me
    </button>
  )
}

export default Button
```

Emotion を使っている場合でも、TypeScript の型推論はしっかりと機能します。これにより、スタイリングに関するコードも、より簡潔で安全に保つことができます。

以上が、Next.js と TypeScript を組み合わせた際の、型推論の利用例となります。初心者でもわかるように解説してきましたが、どうでしょうか？型推論は、コードの安全性を確保しつつ、コードをシンプルに保つ強力なツールです。是非、あなたのコーディングに活用してみてくださいね！


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 で、ブックマーク機能を実装

2023-06-19

Next.js と TypeScript で学ぶ、export interface と type

2023-06-18

Next.js と TypeScript で、never 型を学ぶ

2023-06-16

Next.js と TypeScript で、型推論を理解する