Reactで学ぶLocalStorageの基礎と使い方〜実務例を交えて徹底解説

はじめに

Reactでは状態管理の方法が多種多様です。 コンポーネントの内部状態や、外部のライブラリを使ったグローバル状態の管理など、さまざまな手段がありますね。 しかし、ページをリロードしたりブラウザを閉じたりしてもデータを保持したいという場合には、LocalStorage が役立つことがあります。 また、クッキーやセッションストレージなど他の仕組みも存在しますが、LocalStorageはシンプルな手法のため、初めて学ぶ人でも取り組みやすいと言えます。 このような背景から、この記事では React localstorage に焦点を当て、その仕組みや実務での利用例をわかりやすく紹介していきます。

この記事を読むとわかること

• LocalStorageの基本的な仕組み
• ReactとLocalStorageを組み合わせるメリット
• よくある実装例 (ToDoリスト)
• コードを使った実装の流れ
• セキュリティ面の注意点

LocalStorageとは

LocalStorageは、ブラウザが持つWeb Storageの一種です。 具体的には、キーと値のペアをローカル（端末側）に永続保存できる仕組みを指します。 クッキーのように毎回サーバーへ送信されるわけではないので、通信量を減らしたり、クッキーのサイズ制限に悩まされにくいといった利点があります。

ただし、LocalStorageに保存したデータはあくまでクライアントサイドに存在するため、閲覧する人の環境やブラウザによっては直接書き換えられる危険性も否定できません。 そのため、重要な情報はサーバー側で管理するなど、使い分けを考慮する必要があります。

ReactにおけるLocalStorageの活用シーン

ReactアプリケーションでLocalStorageを使用すると、画面リロードやブラウザ再起動後もデータを保持しておけるのが大きな特徴です。 例えば、入力フォームの下書きデータや、ユーザーが設定したテーマ、または言語切り替えの状態などを記憶させるのに役立ちます。

また、オフライン対応 の場面でも応用されることが多いです。 一時的にブラウザ内でデータを保持し、ネットワーク接続が回復した段階でサーバーへ送信するといった使い方も考えられます。 Reactを使うと画面の再レンダリングが頻繁に起きることもありますが、LocalStorageに必要な情報を保存しておけば再レンダリング時にも情報を引き継ぎやすくなります。

LocalStorageの基本的な使い方

LocalStorageを扱うメソッドは基本的に以下の3つです。 これらは生のJavaScriptでも同じですが、Reactのコンポーネント内でも同様に活用できます。

• localStorage.setItem(key, value)
• localStorage.getItem(key)
• localStorage.removeItem(key)

値は文字列として保存されるので、配列やオブジェクトを扱うときはJSON.stringify()やJSON.parse()を組み合わせるのが一般的です。 これらのメソッドを使えば、キーと値のペアで簡単にデータを保持・取得・削除できます。

文字列の保存と取得

文字列の場合はとてもシンプルです。

コピー
import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  const handleSave = () => {
    localStorage.setItem("myKey", value);
    alert("保存されました");
  };

  const handleLoad = () => {
    const savedValue = localStorage.getItem("myKey");
    if (savedValue !== null) {
      setValue(savedValue);
    }
  };

  const handleRemove = () => {
    localStorage.removeItem("myKey");
    setValue("");
    alert("削除されました");
  };

  return (
    <div>
      <h3>文字列データの保存</h3>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={handleSave}>保存</button>
      <button onClick={handleLoad}>読み込み</button>
      <button onClick={handleRemove}>削除</button>
    </div>
  );
}

export default App;

この例では、myKey という名前のキーで文字列を保存し、読み込みや削除ができるようになっています。

配列・オブジェクトの保存と取得

配列やオブジェクトを保存するときは、JSON.stringify()で文字列化してから localStorage.setItem() を呼ぶのがよくある方法です。 読み込むときは JSON.parse()で取り出して使います。

コピー
import React, { useState } from "react";

