
## TL;DR

このページでは、JavaScript IndexedDB の魅力とその使い方を解説しますね。一言で言うと、IndexedDB は JavaScript で使える強力なデータベースです。

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

### IndexedDB とは？

皆さんはデータをどこに保存しますか？ローカルの変数？それともサーバー？どちらも有効な方法ですが、ブラウザ内にも強力なデータストレージが存在します。それが IndexedDB です。IndexedDB は JavaScript で利用できる Web 標準のデータベースで、オフラインでも安心して使えます。

IndexedDB の利用法は非常にシンプルです。まずデータベースを開きます。

```ts
const openRequest = indexedDB.open('myDatabase', 1)
```

このように`indexedDB.open`メソッドを呼び出すだけで、新しいデータベースが開かれます。この際、第一引数にはデータベースの名前を、第二引数にはデータベースのバージョンを指定します。

### 第二引数

IndexedDB の `open` メソッドの第二引数で指定するのはデータベースのバージョン番号です。このバージョン番号は、整数で指定します。

```ts
let openRequest = indexedDB.open('myDatabase', 1)
```

上記のコードでは、データベース "myDatabase" のバージョン 1 を開くように指定しています。

バージョンはデータベースのスキーマ（構造）を管理するために使用されます。たとえば、新しいオブジェクトストアを作成したり、既存のオブジェクトストアにインデックスを追加したりする場合、データベースのバージョンを上げる必要があります。

新しいバージョンのデータベースを開くと、`onupgradeneeded` イベントが発火します。このイベント内では、データベースのスキーマを変更することができます。つまり、新しいオブジェクトストアを作成したり、インデックスを追加したりすることができます。

また、データベースのバージョンは一度設定すると下げることはできません。これは、データの整合性を保つための重要な機能です。

以下に、新しいバージョンのデータベースを開いて新しいオブジェクトストアを作成する例を示します。

```ts
let openRequest = indexedDB.open('myDatabase', 2) // バージョンを2に上げる

openRequest.onupgradeneeded = function () {
  let db = openRequest.result
  if (!db.objectStoreNames.contains('magazines')) {
    // "magazines"という名前のオブジェクトストアが存在しなければ作成
    db.createObjectStore('magazines', { keyPath: 'id' }) // キーとなるパスを指定
  }
}
```

ここでは、バージョンを 2 に上げて "magazines" という新しいオブジェクトストアを作成しています。

このように、バージョン管理を理解し利用することで、データベースのスキーマを効果的に管理することができます。

### データの保持期間、消失条件

IndexedDB のデータベースは、ブラウザが管理します。ユーザーが明示的にブラウザのストレージをクリアしない限り、データは消えません。また、IndexedDB は Web ページがリロードされてもデータが保持されるため、セッション間でデータを保存するのに適しています。

ただし、以下のような状況でデータが消失する可能性があります。

1. ユーザーが自身のブラウザの設定でデータをクリアする。
2. ブラウザがディスクスペースを確保するためにデータを削除する。これは特にデバイスの空き容量が少ない場合に発生します。この挙動はブラウザによるものなので、どのデータが削除されるかは確定的ではありません。
3. 一部のプライバシーフォーカスのブラウザは、閲覧履歴をクリアするための設定がある。これを使うと IndexedDB のデータも消える可能性があります。

したがって、IndexedDB は永続的なストレージとして使用できますが、データが消失しないという保証はありません。重要なデータはサーバー側にもバックアップを取るなど、適切なデータ管理を行うことが重要です。

### データの作成と読み出し

それでは、実際にデータを IndexedDB に保存してみましょう。そのためには、まずオブジェクトストアという概念を理解する必要があります。オブジェクトストアはデータベース内の「棚」のようなもので、データの保存場所を定義します。

```ts
type DBEvent = Event & {
  target: IDBOpenDBRequest
}

const openRequest = indexedDB.open('myDatabase', 1)

openRequest.onupgradeneeded = (event: DBEvent) => {
  const db = event.target.result
  db.createObjectStore('myObjectStore')
}
```

このコードは新しいデータベースを開き、新しいオブジェクトストアを作成します。`onupgradeneeded`イベントはデータベースが開かれた時、またはバージョンが上がった時に呼び出されます。ここでオブジェクトストアを作成することができます。

そしてデータを保存するには、オブジェクトストアの`add`メソッドを使用します。

```ts
const openRequest = indexedDB.open('myDatabase', 1)

openRequest.onsuccess = (event: DBEvent) => {
  const db = event.target.result
  const transaction = db.transaction('myObjectStore', 'readwrite')
  const objectStore = transaction.objectStore('myObjectStore')
  objectStore.add({ hello: 'world' })
}
```

以上でデータの保存ができます。`onsuccess`イベントはデータベースが正常に開かれた時に発火します。そこでトランザクションを作成し、その中にオブジェクトストアを開きます。最後に`add`メソッドでデータを追加します。

### データの更新と削除

データの更新や削除も同様に簡単に行うことができます。更新には`put`メソッドを、削除には`delete`メソッドを使用します。

```ts
const openRequest = indexedDB.open('myDatabase', 1)

openRequest.onsuccess = (event: DBEvent) => {
  const db = event.target.result
  const transaction = db.transaction('myObjectStore', 'readwrite')
  const objectStore = transaction.objectStore('myObjectStore')

  // Update
  objectStore.put({ hello: 'new world' }, 'myKey')

  // Delete
  objectStore.delete('myKey')
}
```

このように IndexedDB を使うと、データの操作が非常に簡単になります。しかもこれらのデータはブラウザ内に保存されるため、サーバーとの通信がなくてもデータの操作が可能です。

### オブジェクトストア

IndexedDB の中に存在する重要な考え方の一つが、オブジェクトストアです。IndexedDB は、JavaScript でブラウザ内のデータベースを操作するための API ですが、その中でデータを保存するための場所としてオブジェクトストアが存在します。

オブジェクトストアは、名前の通り、JavaScript のオブジェクトを保存する場所であり、それぞれのオブジェクトストアにはユニークな名前がつけられています。一つの IndexedDB データベース内には複数のオブジェクトストアを作成することができます。これは、リレーショナルデータベースのテーブルに似ていると考えると理解が深まるかもしれません。

また、オブジェクトストア内の各オブジェクトはキーによって一意に識別されます。このキーは、オブジェクトのプロパティの一つである場合もありますし、オブジェクトとは独立にデータベースが生成する場合もあります。

以下に、オブジェクトストアを作成し、データを保存する基本的なコードを示します。

```ts
// データベースを開く
let openRequest = indexedDB.open('myDatabase', 1)

openRequest.onupgradeneeded = function () {
  // データベースのバージョンが上がったとき、オブジェクトストアを作成
  let db = openRequest.result
  if (!db.objectStoreNames.contains('books')) {
    // "books"という名前のオブジェクトストアが存在しなければ作成
    db.createObjectStore('books', { keyPath: 'isbn' }) // キーとなるパスを指定
  }
}

openRequest.onsuccess = function () {
  let db = openRequest.result
  let transaction = db.transaction('books', 'readwrite') // "books"というオブジェクトストアに対してトランザクションを開始
  let books = transaction.objectStore('books') // オブジェクトストアを取得

  // データを追加
  let request = books.add({
    isbn: '123456',
    title: 'JavaScript入門',
    author: '田中 太郎',
  })

  request.onsuccess = function () {
    console.log('書籍が追加されました')
  }
}
```

