shinke1987.net
雑多な備忘録等のはず。
他のカテゴリ・タブ
目次
PR

jotaiのデバッグ環境構築（Devtools）

2025-08-12 2025-08-12
カテゴリ： React

目的

atomの内容をconsole.log()するのが面倒なので、もっと簡単に確認できるようにしたい。

プロバイダの設定をしている場合のやり方は必要に応じて追記する予定。

参考

環境

jotai：v2.12.3

jotai-devtools：v0.12.0

react：19.1.0

vite：6.3.5

環境変数NODE_ENVの値：development

インストール

下記コマンドでDevtoolsをインストールする。

npm -D install jotai-devtools

vite.config.tsの編集

公式の例にある、下記内容をvite.config.tsへ追加する。

export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: ['jotai/babel/preset'],
      },
    }),
  ],
})

例えば、デフォルトで次のようになっていると思われるが、

plugins: [
    react(),
    /* その他追加されたもの */
]

上記のreact()を次のように置き換えれば良い。

plugins: [
    react({
        babel: {
            presets: ['jotai/babel/preset'],
        },
    }),
    /* その他追加されたもの */
]

コードの編集

プロバイダを設定していない場合

App.tsx等のjotaiを利用しているコードを含む場所で下記のように<DevTools />とCSSをインポートする1行を追加する。

import 'jotai-devtools/styles.css';

function App(): ReactNode {
    return (
        <>
            <DevTools
                theme="dark"
                position="bottom-right"
             />
            {/* 何らかのコード */}
        </>
    );
}

また、atomを宣言している場所でデバッグ用のラベルを下記のようにdebugLabelプロパティを利用して設定する。

import { atom } from 'jotai';

const tempAtom = atom(true);
tempAtom.debugLabel = 'temp';

プロバイダを設定している場合

※ プロバイダを設定して利用することがあれば追記する。公式見ればわかるはず。

動作確認

上記の設定であれば、Webブラウザの右下にjotaiのアイコンが表示される。

jotaiのアイコンをクリックすると、atomの値を確認するペイン・領域が表示される。

そのペイン・領域でdebugLabelに設定した文字列が表示される。

DevToolsのモジュール化

下記のようにモジュール化すると、複数のページで利用する際に楽。

import { ReactNode } from 'react'
import { DevTools } from 'jotai-devtools'
import css from 'jotai-devtools/styles.css?inline'

export default function JotaiDevTools(): ReactNode|null {
    if (process.env.NODE_ENV === 'development') {
        return (
            <>
                <style>{css}</style>
                <DevTools
                    theme="dark"
                    position="bottom-right"
                />
            </>
        )
    } else {
        return null;
    }
}

後はデバッグしたいページに<JotaiDevTools />を追加するだけで良い。

同一カテゴリの記事