SessionStorageを使ってみる【React】

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

1 挨拶
2 SessionStorage とLocalStorage
3 終わりに

挨拶

情報を保持する際の選択として、SessionStorage とLocalStorageという選択肢を知らなかったので情報としてまとめていきたいと思います。プロダクトでは状態管理としてRecoilを採用していますが、あくまで状態管理として使用しており、情報の保持としてはDBなどの接続はありません。情報の保持としてDBが存在していないため、情報を保持することはできません。当然ですね。そしてリダイレクトしてしまうと、Recoilの情報は初期化されてしまうので状態が失われてしまうわけです。ここで困り果てたわけです。

そこで、一時的な情報の保管場所としてSessionStorage とLocalStorageという選択が候補に挙がりました。正直に書くと一ミリも知りませんでした。WEB界隈だと普通に上がる選択しだったようですね。なかなかに便利だったので、Reactで使う形に落とし込んで紹介していこうと思います。

それでは初めて行きます。

SessionStorage とLocalStorage

今回は、SessionStorage とLocalStorageとの違いについて説明し、React上で使いやすいようにカスタマイズするところまで紹介していきたいと思います。

SessionStorageとLocalStorageが何かについては、「ブラウザで保存できる簡易DB」みたいなやつという認識です。

二つの方法の情報比較・制約・基本的な使い方

タイトルにもある通り今回は、SessionStorage とLocalStorageの二つを紹介しています。この二つは、WebStorageというHTML5で追加された機能だそうです。ざっくりと調べた限りだと、保存期間・参照スコープ・容量のの三つの点で違いがあることがわかりました。この辺は、セキュリティの観点を含めてどちらを使用するか決める必要がありそうですね。

なかなか消せないのが「LocalStorage」でタブを消したら消えるのが「SessionStorage 」と覚えておけば良いと思います。そもそも、膨大なデータを保存したい場合はDBを使いましょう。

WebStorageの制限事項についても触れておきます。制限事項としては、以下になります。

保存形式がkey-valueの形
保存できる値が文字列のみ

まず保存形式ですが、key-Value型で指定したkeyに値を保存します。図解すると以下の図になりますね。

この図では、redというキーに赤という単語が紐づけられています。特定のkeyを指定することで情報を保存するというものなので、JSONとか触っているとなじみが深いですね。あと保存できるのが文字列のみですが、これこそJSONを使えば何とかなります。

基本的な使い方について説明していきます。基本的な使い方は、以下を見ていただければ問題ないかなと思います。

オブジェクトを保存する方法

ここでは、オブジェクトをWebStorageに保存する方法について紹介します。結論から言うと、オブジェクトをJSON形式に変換して保存するという方法です。JavaScriptでJSONを使いSessionStorageを取りまわす方法としては以下になります。

もしTypescriptを使用している場合では、エラーもしくは警告が出るかと思います。SessionStorageを読み込んだタイミングでは型がanyやnullの可能性があるのでそこに対処する必要があります。対応としては以下になるかなと思います。

as を使用しての型付け
null判定の場合は空データもしくは、ダミーデータを返す

ReactのカスタムHooks提案

ここでは、React＋Typescript環境でSessionStorage を使用する際の取り回しについて紹介します。Reactを使っている場合だとデータアクセスの部分を作ってしまっていじらないことが良い選択だと思います。なので、データのCRUDを一つのフックとして用意していきます。

今回の想定としては、UserDataTypeというオブジェクトを保存することを想定しています。

この設定を行うことで、SessionStorage を触る部分を極力少なくすることができます。スポットで使用する分には良いですが、アプリが膨大になってきた際にSessionStorage を書いた分だけ調べる分量が増えますので、極力カスタムフックに処理を切り出していきましょう。

上部のファイルはそのままダウンロードしてもらえば、「useSessionStorage」で呼び出せます。カスタムフックについては、僕が超お世話になっているサイトを張っておきます。

あってるか不安ですけども…

終わりに

お疲れ様です。今回は、知らなかったことをまとめたので失敗談兼覚え書きといったところになるかなと思います。相当恥ずかしい思いをしたのですが、このタイミングで知ることができたのでよかったですね。

こういう細かいTipsが知識として溜まることで経験のあるエンジニアは作られていくんだと思って生きていきましょう。知識も強い、レビューも通るエンジニアを目指していきましょう。React系の記事は初ですが、フロント業務で触っているのがほとんどReactなのでこれから増やしていきますね。デザインはTailwindです。前回の記事おいておきます。

ではまた～

今回参考になったサイトとしては、以下になります。