React localStorage使用キャッチアップ

localStorage連携：状態を保存しても消えないアプリを作る

Reactで作ったアプリ、ページをリロードすると全部初期化されてしまう。
これでは「Todoアプリで入力したタスクが消える」「ログイン状態が保持できない」など困る場面も多い。
そんなときに使えるのがlocalStorage。

localStorageとは？

ブラウザにデータを永続的に保存できる機能（ドメイン単位）
文字列しか保存できない（要JSON変換）
容量はおおよそ5MB前後
セッションを超えても保持される（ログイン情報やユーザー設定などに最適）

基本の使い方（生のlocalStorage）

tsx
// 保存
localStorage.setItem("key", JSON.stringify(data));

// 取得
const saved = JSON.parse(localStorage.getItem("key") || "null");

// 削除
localStorage.removeItem("key");

でもこれ、毎回JSON.stringifyやparseを書くのが面倒だし、Reactの状態とも同期しづらい。
なので、useState + localStorageを連携させるカスタムフックを使うのが実用的。

useLocalStorageカスタムフックの導入

tsx
const [value, setValue] = useLocalStorage<T>("key", initialValue);

この1行で、Reactの状態とlocalStorageの双方向バインディングが実現する。

特徴：

初回レンダー時にlocalStorageから値を取得
setValueで状態とlocalStorageを同時更新
型安全（TypeScriptのジェネリクス使用）
自動でJSON.stringify/parseしてくれる
SSR対策（window存在チェック）も入ってる

使い方の例

✅ 文字列の保存

tsx
const [name, setName] = useLocalStorage<string>("userName", "");

✅ 配列の保存（Todoリスト）

tsx
const [todos, setTodos] = useLocalStorage<Todo[]>("todos", []);

✅ オブジェクトの保存（設定情報）

tsx
const [settings, setSettings] = useLocalStorage<Settings>("settings", {
  theme: "light",
  language: "ja",
});

状態の永続化があると何が変わるか？

状態管理だけ	localStorage連携あり
リロードで消える	リロードしても保持される
毎回初期化が必要	以前の状態から再開できる
一時的な値管理	長期的なデータ保存も可能

よく使う場面

Todoアプリやメモ帳
フィルターやソート設定の保存
ユーザー設定（ダークモード、言語）
ログイン情報（※トークン管理などはセキュリティ要注意）

実装Tips

値がオブジェクトの場合、保存できるかどうかを一度テストすると安心
useEffectで初期化するのではなく、最初からuseLocalStorageで扱うのがラク
状態を消したいときはsetValue(null)ではなく**removeItem()的な処理をhook内で用意しておくと便利**

👇 サンプル：React × localStorage連携Todoアプリ

まとめ

localStorageを使えばアプリの状態を永続化できる
useLocalStorageカスタムフックを使えば型安全かつ簡潔に管理できる
ユーザー体験を向上させるためには欠かせない要素のひとつ
実務でも設定管理や入力保持などでよく使われる

React localStorage使用 キャッチアップ