
## TL;DR

React や Next.js における記事データの取得と出力には、基本的に配列が使用されますので、配列の型を理解することは非常に重要です。「配列の型」とは、TypeScript で配列内の要素の型を定義する方法です。

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

### 「配列の型」の基本

TypeScript では、配列のすべての要素が同じ型を持つことを保証するために、配列の型を指定できます。これを「配列の型」と言います。

JavaScript では配列は動的に型が変更できますが、TypeScript では配列の要素の型を制限することで、予期しないエラーを防ぐことができます。

例えば、数値のみを要素に持つ配列を作りたい場合、以下のように型注釈を行います。

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

ここでは、`number[]`という型注釈を使っています。これは、「number の配列」を表します。よって、この配列`numbers`には数値以外の要素を追加することはできません。

同様に、文字列のみを要素に持つ配列も作成できます。

```tsx
const names: string[] = ['Alice', 'Bob', 'Charlie']
```

このように、TypeScript では配列の型を明示することで、コードの品質を向上させ、エラーを減らすことができます。

### 複数の型を持つ配列

TypeScript では、配列の要素が複数の型を持つことがあります。これは JavaScript の柔軟性を活かしつつ、それぞれの型を制限することができます。その場合、`(type1 | type2)[]`のような形で型注釈をします。

```tsx
const array: (string | number)[] = [1, 'Alice', 2, 'Bob']
```

このコードは、`array`という配列が、文字列または数値の要素を持つことを表しています。これを「union types（和集合型）」と言います。

### 型エイリアスを使用した配列の型定義

大規模なプロジェクトでは、同じ配列の型を何度も書くことは避けたいですね。そこで型エイリアスを活用します。

```tsx
type StringOrNumber = (string | number)[]
const array: StringOrNumber = [1, 'Alice', 2, 'Bob']
```

ここでは、`StringOrNumber`という新しい型を定義し、それを配列`array`の型として使用しています。これにより、コードの冗長性を減らし、保守性を向上させることができます。

### Array.filter()

配列に対して、条件を満たす要素だけを取り出すために`Array.filter()`を使います。このメソッドは新たな配列を生成し、元の配列を変更しないのが特徴です。

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

const employees: Employee[] = [
  { name: 'John', age: 34 },
  { name: 'Emma', age: 28 },
  { name: 'Adam', age: 31 },
]

const youngEmployees = employees.filter((employee) => employee.age < 30)
console.log(youngEmployees)
// [ { name: 'Emma', age: 28 } ]
```

このコードでは、`age`が 30 歳未満の`Employee`だけを取り出しています。

### Next.js での活用方法

以下に、ブログ投稿のリストを表示するコンポーネントを考えてみます。Next.js（または React）で記事やデータを取得し、それらを出力する際の主要なステップは次の 3 つ。

- type で、型エイリアスを作る
- type で、配列型を適用する
- map で、記事を出力する

#### 型エイリアスを作る

TypeScript では、型エイリアスを使って複雑な型や再利用可能な型を作成することができます。例えば、記事を表すオブジェクトの形状を表す`BlogPost`のような型エイリアスを作成します。

#### 配列型を適用する

API から取得した記事データは通常、配列として返されます。これらのデータは、作成した型エイリアス（例：`BlogPost`）を基にした配列型として定義することができます。この場合、`BlogPost[]`と表記します。

#### map で記事を出力する

取得した記事データ（配列）は、`Array.prototype.map`メソッドを使って、React の要素（記事コンポーネントのリスト）に変換できます。これにより、個々の記事を個別のコンポーネントとして描画することができます。

これらのポイントは Next.js に限らず、React や TypeScript を使ったフロントエンド開発全般で役立つ考え方です。JavaScript/TypeScript で API からデータを取得し、それを使って UI を描画するときによく出くわすパターンの一つです。

それではまず、ブログ投稿の型を定義してみましょう。

```tsx
type BlogPost = {
  title: string
  content: string
  author: string
}
```

次に、この型の配列を受け取る`BlogPostList`コンポーネントを作ります。

```tsx
type BlogPostListProps = {
  posts: BlogPost[]
}

