mcpField
J
js-tosorted-immutable

js-tosorted-immutable

github.com/theorcdev開発2.1k35 回インストール2 日前に更新
リポジトリ

js-tosorted-immutable について

React 開発者向けのコーディングスキルです。`toSorted()` などの不変な配列操作で props や state の変更を防ぎます。反転、要素の挿入・削除、置換に使う不変メソッドも紹介します。

主な機能

  1. 01配列を変更せずにソート
  2. 02不変な反転・挿入・置換メソッド
  3. 03React の props と state の変更防止
  4. 04古い環境向けのスプレッド構文による代替

活用シーン

  1. 01React の props から作ったリストのソート
  2. 02React state の配列変更の回避
  3. 03`toSorted()` 非対応環境への対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill js-tosorted-immutable

インストール後、Claude Code で/js-tosorted-immutableを入力して読み込まれたか確認します。

詳細

不変性を保つために sort() ではなく toSorted() を使用する

.sort() は配列をその場で変更するため、React ではバグの原因になることがあります。状態やプロパティを変更せず、新しいソート済み配列を作成するには .toSorted() を使用します。

誤り（元の配列を変更します）：

function UserList({ users }: { users: User[] }) {
  // Mutates the users prop array!
  const sorted = useMemo(
    () => users.sort((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

正しい方法（新しい配列を作成します）：

function UserList({ users }: { users: User[] }) {
  // Creates new sorted array, original unchanged
  const sorted = useMemo(
    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

React で重要な理由：

  1. プロパティや状態の変更は、React の不変性モデルに反します。React は、プロパティと状態が読み取り専用として扱われることを前提としています。
  2. 古いクロージャーによるバグの原因になります。クロージャー（コールバック、エフェクト）内で配列を変更すると、予期しない動作につながることがあります。

ブラウザーのサポート（古いブラウザー向けの代替方法）：

.toSorted() はすべてのモダンブラウザー（Chrome 110+、Safari 16+、Firefox 115+、Node.js 20+）で利用できます。古い環境では、スプレッド演算子を使用します。

// Fallback for older browsers
const sorted = [...items].sort((a, b) => a.value - b.value)

その他の不変な配列メソッド：

  • .toSorted() - 不変なソート
  • .toReversed() - 不変な逆順
  • .toSpliced() - 不変なスプライス
  • .with() - 要素を不変に置き換え

コメント

Markdown 対応