docs(JavaScript): replace absolute performance claims between in and ??= with semantic guidance and IC benchmark nuances

Author: myoshi2891

JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb

@@ -153,7 +153,7 @@
                 "        const item = this[i];        // ③ 一時変数でthis参照を1回に抑制\n",
                 "        const key = fn(item);\n",
                 "\n",
-                "        // ④ in演算子で存在確認 → ??=より軽量（型変換コストなし）\n",
+                "        // ④ Object.create(null) に対するキー存在確認のセマンティクス\n",
                 "        if (key in result) {\n",
                 "            result[key].push(item);\n",
                 "        } else {\n",
@@ -188,12 +188,12 @@
                 "for (let i = 0; i < len; i++)\n",
                 "```\n",
                 "\n",
-                "**③ `??=` → `in` 演算子**\n",
+                "**③ `??=` と `in` 演算子**\n",
                 "```typescript\n",
-                "// Before: ??= は内部でnullish判定 + 代入の2ステップ\n",
+                "// パターンA: ??= を用いた記述（V8環境でIC最適化が効きやすい）\n",
                 "(acc[key] ??= []).push(item);\n",
                 "\n",
-                "// After: プロパティ存在確認のみ（型変換コストゼロ）\n",
+                "// パターンB: in 演算子による存在確認（本実装での採用）\n",
                 "if (key in result) {\n",
                 "    result[key].push(item);\n",
                 "} else {\n",

JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md

@@ -41,7 +41,7 @@
 - **データ構造**: `Object.create(null)` による純粋なハッシュマップ（プロトタイプ汚染なし）
 - **時間計算量**: O(n) — 全要素を1回走査
 - **空間計算量**: O(n) — 結果オブジェクトに全要素を格納
-- **最適化ポイント**: `reduce` よりも `for` ループがスタックフレームを節約、`length` キャッシュでプロパティ参照コスト削減、`??=` より `in` 演算子が軽量
+- **最適化ポイント**: `reduce` よりも `for` ループがスタックフレームを節約、`length` キャッシュでプロパティ参照コスト削減、キーの存在確認におけるセマンティクスの違い（`Object.create(null)` と `in` 演算子）
 - **プロトタイプ拡張**: `interface Array<T>` の Declaration Merging で型安全性を維持
 
 ---
@@ -201,20 +201,23 @@ const len = this.length;
 for (let i = 0; i < len; i++)
 ```
 
-### 3. `??=` → `in` 演算子
+### 3. `??=` と `in` 演算子
 
 ```typescript
-// Before: nullish判定 + 条件付き代入 の2ステップ
+// パターンA: ??= を用いた簡潔な記述
 (acc[key] ??= []).push(item);
 
-// After: プロパティ存在確認のみ（内部的により単純な操作）
+// パターンB: in 演算子による存在確認（本実装での採用）
 if (key in result) {
     result[key].push(item);
 } else {
     result[key] = [item];
 }
 ```
 
+- `Object.create(null)` で作成されたプロトタイプを持たないオブジェクトに対しては、キーの存在確認としてセマンティクス上 `in` 演算子が適しています。
+- ただし V8 などの JS エンジンでは、インラインキャッシュ（IC）の最適化が働きやすいため、実環境上のマイクロベンチマークでは `??=` を用いた方が高速に動作するケースも多く見られます。パフォーマンスの優劣については、絶対指標ではなく実行環境や最適化状況に依存します。
+
 ### 4. `Object.create(null)` によるプロトタイプ汚染防止
 
 ```typescript

JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html

@@ -273,8 +273,8 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
                         <li class="flex items-start gap-2">
                             <span class="text-emerald-500 font-bold text-base leading-5">✓</span>
                             <span
-                                ><strong class="text-slate-700">in 演算子</strong>：??=
-                                より軽量なキー存在確認</span
+                                ><strong class="text-slate-700">in 演算子 vs ??=</strong
+                                >：キーの存在確認におけるセマンティクスの違い（Object.create(null)との併用）</span
                             >
                         </li>
                         <li class="flex items-start gap-2">
@@ -337,7 +337,7 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
         const item = this[i];   // ③ this 参照を1回に抑制
         const key = fn(item);   // コールバックでキーを生成
 