const BlogPostList = ({ posts }: BlogPostListProps) => (
  <div>
    {posts.map((post, index) => (
      <div key={index}>
        <h2>{post.title}</h2>
        <p>{post.content}</p>
        <p>Written by: {post.author}</p>
      </div>
    ))}
  </div>
)
```

このようにして、`BlogPostList`コンポーネントは`BlogPost`の配列を props として受け取り、それぞれのブログ投稿を表示します。TypeScript の配列型を使うことで、各ブログ投稿が正しい形式であることを保証します。これにより、開発者はコードの正確性に自信を持つことができ、予期しないエラーを防ぐことができます。

それでは、数字やテキストや日付が混在していたら、どのように書けばよいのでしょうか？

TypeScript は様々なデータ型をサポートしています。ブログ投稿がタイトル（文字列）、内容（文字列）、作者（文字列）、日付（Date）、そしてコメント数（数値）を含むように拡張することができます。

それぞれのフィールドに対して適切な型を指定することで、TypeScript はそれぞれのデータが正しい型であることを保証します。

以下に、拡張された`BlogPost`型と、それを使用する`BlogPostList`コンポーネントの例を示します。

```tsx
type BlogPost = {
  title: string
  content: string
  author: string
  date: Date
  commentCount: number
}

type BlogPostListProps = {
  posts: BlogPost[]
}

const BlogPostList = ({ posts }: BlogPostListProps) => (
  <div>
    {posts.map((post, index) => (
      <div key={index}>
        <h2>{post.title}</h2>
        <p>{post.content}</p>
        <p>Written by: {post.author}</p>
        <p>Posted on: {post.date.toISOString().substring(0, 10)}</p>
        <p>Comments: {post.commentCount}</p>
      </div>
    ))}
  </div>
)
```

上記の例では、`post.date.toISOString().substring(0, 10)`を使って日付を`yyyy-mm-dd`形式の文字列に変換しています。

### 記事の取得は基本的に配列を使う

Next.js を使用してブログ記事やその他のリスト形式のデータを取得し、描画するときには、通常配列が使われます。API から取得したデータは、通常、配列や配列の中のオブジェクトとして構造化されています。

例えば、Next.js の `getStaticProps` または `getServerSideProps` の中で、ブログの記事データを取得するとしましょう。このデータは通常、複数の記事を含む配列として取得され、この配列は各ページのプロップとして渡されます。

```tsx
export async function getStaticProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../api/posts`)
  const posts = await res.json()

  // Pass data to the page via props
  return { props: { posts } }
}

type BlogPost = {
  title: string;
  content: string;
  author: string;
  date: Date;
  commentCount: number;
};

type BlogPostListProps = {
  posts: BlogPost[];
};

const BlogPostList = ({ posts }: BlogPostListProps) => (
  // Render the blog posts...
);
```

上記のコードでは、外部 API からブログの投稿データを取得し、これを`getStaticProps`から返される`props`経由でページコンポーネントに渡しています。そして、そのデータを受け取る`BlogPostList`コンポーネントは、取得した記事データ（`posts`）を使って記事のリストを描画します。

そのため、Next.js における記事データの取得と出力には、基本的に配列が使用されます。配列は JavaScript と TypeScript の中核的なデータ構造であり、リスト形式のデータを処理する際には非常に有用です。


TypeScriptでの配列の型を理解するためのガイドです。基礎から実践的な使い方までを解説します。

TypeScriptで Next.js の配列の型を理解する


## TL;DR

このページでは、TypeScript のインターセクション型の実装方法について解説しますね。一言でいうと、インターセクション型とは複数の型を一つに結合する方法です。

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

### インターセクション型とは？