ここでは、まず `indexedDB.open` を用いてデータベースを開いています。その後、`onupgradeneeded` イベント内で、"books"という名前のオブジェクトストアを作成しています。`createObjectStore` の第二引数にはオプションを指定し、ここでは `keyPath` を指定しています。この `keyPath` は、オブジェクト内の何をキーとするかを指定するオプションで、ここでは "isbn" をキーとしています。

そして、`onsuccess` イベント内で、オブジェクトストアに対するトランザクションを開始し、オブジェクトストアを取得しています。そして、`add` メソッドを使ってデータを追加しています。

このように、オブジェクトストアを理解し使いこなすことで、JavaScript でブラウザ内のデータベースを柔軟に操作することができます。


IndexedDBの細かな動きと、それをTypeScriptで扱う際のテクニックを解説します。

JavaScript の IndexedDB を使ってブラウザにデータを保存しよう

TypeScript の基礎知識ための初心者向けチートシートです。簡潔で着実に理解を深めることができます。

TypeScript の基礎を学ぶ初心者向けチートシート


## TL;DR

今回は TypeScript の lookup 型について一緒に学びましょう。一言でいうと、lookup 型は既存の型から特定のプロパティの型を「引き出す」ための型です。

以下が今回の開発環境です。

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

### lookup 型とは？

lookup 型は、TypeScript でよく使われる型の一つです。TypeScript では、型を「見つける」ための特殊な構文があり、その一つが lookup 型です。これは既存の型から特定のプロパティの型を「引き出す」ことができます。

たとえば、次のような型があったとします。

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

この`User`型から、`address`プロパティの型を取り出したい場合、lookup 型を使って以下のように書けます。

```tsx
type Address = User['address']
```

これで、`Address`型は`User`型の`address`プロパティの型となります。つまり、次のようになります。

```tsx
type Address = {
  street: string
  city: string
}
```

### ユニオン型のキーの抽出

ユニオン型からキーを抽出するときには、lookup 型を用いることができます。

```tsx
type PetTypes = 'dog' | 'cat' | 'fish'
type PetSpeak = {
  dog: 'bark'
  cat: 'meow'
  fish: 'bubble'
}

type DogSpeak = PetSpeak['dog'] // 'bark'
```

上記の例では、`PetSpeak`型から`'dog'`のキーを抽出して、その結果の型（`'bark'`）を`DogSpeak`型としています。

### 動的なキーの抽出

あるキーがどの値を持つかを動的に決定する場合も、lookup 型が役立ちます。

```tsx
function getSpeak(pet: PetTypes): PetSpeak[PetTypes] {
  const petSpeak: PetSpeak = {
    dog: 'bark',
    cat: 'meow',
    fish: 'bubble',
  }

  return petSpeak[pet]
}
```

上記の関数`getSpeak`では、渡されたペットの種類に基づいて、対応する「話し言葉」を返します。ここでは、lookup 型を用いて動的に返す値の型を決定しています。

以上のように、lookup 型はそのキーを用いて型情報を抽出することを可能にするため、TypeScript の型システムにおいてとても便利なツールとなります。

### lookup 型の応用

では、もっと実践的な例を見てみましょう。lookup 型を使うことで、より具体的な型を抽出できます。

```tsx
type Response = {
  users: {
    id: number
    name: string
    email: string
  }[]
  products: {
    id: number
    name: string
    price: number
  }[]
}

type Users = Response['users']
type User = Users[0]
type Products = Response['products']
type Product = Products[0]
```

これで`User`型や`Product`型を個々に使用できます。

```tsx
const user: User = { id: 1, name: 'Alice', email: 'alice@example.com' }
const product: Product = { id: 1, name: 'Apple', price: 100 }
```

lookup 型を理解すると、より詳細な型情報を効果的に管理できます。TypeScript を使用する際には、このような型の取り扱いが非常に役立ちます。

### lookup 型の制限

しかし、lookup 型には一部制限があります。それは、「数値リテラル型」や「文字列リテラル型」に対する lookup が可能である一方、変数に対する lookup は型安全を保証できないため、TypeScript では許可されていません。

例えば以下のようなコードを考えてみてください。

```tsx
type Colors = {
  red: '#FF0000'
  green: '#00FF00'
  blue: '#0000FF'
}

const color = 'red'
const hex: Colors[color] // Type error
```

ここでは`color`という変数を使って lookup を試みていますが、これは TypeScript の型チェックに違反するためエラーとなります。なぜなら、`color`が実行時にどの値を持つかはコンパイル時には分からないからです。したがって、型安全を保証するために、TypeScript ではこのような操作は許可されていません。


TypeScriptのlookup型を詳細に解説します。これはTypeScriptでよく用いられる型の一つです。

TypeScript の lookup 型をマスターしよう


## TL;DR

今日は、JavaScript の localStorage について学びますね。一言でいうと localStorage とは、ブラウザにデータを永続的に保存するための手段です。

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

データをブラウザに保存させる方法として、次のようなものがあります。今回は、localStorage について学びます。

- localStorage
- indexedDB

### localStorage とは？

ブラウザに搭載されている機能で、ユーザーの情報を保持することができます。localStorage には、データを保存したり、取り出したり、削除したりするためのメソッドが備えられています。

#### 基本的な使い方

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

// データを取り出す
let data = localStorage.getItem('myKey')
console.log(data) // "myValue"

