{"id":9838,"date":"2026-06-11T15:23:06","date_gmt":"2026-06-11T06:23:06","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=9838"},"modified":"2026-06-11T15:23:14","modified_gmt":"2026-06-11T06:23:14","slug":"react-profiler-ai-optimization","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/react-profiler-ai-optimization\/","title":{"rendered":"AI\u30da\u30a2\u30d7\u30ed\u3067React\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u3092\u7279\u5b9a\u30fb\u4fee\u6b63\u3059\u308b"},"content":{"rendered":"
\n

\u3053\u3093\u306b\u3061\u306f\u3001\u682a\u5f0f\u4f1a\u793e\u30d5\u30a1\u30b9\u30c8\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a8\u30f3\u30b8\u30cb\u30a2\u3001\u72ec\u8eab\u8cb4\u65cfFire\u3067\u3059\u3002<\/p>\n\n\n\n

\u5148\u65e5\u3001\u30d0\u30a4\u30af\u306e\u30a8\u30f3\u30b8\u30f3\u30aa\u30a4\u30eb\u3092\u4ea4\u63db\u3057\u305f\u3093\u3067\u3059\u3002\u4ea4\u63db\u524d\u306f\u300c\u307e\u3042\u8d70\u308b\u3057\u3001\u5225\u306b\u3044\u3044\u304b\u300d\u3068\u601d\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u4ea4\u63db\u5f8c\u306b\u30ae\u30a2\u30c1\u30a7\u30f3\u30b8\u306e\u6ed1\u3089\u304b\u3055\u304c\u660e\u3089\u304b\u306b\u5909\u308f\u3063\u305f\u3002\u4f53\u611f\u3067\u304d\u308b\u30ec\u30d9\u30eb\u3067\u9055\u3046\u3002\u554f\u984c\u306f\u3001\u60aa\u5316\u304c\u7de9\u3084\u304b\u3060\u3068\u300c\u3053\u308c\u304c\u666e\u901a\u300d\u3060\u3068\u601d\u3044\u8fbc\u3093\u3067\u3057\u307e\u3046\u3053\u3068\u306a\u3093\u3067\u3059\u3088\u306d\u3002<\/p>\n\n\n\n

React\u30a2\u30d7\u30ea\u3082\u540c\u3058\u3067\u3059\u3002\u300c\u307e\u3042\u52d5\u304f\u3057\u300d\u3067\u653e\u7f6e\u3057\u3066\u3044\u308b\u3046\u3061\u306b\u3001\u3044\u3064\u306e\u9593\u306b\u304b\u91cd\u304f\u306a\u3063\u3066\u3044\u308b\u3002<\/small><\/p>\n\n\n\n

AI\u99c6\u52d5\u958b\u767a\u306e\u6587\u8108\u3067\u3001React DevTools Profiler\u306e\u7d50\u679c\u3092AI\u306b\u8aad\u307e\u305b\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u3092\u7279\u5b9a\u3057\u3001\u4fee\u6b63\u6848\u3092\u51fa\u3055\u305b\u308b\u5b9f\u9a13\u3092\u3057\u3066\u307f\u307e\u3057\u305f\u3002useMemo\u3001useCallback\u3001React.memo\u306e\u4f7f\u3044\u5206\u3051\u3092AI\u304c\u3069\u3046\u63d0\u6848\u3057\u3001\u4eba\u9593\u304c\u3069\u3046\u5224\u65ad\u3057\u305f\u304b\u306e\u904e\u7a0b\u3092\u5171\u6709\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u300c\u9045\u3044\u300d\u306e\u306f\u611f\u899a\u3067\u306f\u306a\u304f\u6570\u5024\u3067\u6349\u3048\u308b<\/h2>\n\n\n\n

\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u306e\u7b2c\u4e00\u6b69\u306f\u8a08\u6e2c\u3067\u3059\u3002\u300c\u306a\u3093\u304b\u91cd\u3044\u6c17\u304c\u3059\u308b\u300d\u3092\u300c\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b12ms \u304b\u304b\u3063\u3066\u3044\u308b\u300d\u306b\u5909\u63db\u3059\u308b\u3002React DevTools Profiler\u3092\u4f7f\u3048\u3070\u3001\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u9593\u3068\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u539f\u56e0\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u305f\u3060\u3057\u3001Profiler\u306e\u51fa\u529b\u3092\u8aad\u307f\u89e3\u304f\u306b\u306f\u7d4c\u9a13\u304c\u8981\u308a\u307e\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c4\u30ea\u30fc\u304c\u6df1\u3044\u30a2\u30d7\u30ea\u3060\u3068\u3001\u3069\u3053\u304b\u3089\u624b\u3092\u3064\u3051\u308b\u3079\u304d\u304b\u5224\u65ad\u304c\u96e3\u3057\u3044\u3002\u3053\u3053\u3067AI\u306e\u51fa\u756a\u3067\u3059\u3002<\/p>\n\n\n\n

\u79c1\u304c\u3084\u3063\u305f\u306e\u306f\u3001Profiler\u306e\u7d50\u679c\u3092\u30c6\u30ad\u30b9\u30c8\u306b\u8d77\u3053\u3057\u3066AI\u306b\u6e21\u3057\u3001\u300c\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u306e\u512a\u5148\u9806\u4f4d\u3092\u3064\u3051\u3066\u300d\u3068\u4f9d\u983c\u3059\u308b\u3053\u3068\u3067\u3057\u305f\u3002<\/p>\n\n\n\n

\u5b9f\u9a13\u306b\u4f7f\u3063\u305f\u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea<\/h2>\n\n\n\n

\u7ba1\u7406\u753b\u9762\u3067\u3088\u304f\u3042\u308b\u69cb\u6210\u306e\u30a2\u30d7\u30ea\u3092\u7528\u610f\u3057\u307e\u3057\u305f\u3002\u30e6\u30fc\u30b6\u30fc\u4e00\u89a7\u3068\u8a73\u7d30\u30d1\u30cd\u30eb\u304c\u3042\u308b\u753b\u9762\u3067\u3059\u3002<\/p>\n\n\n\n

\/\/ App.tsx \u2014 \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u3092\u542b\u3080\u521d\u671f\u7248\n'use client';\n\nimport { useState } from 'react';\n\ntype User = {\n  id: number;\n  name: string;\n  email: string;\n  department: string;\n  role: string;\n};\n\nconst USERS: User[] = Array.from({ length: 200 }, (_, i) => ({\n  id: i + 1,\n  name: `\u30e6\u30fc\u30b6\u30fc ${i + 1}`,\n  email: `user${i + 1}@example.com`,\n  department: ['\u958b\u767a', '\u55b6\u696d', '\u30c7\u30b6\u30a4\u30f3', '\u30de\u30fc\u30b1'][i % 4],\n  role: ['\u7ba1\u7406\u8005', '\u4e00\u822c', '\u30b2\u30b9\u30c8'][i % 3],\n}));\n\nexport default function App() {\n  const [selectedId, setSelectedId] = useState<number | null>(null);\n  const [filter, setFilter] = useState('');\n  const [theme, setTheme] = useState<'light' | 'dark'>('light');\n\n  const filteredUsers = USERS.filter(\n    (u) =>\n      u.name.includes(filter) ||\n      u.department.includes(filter)\n  );\n\n  const selectedUser = USERS.find((u) => u.id === selectedId) ?? null;\n\n  const stats = {\n    total: filteredUsers.length,\n    admins: filteredUsers.filter((u) => u.role === '\u7ba1\u7406\u8005').length,\n    departments: [...new Set(filteredUsers.map((u) => u.department))].length,\n  };\n\n  return (\n    <div className={theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}>\n      <Header\n        theme={theme}\n        onToggleTheme={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))}\n      \/>\n      <StatsBar stats={stats} \/>\n      <div className=\"flex gap-4 p-4\">\n        <UserList\n          users={filteredUsers}\n          selectedId={selectedId}\n          onSelect={setSelectedId}\n          filter={filter}\n          onFilterChange={setFilter}\n        \/>\n        <UserDetail user={selectedUser} \/>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u4e00\u898b\u3059\u308b\u3068\u666e\u901a\u306e\u30b3\u30fc\u30c9\u306b\u898b\u3048\u307e\u3059\u3002\u52d5\u4f5c\u3082\u554f\u984c\u306a\u3057\u3002\u305f\u3060\u3057\u3001\u30d5\u30a3\u30eb\u30bf\u5165\u529b\u306e\u305f\u3073\u306b\u5168\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3066\u3044\u308b\u72b6\u614b\u3067\u3057\u305f\u3002<\/p>\n\n\n\n
AI\u306bProfiler\u7d50\u679c\u3092\u6e21\u3059<\/h2>\n\n\n\n
React DevTools Profiler\u3067\u30d5\u30a3\u30eb\u30bf\u5165\u529b\u6642\u306e\u6319\u52d5\u3092\u8a18\u9332\u3057\u307e\u3057\u305f\u30021\u6587\u5b57\u5165\u529b\u3059\u308b\u305f\u3073\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/th>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u9593<\/th>\u539f\u56e0<\/th><\/tr><\/thead>
Header<\/td>0.3ms<\/td>\u89aa\u306e\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/td><\/tr>
StatsBar<\/td>0.5ms<\/td>props\u306estats\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u6bce\u56de\u65b0\u898f\u751f\u6210<\/td><\/tr>
UserList<\/td>8.2ms<\/td>filteredUsers\u304c\u6bce\u56de\u65b0\u3057\u3044\u914d\u5217<\/td><\/tr>
UserRow\uff08\u00d7200\uff09<\/td>\u54040.04ms<\/td>\u89aa\u306eUserList\u304c\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/td><\/tr>
UserDetail<\/td>0.8ms<\/td>\u89aa\u306e\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u5408\u8a08\u3067\u7d0412ms\u3067\u3059\u300260fps\u3092\u7dad\u6301\u3059\u308b\u306b\u306f1\u30d5\u30ec\u30fc\u30e016ms\u4ee5\u5185\u306b\u53ce\u3081\u308b\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u3001\u30d5\u30a3\u30eb\u30bf\u5165\u529b\u306e\u305f\u3073\u306b12ms\u4f7f\u3063\u3066\u3044\u308b\u306e\u306f\u304b\u306a\u308a\u30ae\u30ea\u30ae\u30ea\u3067\u3059\u3002\u30c7\u30fc\u30bf\u91cf\u304c\u5897\u3048\u308c\u3070\u78ba\u5b9f\u306b\u30ab\u30af\u3064\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u3053\u306e\u60c5\u5831\u3092AI\u306b\u6e21\u3057\u3066\u3001\u3053\u3046\u805e\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u4ee5\u4e0b\u306fReact DevTools Profiler\u306e\u8a08\u6e2c\u7d50\u679c\u3067\u3059\u3002\n\u30d5\u30a3\u30eb\u30bf\u5165\u529b\u306e\u305f\u3073\u306b\u5168\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3066\u3044\u307e\u3059\u3002\n\n\uff08\u4e0a\u8a18\u306e\u30c6\u30fc\u30d6\u30eb\u3092\u8cbc\u308a\u4ed8\u3051\uff09\n\n\u4ee5\u4e0b\u306e\u5236\u7d04\u3067\u3001\u512a\u5148\u5ea6\u306e\u9ad8\u3044\u9806\u306b\u4fee\u6b63\u6848\u3092\u51fa\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n- React 19\u3001Next.js 15 App Router\n- useMemo \/ useCallback \/ React.memo \u3092\u9069\u5207\u306b\u4f7f\u3044\u5206\u3051\u308b\n- \u904e\u5270\u306a\u6700\u9069\u5316\u306f\u3057\u306a\u3044\uff08\u8a08\u6e2c\u3067\u52b9\u679c\u304c\u78ba\u8a8d\u3067\u304d\u308b\u3082\u306e\u306e\u307f\uff09<\/code><\/pre>\n\n\n\n
AI\u304c\u51fa\u3057\u305f\u4fee\u6b63\u6848\u3068\u3001\u4eba\u9593\u306e\u5224\u65ad<\/h2>\n\n\n\n
AI\u306f4\u3064\u306e\u4fee\u6b63\u6848\u3092\u51fa\u3057\u3066\u304d\u307e\u3057\u305f\u3002\u305d\u308c\u305e\u308c\u306b\u5bfe\u3059\u308b\u79c1\u306e\u5224\u65ad\u3092\u8a18\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u4fee\u6b63\u68481\uff1afilteredUsers\u3068stats\u3092useMemo\u3067\u8a08\u7b97\uff08\u63a1\u7528\uff09<\/h3>\n\n\n\n
AI\u306e\u63d0\u6848\u306f\u300c\u30d5\u30a3\u30eb\u30bf\u7d50\u679c\u3068\u7d71\u8a08\u60c5\u5831\u3092useMemo\u3067\u30e1\u30e2\u5316\u3059\u308b\u300d\u3067\u3057\u305f\u3002<\/p>\n\n\n\n
\/\/ Before\uff1a\u6bce\u56de\u518d\u8a08\u7b97\nconst filteredUsers = USERS.filter(\n  (u) => u.name.includes(filter) || u.department.includes(filter)\n);\n\nconst stats = {\n  total: filteredUsers.length,\n  admins: filteredUsers.filter((u) => u.role === '\u7ba1\u7406\u8005').length,\n  departments: [...new Set(filteredUsers.map((u) => u.department))].length,\n};<\/code><\/pre>\n\n\n\n
\/\/ After\uff1auseMemo\u3067\u30e1\u30e2\u5316\nconst filteredUsers = useMemo(\n  () =>\n    USERS.filter(\n      (u) => u.name.includes(filter) || u.department.includes(filter)\n    ),\n  [filter]\n);\n\nconst stats = useMemo(\n  () => ({\n    total: filteredUsers.length,\n    admins: filteredUsers.filter((u) => u.role === '\u7ba1\u7406\u8005').length,\n    departments: [...new Set(filteredUsers.map((u) => u.department))].length,\n  }),\n  [filteredUsers]\n);<\/code><\/pre>\n\n\n\n
\u5224\u65ad\uff1a\u63a1\u7528<\/strong>\u3002200\u4ef6\u306e\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u306ffilter\u304c\u5909\u308f\u3089\u306a\u3044\u9650\u308a\u518d\u8a08\u7b97\u4e0d\u8981\u3067\u3059\u3002stats\u3082filteredUsers\u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u9023\u9396\u7684\u306b\u30e1\u30e2\u5316\u3059\u308b\u306e\u306f\u7406\u306b\u304b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u4fee\u6b63\u68482\uff1aHeader\u3092React.memo\u3067\u30e1\u30e2\u5316\uff08\u63a1\u7528\uff09<\/h3>\n\n\n\n
\/\/ Before\nfunction Header({ theme, onToggleTheme }: HeaderProps) {\n  return (\n    <header className=\"flex justify-between items-center p-4 border-b\">\n      <h1 className=\"text-xl font-bold\">\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406<\/h1>\n      <button onClick={onToggleTheme}>\n        {theme === 'light' ? '\ud83c\udf19' : '\u2600\ufe0f'}\n      <\/button>\n    <\/header>\n  );\n}<\/code><\/pre>\n\n\n\n
\/\/ After\nconst Header = memo(function Header({ theme, onToggleTheme }: HeaderProps) {\n  return (\n    <header className=\"flex justify-between items-center p-4 border-b\">\n      <h1 className=\"text-xl font-bold\">\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406<\/h1>\n      <button onClick={onToggleTheme}>\n        {theme === 'light' ? '\ud83c\udf19' : '\u2600\ufe0f'}\n      <\/button>\n    <\/header>\n  );\n});<\/code><\/pre>\n\n\n\n
\u305f\u3060\u3057\u3001AI\u304c\u6307\u6458\u3057\u306a\u304b\u3063\u305f\u554f\u984c\u304c1\u3064\u3042\u308a\u307e\u3059\u3002onToggleTheme<\/code>\u304c\u30a4\u30f3\u30e9\u30a4\u30f3\u95a2\u6570\u306a\u306e\u3067\u3001\u89aa\u304c\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u308b\u305f\u3073\u306b\u65b0\u3057\u3044\u95a2\u6570\u304c\u6e21\u3055\u308c\u3001React.memo\u304c\u52b9\u304d\u307e\u305b\u3093\u3002useCallback\u3068\u30bb\u30c3\u30c8\u3067\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ \u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\nconst handleToggleTheme = useCallback(\n  () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),\n  []\n);<\/code><\/pre>\n\n\n\n
\u5224\u65ad\uff1a\u63a1\u7528\uff08\u305f\u3060\u3057useCallback\u306e\u8ffd\u52a0\u304c\u5fc5\u8981\uff09<\/strong>\u3002AI\u306fReact.memo\u306e\u63d0\u6848\u306f\u6b63\u3057\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306e\u30e1\u30e2\u5316\u3068\u3044\u3046\u300c\u30bb\u30c3\u30c8\u3067\u5fc5\u8981\u306a\u5bfe\u5fdc\u300d\u3092\u898b\u843d\u3068\u3057\u3066\u3044\u307e\u3057\u305f\u3002Profiler\u3067\u306fHeader<\/code>\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30b3\u30b9\u30c8\u306f0.3ms\u3068\u5c0f\u3055\u3044\u3082\u306e\u306e\u3001React.memo\u3068useCallback\u306e\u5178\u578b\u7684\u306a\u30d1\u30bf\u30fc\u30f3\u3068\u3057\u3066\u62bc\u3055\u3048\u3066\u304a\u304f\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u4fee\u6b63\u68483\uff1aUserRow\u3092React.memo\u3067\u30e1\u30e2\u5316\uff08\u63a1\u7528\uff09<\/h3>\n\n\n\n
200\u4ef6\u306eUserRow\u304c\u6bce\u56de\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3066\u3044\u308b\u554f\u984c\u3078\u306e\u5bfe\u7b56\u3067\u3059\u3002<\/p>\n\n\n\n
\/\/ Before\nfunction UserRow({ user, isSelected, onSelect }: UserRowProps) {\n  return (\n    <tr\n      className={isSelected ? 'bg-blue-100' : 'hover:bg-gray-50'}\n      onClick={() => onSelect(user.id)}\n    >\n      <td className=\"p-2\">{user.name}<\/td>\n      <td className=\"p-2\">{user.email}<\/td>\n      <td className=\"p-2\">{user.department}<\/td>\n      <td className=\"p-2\">{user.role}<\/td>\n    <\/tr>\n  );\n}<\/code><\/pre>\n\n\n\n
\/\/ After\nconst UserRow = memo(function UserRow({ user, isSelected, onSelect }: UserRowProps) {\n  return (\n    <tr\n      className={isSelected ? 'bg-blue-100' : 'hover:bg-gray-50'}\n      onClick={() => onSelect(user.id)}\n    >\n      <td className=\"p-2\">{user.name}<\/td>\n      <td className=\"p-2\">{user.email}<\/td>\n      <td className=\"p-2\">{user.department}<\/td>\n      <td className=\"p-2\">{user.role}<\/td>\n    <\/tr>\n  );\n});<\/code><\/pre>\n\n\n\n
\u3053\u3053\u3067\u3082onSelect<\/code>\u306e\u30e1\u30e2\u5316\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n
\/\/ \u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\nconst handleSelect = useCallback(\n  (id: number) => setSelectedId(id),\n  []\n);<\/code><\/pre>\n\n\n\n
\u5224\u65ad\uff1a\u63a1\u7528<\/strong>\u3002200\u4ef6\u306e\u30ea\u30b9\u30c8\u3067\u5404\u884c\u304c0.04ms\u3067\u3082\u3001\u5408\u8a088ms\u3067\u3059\u3002\u9078\u629e\u304c\u5909\u308f\u3063\u305f\u3068\u304d\u306b200\u4ef6\u5168\u90e8\u3092\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u5fc5\u8981\u306f\u306a\u304f\u3001\u9078\u629e\u72b6\u614b\u304c\u5909\u308f\u3063\u305f\u884c\u3060\u3051\u66f4\u65b0\u3059\u308c\u3070\u5341\u5206\u3067\u3059\u3002React.memo\u306b\u3088\u3063\u3066\u3001props\u304c\u5909\u308f\u3089\u306a\u3044\u884c\u306f\u30b9\u30ad\u30c3\u30d7\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u306a\u304a\u3001UserRow\u5185\u306eonClick={() => onSelect(user.id)}<\/code>\u306f\u30a4\u30f3\u30e9\u30a4\u30f3\u95a2\u6570\u3067\u3059\u304c\u3001UserRow\u81ea\u4f53\u304cmemo\u5316\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u4e0d\u8981\u306a\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u30b9\u30ad\u30c3\u30d7\u3055\u308c\u305f\u7d50\u679c\u3001\u3053\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u95a2\u6570\u304c\u65b0\u305f\u306b\u751f\u6210\u3055\u308c\u308b\u983b\u5ea6\u3082\u6291\u5236\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u4fee\u6b63\u68484\uff1aUserDetail\u306buseMemo\u3092\u9069\u7528\uff08\u4e0d\u63a1\u7528\uff09<\/h3>\n\n\n\n
AI\u306fselectedUser<\/code>\u306e\u8a08\u7b97\u3082useMemo\u306b\u3059\u3079\u304d\u3060\u3068\u63d0\u6848\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\/\/ AI\u306e\u63d0\u6848\nconst selectedUser = useMemo(\n  () => USERS.find((u) => u.id === selectedId) ?? null,\n  [selectedId]\n);<\/code><\/pre>\n\n\n\n
\u5224\u65ad\uff1a\u4e0d\u63a1\u7528<\/strong>\u3002Array.find<\/code>\u3067200\u4ef6\u3092\u691c\u7d22\u3059\u308b\u30b3\u30b9\u30c8\u306f\u7121\u8996\u3067\u304d\u308b\u30ec\u30d9\u30eb\u3067\u3059\u3002useMemo\u306f\u4f9d\u5b58\u914d\u5217\u306e\u6bd4\u8f03\u306b\u3082\u30b3\u30b9\u30c8\u304c\u304b\u304b\u308b\u305f\u3081\u3001\u8a08\u7b97\u30b3\u30b9\u30c8\u304c\u4f4e\u3044\u51e6\u7406\u3092\u30e1\u30e2\u5316\u3057\u3066\u3082\u5229\u70b9\u306f\u5c11\u306a\u3044\u3002React\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u3082\u3001useMemo\u306f\u8a08\u7b97\u30b3\u30b9\u30c8\u304c\u9ad8\u3044\u51e6\u7406\uff08\u76ee\u5b89\u3068\u3057\u30661ms\u4ee5\u4e0a\uff09\u306b\u5bfe\u3057\u3066\u52b9\u679c\u304c\u3042\u308b\u3068\u3055\u308c\u3066\u304a\u308a\u3001\u8efd\u91cf\u306a\u8a08\u7b97\u306b\u5bfe\u3059\u308b\u30e1\u30e2\u5316\u306f\u5229\u70b9\u304c\u5c11\u306a\u3044\u3068\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u3053\u3053\u304cAI\u306e\u5f31\u70b9\u3067\u3059\u3002AI\u306f\u300c\u30e1\u30e2\u5316\u3067\u304d\u308b\u3082\u306e\u306f\u3059\u3079\u3066\u30e1\u30e2\u5316\u3059\u308b\u300d\u50be\u5411\u304c\u3042\u308a\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u30e1\u30e2\u5316\u306b\u306f\u30e1\u30e2\u30ea\u30b3\u30b9\u30c8\u3068\u6bd4\u8f03\u30b3\u30b9\u30c8\u304c\u304b\u304b\u308a\u307e\u3059\u3002\u8a08\u6e2c\u3057\u3066\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u3060\u3068\u78ba\u8a8d\u3055\u308c\u305f\u7b87\u6240\u3060\u3051\u3092\u6700\u9069\u5316\u3059\u308b<\/strong>\u306e\u304c\u6b63\u3057\u3044\u30a2\u30d7\u30ed\u30fc\u30c1\u3067\u3059\u3002<\/p>\n\n\n\n
\u4fee\u6b63\u5f8c\u306e\u5168\u4f53\u30b3\u30fc\u30c9<\/h2>\n\n\n\n
AI\u306e\u63d0\u6848\u306b\u4eba\u9593\u306e\u5224\u65ad\u3092\u52a0\u3048\u305f\u6700\u7d42\u7248\u3067\u3059\u3002<\/p>\n\n\n\n
\/\/ App.tsx \u2014 \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u7248\n'use client';\n\nimport { useState, useMemo, useCallback, memo } from 'react';\n\ntype User = {\n  id: number;\n  name: string;\n  email: string;\n  department: string;\n  role: string;\n};\n\ntype HeaderProps = {\n  theme: 'light' | 'dark';\n  onToggleTheme: () => void;\n};\n\ntype StatsBarProps = {\n  stats: { total: number; admins: number; departments: number };\n};\n\ntype UserListProps = {\n  users: User[];\n  selectedId: number | null;\n  onSelect: (id: number) => void;\n  filter: string;\n  onFilterChange: (value: string) => void;\n};\n\ntype UserRowProps = {\n  user: User;\n  isSelected: boolean;\n  onSelect: (id: number) => void;\n};\n\ntype UserDetailProps = {\n  user: User | null;\n};\n\nconst USERS: User[] = Array.from({ length: 200 }, (_, i) => ({\n  id: i + 1,\n  name: `\u30e6\u30fc\u30b6\u30fc ${i + 1}`,\n  email: `user${i + 1}@example.com`,\n  department: ['\u958b\u767a', '\u55b6\u696d', '\u30c7\u30b6\u30a4\u30f3', '\u30de\u30fc\u30b1'][i % 4],\n  role: ['\u7ba1\u7406\u8005', '\u4e00\u822c', '\u30b2\u30b9\u30c8'][i % 3],\n}));\n\nconst Header = memo(function Header({ theme, onToggleTheme }: HeaderProps) {\n  return (\n    <header className=\"flex justify-between items-center p-4 border-b\">\n      <h1 className=\"text-xl font-bold\">\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406<\/h1>\n      <button onClick={onToggleTheme} className=\"px-3 py-1 rounded border\">\n        {theme === 'light' ? '\ud83c\udf19 \u30c0\u30fc\u30af' : '\u2600\ufe0f \u30e9\u30a4\u30c8'}\n      <\/button>\n    <\/header>\n  );\n});\n\nconst StatsBar = memo(function StatsBar({ stats }: StatsBarProps) {\n  return (\n    <div className=\"flex gap-6 p-4 bg-gray-50 text-sm\">\n      <span>\u5168 {stats.total} \u4ef6<\/span>\n      <span>\u7ba1\u7406\u8005 {stats.admins} \u4eba<\/span>\n      <span>{stats.departments} \u90e8\u7f72<\/span>\n    <\/div>\n  );\n});\n\nconst UserRow = memo(function UserRow({ user, isSelected, onSelect }: UserRowProps) {\n  return (\n    <tr\n      className={`cursor-pointer ${isSelected ? 'bg-blue-100' : 'hover:bg-gray-50'}`}\n      onClick={() => onSelect(user.id)}\n    >\n      <td className=\"p-2\">{user.name}<\/td>\n      <td className=\"p-2\">{user.email}<\/td>\n      <td className=\"p-2\">{user.department}<\/td>\n      <td className=\"p-2\">{user.role}<\/td>\n    <\/tr>\n  );\n});\n\nfunction UserList({ users, selectedId, onSelect, filter, onFilterChange }: UserListProps) {\n  return (\n    <div className=\"flex-1\">\n      <input\n        type=\"text\"\n        value={filter}\n        onChange={(e) => onFilterChange(e.target.value)}\n        placeholder=\"\u540d\u524d\u30fb\u90e8\u7f72\u3067\u691c\u7d22\"\n        className=\"w-full p-2 mb-4 border rounded\"\n      \/>\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr className=\"border-b bg-gray-50\">\n              <th className=\"p-2 text-left\">\u540d\u524d<\/th>\n              <th className=\"p-2 text-left\">\u30e1\u30fc\u30eb<\/th>\n              <th className=\"p-2 text-left\">\u90e8\u7f72<\/th>\n              <th className=\"p-2 text-left\">\u30ed\u30fc\u30eb<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            {users.map((user) => (\n              <UserRow\n                key={user.id}\n                user={user}\n                isSelected={user.id === selectedId}\n                onSelect={onSelect}\n              \/>\n            ))}\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/div>\n  );\n}\n\nfunction UserDetail({ user }: UserDetailProps) {\n  if (!user) {\n    return (\n      <div className=\"w-80 p-4 border rounded bg-gray-50\">\n        <p className=\"text-gray-500\">\u30e6\u30fc\u30b6\u30fc\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n      <\/div>\n    );\n  }\n\n  return (\n    <div className=\"w-80 p-4 border rounded\">\n      <h2 className=\"text-lg font-bold mb-4\">{user.name}<\/h2>\n      <dl className=\"space-y-2\">\n        <div>\n          <dt className=\"text-sm text-gray-500\">\u30e1\u30fc\u30eb<\/dt>\n          <dd>{user.email}<\/dd>\n        <\/div>\n        <div>\n          <dt className=\"text-sm text-gray-500\">\u90e8\u7f72<\/dt>\n          <dd>{user.department}<\/dd>\n        <\/div>\n        <div>\n          <dt className=\"text-sm text-gray-500\">\u30ed\u30fc\u30eb<\/dt>\n          <dd>{user.role}<\/dd>\n        <\/div>\n      <\/dl>\n    <\/div>\n  );\n}\n\nexport default function App() {\n  const [selectedId, setSelectedId] = useState<number | null>(null);\n  const [filter, setFilter] = useState('');\n  const [theme, setTheme] = useState<'light' | 'dark'>('light');\n\n  const filteredUsers = useMemo(\n    () =>\n      USERS.filter(\n        (u) => u.name.includes(filter) || u.department.includes(filter)\n      ),\n    [filter]\n  );\n\n  const stats = useMemo(\n    () => ({\n      total: filteredUsers.length,\n      admins: filteredUsers.filter((u) => u.role === '\u7ba1\u7406\u8005').length,\n      departments: [...new Set(filteredUsers.map((u) => u.department))].length,\n    }),\n    [filteredUsers]\n  );\n\n  const selectedUser = USERS.find((u) => u.id === selectedId) ?? null;\n\n  const handleToggleTheme = useCallback(\n    () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),\n    []\n  );\n\n  const handleSelect = useCallback(\n    (id: number) => setSelectedId(id),\n    []\n  );\n\n  const handleFilterChange = useCallback(\n    (value: string) => setFilter(value),\n    []\n  );\n\n  return (\n    <div\n      className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}`}\n    >\n      <Header theme={theme} onToggleTheme={handleToggleTheme} \/>\n      <StatsBar stats={stats} \/>\n      <div className=\"flex gap-4 p-4\">\n        <UserList\n          users={filteredUsers}\n          selectedId={selectedId}\n          onSelect={handleSelect}\n          filter={filter}\n          onFilterChange={handleFilterChange}\n        \/>\n        <UserDetail user={selectedUser} \/>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u6539\u5584\u7d50\u679c<\/h2>\n\n\n\n
\u4fee\u6b63\u5f8c\u306bProfiler\u3067\u518d\u8a08\u6e2c\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/th>Before<\/th>After<\/th>\u524a\u6e1b\u7387<\/th><\/tr><\/thead>
Header<\/td>0.3ms\uff08\u6bce\u56de\uff09<\/td>0.3ms\uff08theme\u5909\u66f4\u6642\u306e\u307f\uff09<\/td>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u56de\u6570\u304c\u6fc0\u6e1b<\/td><\/tr>
StatsBar<\/td>0.5ms\uff08\u6bce\u56de\uff09<\/td>0.5ms\uff08filter\u5909\u66f4\u6642\u306e\u307f\uff09<\/td>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u56de\u6570\u304c\u6fc0\u6e1b<\/td><\/tr>
UserList<\/td>8.2ms<\/td>2.1ms<\/td>\u7d0474%\u524a\u6e1b<\/td><\/tr>
UserRow\uff08\u00d7200\uff09<\/td>\u5168\u4ef6\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/td>\u5909\u66f4\u884c\u306e\u307f<\/td>\u5927\u534a\u304c\u30b9\u30ad\u30c3\u30d7<\/td><\/tr>
UserDetail<\/td>0.8ms\uff08\u6bce\u56de\uff09<\/td>0.8ms\uff08\u9078\u629e\u5909\u66f4\u6642\u306e\u307f\uff09<\/td>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u56de\u6570\u304c\u6fc0\u6e1b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u30d5\u30a3\u30eb\u30bf\u5165\u529b\u6642\u306e\u5408\u8a08\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u9593\u306f\u7d0412ms\u304b\u3089\u7d043ms\u306b\u6539\u5584\u3057\u307e\u3057\u305f\u3002\u4f53\u611f\u3067\u3082\u30d5\u30a3\u30eb\u30bf\u5165\u529b\u306e\u53cd\u5fdc\u901f\u5ea6\u304c\u660e\u3089\u304b\u306b\u5411\u4e0a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
useMemo \/ useCallback \/ React.memo \u306e\u4f7f\u3044\u5206\u3051\u65e9\u898b\u8868<\/h2>\n\n\n\n
\u4eca\u56de\u306e\u5b9f\u9a13\u3067\u6539\u3081\u3066\u6574\u7406\u3057\u305f\u4f7f\u3044\u5206\u3051\u306e\u57fa\u6e96\u3067\u3059\u3002<\/p>\n\n\n\n
\u30d5\u30c3\u30af<\/th>\u7528\u9014<\/th>\u4f7f\u3046\u3079\u304d\u5834\u9762<\/th>\u4f7f\u308f\u306a\u304f\u3066\u3088\u3044\u5834\u9762<\/th><\/tr><\/thead>
useMemo<\/code><\/td>\u8a08\u7b97\u7d50\u679c\u306e\u30e1\u30e2\u5316<\/td>\u914d\u5217\u306efilter\/map\/sort\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u751f\u6210<\/td>\u5358\u7d14\u306a\u5024\u306e\u53c2\u7167\u3001\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u5024\u306e\u8a08\u7b97<\/td><\/tr>
useCallback<\/code><\/td>\u95a2\u6570\u306e\u30e1\u30e2\u5316<\/td>React.memo\u306e\u5b50\u306b\u6e21\u3059\u30b3\u30fc\u30eb\u30d0\u30c3\u30af<\/td>memo\u5316\u3055\u308c\u3066\u3044\u306a\u3044\u5b50\u306b\u6e21\u3059\u95a2\u6570<\/td><\/tr>
React.memo<\/code><\/td>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30b9\u30ad\u30c3\u30d7<\/td>\u30ea\u30b9\u30c8\u306e\u5404\u884c\u3001props\u304c\u983b\u7e41\u306b\u306f\u5909\u308f\u3089\u306a\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/td>props\u304c\u6bce\u56de\u5909\u308f\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u7279\u306b\u91cd\u8981\u306a\u306e\u306f\u3001React.memo\u3068useCallback\u306f\u30bb\u30c3\u30c8\u3067\u4f7f\u3046<\/strong>\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u3002React.memo\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30e9\u30c3\u30d7\u3057\u3066\u3082\u3001\u89aa\u304b\u3089\u6e21\u3055\u308c\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u6bce\u56de\u65b0\u3057\u3044\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3060\u3068\u3001props\u306e\u6bd4\u8f03\u3067\u300c\u5909\u66f4\u3042\u308a\u300d\u3068\u5224\u5b9a\u3055\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
AI\u304c\u5f97\u610f\u306a\u3053\u3068\u3001\u4eba\u9593\u304c\u5224\u65ad\u3059\u3079\u304d\u3053\u3068<\/h2>\n\n\n\n
\u4eca\u56de\u306e\u5b9f\u9a13\u3092\u901a\u3058\u3066\u611f\u3058\u305f\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306b\u304a\u3051\u308bAI\u306e\u5f97\u610f\u30fb\u4e0d\u5f97\u610f\u3092\u307e\u3068\u3081\u307e\u3059\u3002<\/p>\n\n\n\n
AI\u304c\u5f97\u610f\u306a\u3053\u3068\uff1a<\/strong><\/p>\n\n\n\n