localStorage は、JavaScript を用いて作られたサイトやアプリが、有効期限なしでウェブブラウザにキー・バリュー形式のデータを保存するためのウェブストレージオブジェクトです。

つまり、保存されたデータはページを更新したり、ブラウザを再起動しても残ったままです。これは、ブラウザに保存されたデータは、ブラウザウィンドウが閉じられても残ることを意味します。

要するに、localStorage を使うことで、開発者はブラウザ内にデータを保存したり取得したりできるようになります。

しかし、localStorage をプロジェクトのデータベースとして使用するのは良い方法ではありません。

localStorage は、アプリケーションにダークモード機能を追加したり、ToDo のデータを保存したり、ユーザーのフォーム入力値を永続化したり、その他多くの場面で頻繁に使用されます。

今回は、React Hooks で localStorage を使用し、データを簡単に保存・取得する方法を見ていきましょう。

React Hooks を使って localStorage へデータを保存・取得する方法についてのインタラクティブな Scrim:

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

React Hooks とは

React Hooks は、コンポーネントに機能を追加するために React から import する JavaScript の関数です。

Reat Hooks を使うことで、関数コンポーネント内で state やライフサイクルメソッドを使うことができます。また、既存のコードでも動作するため、導入も簡単です。

React Hooks を用いて localStorage を使用するには、2 つの React Hooks を使います:

• useState() – アプリケーションの state は、いつか必ず変化します。useState() は、初期 state (変数やオブジェクト、あるいはその他のデータ型) を 1 つの引数として受け取り、現在の state とその state の更新関数を返します。
• useEffect() – この React Hooks は、デフォルトでは最初のレンダリングの後、state が変更されるたびに実行されます。名前が示すように、state が変更されるたびに副作用 (effect) を実行するために使用されます。この React Hooks は、イベントリスナーを設定したり、API からデータを取得したり、コンポーネントが DOM から削除される前にイベントリスナーを削除したりするのに最適です。

React で localStorage を操作する方法

ブラウザの localStorage にアクセスするためのメソッドは 5 つあります:

• setItem() : キー・バリュー形式のデータを localStorage に保存します。
• getItem() : データを保存した時のキーを指定して localStorage から値を取得します。
• removeItem() : データを保存した時のキーを指定して localStorage から値を削除します。
• clear() : localStorage に保存されている全てのデータを削除します。
• key(index): localStorage に保存されている、指定された index 番号のキー名を返します。

今回は、最も使用頻度の高い setItem() と getItem() に絞って解説していきます。

setItem() の使い方

localStorage にキーを設定すると、データを格納できます。このデータの値は、テキスト、整数、オブジェクト、配列など、どのようなデータ型でも構いません。

localStorage にデータを格納する際、そのデータを JSON.stringify() を使って文字列へ変換する必要があることを忘れないでください。

const [items, setItems] = useState([]);

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

上記のコードでは、まず空配列の state を作成 (配列以外のデータ型でも良い) しています。次に、useEffect() を使うことによって state が更新されたときに localStorage へデータを追加しています。これは useEffect() の第二引数に state を渡すことで実現しています。

基本的には、以下のように指定することで localStorage にキー・バリュー形式のデータを追加できます:

localStorage.setItem('items', JSON.stringify(items));

つまり、先ほどのコードではキーに 'items' という名前を付け、それに値を代入しています。ただし、まず追加するデータが JSON 文字列であることを確認する必要がありましたね。

JSON.stringify() を使用して、JSON オブジェクトを文字列である JSON テキストに変換し、ウェブサーバーに送信できるようにします。

getItem() の使い方

このメソッドは localStorage からオブジェクトを取得します。React では他の方法もありますが、ここでは useEffect() を使用します。

useEffect() は、最初のレンダリング時にすべてのアイテムを取得してくれます。つまり、コンポーネントがマウントまたは再レンダリングするたびに、localStorage からすべてのデータを取得します。

useEffect() の第二引数を空にしているのはこのためです。

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

先ほどデータを localStorage に保存した時、データを JSON 文字列に変換したことを思い出してください。つまり、このデータを利用するためには、JSON 文字列を JSON オブジェクトに変換する必要があります。これは、JSON.parse() メソッドで行います。

まとめ

この記事では、React hooks を使って localStorage を使う方法、使うタイミングやどの hooks を使うかについて学びました。

実際にこれがどのように機能するか知りたい方は、localStorage とこれらの Hooks を使用したシンプルな ToDo リストアプリのソースコードを参照してください。

state と props の詳細については、私が書いたこちらの記事で学ぶことができます。また、こちらの content repository から、私が書いた記事の全てを閲覧できます。

React.js は、オープンソースの JavaScript ベースのユーザーインターフェイスライブラリーです。ウェブおよびモバイルアプリの開発で非常に人気があります。

React はコンポーネントベースの構成を原則としています。React のコンポーネントは、それぞれ独立していて、再利用可能なコード部分のことを指します。コンポーネントには、クラスコンポーネントと関数コンポーネントの 2 つのタイプがあります。

React バージョン 16.8 までは、開発者はクラスコンポーネントを使用してのみ、state などの React の機能を扱うことができました。しかし、バージョン 16.8 で、React にフックと呼ばれる新しいパターンが導入されました。

React のフックを使用することで、関数コンポーネントで state を含めさまざまな React の機能を使用することができます。これにより、開発者は React で関数型プログラミングを実行できるようになりました。