// データを削除
localStorage.removeItem('myKey')
```

これらのメソッドを使って、私たちは簡単にデータをブラウザに保存できます。そして、ブラウザを閉じてもデータが消えないので、永続的に保存できるんです。

### 機密情報の保存はしないように

`localStorage`はウェブブラウザ上のデータ保存手段ですが、セキュリティの観点からは非常に限定的なものです。その理由は、データがブラウザ上に平文（暗号化されていない形式）で保存されるため、悪意あるスクリプトによって容易にアクセスされ、読み取られる可能性があるからです。

特に、ユーザーの個人情報、パスワード、金融情報などの機密性の高い情報は、`localStorage`に保存するべきではありません。これらの情報を安全に保管するためには、サーバーサイドでの安全なデータベースや、適切な暗号化技術の利用が必要となります。

また、`localStorage`は同一オリジンの全てのウィンドウとタブで共有されるため、一部の情報はユーザー間で漏洩する可能性があります。

要するに、`localStorage`は非常に便利な機能ですが、使用する情報と目的によってはその使用が適切でない場合もあります。そのため、開発者はどのような情報を`localStorage`に保存するか、慎重に考えるべきです。

### データの保存期間、消失条件

localStorage にはデータの有効期限が存在せず、ユーザーが手動で削除しない限り、データは永続的に保存されます。ただし、いくつかの特異な状況によってはデータが消失する可能性があります。

1. ユーザーがブラウザのキャッシュや Cookie を削除すると、localStorage のデータも一緒に削除されることがあります。

2. ブラウザによっては、ディスクスペースが不足すると localStorage のデータが削除されることがあります。

3. プライバシーを保護するためのブラウザ拡張機能や設定が、localStorage のデータを削除することがあります。

4. 特にモバイルデバイスでは、システムがストレージスペースを解放するために localStorage のデータを削除することがあります。

localStorage はブラウザの内部的な仕組みで、キーと値の形式でデータを保存します。キーと値はどちらも文字列として保存されます。localStorage は基本的にはシンプルなストレージで、より複雑な構造のデータは適切に文字列に変換する必要があります。

具体的には、保存された各データ項目はキーと値のペアとして保持され、これらのペアはブラウザのディスク上に保存されます。ブラウザは、各ウェブサイトまたはウェブアプリケーションごとに独自の localStorage エリアを持っており、他のウェブサイトからはアクセスできません。

したがって、内部的には、各ウェブサイトまたはウェブアプリケーションの localStorage データはそれぞれ独立して保存されています。これは、localStorage のデータが同一のオリジンポリシーに従うためで、ウェブサイトは自身のオリジン（つまり同じドメイン、プロトコル、ポート）からのみ localStorage にアクセスできます。

なお、保存されたデータはブラウザを閉じても消去されず、明示的に削除するか、ブラウザのデータ消去機能を使って削除しない限り、永続的に保持されます。各ブラウザは一定の容量制限を持ち、これを超えると新たなデータの保存が拒否されます。大抵のブラウザでは、この制限は約 5MB とされています。

### 大量のデータを保存したい場合

大量のデータや永続的なデータを保存する必要がある場合は、`IndexedDB` など、他のブラウザストレージのオプションを検討するか、サーバー側でデータを管理することを考えると良いでしょう。

### どのような形で保存されているのか？

localStorage 自体はオブジェクト形式でデータを保存することはできません。localStorage は、データを「文字列」形式でのみ保存します。それは、基本的には単純なキーと値のペアの形で、どちらも文字列型です。

しかし、JavaScript のオブジェクトを文字列に変換する方法があるため、それを使ってオブジェクトを保存することができます。具体的には、JSON.stringify メソッドを使ってオブジェクトを JSON 形式の文字列に変換し、それを localStorage に保存します。

そして、データを取り出すときには、JSON.parse メソッドを使って文字列をオブジェクトに戻します。これにより、あたかもオブジェクトを直接保存しているかのように扱うことができます。

例えば次のようになります。

```tsx
// オブジェクトを保存
const obj = { url: 'https://example.com', title: 'Example' }
localStorage.setItem('key', JSON.stringify(obj))

// オブジェクトを取り出す
const storedObj = JSON.parse(localStorage.getItem('key') || '')
console.log(storedObj.url) // 'https://example.com'
console.log(storedObj.title) // 'Example'
```

このように、localStorage 自体はオブジェクトを直接保存することはできませんが、JavaScript の機能を利用することで間接的にオブジェクトを保存することができます。

### 現在表示している URL のパラメータなどを保存することはできるのか？

URL のパラメータも文字列であるため、localStorage に保存することは可能です。Next.js を使っている場合は、`router.query`で取得できます。

例えば、Next.js では以下のように現在表示している URL のパラメータを取得し、localStorage に保存することができます。

```tsx
import { useRouter } from 'next/router'

const Component = () => {
  const router = useRouter();

  // URLパラメータを取得
  const params = router.query;

  // パラメータを文字列に変換して保存
  localStorage.setItem('params', JSON.stringify(params));

  return (
    // 省略
  )
}
```

ここで`router.query`は、現在の URL のパラメータを含むオブジェクトです。オブジェクトを使って動的ルーティングの中身を取得することが可能です。

それを`JSON.stringify`を使って文字列に変換し、localStorage に保存しています。

保存したデータを取り出すときは、同じように`JSON.parse`を使ってオブジェクトに戻すことができます。

```tsx
const params = JSON.parse(localStorage.getItem('params') || '{}')
```

以上のように、現在表示している URL のパラメータを保存し、後で取り出すことができます。そのため、ページ間のナビゲーションやリロード時にパラメータを維持することなどが可能になります。

### データを書き込めない場合

ブラウザのローカルストレージにデータを保存しようとしたとき、容量が不足している場合はエラーが発生します。その場合、古いデータを削除してから新しいデータを書き込むことは可能です。

ただし、それを行うには、削除するデータを適切に選択し、エラーハンドリングを正確に行う必要があります。また、ユーザーに影響を与えないように、削除されるデータについては事前に適切に警告したり、許可を得るなどの対応が求められます。

以下に、その基本的なコードを示します。

```tsx
const key = 'myData'
const data = {
  /* some data */
}

try {
  localStorage.setItem(key, JSON.stringify(data))
} catch (error) {
  if (error instanceof DOMException && error.code === 22) {
    // ストレージが満杯である場合のエラーハンドリング
    // ここでは、古いデータを削除することを想定しています
    localStorage.removeItem('oldKey') // 例えば、「oldKey」というキーのデータを削除します
    // 再度データの書き込みを試みる
    try {
      localStorage.setItem(key, JSON.stringify(data))
    } catch (error) {
      console.error('データの書き込みに再度失敗しました')
    }
  } else {
    console.error('データの書き込みに失敗しました', error)
  }
}
```

ただし、これはあくまで基本的な例であり、実際のアプリケーションではさまざまなエラーケースやユーザーエクスペリエンスを考慮する必要があります。また、ローカルストレージの制限に頻繁にぶつかる場合は、IndexedDB などの他のストレージオプションを検討することをおすすめします。

### React で localStorage を使う

さて、今度は React で localStorage を使ってみましょう。ここでは、あるボタンをクリックすると入力したテキストが localStorage に保存されるというシンプルなアプリを作ります。

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

type InputProps = {
  placeholder: string
  buttonText: string
}

const TextInput = ({ placeholder, buttonText }: InputProps) => {
  const [text, setText] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value)
  }

  const handleClick = () => {
    localStorage.setItem('text', text)
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} placeholder={placeholder} />
      <button onClick={handleClick}>{buttonText}</button>
    </div>
  )
}

export default TextInput
```

上記のコードでは、`<TextInput />`というコンポーネントを定義しています。これは単なるテキスト入力フィールドとボタンから成るコンポーネントです。何かテキストを入力して、ボタンをクリックすると、そのテキストは localStorage に保存されます。

`handleChange`関数はテキスト入力フィールドの値が変わるたびに呼び出され、その値を`text`ステートに設定します。`handleClick`関数はボタンがクリックされると呼び出され、現在の`text`ステートの値を localStorage に保存します。

### localStorage のデータを表示する

さて、次は localStorage に保存されたデータを表示するコンポーネントを作ります。ここでは、ページを読み込んだ時に localStorage からデータを取り出し、それを表示します。

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

const TextDisplay = () => {
  const [text, setText] = useState('')

  useEffect(() => {
    const storedText = localStorage.getItem('text')
    setText(storedText ? storedText : '')
  }, [])

  return <div>{text}</div>
}

export default TextDisplay
```

このコンポーネントでは、React の`useEffect`フックを使っています。`useEffect`フックは、コンポーネントが初めて描画された後（つまり、ページが読み込まれた後）に実行されます。その中で、localStorage からデータを取り出し、それを`text`ステートに設定しています。

### ブックマーク機能を作る

ブックマークボタンを押すと、ブックマーク一覧でそれが表示される機能を作ってみます。

まずはお気に入りボタンを作成し、それがクリックされた時に特定の情報（この場合はページの URL とタイトル）を localStorage に保存します。

```tsx
// components/FavoriteButton.tsx
import { MouseEvent } from 'react'

