Reactで状態をローカルストレージに保存する方法を徹底解説

Reactでのアプリ開発において、ユーザーがブラウザを閉じたりページをリロードした際に、アプリの状態がリセットされてしまうことはよくある課題です。こうした課題を解決する方法として、状態をローカルストレージに保存し永続化する技術が注目されています。ローカルストレージを利用すれば、アプリの再読み込み後も前回の状態を維持でき、ユーザー体験が向上します。本記事では、Reactを使ったローカルストレージへの状態保存の基本的な手法から応用例までを、具体的なコード例を交えながら分かりやすく解説します。

ローカルストレージの基本概要

ローカルストレージは、ブラウザにデータを保存するための仕組みで、Web Storage APIの一部として提供されています。HTML5で導入され、クライアントサイドでキーと値のペアを永続的に保存できる特徴を持ちます。

ローカルストレージの特徴

永続性: 保存されたデータは、ブラウザを閉じたりデバイスを再起動しても削除されません（ユーザーが手動で削除しない限り）。
キーと値の形式: 文字列形式でデータを保存・取得します。複雑なデータ構造はJSONを用いて保存することが一般的です。
容量制限: ブラウザによって異なりますが、通常は約5MB程度の容量が利用可能です。

用途とメリット

ローカルストレージは、以下のような用途に適しています。

ユーザー設定の保存（テーマ、レイアウトなど）
一時的なデータ保存（フォームデータやショッピングカートの内容）
状態の永続化（今回のトピックであるReact状態管理との組み合わせ）

ローカルストレージは、バックエンドとの通信が不要なため、パフォーマンスを向上させる点でも優れています。ただし、大量のデータ保存や機密情報の取り扱いには向いていません。そのため、適切な用途で活用することが重要です。

Reactでの状態管理の基本

Reactでは、コンポーネントの状態を管理するために、主にuseStateフックが使用されます。状態管理は、アプリの動作やユーザーインタラクションに応じて動的にUIを更新するために必要不可欠な概念です。

Reactの状態管理とは

状態（state）とは、コンポーネントが持つ一時的なデータで、以下のような特徴があります。

状態の変更がUIに即時反映される。
コンポーネントが保持するデータは、親子コンポーネント間で共有・伝播可能。

例えば、ボタンをクリックした回数をカウントするアプリでは、クリック回数をuseStateを用いて管理します。

状態管理とローカルストレージの関連性

通常、Reactで管理している状態はメモリ上で保持され、ページをリロードすると初期化されてしまいます。この問題を解決するために、状態をローカルストレージに保存し、リロード後に再取得する仕組みが必要です。

例: カウンターアプリ

以下の例では、ボタンを押すたびにカウントが増えるアプリを考えます。通常は状態がリロード時にリセットされますが、ローカルストレージを利用することで前回のカウント値を保持できます。

この仕組みを活用することで、状態を永続化し、ユーザーに一貫した体験を提供することが可能です。本記事ではこの仕組みを中心に解説を進めます。

useStateとuseEffectフックを使った保存方法

Reactで状態をローカルストレージに保存するためには、useStateとuseEffectの組み合わせが有効です。この方法では、状態が変更されるたびにローカルストレージへ保存し、アプリの再起動後にもその状態を復元することが可能です。

useStateで状態を定義する

まず、ReactのuseStateフックを使用して状態を定義します。状態は、アプリ内で動的に変化するデータを保持するために使われます。

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0); // 状態の初期値を0に設定
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

このコードでは、ボタンをクリックするたびにカウントが増加しますが、ページをリロードするとカウントは初期値の0にリセットされます。

useEffectで状態をローカルストレージに保存する

次に、状態が変更されたときにその値をローカルストレージに保存します。これにはuseEffectフックを利用します。

useEffect(() => {
  localStorage.setItem('count', count); // 状態をローカルストレージに保存
}, [count]); // countが変更されるたびに実行

このコードを上記の例に組み込むと、カウント値がローカルストレージに保存され、リロード後も保持されます。

ローカルストレージから状態を読み込む

初回レンダリング時にローカルストレージから状態を読み込むには、useStateの初期値を関数として設定します。

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? parseInt(savedCount, 10) : 0; // 保存された値を使用し、ない場合は0
});

完成コード

以下は、ローカルストレージを利用した状態保存の完成版コードです。

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem('count');
    return savedCount ? parseInt(savedCount, 10) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

この手法を使えば、状態を簡単にローカルストレージへ保存し、再利用可能な状態永続化の仕組みを構築できます。

続きます

状態の読み込みと初期化の方法

Reactアプリでローカルストレージを利用する場合、初回レンダリング時にローカルストレージからデータを読み込み、状態として初期化することが重要です。このプロセスを適切に設計することで、リロード後もアプリがスムーズに動作します。