-        // ④ in 演算子: ??= より軽量（型変換コストなし）
+        // ④ in 演算子: プロトタイプなしオブジェクトのキー存在確認
         if (key in result) {
             result[key].push(item);  // キー存在: 既存配列へ追加
         } else {
@@ -1336,7 +1336,7 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
                             className="slide-in mt-4 rounded-xl overflow-hidden border border-slate-200"
                         >
                             <div className="bg-slate-700 text-white text-xs px-4 py-2 font-bold">
-                                キー存在確認フロー（in 演算子 vs ??=）
+                                キー存在確認フロー（in 演算子と ??= の違い）
                             </div>
                             <div className="bg-slate-900 text-slate-200 p-4 text-xs mono leading-6">
                                 <div className="text-slate-400">{'// ✅ in 演算子（推奨）'}</div>
@@ -1361,10 +1361,12 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
                                 </div>
                                 <div>{'}'}</div>
                                 <div className="mt-3 text-slate-400">
-                                    {'// ❌ ??= (比較: nullish判定+代入の2ステップ)'}
+                                    {'// ??= (Nullish coalescing assignment)'}
                                 </div>
                                 <div className="text-red-400">
-                                    {'(acc[key] ??= []).push(item); // やや重い'}
+                                    {
+                                        '(acc[key] ??= []).push(item); // V8のIC最適化が効きやすいケースもある'
+                                    }
                                 </div>
                             </div>
                         </div>
@@ -1543,7 +1545,7 @@ <h3 className="outfit mt-0 text-teal-800 text-lg font-bold">
             const beforeCode = `Array.prototype.groupBy = function(fn) {
     // ❌ reduce: n回スタックフレーム生成
     return this.reduce((acc, item) => {
-        // ❌ ??= : nullish判定+代入の2ステップ
+        // ??= : V8最適化が効きやすい簡潔な記法
         (acc[fn(item)] ??= []).push(item);
         return acc;
     }, {}); // ❌ {} : プロトタイプ汚染リスク
@@ -1693,7 +1695,7 @@ <h3 className="outfit mt-0 text-teal-800 text-lg font-bold">
                                             '毎ループ this.length',
                                             'const len にキャッシュ',
                                         ],
-                                        ['キー確認', '??=（2ステップ）', 'in演算子（1ステップ）'],
+                                        ['キー確認', '??= 演算子', 'in 演算子'],
                                         ['Memory Beats', '~40%', '~70%+'],
                                     ].map(([point, before, after]) => (
                                         <tr key={point} className="hover:bg-slate-50">

public/JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html

@@ -273,8 +273,8 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
                         <li class="flex items-start gap-2">
                             <span class="text-emerald-500 font-bold text-base leading-5">✓</span>
                             <span
-                                ><strong class="text-slate-700">in 演算子</strong>：??=
-                                より軽量なキー存在確認</span
+                                ><strong class="text-slate-700">in 演算子 vs ??=</strong
+                                >：キーの存在確認におけるセマンティクスの違い（Object.create(null)との併用）</span
                             >
                         </li>
                         <li class="flex items-start gap-2">
@@ -337,7 +337,7 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
         const item = this[i];   // ③ this 参照を1回に抑制
         const key = fn(item);   // コールバックでキーを生成
 
-        // ④ in 演算子: ??= より軽量（型変換コストなし）
+        // ④ in 演算子: プロトタイプなしオブジェクトのキー存在確認
         if (key in result) {
             result[key].push(item);  // キー存在: 既存配列へ追加
         } else {
@@ -1336,7 +1336,7 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
                             className="slide-in mt-4 rounded-xl overflow-hidden border border-slate-200"
                         >
                             <div className="bg-slate-700 text-white text-xs px-4 py-2 font-bold">
-                                キー存在確認フロー（in 演算子 vs ??=）
+                                キー存在確認フロー（in 演算子と ??= の違い）
                             </div>
                             <div className="bg-slate-900 text-slate-200 p-4 text-xs mono leading-6">
                                 <div className="text-slate-400">{'// ✅ in 演算子（推奨）'}</div>
@@ -1361,10 +1361,12 @@ <h3 class="outfit font-bold text-teal-800 text-lg mb-3">最適化のポイント
                                 </div>
                                 <div>{'}'}</div>
                                 <div className="mt-3 text-slate-400">
-                                    {'// ❌ ??= (比較: nullish判定+代入の2ステップ)'}
+                                    {'// ??= (Nullish coalescing assignment)'}
                                 </div>
                                 <div className="text-red-400">
-                                    {'(acc[key] ??= []).push(item); // やや重い'}
+                                    {
+                                        '(acc[key] ??= []).push(item); // V8のIC最適化が効きやすいケースもある'
+                                    }
                                 </div>
                             </div>
                         </div>
@@ -1543,7 +1545,7 @@ <h3 className="outfit mt-0 text-teal-800 text-lg font-bold">
             const beforeCode = `Array.prototype.groupBy = function(fn) {
     // ❌ reduce: n回スタックフレーム生成
     return this.reduce((acc, item) => {
-        // ❌ ??= : nullish判定+代入の2ステップ
+        // ??= : V8最適化が効きやすい簡潔な記法
         (acc[fn(item)] ??= []).push(item);
         return acc;
     }, {}); // ❌ {} : プロトタイプ汚染リスク
@@ -1693,7 +1695,7 @@ <h3 className="outfit mt-0 text-teal-800 text-lg font-bold">
                                             '毎ループ this.length',
                                             'const len にキャッシュ',
                                         ],
-                                        ['キー確認', '??=（2ステップ）', 'in演算子（1ステップ）'],
+                                        ['キー確認', '??= 演算子', 'in 演算子'],
                                         ['Memory Beats', '~40%', '~70%+'],
                                     ].map(([point, before, after]) => (
                                         <tr key={point} className="hover:bg-slate-50">