type Props = {
  url: string
  title: string
}

const FavoriteButton = ({ url, title }: Props) => {
  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault()

    const favorites = JSON.parse(localStorage.getItem('favorites') || '[]')
    const newFavorite = { url, title }

    localStorage.setItem('favorites', JSON.stringify([...favorites, newFavorite]))
  }

  return <button onClick={handleClick}>お気に入りに追加</button>
}

export default FavoriteButton
```

上記のコードは「お気に入りに追加」ボタンのコンポーネントを作成します。このボタンがクリックされたら、`handleClick` 関数が実行され、localStorage の 'favorites' というキーに保存されているデータを取得します。まだ何も保存されていない場合は、デフォルトの値として空の配列が返されます。

新しいお気に入り（URL とタイトル）を作成し、それを既存のお気に入り配列に追加します。最後に、新たに作成したお気に入り配列を JSON 形式に変換し、localStorage に保存します。

次に、お気に入り一覧ページを作成します。このページでは、localStorage から保存されているお気に入りの情報を取得し、それを表示します。

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

type Favorite = {
  url: string
  title: string
}

const FavoritesPage = () => {
  const [favorites, setFavorites] = useState<Favorite[]>([])

  useEffect(() => {
    const savedFavorites = JSON.parse(localStorage.getItem('favorites') || '[]')
    setFavorites(savedFavorites)
  }, [])

  return (
    <div>
      <h1>お気に入り一覧</h1>
      {favorites.map((favorite, index) => (
        <div key={index}>
          <a href={favorite.url}>{favorite.title}</a>
        </div>
      ))}
    </div>
  )
}

export default FavoritesPage
```

上記のコードは、お気に入り一覧ページのコンポーネントを作成します。ページが読み込まれたときに `useEffect` フックが実行され、localStorage から 'favorites' というキーで保存されているデータを取得します。その後、取得したデータを `setFavorites` を使用して favorites の状態に設定します。これにより、ページにお気に入りのリストが表示されます。

以上が JavaScript の localStorage を用いて「お気に入りボタン」の機能を実装する基本的な手順です。ユーザーがボタンを押すと、そのページの URL とタイトルが localStorage に保存され、お気に入り一覧ページでそれが表示されるようになります。この機能はシンプルながらも、ユーザーの利便性を大幅に向上させることができます。


JavaScript の localStorage を利用したデータ永続化を解説します。

JavaScript の localStorage を使ってデータを保存しよう！


## TL;DR

このページでは、JavaScript（TypeScript） を使った複合検索の実装方法について解説しますね。複合検索は、複数の条件を組み合わせて情報を取得する考え方です。たとえば、オンラインショッピングサイトにて「価格」、「評価」、「ブランド名」の 3 つの条件で商品を検索することができます。これが複合検索の一例です。

### 開発環境

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

### 複合検索のポイント

複合検索のポイントをまとめると概ね次の 3 点が必要です。

- filter メソッドを使う
- includes メソッドを使う
- 非同期処理(Async/Await)とフェッチ API で、外部 API からデータを取得する

#### fileter メソッド

JavaScript の`filter`メソッドは、配列の中から特定の条件に一致する要素だけを取り出すのに非常に便利です。複合検索のように複数の条件を満たす要素を見つける場合には特に役立ちます。

```js
const numbers = [1, 2, 3, 4, 5, 6]
const evenNumbers = numbers.filter((number) => number % 2 === 0)

console.log(evenNumbers) // [2, 4, 6] が出力されます
```

#### includes メソッド

JavaScript の`includes`メソッドは配列や文字列に特定の要素や文字列が含まれているかを調べます。要素が見つかった場合は`true`、見つからなかった場合は`false`を返します。これにより、検索キーワードがデータ内に存在するかどうかを手早く確認することができます。

```js
const fruits = ['apple', 'banana', 'cherry']
const hasApple = fruits.includes('apple')

console.log(hasApple) // true が出力されます
```

#### 非同期処理(Async/Await)とフェッチ API

フェッチ API は、JavaScript でネットワークリクエスト（主に HTTP リクエスト）を行うためのものです。非同期処理で、Promise を返します。これを利用することで、データを取得したり、API にデータを送信したりすることが可能です。

```js
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('エラー:', error))
```

### JavaScript で複合検索を実装する

まずは、簡単な HTML と JavaScript で実装してみましょう。

テキストフィールド、ラジオボタン、セレクトボタンを配置します。

```html
<label for="name">名前：</label>
<input type="text" id="name" />

<label for="category">カテゴリー：</label>
<input type="radio" id="fruit" name="category" value="Fruit" />
<label for="fruit">フルーツ</label>
<input type="radio" id="vegetable" name="category" value="Vegetable" />
<label for="vegetable">野菜</label>

<button onclick="search()">検索</button>

<ul id="results"></ul>
```

そして JavaScript のコードです。HTML の検索ボタンがクリックされた時に、入力された名前と選択されたカテゴリーを取得し、それらを条件として商品リストを検索します。検索結果は HTML のリストに追加されます。

```javascript
const products = [
  { id: 1, name: 'Apple', category: 'Fruit' },
  { id: 2, name: 'Banana', category: 'Fruit' },
  { id: 3, name: 'Orange', category: 'Fruit' },
  { id: 4, name: 'Tomato', category: 'Vegetable' },
  { id: 5, name: 'Carrot', category: 'Vegetable' },
]

function search() {
  // 入力された名前と選択されたカテゴリーを取得
  const name = document.getElementById('name').value
  const category = document.querySelector('input[name="category"]:checked').value

  // 商品リストを検索
  const results = products.filter((product) => (!name || product.name.includes(name)) && (!category || product.category === category))

  // 検索結果を表示
  const resultsElement = document.getElementById('results')
  resultsElement.innerHTML = ''
  for (const product of results) {
    const listItem = document.createElement('li')
    listItem.textContent = `${product.name} (${product.category})`
    resultsElement.appendChild(listItem)
  }
}
```

以上で、JavaScript と HTML を使った複合検索のサンプルが完成です。なお、上記コードはサンプルであり、実際の実装では入力値の検証やエラーハンドリングなどの処理が必要となります。

### TypeScript で複合検索を実装する

JavaScript 部分を TypeScript に書き換えたものは以下のようになります。

