Immerとは？Immutable State Update Utility

ページ内ナビ

概要

Immerはbase stateを直接書き換えるようなrecipe functionをProxy draft上で実行し、変更を反映した新しいimmutable stateを生成するutilityです。変更されていないbranchは共有されるため、deep copyを手書きせずにimmutable updateを表現できます。React/Reduxを含むstate management codeで利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

produceでmutation-style codeからimmutable next stateを作る

produce(base, recipe)はrecipeへdraftを渡し、draftへの変更からnext stateを生成します。元のbase stateは変更されません。

出典：[1][2]

変更していないbranchをstructural sharingしてcopy量を抑える

draftで触れていないobject/arrayは元stateと共有されるため、nested updateでも全体deep copyを実装する必要がありません。

出典：[2]

patch・Map/Set・manual draft等を必要に応じて有効化できる

produceWithPatches、applyPatches、enableMapSet、createDraft/finishDraft等を提供し、state update workflowを拡張できます。

出典：[2]

向いている用途

nested stateをimmutableに保ちつつreducer/update codeを簡潔にしたい場合に向く

React state、Redux reducer、application state machine等でnested object/arrayを更新するとき、spread operatorの多重copyを減らしたい用途に適します。

出典：[1]

導入前の確認

framework-agnosticなのでReact integration自体は別途設計する

Immerはstate変換utilityでありcomponent subscriptionやstoreを提供しません。ReactではuseState/useReducerや外部storeと組み合わせます。

出典：[1][2]

11.1.21はrevoked Map/Set draftをreadした際にthrowするよう修正する

11.1.21ではrevoke済みMap/Set draftへのreadで不正な状態を黙って扱わず、明示的にerrorをthrowするbug fixが入っています。

出典：[3]

参考にした公式資料

[1]Immer v11.1.21 README(2026-10-05)
[2]Immer v11.1.21 produce exports(2026-10-05)
[3]Immer v11.1.21 release(2026-10-05)
[4]Immer MIT license(2026-10-05)

編集部からの補足

ImmerはReact専用ではなくframework-agnosticです。Redux Toolkit等から間接利用されることも多いため、application側で直接dependencyを持つ必要があるか確認してください。

3ステップで試す

1
Immer 11.1.21を固定して導入する
一時npm projectへreview対象のImmerを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/immer.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact immer@11.1.21
2
package versionを確認する
npm package metadataがreview対象versionと一致することを確認します。
test "$(node -e "console.log(require('immer/package.json').version)")" = '11.1.21'
3
produceでbaseとnext stateを検証する
base stateを変更せず、mutation-style recipeからnext stateだけが更新されることを確認します。
test "$(node --input-type=module -e "import {produce} from 'immer'; const base={todo:{done:false}}; const next=produce(base,d=>{d.todo.done=true}); console.log(base.todo.done+':'+next.todo.done)")" = 'false:true'

公式READMEで確認

成長

成長の推移 · 直近30日

28,983 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 12
Open PR: 13

開発アクティビティを蓄積中です。

Built with

JavaScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

immutable
immutables
reducer
redux
state-tree

Stars: 28,983
Forks: 888
Watchers: 151
Open Issues: 30
Contributors: 209
所有者種別: Organization
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/02