mcpField
J
js-hoist-regexp

js-hoist-regexp

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

js-hoist-regexp について

JavaScript と React のレンダリングに関するスキルで、正規表現の生成を render の外に移すか、メモ化する方法を示します。グローバル正規表現の可変状態についても説明します。

主な機能

  1. 01RegExp の生成を render の外に移動
  2. 02クエリ依存の式をメモ化
  3. 03グローバル正規表現の lastIndex 状態に注意

活用シーン

  1. 01レンダリングごとの正規表現再生成を回避
  2. 02グローバル正規表現のテスト時の予期しない動作を防止

インストール

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

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

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

詳細

RegExp の作成をレンダーの外に移す

レンダー内で RegExp を作成しないでください。モジュールスコープに移すか、useMemo() でメモ化してください。

誤り（レンダーごとに新しい RegExp を作成）：

function Highlighter({ text, query }: Props) {
  const regex = new RegExp(`(${query})`, 'gi')
  const parts = text.split(regex)
  return <>{parts.map((part, i) => ...)}</>
}

正しい（メモ化するか、レンダーの外に移す）：

const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

function Highlighter({ text, query }: Props) {
  const regex = useMemo(
    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
    [query]
  )
  const parts = text.split(regex)
  return <>{parts.map((part, i) => ...)}</>
}

警告（グローバル正規表現は可変状態を持ちます）：

グローバル正規表現（/g）は可変の lastIndex 状態を持ちます：

const regex = /foo/g
regex.test('foo')  // true, lastIndex = 3
regex.test('foo')  // false, lastIndex = 0

コメント

Markdown 対応