```tsx
// "Product"という名前の型を作ります。これは商品の情報を表すものです。
type Product = {
  id: number // 商品の番号
  name: string // 商品の名前
  category: string // 商品のカテゴリー（種類）
}

// 商品のリストを作ります。
const products: Product[] = [
  { id: 1, name: 'Apple', category: 'Fruit' },
  { id: 2, name: 'Banana', category: 'Fruit' },
  { id: 3, name: 'Orange', category: 'Fruit' },
  { id: 4, name: 'Tomato', category: 'Vegetable' },
  { id: 5, name: 'Carrot', category: 'Vegetable' },
]

// 検索の機能を作ります。
function search(): void {
  // 入力した名前と選択したカテゴリーを取得します。
  const name = (document.getElementById('name') as HTMLInputElement).value
  const category = (document.querySelector('input[name="category"]:checked') as HTMLInputElement).value

  // 入力と選択に合う商品をリストから探します。
  const results = products.filter((product) => (!name || product.name.includes(name)) && (!category || product.category === category))

  // 結果を表示する場所を探します。
  const resultsElement = document.getElementById('results')
  if (resultsElement) {
    // 前回の結果を消します。
    resultsElement.innerHTML = ''
    // 新しい結果を表示します。
    for (const product of results) {
      const listItem = document.createElement('li')
      listItem.textContent = `${product.name} (${product.category})`
      if (resultsElement) {
        resultsElement.appendChild(listItem)
      }
    }
  }
}
```

ここでの重要な TypeScript の特性は、型アノテーションと型アサーションです。`Product`型を定義して`products`配列に適用しています。また、DOM メソッドから返される値が具体的にどの型かを TypeScript に教えている部分が型アサーションとなります。これにより、TypeScript はそれらの値が特定のメソッドを持つことを認識し、その利用を可能にします。

また、関数`search`の戻り値の型を`void`と明示しています。これにより、この関数が値を返さないことを TypeScript に伝えています。

### API から複合検索の結果を取得する

API を使う場合、最初にすべてのデータを API からフェッチして、そのデータに対してフィルタリングを行う方法があります。以下にその実装例を示します。

```html
<label>
  検索語:
  <input type="text" id="searchTerm" />
</label>

<label>
  ユーザID:
  <input type="number" id="userId" />
</label>

<button id="searchButton">検索</button>

<div id="results"></div>
```

JSON ファイルは、<a href="https://jsonplaceholder.typicode.com/posts" target="_blank">jsonplaceholder</a>を使います。

```typescript
// APIから取得する投稿の型定義
type Post = {
  userId: number
  id: number
  title: string
  body: string
}

// APIから投稿を取得する関数
// Promise<Post[]>は、Post型の配列を返すPromiseを返すという意味
async function fetchPosts(): Promise<Post[]> {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts: Post[] = await response.json()
  return posts
}

// フィルタリングを行う関数
function filterPosts(posts: Post[], searchTerm: string, userId: number) {
  return posts.filter(
    (post) =>
      post.title.includes(searchTerm) && // タイトルに検索語が含まれている
      post.userId === userId // ユーザIDが一致する
  )
}

// 検索ボタンが押されたときの処理
document.getElementById('searchButton')?.addEventListener('click', async () => {
  // ユーザの入力を取得
  const searchTerm = (document.getElementById('searchTerm') as HTMLInputElement)?.value
  const userId = Number((document.getElementById('userId') as HTMLInputElement)?.value)

  // APIからデータを取得
  const posts = await fetchPosts()

  // フィルタリングを行う
  const filteredPosts = filterPosts(posts, searchTerm, userId)

  // 結果を表示
  const resultsDiv = document.getElementById('results')
  resultsDiv?.innerHTML = ''
  for (const post of filteredPosts) {
    const postDiv = document.createElement('div')
    postDiv.textContent = `タイトル: ${post.title}, ユーザID: ${post.userId}`
    resultsDiv?.appendChild(postDiv)
  }
})
```

この例では、まず API からすべての投稿データを取得しています。次に、それらの投稿からタイトルに特定の検索語が含まれていて、かつユーザ ID が特定の値と一致する投稿を探し出しています。このようにして複合検索を行うことができます。

ただし、データの量が多い場合は、この方法は非効率的である可能性があります。その場合、検索条件をサーバーサイドで適用して結果だけをクライアントに送り返す、いわゆる"サーバーサイド検索"を検討するとよいでしょう。ただし、そのためにはサーバーサイドで検索機能をサポートしている API が必要となります。


TypeScript で複合検索の実装方法を解説します。複数の条件を組み合わせてデータを取得する手法を学びましょう。

JavaScript（TypeScript）で複合検索を実装しよう


## TL;DR

このページでは、TypeScript の `readonly` の特性について解説しますね。一言でいうと、`readonly` は TypeScript の特性で、特定のプロパティや変数が変更されないことを保証します。

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

### `readonly` とは？

`readonly` は TypeScript の特性で、それが付けられたプロパティや変数が再代入できないことを保証します。これにより、不意のデータの変更を防ぎ、バグを未然に防ぐことができます。

基本的な使用方法は次のようになります。

```tsx
type ReadonlyUser = {
  readonly name: string
  readonly age: number
}

const user: ReadonlyUser = {
  name: 'Alice',
  age: 20,
}

// エラー！name は readonly なので変更できません
user.name = 'Bob'
```

このコードでは、`ReadonlyUser` 型に `readonly` を付けています。その結果、`user` の `name` と `age` を変更することはできません。

この特性は、ある値が一度設定されると変更されないことを明示的に示すのに役立ちます。これにより、他の開発者がそのコードを読んだときに、その値が変更されることなく、安心してその値を使うことができます。

### `readonly` と配列

`readonly` は配列にも使用できます。これにより、配列自体やその要素が変更されないことを保証できます。詳細は次の例をご覧ください。

```tsx
const numbers: readonly number[] = [1, 2, 3]

// エラー！numbers は readonly なので変更できません
numbers.push(4)

// エラー！numbers[0] は readonly なので変更できません
numbers[0] = 10
```

このコードでは、`numbers` は `readonly number[]` 型として宣言されています。そのため、`numbers` 自体を変更したり、その要素を変更したりすることはできません。

この特性は、特に関数の引数として配列を受け取るときに有用です。関数の内部で配列を変更すると、その影響が関数の外部に波及する可能性があるため、配列が変更されないことを保証することで、バグの可能性を減らすことができます。

### 関数型コンポーネントでの Readonly

以下に、関数型コンポーネントでの Readonly 使用例を示します。この例では、コンポーネントが受け取るプロパティが変更されないように、Readonly を使用しています。

```tsx
import React from 'react'

type Props = Readonly<{
  message: string
}>

const MessageComponent = ({ message }: Props) => {
  return <p>{message}</p>
}
```

上記の例では、`MessageComponent` コンポーネントは `message` プロパティを受け取り、それを表示します。ここで、`Props` の型を `Readonly` でラップすることで、受け取った `message` プロパティがコンポーネント内部で変更されないことを保証します。

このように、`Readonly` を使うことで、コードが安全になり、予期せぬ副作用を防ぐことができますね。

### クラスのメンバに `readonly` を使用する

次に、クラスのメンバに `readonly` を使用する例を見てみましょう。

```tsx
class User {
  readonly name: string
  readonly age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

const user = new User('Alice', 20)

// エラー！name は readonly なので変更できません
user.name = 'Bob'
```

ここでは、`User` クラスのメンバ `name` と `age` に `readonly` を指定しています。そのため、これらの値は初めて設定された後、変更することはできません。

このように、クラスのメンバに `readonly` を付けることで、そのメンバが一度設定された後は変更できないことを示すことができます。これは特に、その値がクラスの内部状態を表す場合や、一度設定されるとその後変更されるべきでない場合に有用です。

### `readonly`と`Readonly`の違い