function App() {
  const [items, setItems] = useState([]);

  const handleAddItem = () => {
    const newItems = [...items, `Item ${items.length + 1}`];
    setItems(newItems);
    localStorage.setItem("myList", JSON.stringify(newItems));
  };

  const handleLoadItems = () => {
    const savedItems = localStorage.getItem("myList");
    if (savedItems !== null) {
      setItems(JSON.parse(savedItems));
    }
  };

  const handleClearItems = () => {
    localStorage.removeItem("myList");
    setItems([]);
  };

  return (
    <div>
      <h3>配列データの保存</h3>
      <button onClick={handleAddItem}>アイテムを追加</button>
      <button onClick={handleLoadItems}>ロード</button>
      <button onClick={handleClearItems}>削除</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このようにして、複雑な構造のデータでも簡単にブラウザ側に保存することができます。

よくある実装例（ToDoリスト）

LocalStorageを使った代表的な例として、ToDoリスト を挙げる人が多いのではないでしょうか。 ユーザーがタスクを入力し、追加ボタンを押すとToDoリストが更新されます。 次回アプリを開き直したときにもタスク内容が保持されているので、継続して管理できます。

ToDoの一覧をステートとして持ち、更新のたびにLocalStorageに保存します。 また、アプリ起動時にLocalStorageを参照してタスクがあれば読み込みを行うことで、いつでも前回の状態を引き継げる形になるわけです。

React HooksとLocalStorageの連携

Reactでは関数型コンポーネントの利用が一般的なので、useState と useEffect を組み合わせる方法がよく使われます。

例えば、コンポーネント初期化時にLocalStorageからデータを読み込みたい場合は、useEffect(() => { ... }, []) で空の依存配列を指定するとよいでしょう。 その結果、コンポーネントマウント時にだけ読み込みが実行され、ステートに値をセットすることができます。

コピー
import React, { useState, useEffect } from "react";

function DemoLocalStorage() {
  const [text, setText] = useState("");

  useEffect(() => {
    const saved = localStorage.getItem("demoText");
    if (saved !== null) {
      setText(saved);
    }
  }, []);

  const handleChange = (e) => {
    const newValue = e.target.value;
    setText(newValue);
    localStorage.setItem("demoText", newValue);
  };

  return (
    <div>
      <h3>テキスト入力例</h3>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}

export default DemoLocalStorage;

これにより、フォームに入力するたびにLocalStorageが更新され、アプリを再度読み込んでも入力内容が復元されます。

セキュリティや注意点

LocalStorageには保管上の利点がある一方で、絶対に機密情報は保存しない ほうが無難です。 平文のままブラウザに残るので、もしユーザーの端末が他人の手に渡ったり、JavaScriptコンソール経由でアクセスされた場合に情報が漏洩してしまう可能性があるからです。

また、容量が数MB程度に制限されているブラウザもあるため、大量のデータ保存には向いていません。 さらに、クッキーの代わりに使おうとしても、サーバーとの連携が必要な場合は適切な通信手段を別途確保する必要があります。

セッションストレージやクッキーとの違い

SessionStorage

ブラウザを閉じるとデータが消えるのが特徴。 ウィンドウやタブごとに分離されており、ページがタブ単位で分かれているなら同じタブでしか参照できません。

Cookie

サーバーに自動送信されるので、認証セッションなどで活躍します。 ただし、送受信のたびにヘッダに付与されるためサイズ制限やセキュリティリスクが懸念されます。

状況に応じてこれらをうまく使い分けるのが現場ではよくある話です。

まとめ

ReactでLocalStorageを扱うことで、ブラウザのリロードや再起動後もデータを保持できるようになります。 入力フォームの内容やユーザー設定などを手軽に保存しておくには十分便利な手法と言えるでしょう。 一方で、セキュリティ面や保存できるデータ量に限界があるので、あくまでも用途をしっかり考えながら活用することが大切です。

LocalStorage、SessionStorage、Cookieといったクライアントサイドのデータ管理方法を理解していくと、Reactでアプリケーションを作る際の柔軟性も広がっていくのではないでしょうか。 以上を踏まえ、皆さんもぜひ自分のプロジェクトで活用できそうな場面を考えてみてください。