🧪

WebStorageやRecoilの一意なKeyを補完されるように管理する

2023/01/08に公開

JavaScript

以下のページに移動しました。

以下、GPTで語尾を変えてみた（特に意味はない）

フロントエンド開発してて、WebStorage（LocalStorageとかSessionStorage）、Recoil、React Query（TanStack Query）とかに触れたとき、一意なkeyの管理って大事じゃん？

で、シンプルにKeyを管理する方法考えたから、紹介するね！

この記事でわかること
一意なKeyをシンプルに管理する方法
enumみたいにKeyを追加するたびにほぼ同じ文字を2回ずつ入力する必要ないよ
型情報で補完が効くよ
重複Keyは型エラーになるよ
もっとたくさんのKeyを効率的に管理したい場合は、階層的な管理ができる以下の記事がおすすめだよ。

今回の私の用途だとそこまでこだわらなくてもいいかなって思って、もっと簡単なコードでいいやって感じで作ったんだ。この記事では階層的なKey管理はできないけど、とにかく短いコードで効率的なKey管理をゴールにしてるよ。

enumを使った管理手法
以下のようにenumを使う手法が引用先のブログで紹介されてるよ。

めっちゃシンプルで補完も効くんだけど、KeyだけじゃなくてValueも人間が毎回指定する必要があるのがちょっと面倒だよね（こういう単調作業はミスしやすいからvalue側は指定しなくてもいいようにしたいんだよね）。

多少面倒ではあるけど、十分に実用的な手法だよ。

RecoilKeys.ts

export enum RecoilAtomKeys {
  TODO_STATE = 'todoState',
  NOTICE_STATE = 'noticeState'
}

export enum RecoilSelectorKeys {
  TODO_TODOS = 'Todo_todos',
  TODO_TODO_ITEM = 'Todo_todoItem',
  NOTICE_HAS_UNREAD_NOTICE = 'Notice_hasUnreadNotice'
}

引用: https://engineering.linecorp.com/ja/blog/line-sec-frontend-using-recoil-to-get-a-safe-and-comfortable-state-management/

余談だけど、この方法使う場合はTypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介しますって記事読んで、Union Typesを使う実装に書き直すともっと効率的になるよ！

連想配列のValueを自動で生成する手法

frontend/helper/webStorage/localStorage.ts

const keysObject = {
  csrfToken: "",
  authToken: "",
} as const

type Key = keyof typeof keysObject

const keys = Object.keys(keysObject) as Key[]

export const localStorageKeys = keys.reduce(
  (obj, key) => ({ ...obj, [key]: key }),
  {} as { [key in Key]: string }
)

連想配列のValueを自動で生成する手法

Discussion