TypeScript では、`readonly`と`Readonly`は似ていますが、それぞれ異なる場面で使われます。

`readonly`は、オブジェクトのプロパティや、クラスのメンバーを読み取り専用にします。これは、その値が一度設定されると、後から変更できないことを意味します。つまり、値の再代入が防がれます。

```ts
class ExampleClass {
  readonly name: string

  constructor(name: string) {
    this.name = name
  }
}

const instance = new ExampleClass('test')
instance.name = 'anotherTest' // Error! 'name' is a read-only property.
```

一方で、`Readonly`は一種のユーティリティ型で、与えられた型の全てのプロパティを`readonly`にします。これは、オブジェクトのプロパティが再代入できないようにします。

```ts
type ReadonlyPerson = Readonly<{ name: string; age: number }>

const person: ReadonlyPerson = { name: 'John', age: 30 }

person.name = 'Jane' // Error! 'name' is a read-only property.
```

ここで、`Readonly`ユーティリティ型はオブジェクト全体を対象にするのに対して、`readonly`修飾子は個々のプロパティに対して使用される点が重要な違いです。


TypeScript における readonly の特性とその活用方法をわかりやすく解説します。

TypeScript の readonly と Readonly の違いを理解する

この記事では、ヘッドレスCMSの利用方法・学習コスト・歴史的変遷・Next.js を用いた実装方法を初学者に分かりやすく解説します。

ヘッドレスCMSとは（学習コスト・種類・歴史・実装）


## TL;DR

このページでは、React の`dangerouslySetInnerHTML`の実装方法について解説しますね。一言でいうと`dangerouslySetInnerHTML`とは、React で直接 HTML を描画するための手段です。サードパーティからのコンテンツ表示やリッチテキストエディターなどで使われます。ただし、この名前が示す通り、この属性を使うときは注意が必要です。

以下が、今回使用する開発環境とそのバージョンです。

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

### 'dangerouslySetInnerHTML' とは？

React では、通常、JSX を使って UI を描画します。しかし、場合によっては直接 HTML を描画したいこともあります。そのときに活用できるのが`dangerouslySetInnerHTML`です。

まずは簡単なコードから始めてみましょう。

```tsx
const Component = () => {
  return <div dangerouslySetInnerHTML={{ __html: '<h1>Hello World</h1>' }} />
}
```

上記のコードは、`<h1>Hello World</h1>`という HTML を直接描画します。このときに使っているのが、`dangerouslySetInnerHTML`属性です。

ただ、この属性の名前にある'dangerously'のとおり、これを使うときは慎重になる必要があります。なぜなら、この属性を使うと XSS（クロスサイトスクリプティング）というセキュリティリスクが生じるからです。XSS とは、不正なスクリプトが実行されてしまう攻撃手法のことで、これを防ぐためには、描画する HTML のエスケープが重要になります。

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

`dangerouslySetInnerHTML`を使用する場合は、その HTML 文字列が信頼できるソースから来ているか、または適切にサニタイズ（悪意のあるコードの除去）されていることを確認する必要があります。

`dangerouslySetInnerHTML`の使用は、基本的には HTML コンテンツを直接描画する必要があるケース全般に適用されます。ただし、このプロパティは XSS 攻撃のリスクがあるため、使用は最小限に抑え、適切なサニタイズ処理が行われていることが前提となります。

#### サードパーティからのコンテンツ表示

外部 API から取得した HTML 形式のコンテンツ（ニュース記事、ブログ投稿など）を表示するときなどに使われます。この場合、取得したコンテンツが信頼できるソースから提供されていること、またはサニタイズ処理を行って悪意のあるコードを除去していることが必要です。

#### リッチテキストエディター

リッチテキストエディター（テキストの装飾、リンク、画像の挿入などが可能なエディター）を実装している場合、ユーザーが作成したリッチテキストの内容を HTML として表示する必要があります。そのため、`dangerouslySetInnerHTML`を使うことで HTML タグを含むテキストを適切にレンダリングできます。

#### SVG の挿入

SVG 形式のアイコンや図形を表示する際にも`dangerouslySetInnerHTML`を使用することがあります。ただし、SVG もスクリプトを含むことが可能なので、SVG データが信頼できるソースから得られていることを確認する必要があります。

#### マークダウンを HTML に変換する

マークダウンエディタでユーザーが書いたテキストをウェブページ上でレンダリングしたいとき、そのマークダウンテキストを HTML に変換するライブラリ（例えば、marked や remark など）を使います。この変換された HTML 文字列を`dangerouslySetInnerHTML`でレンダリングすることで、ユーザーが書いたマークダウンテキストが HTML として表示されます。

#### HTML プレビュー

ユーザーが直接 HTML を編集するエディタを提供している場合、その HTML をリアルタイムでプレビュー表示する必要があります。その際に`dangerouslySetInnerHTML`を使用して、ユーザーが編集した HTML をそのままウェブページに表示します。

いずれの場合も、ユーザーが入力した内容が悪意のあるコードを含んでいないか確認するために、入力をサニタイズするなどのセキュリティ対策を講じるべきです。

### 安全に`dangerouslySetInnerHTML`を使うために

TypeScript を使って、`dangerouslySetInnerHTML`をより安全に使うための方法を見ていきます。まずはエスケープ関数を作成します。

```tsx
const escapeHtml = (unsafe: string) => {
  return unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;')
}

const Component = ({ html }: { html: string }) => {
  return <div dangerouslySetInnerHTML={{ __html: escapeHtml(html) }} />
}
```

ここではまず、HTML をエスケープするための関数`escapeHtml`を作りました。この関数は、HTML で特殊な意味を持つ文字（`&`、`<`、`>`、`"`、`'`）を対応する HTML エンティティに置き換えます。これにより、HTML がそのまま描画されるのを防ぐことができます。

次に、この`escapeHtml`関数を使って`dangerouslySetInnerHTML`の HTML をエスケープしています。これにより、コンポーネントに渡される HTML がそのまま描画されるのを防ぐことができます。

### ヘッドレス CMS との連携

次は、microCMS で、記事のコンテンツを出力するためのコードです。

このソースコードの一部である`dangerouslySetInnerHTML`は、React が提供するエスケープされていない HTML をコンポーネントに挿入するためのプロパティです。名前に`dangerously`がついているのは、このプロパティを使用すると、XSS（クロスサイトスクリプティング）のようなセキュリティリスクが生じる可能性があるからです。このため、`dangerouslySetInnerHTML`は制御された状況下で、安全に扱う必要があります。

```tsx
export default function BlogId({ blog }) {
  return (
    <main>
      <h1>{blog.title}</h1>
      <p>{blog.publishedAt}</p>
      <div
        dangerouslySetInnerHTML={{
          __html: `${blog.body}`,
        }}
      />
    </main>
  )
}
```

microCMS というヘッドレス CMS（API ベースの CMS）は、ブログ記事のようなリッチテキスト（フォーマットされたテキストやメディアを含むテキスト）を管理するのに便利です。このようなリッチテキストは、HTML 形式で提供されることが一般的です。

このコードスニペットでは、`blog.body`というプロパティが`dangerouslySetInnerHTML`に渡されています。これは、`blog.body`が HTML 形式であると予想され、そのままレンダリングするために`dangerouslySetInnerHTML`が使用されています。