この記事では、React フックについての基礎を学んでいきます。この記事を書く背景には、「React のフックは学びやすく、作成や使用も簡単」という考え方を初心者の方々に持ってもらいたいという思いがあります。基礎さえしっかり理解していれば、本当に簡単なのです。

もし動画で学ぶことがお好きなら、この記事の内容はビデオチュートリアルでもご利用いただけます。ぜひこちらからご覧ください🙂

フックについて学ぶ前に

フックの前に、まず基本の JavaScript の関数 (バニラ JS の関数) について考えてみましょう。

JavaScript というプログラミング言語では、関数は繰り返し行うタスクのための再利用可能なコードロジックです。関数はコンポーザブル (合成可能) です。つまり、関数を別の関数内で呼び出してその出力を使用することができます。

以下の図では、関数 someFunction() が関数 a() と b() をコンポーズ (合成使用) しています。b() の関数は関数 c() を使用しています。

これをコードで書くと、次のようになります。

function a() {
    // some code
}

function c() {
    // some code
}

function b() {
    // some code
    
    c();
    
    // some code
}

function someFunction() {
    // some code
    
	a();
    b();
    
    // some code
}

React の関数コンポーネントが単なるバニラ JavaScript の関数であることは周知の事実です。したがって、関数が合成可能な場合、React コンポーネントも
合成可能な性質を持つことになります。以下の図のように、これは 1 つ以上のコンポーネントを別のコンポーネントに合成使用できることを意味します。

ステートフルコンポーネントとステートレスコンポーネント

React のコンポーネントには、state を持つものと、持たないものがあります。

• state を持つコンポーネントは、その中で状態を確立し管理します。
• state を持たないコンポーネントは、状態や副作用の管理をしない、純粋な関数です。

純粋関数とは、副作用のない関数のことです。つまりこれは、関数が同じ入力に対して常に同じ出力を返す、ということを意味します。

関数コンポーネントから、state や副作用のロジックを取り除けば、state を持たないステートレスコンポーネントになります。また、取り除いた state を持つロジックや副作用のロジックは、アプリ内の他の場所で再利用することもできます。そのため、それらをできる限りコンポーネントから隔離することが、合理的なのです。

React フックとステートフルロジック

React フックを使用することで、ステートフルロジックと副作用を関数コンポーネントから切り離すことができます。フックとは、状態の変化や副作用をコンポーネントから切り離して管理することができる、JavaScript の関数のことです。

これにより、すべてのステートフルロジックをフックとして分離し、他のコンポーネントに使用できるようになるのです。(フックも関数であるため、合成可能。)

では、このステートフルロジックとは何なのでしょうか？状態変数をローカルで宣言および管理しているものであれば、何でも当てはまります。

たとえば、データをフェッチし、ローカル変数でデータを管理するロジックは「ステートフル」ということになります。複数のコンポーネントでそのような取得ロジックを再利用すると良い場合もあります。

では、React フックとは一体なんなのでしょうか？

React フックをわかりやすい言葉で定義するとどうなるでしょうか。関数、コンポーザビリティー、コンポーネント、状態、副作用について理解した今、React フックとは何かをご説明します。

React フックとは、関数コンポーネント内の再利用可能な部分を切り離して使用できるシンプルな JavaScript の関数です。フックは状態を持つことができ、副作用を管理することもできます。

React は、標準の組み込みフックを多数提供しています。

• useState: 状態を管理するためのフックです。状態の値と、それを更新するための更新関数を返します。
• useEffect: API 呼び出し、サブスクリプション、タイマー、ミューテイションなどのような副作用を管理するためのフックです。
• useContext: コンテキストの現在の値を返します。
• useReducer: 複雑な状態管理をサポートするための、useState の代替となるフックです。
• useCallback: 子コンポーネントが必要以上にレンダリングされないように、コールバックをメモ化されたものを返します。
• useMemo: パフォーマンスの最適化に役立つメモ化された値を返します。
• useRef: .current プロパティを持つ ref オブジェクトを返します。そのような ref オブジェクトはミュータブル (変更可能) です。これは主に子コンポーネントに直接アクセスするために使用されます。
• useLayoutEffect: すべての DOM ミューテーションの最後に始動します。useLayoutEffect は同期的に始動するため、できればこれよりも useEffect を使用する方がオススメです。
• useDebugValue: React DevTools でカスタムフックのラベルを表示するのに役立ちます。

これらのフックについて詳しくは、こちらから読むことができます。全てのフック名が use で始まることに注目してください。これは React コードベースでフックを素早く特定するための標準的な慣例です。

データのフェッチ、ディスクへのログ、タイマーなど、様々な用途に合わせて独自のカスタムフックを作成することもできます。

なのでもし、コードベースで React フックを見かけたり、作成するように求められた場合は、心配しないでください。それは、単に関数コンポーネントの外で状態や副作用を扱うための別の JavaScript 関数なだけなのです。

カスタムフックを作成するためのステップバイステップガイドをお探しであれば、この記事が役立つかもしれません。

最後に

この React フックの紹介が少しでもお役に立てば幸いです。React 経験も長くなり、React のあらゆる側面を網羅することを目指した YouTube 動画シリーズを始めました。もしお役に立てそうであれば、ぜひチャンネル登録をお願いします。

私は、次のプラットフォームでも JavaScript、ウェブ開発、ブログについて学んだことを共有しているので、ぜひ繋がりましょう。

• Twitter でフォローする
• GitHub でサイドプロジェクトを見る

それではまた、次の記事でお会いしましょう。それまで、心身ともに体に気をつけてお過ごしください。