babel/plugin-debug-label で Jotai Devtools の debugLabel を一括付与

Jotai の Devtools とは

各 Atom の状態を確認できる UI コンポーネントを開発画面に追加できる。

https://jotai.org/docs/tools/devtools

コンポーネントとして上位のほうで差し込んでやるだけで基本的にはOK。

Redux における reduxjs/redux-devtools 相当らしい（Redux を使ったことがないのでよく分からない）。

debugLabel とは

Devtools の画面に羅列される Atom に名前を付けられる。見やすくなる。探しやすくなる。

const titleAtom = atom("");
titleAtom.debugLabel = "title";

しかし、いちいち全 atom でこれを設定するのは面倒。 atom() の引数で debugLabel を渡せないのだろうか。 → それはできない。というかもっといい方法がある。

babel/plugin-debug-label とは

その面倒な作業を一括でやってくれるプラグイン。変数名が debugLabel として自動設定される。

Vite での設定は

公式ドキュメント に書いてあるとおり：

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
  ],
  // ... The rest of your configuration
})

↑では jotaiReactRefresh も追加されているけど入れといたほうが幸せになるはず。
React Refresh を使用して開発するときに「状態」がリセットされなくなる。
ドキュメントは → https://jotai.org/docs/tools/babel#babel-plugin-react-refresh

まとめ

• Jotai Devtools は便利。
• プラグインで表示名を自動設定できる。
• 日本語の 情報/記事 だと debugLabel を１つ１つ設定する書き方が紹介されているものがあるので注意。公式ドキュメントにはちゃんと詳細に書かれている。