具体的には次のような構造になります。

```tsx
<div
  dangerouslySetInnerHTML={{
    __html: `${blog.body}`,
  }}
/>
```

ここで、`dangerouslySetInnerHTML`はオブジェクトを受け取ります。その中の`__html`キーは特殊で、これに代入された文字列が HTML として挿入されます。文字列テンプレート`${blog.body}`は`blog.body`を文字列として挿入します。

この方法で、`blog.body`の中身が直接的に HTML として解釈され、描画されます。つまり、もし`blog.body`が`<p>Hello, world!</p>`であれば、これがそのまま HTML としてページに描画され、ユーザーは"Hello, world!"という段落を見ることができます。

ただし、`dangerouslySetInnerHTML`はその名前が示す通り、使用には注意が必要です。不適切に使用すると XSS 攻撃などのセキュリティリスクを生じる可能性があります。なので、挿入する HTML が完全に信頼できる（例えば CMS からの直接の出力など）場合のみ使用すべきであり、ユーザーからの入力をそのまま挿入するような場合には使用すべきではありません。

### 注意点としての HTML エスケープ

ここまでで、`dangerouslySetInnerHTML`を使うための基本的な方法とその注意点を見てきました。しかし、これだけで十分というわけではありません。これからも、さまざまな場面やケースに対応するために、どのような HTML をエスケープするか、どの程度エスケープするかを考える必要があります。

また、エスケープを行うことで安全性は高まりますが、それでもなお完全な安全性を保証するものではありません。可能な限り、`dangerouslySetInnerHTML`の使用は避け、他の手段を考えることも大切です。

以上が、React の`dangerouslySetInnerHTML`とその使い方についての解説です。React を使う上で、この属性を使う機会は少なくないかもしれません。ただ、その際には常に安全性を考えて、注意深く使うようにしましょう。


`dangerouslySetInnerHTML`とは、React で直接 HTML を描画するための手段です。しかし、扱いには注意が必要です。

React の dangerouslySetInnerHTML とは何か？


## TL;DR

このページでは、React JSX.Element の実装方法について解説しますね。一言でいうと、React JSX.Element は React コンポーネントが返すべき型です。

| 開発環境   | バージョン |
| :--------- | :--------- |
| TypeScript | 5.0.4      |
| React      | 18.2.0     |

### JSX.Element とは？

JavaScript の世界において、HTML を直接コード内に記述するためのシンタックスが JSX です。これを使用することで、JavaScript の中で HTML タグを直接扱うことができ、より直感的に UI の記述ができます。React では、JSX を活用して、UI 部品（コンポーネント）を作り出します。

React コンポーネントが返すべきもの、それが JSX.Element 型です。一般的に、React コンポーネントは JSX を返す関数として定義されます。つまり、その関数が返す値の型が、JSX.Element 型となるのです。

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

```tsx
const MyComponent = (): JSX.Element => {
  return <div>Hello, World!</div>
}
```

ここで、MyComponent 関数が返している`<div>Hello, World!</div>`が JSX で、その型が JSX.Element です。

### React コンポーネントと JSX.Element

では、React コンポーネントと JSX.Element の関連を深掘りしていきましょう。React コンポーネントは、関数またはクラスとして定義することができます。それらが描画を行う際には、JSX を使用して DOM ツリーを表現します。

以下に、簡単な関数コンポーネントを見てみましょう。

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

const Greeting = ({ name }: GreetingProps): JSX.Element => {
  return <h1>Hello, {name}!</h1>
}
```

ここで定義されている Greeting という関数が、React コンポーネントです。そして、その関数が返している`<h1>Hello, {name}!</h1>`が JSX で、その型が JSX.Element となります。

このコンポーネントを使って、HTML の要素を生成することができます。例えば、以下のように記述します。

```tsx
const element = <Greeting name="Alice" />
```

このように、React コンポーネントは JSX.Element を返す関数として定義されます。

### ReactElement と JSX.Element の違い

実際には、`ReactElement`と`JSX.Element`は React コンポーネントが JSX を返す際に頻繁に使用されます。

React と JSX でのエレメントの扱い方には若干の違いがあります。これらの違いを理解するためには、まず React と JSX が何であるかを簡単に説明しましょう。

React は JavaScript のライブラリで、UI コンポーネントを作成するためのものです。React はエレメント（要素）という考え方を基に機能します。エレメントは React アプリケーションの最小の構成要素で、React アプリケーションを構成するツリーの各ノードを表現します。

JSX は JavaScript XML の略で、React エレメントを直感的に書くための JavaScript のシンタックスエクステンションです。これにより、React エレメントを HTML タグのように書くことができます。

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

このように、JSX はコードの中に HTML 風のタグを書けるようにします。これが React のコードを書く際に非常に読みやすく、理解しやすいものにしています。

では、`ReactElement`と`JSX.Element`の違いは何でしょうか。

#### ReactElement

`ReactElement`は React のエレメントを表現するための型です。これは React の API を使用してエレメントを作成する際に使用します。たとえば、以下のようなコードでは`React.createElement`関数を使用してエレメントを作成し、その結果は`ReactElement`型です。

```tsx
const element: React.ReactElement = React.createElement('h1', null, 'Hello, world!')
```

ここで作成された`element`は`ReactElement`型であり、このエレメントを React のレンダリング API に渡すことで画面に表示することができます。

#### JSX.Element

一方で、`JSX.Element`は JSX 式から返されるエレメントを表現するための型です。JSX 式を使用してエレメントを作成すると、その結果は`JSX.Element`型になります。

```tsx
const element: JSX.Element = <h1>Hello, world!</h1>
```

ここで作成された`element`は`JSX.Element`型であり、このエレメントも同様に React のレンダリング API に渡すことで画面に表示することができます。

`ReactElement`と`JSX.Element`はどちらも型であり、コンポーネントが返すべき JSX の形状を記述します。あるコンポーネントが特定の形状の JSX を返すことを期待する場合、そのコンポーネントの返り値の型としてこれらのいずれかを指定することができます。

以下に例を示します。

```tsx
function Hello(): React.ReactElement {
  return <h1>Hello, World!</h1>
}
```

この例では、`Hello`コンポーネントは`ReactElement`を返すことを期待しています。つまり、このコンポーネントは JSX を返すことが期待されており、その形状は`ReactElement`であるべきです。

`JSX.Element`も同様に使用できます。

```tsx
function Hello(): JSX.Element {
  return <h1>Hello, World!</h1>
}
```

ここでも、`Hello`コンポーネントは JSX を返し、その形状は`JSX.Element`であることが期待されています。

したがって、`ReactElement`と`JSX.Element`はどちらもコンポーネントが JSX を返すことを記述するために使われます。これらは基本的に同等であり、使用するかどうかは主に開発者の個人的な選択、またはコードベースの既存の規約に依存します。

#### まとめ

要点をまとめると、`ReactElement`と`JSX.Element`はどちらも React のエレメントを表現するための型であり、どちらも React のレンダリング API に渡すことで画面に表示することができます。しかし、`ReactElement`は React の API を使用してエレメントを作成する際に使用され、`JSX.Element`は JSX 式を使用してエレメントを作成する際に使用されるという違いがあります。

つまり、`ReactElement`と`JSX.Element`の主な違いは、どのような手段でエレメントを作成したか、という点にあります。どちらも同じエレメントを表現するためのものであり、どちらも React のレンダリング API に渡すことが可能ですが、エレメントの作成方法が異なるために異なる型が使用されるのです。

### TypeScript と JSX.Element

TypeScript を使うと、JSX.Element の扱いが少し複雑になりますが、TypeScript は JSX を完全にサポートしています。TypeScript における JSX.Element の型は、React コンポーネントが返すべき要素を表しています。

例えば、次のようなコンポーネントがあるとしましょう。

```tsx
const MyComponent = (): JSX.Element => {
  return <div>Hello, World!</div>
}
```

このコンポーネントは JSX 要素を返しており、その型は JSX.Element です。しかし、このコンポーネントに何かのプロパティを追加したい場合、どうすれば良いでしょう？

ここで登場するのが、TypeScript のジェネリクスです。以下のように書くことで、Props の型を定義することができます。

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

const MyComponent = ({ message }: MyComponentProps): JSX.Element => {
  return <div>{message}</div>
}
```