状態の初期値をローカルストレージから読み込む

ReactのuseStateでは、初期値を関数として渡すことが可能です。この特性を活かし、ローカルストレージから値を読み込むよう設定します。

const [state, setState] = useState(() => {
  const savedValue = localStorage.getItem('stateKey');
  return savedValue ? JSON.parse(savedValue) : defaultValue;
});

localStorage.getItem('stateKey'): ローカルストレージから値を取得します。
JSON.parse(savedValue): 取得した値をJavaScriptオブジェクトとして復元します。
defaultValue: ローカルストレージにデータがない場合に使用するデフォルト値です。

ローカルストレージからの初期化を含む例

以下のコードは、ToDoリストアプリの状態をローカルストレージから読み込む場合の例です。

import React, { useState, useEffect } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem('todos');
    return savedTodos ? JSON.parse(savedTodos) : [];
  });

  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = (newTodo) => {
    setTodos([...todos, newTodo]);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={() => addTodo(`Todo ${todos.length + 1}`)}>
        Add Todo
      </button>
    </div>
  );
}

export default TodoApp;

初期化時のエラーハンドリング

ローカルストレージのデータが破損している場合や、期待される形式でない場合に備えてエラーハンドリングを実装します。

const [state, setState] = useState(() => {
  try {
    const savedValue = localStorage.getItem('stateKey');
    return savedValue ? JSON.parse(savedValue) : defaultValue;
  } catch (error) {
    console.error("Failed to load state from localStorage", error);
    return defaultValue;
  }
});

状態初期化のベストプラクティス

デフォルト値を明確にする: ローカルストレージが空の場合に使用する初期値を適切に設定します。
データ形式を統一する: 保存するデータ形式と読み込むデータ形式を一貫させる（通常はJSON）。
エラーハンドリングを組み込む: ローカルストレージが破損している場合でも、アプリがクラッシュしないように設計します。

これらの方法により、状態の初期化を適切に行い、ユーザーに快適な体験を提供することができます。

状態保存と読み込みのコード例

ここでは、状態をローカルストレージに保存し、リロード時に読み込む完全なコード例を示します。この例では、カウント値を管理する簡単なアプリケーションを構築し、状態の永続化を実現します。

コード例の概要

このコード例では以下を実装します：

状態の初期化時にローカルストレージから値を読み込む。
状態が更新されるたびにローカルストレージに保存する。

完成コード

import React, { useState, useEffect } from 'react';

function CounterApp() {
  // ローカルストレージから初期値を取得して状態を設定
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem('count');
    return savedCount ? parseInt(savedCount, 10) : 0; // デフォルト値は0
  });

  // 状態が変更されるたびにローカルストレージへ保存
  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  // カウントを増減させる関数
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default CounterApp;

コード解説

1. 初期値の設定

useStateの初期値を関数として渡し、ローカルストレージから値を取得します。

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? parseInt(savedCount, 10) : 0;
});

localStorage.getItem('count'): 保存されたカウント値を取得。
値が存在しない場合はデフォルト値（0）を使用。

2. 状態の保存

useEffectを使って、状態が更新されるたびにローカルストレージへ保存します。

useEffect(() => {
  localStorage.setItem('count', count);
}, [count]);

依存配列[count]により、countが変更された際にのみ保存処理が実行されます。

3. UIとイベントハンドラー

ボタンのクリックイベントで状態を更新します。

<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>

increment関数：カウントを1増加。
decrement関数：カウントを1減少。

動作確認

このコードを実行すると、カウントの値がローカルストレージに保存され、リロード後もカウントが維持されます。この方法は、カウント以外のアプリケーション状態にも応用可能です。

カスタマイズの例

状態を複数保存したい場合：オブジェクトをJSON形式で保存します。
データを暗号化する：機密性の高いデータの場合は暗号化を検討します。

このコード例を基に、状態永続化の仕組みを他のReactプロジェクトにも応用できます。

カスタムフックを使った効率化

Reactで状態をローカルストレージに保存する処理を効率化するために、カスタムフックを作成するのがおすすめです。カスタムフックを利用することで、再利用性を高め、コードを簡潔に保つことができます。

カスタムフックの概要

カスタムフックは、状態管理ロジックを抽象化して簡単に再利用できる仕組みを提供します。今回のケースでは、ローカルストレージを活用した状態保存と復元の処理をカスタムフックにまとめます。

カスタムフックの実装例

以下は、ローカルストレージ対応のカスタムフックuseLocalStorageの実装例です。

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // 初期値をローカルストレージから取得
  const [value, setValue] = useState(() => {
    const savedValue = localStorage.getItem(key);
    return savedValue ? JSON.parse(savedValue) : initialValue;
  });

  // 状態が変更されたときにローカルストレージを更新
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

コードの説明

