フロントエンドの状態管理についてまとめる
- #Next.js
- #React
- #TypeScript
- #Tech
フロントエンドの状態管理についてまとめる
参考にした記事
最近フロント、バック、スマホアプリなど色々と関係なく触ってきましたが、自分としては一通り触って満足したので、これからはフロンエンドをメインに勉強を進めていきます。
まずその第一歩として、ZennやQiitaなどを見ているとよく耳にする、『状態管理』について勉強しました。
一通り勉強したので、今回は自分のアウトプットをメインにブログ書いていきます。
では早速本題に入っていきます。
そもそも『状態管理』とは？
自分はまずこういった根本的な部分の理解が浅い傾向にあるので、自分の認識確認の意味を込めて調べました。
そして調べた結果状態管理とは、『どこに・どうやって状態を持つのか？というテーマのこと』らしいです。
これを見た時の自分は、「？？？」って感じでした。さっぱりわからないというわけではいが、完全に理解もできていない状態。
もっとわかりやすい説明があるかもしれないと思い、引き続き探しました。
そして別の記事を見つけ、そこでは『データを作成/更新した後、更新せずにページを更新する方法』であると記されていました。
「？？？」
僕の中の？はまだ解けません。
引き続き調べても、『状態管理』を一言でいい感じに表すものはありませんでした。
そこで自分は「これは体で覚えるべきものだな」と切り替え、概念理解から、『Reactで状態管理を上手に扱うにはどうすればいいのか？』を考えるようにしました。
そこで見つけた素晴らしい記事が、「3種類」で管理するReactのState戦略です。
ここではReactの状態管理を三つに分類して考え、さらにそれぞれでおすすめのライブラリも紹介してくださっています。
ただわからない単語などが自分の勉強不足なので多々ありました。
そこで、簡単にですが記事で出てきた3単語をまとめてみました。
（Zennのスクラップで書いた内容をそのまま持ってきました。）
Server Data Cache (SWR)
「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」
この『管理する必要のあるGlobal State』を小さくするために使われるのがSWR。
自分はまだ軽くしか使ったことがないのであんまり恩恵がわからないが、今後使うことは必ず来ると思う。
Global State (Recoil or Valtio)
Global Stateから1の手法によってサーバーデータのキャッシュを取り除いたあとにも、クライアントに必要ないくつかのGlobal Stateが残ります。 今のプロジェクトでは、「ページをまたいで保持し続ける必要のあるState」をGlobal Stateとして定義しています。例えば認証情報や、ページをまたいで表示する必要のあるToast、継続してユーザーに知らせ続ける必要のあるバックグラウンド処理の進行状況などです。
Global Stateが使われる身近な例で良さそうなのはTwitterかなと。
認証情報を保持したまま色々なページを行ったり来たりするので（もしかしたら違うかも）
ライブラリでRecoil or Valtioとしているのは、よしこさんは記事内でRecoilを推していますが、別の方がValtioを推していたためです。
自分がまだ触っていなくてなんとも言えないため、後で両方とも触ってみたいと思います。
Local State (useState)
ページをまたいで保持する必要のないStateは単純に各Component内でuseStateを使って管理しています。
今の自分はServer Data CacheもGlobal Stateも使ったことがないので基本全部Local State (useState)で事足りてた。
けど今考えるとGlobal Stateとか知らなかっただけで使う場面あったなーと思ってます。
Server Data Cache、Global State、Local Stateの三つに関しては、割とすんなり理解できました。
今回はコードの書き方よりも、『Reactの状態管理』をある程度理解することが目的だったので、目標達成と言ってもいいのではないでしょうか。
後は実際に自分でそれぞれのライブラリを使ってみます。
まとめ
さて、今回の内容はこれで以上です。
結構色々と調べたつもりですが、間違ってる可能性も大いにありますので、もしお気づきになられた方がいらっしゃいましたらTwittterなどでご連絡いただけますと幸いです。
ちなみに、今後は以下の内容についてもブログを書く予定です。
- Reactのテスト開発について
- TypeScriptの型応用編
後は、開発をしていく中ででたちょっとしたことをブログに書いていけたらと思ってます。
今年は月に最低1本更新が目標です😊
それではお疲れ様でした。