このように、TypeScript は React の JSX.Element 型を効果的に扱い、開発者がより堅牢なコードを書くのを助けてくれます。

以上が、React JSX.Element の基本と、それが React コンポーネントでどのように利用されるのかの解説でした。この知識を基に、より質の高い React コンポーネントの開発を進めていただければと思います。


React JSX.Elementの基本と、それがReactコンポーネントでどのように利用されるのかを解説します。

Reactの JSX.Element とは何か？


## TL;DR

このページでは、ReactElement の実装方法について詳しく解説しますね。一言で言うと、ReactElement とは React の JSX 要素を表現するための型です。React において、UI を構築する際の基礎的な要素を表現するために使われます。

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

### ReactElement とは？

ReactElement は React の世界で最も基本的な建設ブロックです。それは単なる JavaScript オブジェクトで、React コンポーネントが画面に何を描画すべきかを記述します。具体的には、ReactElement はコンポーネント（または DOM タグ）の型、それが受け取る props、そして子要素を保持します。

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

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

上記のコードでは、ReactElement のインスタンスである `element` を作成しています。このインスタンスは `<h1>` タグとその子要素であるテキスト 'Hello, world' を表現しています。

### ReactNode, ReactChild, ReactElement の違い

以下に、それぞれの型の主な用途を示す表を作成しました。ReactNode, ReactChild, ReactElement の違いです。

| 型           | 使い所                                                                                                                                                          |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ReactNode    | 最も包括的な型で、React がレンダリングできる任意の型をカバーします。主にコンポーネントの戻り値の型や、props として子要素を取る場合に使用します。                |
| ReactChild   | React が子要素として取り扱える要素を表す型です。多くの場合、子要素を表現するために用いられます。                                                                |
| ReactElement | JSX 要素または React コンポーネントを表す型です。主に React の`createElement`関数の戻り値として使用され、React コンポーネントがレンダリングする要素を表します。 |

これらの型は、コード内で要素やコンポーネントを適切に型付けするために用いられます。どの型を使用するべきかは、特定の状況や要件によります。

React の主要な型についての関係図は以下のようになります。

```
ReactNode
  └── ReactChild
      ├── ReactElement
      ├── ReactText (string | number)
      └── boolean | null | undefined
```

これらは、React の様々な値がどのように型付けされるかを説明します。

#### ReactNode

これは React が描画することが可能なもの全てを表す型です。具体的には以下のものが含まれます。

- ReactElement
- ReactFragment
- ReactPortal
- string
- number
- boolean
- null
- undefined

#### ReactChild

これは`ReactNode`の一部を表す型で、React が子要素として扱うことが可能なものを示します。

- ReactElement
- string
- number
- boolean
- null
- undefined

#### ReactElement

これは React のコンポーネント（関数コンポーネントやクラスコンポーネント）または DOM 要素（`div`、`span`、`input`など）から生成されるオブジェクトを表します。この型は主に React の`createElement`関数の戻り値として使われます。

これらの型は React の仮想 DOM で非常に重要な役割を果たし、React の描画システムがどのように動作するかを理解するのに役立ちます。

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

では、Next.js と TypeScript を使って ReactElement の具体的な使用例を見てみましょう。以下に、シンプルな Next.js ページコンポーネントを示します。

`pages/index.tsx`

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

type Props = {
  message: string
}

const HomePage = ({ message }: Props): ReactElement => {
  return <h1>{message}</h1>
}

export default HomePage
```

上記のコードでは、ReactElement を返す関数コンポーネント `HomePage` を定義しています。`HomePage` コンポーネントは `message` という名前の prop を受け取り、そのメッセージを `<h1>` タグの中に描画します。

コンポーネントが `ReactElement` を返すと明示することで、TypeScript はコンポーネントが正しい JSX を返すことを確認します。もしコンポーネントが JSX 以外のもの（例えば数値や文字列など）を返そうとすると、TypeScript はエラーを出します。

### ReactElement のプロパティ

ReactElement は、その要素に関する情報を保持するプロパティをいくつか持っています。以下に、それらの主要なプロパティについて説明します。

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

const element: ReactElement = <h1>Hello, world</h1>

console.log(element.type) // => 'h1'
console.log(element.props.children) // => 'Hello, world'
```

`type` プロパティは、要素の型を表します。上記の例では、`element.type` は `'h1'` を返します。また、`props` プロパティは、要素に渡された props を格納します。この例では、`element.props.children` は `'Hello, world'` を返します。

### ReactElement の活用

ReactElement は、コンポーネントのレンダリングをカスタマイズする際に有効に活用できます。例えば、子要素を動的に操作したり、ある条件下で特定の要素を描画したりすることができます。

以下に、ReactElement を活用したコンポーネントの例を示します。

`components/CustomComponent.tsx`

```tsx
import { ReactElement, ReactNode } from 'react'

type Props = {
  children: ReactNode
  condition: boolean
}

const CustomComponent = ({ children, condition }: Props): ReactElement => {
  if (condition) {
    return <div>{children}</div>
  } else {
    return <div>条件に合致しませんでした。</div>
  }
}

export default CustomComponent
```

この `CustomComponent` は、`condition` prop が `true` の場合には子要素を描画し、そうでない場合にはデフォルトのメッセージを描画します。このように、ReactElement を使うことで、要素の描画を動的に制御することができます。


ReactElement の扱い方とその具体的な活用方法を Next.js と TypeScript の視点から深掘りします。

2023-08-01

JavaScript の IndexedDB を使ってブラウザにデータを保存しよう

2023-07-31

TypeScript の基礎を学ぶ初心者向けチートシート

2023-07-30

TypeScript の lookup 型をマスターしよう

2023-07-25

JavaScript の localStorage を使ってデータを保存しよう！

2023-07-23

JavaScript（TypeScript）で複合検索を実装しよう

2023-07-23

TypeScript の readonly と Readonly の違いを理解する

2023-07-19

ヘッドレスCMSとは（学習コスト・種類・歴史・実装）

2023-07-17

React の dangerouslySetInnerHTML とは何か？

2023-07-14

Reactの JSX.Element とは何か？

2023-07-14

React の ReactElement とは何か？