初期値の設定
ローカルストレージから指定したキーのデータを取得し、JSON形式でパースして状態を初期化します。

   const savedValue = localStorage.getItem(key);
   return savedValue ? JSON.parse(savedValue) : initialValue;

状態の保存
状態が変更されるたびに、ローカルストレージにJSON形式で保存します。

   localStorage.setItem(key, JSON.stringify(value));

再利用可能なAPI
フックは[value, setValue]を返すので、通常のuseStateと同じ感覚で利用できます。

カスタムフックの使用例

以下の例では、useLocalStorageを使用してカウントを管理します。

import React from 'react';
import useLocalStorage from './useLocalStorage';

function CounterApp() {
  const [count, setCount] = useLocalStorage('count', 0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default CounterApp;

利点

コードの簡潔化: ローカルストレージの操作を簡単に再利用可能な形にまとめることで、コードがスッキリします。
汎用性: 任意の状態をローカルストレージと同期させるために再利用できます。
保守性の向上: ロジックを一箇所に集約することで、変更やバグ修正が容易になります。

応用例

複数の状態を保存するアプリ（例: 設定、テーマ選択）。
フォームデータの一時保存。
ユーザーが再訪問したときに状態を復元するWebアプリケーション。

このカスタムフックを導入すれば、状態管理が効率的になり、ローカルストレージ対応の実装がシンプルになります。

ローカルストレージ使用時の注意点

ローカルストレージは手軽に利用できる便利な機能ですが、使用する際にはいくつかの注意点を理解しておく必要があります。適切に設計しないと、セキュリティ上のリスクやユーザー体験の悪化を招く可能性があります。

セキュリティ上の注意

機密情報を保存しない
ローカルストレージはクライアントサイドでアクセス可能で、ユーザーや攻撃者が簡単にデータを確認できます。そのため、パスワードやトークンなどの機密情報は保存しないでください。
データの暗号化
機密性が必要なデータを保存する場合は、暗号化してから保存するのが必須です。ただし、暗号化してもクライアントサイドでは完全なセキュリティを保証できないため、保存するデータの内容を慎重に選ぶべきです。
クロスサイトスクリプティング（XSS）対策
悪意のあるスクリプトがローカルストレージのデータを盗むリスクがあります。XSS対策を講じることで、このリスクを軽減します。具体的には、入力データを適切にサニタイズすることが重要です。

容量制限の考慮

容量の上限
ローカルストレージにはブラウザごとに異なる容量制限があります。通常は約5MBですが、大量のデータを保存する用途には向いていません。
データサイズを意識する
不要なデータを保存せず、適切にデータをクリーンアップする仕組みを組み込みます。また、配列やオブジェクトを保存する際は、不要なプロパティを省略するなどの工夫が有効です。

ブラウザ互換性

古いブラウザへの対応
ローカルストレージはモダンなブラウザで広くサポートされていますが、古いブラウザでは使用できない場合があります。必要に応じて、互換性を確保するポリフィルの導入を検討します。
ブラウザ固有のバグ
各ブラウザにはローカルストレージの実装にバグが存在する場合があります。主要なブラウザでの動作をテストし、問題がないことを確認してください。

パフォーマンスの考慮

アクセス頻度を減らす
ローカルストレージへのアクセスは同期的に行われるため、大量の読み書きを頻繁に行うとアプリのパフォーマンスが低下します。状態管理を工夫して、必要なときだけローカルストレージにアクセスする設計にします。
データのキャッシュ戦略
アプリの状態を一時的にメモリ上に保持し、必要に応じてローカルストレージに保存することで、不要な読み書きを回避できます。

データの一貫性

データの競合に注意
複数のタブやウィンドウでアプリを開いた場合、ローカルストレージのデータが競合する可能性があります。この問題を防ぐには、変更時にイベントリスナー（例: storageイベント）を使用して他のタブと同期する仕組みを実装します。
破損したデータへの対応
ローカルストレージのデータが破損する可能性を考慮し、データ読み込み時にフォーマットを検証し、必要なら初期値に戻す処理を追加します。

ユーザー体験の向上

データの保存タイミング
状態が変更されるたびに即座にローカルストレージに保存する場合、パフォーマンスへの影響を最小限に抑える工夫が必要です。例えば、一定時間ごとにバッチ保存する方法もあります。
明示的な保存と復元
ユーザーに保存や復元の操作を明示的に提供することで、意図しない動作を防ぐことができます。

これらの注意点を踏まえることで、ローカルストレージを安全かつ効果的に利用し、より良いユーザー体験を提供できるアプリケーションを開発できます。

実践例：ToDoリストアプリの作成

ローカルストレージを活用して状態を永続化する具体的な例として、シンプルなToDoリストアプリを作成します。このアプリでは、追加されたタスクをローカルストレージに保存し、ブラウザをリロードしてもリストを復元できる仕組みを実装します。

アプリの全体像

機能

新しいタスクを追加する。
タスクを削除する。
アプリのリロード後もタスクが保持される。

使用する技術

useState: 状態管理。
useEffect: ローカルストレージへの保存と読み込み。
ローカルストレージ: データの永続化。

コード例

import React, { useState, useEffect } from 'react';

function TodoApp() {
  // ローカルストレージからToDoリストを初期化
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem('todos');
    return savedTodos ? JSON.parse(savedTodos) : [];
  });

  // 状態が変更されるたびにローカルストレージを更新
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  // 新しいタスクを追加する関数
  const addTodo = (task) => {
    setTodos([...todos, { id: Date.now(), task }]);
  };

  // タスクを削除する関数
  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>ToDo List</h1>
      <TodoForm onAddTodo={addTodo} />
      <TodoList todos={todos} onDeleteTodo={deleteTodo} />
    </div>
  );
}