TypeScript では、一つの値が複数の型を持つことができます。これをインターセクション型といいます。たとえば、ある人物の情報を表す型を作りたい場合、名前と年齢、趣味など、それぞれを個別の型として作ることができます。しかし、それらを組み合わせて一つの「人物」型を作りたい場合、インターセクション型を使うとスムーズです。

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

type Age = {
  age: number
}

type Person = Name & Age

const person: Person = {
  name: 'John',
  age: 20,
}
```

このようにして、`Name`型と`Age`型を一つにまとめた新たな`Person`型を作ることができました。この`Person`型は`Name`型と`Age`型のインターセクション（交差）型です。これがインターセクション型の基本的な考え方です。

### 型の結合

次に、少し複雑なソースコードを見てみましょう。今度は、それぞれの型が持つプロパティが多い場合に、どのようにインターセクション型を使うのかについて説明します。

```tsx
type Work = {
  company: string
  position: string
}

type Person = Name & Age & Work

const person: Person = {
  name: 'John',
  age: 20,
  company: 'Tech Corp',
  position: 'Engineer',
}
```

ここでは、新たに`Work`型を定義し、それを`Person`型に追加しました。このように、既存の型に新たな型を追加することで、より詳細な型を作ることができます。インターセクション型は、既存の型を結合して新たな型を作る際に非常に便利な機能です。

さらに、インターセクション型を使うことで、既存の型を改変することなく新たな型を作ることができるため、型の再利用が可能となります。これにより、コードの冗長性を減らし、読みやすさとメンテナンス性を向上させることができます。

### 複数のオブジェクト型

先ほどは二つのオブジェクト型のインターセクション型を使って見ましたが、もちろん、それ以上の複数のオブジェクト型のインターセクションを使うこともできます。さらに深く理解するために、三つのオブジェクト型を組み合わせた例を見てみましょう。

```tsx
type Engine = {
  engineType: string
}

type Body = {
  color: string
  numberOfDoors: number
}

type Car = Engine &
  Body & {
    brand: string
  }

const myCar: Car = {
  engineType: 'V8',
  color: 'Black',
  numberOfDoors: 4,
  brand: 'Mercedes',
}

console.log(myCar)
```

この例では、Engine と Body という二つの型を作り、そしてその二つの型と別のプロパティを持つオブジェクトを合体させて新たな型 Car を作っています。その結果として Car 型は、engineType、color、numberOfDoors、brand の四つのプロパティを持つことになります。

こうしてみると、インターセクション型を使うことで、異なる型を効率良く組み合わせて新たな型を作ることができます。これはコードの再利用性を高め、コードの量を減らすことに寄与します。

### 関数型のインターセクション

```tsx
type FunctionType1 = {
  (x: number): number
}

type FunctionType2 = {
  (y: string): string
}

type CombinedFunctionType = FunctionType1 & FunctionType2

const combinedFunction: CombinedFunctionType = (x: number | string) => {
  if (typeof x === 'number') {
    return x * 2
  } else {
    return x + '!'
  }
}

console.log(combinedFunction(2)) // 4
console.log(combinedFunction('Hello')) // "Hello!"
```

上記のコードでは、FunctionType1 と FunctionType2 という二つの関数型を作っています。それぞれの関数型はそれぞれ異なる型の引数を受け取り、同じ型の値を返す関数を表しています。CombinedFunctionType はこれら二つの関数型を組み合わせた新たな関数型です。

このようにインターセクション型を使うことで、型の組み合わせにより柔軟性と再利用性を持つコードを作ることができます。インターセクション型は TypeScript の強力な機能の一つであり、うまく使えば大規模なプロジェクトでも型の管理を効率的に行うことができます。


TypeScript のインターセクション型をわかりやすく解説します。初学者でも理解できるようにコード例も豊富に用意しています。

TypeScript のインターセクション型の使い方


## 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 を描画するための手段です。しかし、扱いには注意が必要です。

2023-08-03

TypeScriptで Next.js の配列の型を理解する

2023-08-03

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 とは何か？