function TodoForm({ onAddTodo }) {
  const [task, setTask] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      onAddTodo(task);
      setTask('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="Enter a task"
      />
      <button type="submit">Add</button>
    </form>
  );
}

function TodoList({ todos, onDeleteTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.task}
          <button onClick={() => onDeleteTodo(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default TodoApp;

コード解説

1. ローカルストレージからの読み込み

useStateを使い、ローカルストレージに保存されたタスクリストを初期値として設定します。

const [todos, setTodos] = useState(() => {
  const savedTodos = localStorage.getItem('todos');
  return savedTodos ? JSON.parse(savedTodos) : [];
});

2. ローカルストレージへの保存

useEffectを用いて、todos状態が変更されるたびにローカルストレージを更新します。

useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos));
}, [todos]);

3. 新しいタスクの追加

addTodo関数では、タスクを一意に識別するためにDate.now()を用いてIDを生成します。

setTodos([...todos, { id: Date.now(), task }]);

4. タスクの削除

deleteTodo関数では、削除対象以外のタスクをフィルタリングして新しい状態を作成します。

setTodos(todos.filter((todo) => todo.id !== id));

動作確認

アプリを起動してタスクを追加します。
ページをリロードしてもタスクが保持されていることを確認します。
タスクを削除してローカルストレージの内容が正しく更新されることを確認します。

応用例

完了済みタスクの管理: タスクに「完了」状態を追加し、表示を切り替える機能を実装。
検索機能の追加: タスク名でフィルタリングできる検索機能を追加。

このToDoリストアプリは、ローカルストレージを利用した状態永続化の仕組みを実践的に学ぶための優れたサンプルです。他のアプリケーションにも応用可能な基本スキルを習得できます。

まとめ

本記事では、Reactで状態をローカルストレージに保存し永続化する方法について詳しく解説しました。ローカルストレージの基本から、useStateとuseEffectを使った状態管理、カスタムフックを活用した効率化、そして実践的なToDoリストアプリの作成方法までを網羅しました。

ローカルストレージを適切に利用することで、アプリケーションのリロード時でも状態を保持し、ユーザー体験を向上させることができます。ただし、セキュリティや容量制限といった課題もあるため、これらの注意点を踏まえて設計することが重要です。

今回の内容をもとに、状態の永続化を必要とするさまざまなReactプロジェクトで応用してみてください。正しく活用すれば、より便利でユーザーフレンドリーなアプリケーションを構築できます。

Reactで状態をローカルストレージに保存する方法を徹底解説

ローカルストレージの基本概要

ローカルストレージの特徴

用途とメリット

Reactでの状態管理の基本

Reactの状態管理とは

状態管理とローカルストレージの関連性

例: カウンターアプリ

useStateとuseEffectフックを使った保存方法

useStateで状態を定義する

useEffectで状態をローカルストレージに保存する

ローカルストレージから状態を読み込む

完成コード

状態の読み込みと初期化の方法

状態の初期値をローカルストレージから読み込む

ローカルストレージからの初期化を含む例

初期化時のエラーハンドリング

状態初期化のベストプラクティス

状態保存と読み込みのコード例

コード例の概要

完成コード

コード解説

1. 初期値の設定

2. 状態の保存

3. UIとイベントハンドラー

動作確認

カスタマイズの例

カスタムフックを使った効率化

カスタムフックの概要

カスタムフックの実装例

コードの説明

カスタムフックの使用例

利点

応用例

ローカルストレージ使用時の注意点

セキュリティ上の注意

容量制限の考慮

ブラウザ互換性

パフォーマンスの考慮

データの一貫性

ユーザー体験の向上

実践例：ToDoリストアプリの作成

アプリの全体像

コード例

コード解説

1. ローカルストレージからの読み込み

2. ローカルストレージへの保存

3. 新しいタスクの追加

4. タスクの削除

動作確認

応用例

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル