{"id":9751,"date":"2026-06-08T10:35:09","date_gmt":"2026-06-08T01:35:09","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=9751"},"modified":"2026-06-08T10:35:16","modified_gmt":"2026-06-08T01:35:16","slug":"cursor-vs-copilot-react","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/cursor-vs-copilot-react\/","title":{"rendered":"Cursor\u3068Copilot\u3069\u3063\u3061\u304cReact\u958b\u767a\u306b\u5411\u3044\u3066\u308b\uff1f\u5b9f\u6848\u4ef6\u3067\u691c\u8a3c\u3057\u305f"},"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\u30d8\u30eb\u30e1\u30c3\u30c8\u3092\u8cb7\u3044\u66ff\u3048\u3088\u3046\u3068\u601d\u3063\u3066\u3001\u30b9\u30da\u30c3\u30af\u6bd4\u8f03\u3092\u3057\u3066\u3044\u305f\u3093\u3067\u3059\u3002A\u793e\u306f\u8efd\u3055\u304c\u58f2\u308a\u3060\u3051\u3069\u901a\u6c17\u6027\u304c\u3044\u307e\u3044\u3061\u3002B\u793e\u306f\u901a\u6c17\u6027\u629c\u7fa4\u3060\u3051\u3069\u5c11\u3057\u91cd\u3044\u3002\u7d50\u5c40\u300c\u3069\u3063\u3061\u304c\u4e0a\u300d\u3067\u306f\u306a\u304f\u300c\u7528\u9014\u3067\u9078\u3076\u300d\u304c\u6b63\u89e3\u3067\u3057\u305f\u3002\u590f\u306e\u30c4\u30fc\u30ea\u30f3\u30b0\u306a\u3089B\u793e\u3001\u8857\u4e57\u308a\u30e1\u30a4\u30f3\u306a\u3089A\u793e\u3002<\/p>\n\n\n\n

AI\u958b\u767a\u30c4\u30fc\u30eb\u3082\u3001\u307e\u3063\u305f\u304f\u540c\u3058\u8a71\u3060\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002<\/small><\/p>\n\n\n\n

AI\u99c6\u52d5\u958b\u767a\u3067React\/Next.js\u3092\u66f8\u3044\u3066\u3044\u308b\u3068\u3001\u30c4\u30fc\u30eb\u9078\u3073\u306e\u554f\u984c\u306b\u76f4\u9762\u3057\u307e\u3059\u3002\u73fe\u6642\u70b9\u3067\u30e1\u30b8\u30e3\u30fc\u306a\u9078\u629e\u80a2\u306fCursor\u3068GitHub Copilot\u306e2\u3064\u3002\u30cd\u30c3\u30c8\u4e0a\u3067\u306f\u300cCursor\u304c\u6700\u5f37\u300d\u300c\u3044\u3084Copilot\u3067\u5341\u5206\u300d\u3068\u3044\u3046\u8b70\u8ad6\u3092\u898b\u304b\u3051\u307e\u3059\u304c\u3001\u6b63\u76f4\u3001\u3069\u3061\u3089\u3082\u4f7f\u3063\u3066\u3044\u308b\u8eab\u304b\u3089\u3059\u308b\u3068\u30bf\u30b9\u30af\u306e\u7a2e\u985e\u306b\u3088\u3063\u3066\u5411\u304d\u4e0d\u5411\u304d\u304c\u3042\u308b<\/strong>\u306e\u304c\u5b9f\u611f\u3067\u3059\u3002<\/p>\n\n\n\n

\u4eca\u56de\u306f\u3001\u540c\u3058React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u30c7\u30fc\u30bf\u30c6\u30fc\u30d6\u30eb\uff09\u3092\u4e21\u65b9\u306e\u30c4\u30fc\u30eb\u3067\u5b9f\u88c5\u3057\u3066\u3001\u901f\u5ea6\u30fb\u54c1\u8cea\u30fb\u4f7f\u3044\u52dd\u624b\u3092\u6bd4\u8f03\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u6bd4\u8f03\u306e\u524d\u63d0<\/h2>\n\n\n\n

\u30c4\u30fc\u30eb\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3068\u8a2d\u5b9a<\/h3>\n\n\n\n
    \n
  • Cursor<\/strong>: Composer\u6a5f\u80fd\u4f7f\u7528\uff08\u30e2\u30c7\u30eb\u306fClaude Sonnet 4\u3092\u9078\u629e\uff09<\/li>\n
  • GitHub Copilot<\/strong>: VS Code\u62e1\u5f35\u3001GPT-4.1\u30e2\u30c7\u30eb\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u30b5\u30b8\u30a7\u30b9\u30c8 + Copilot Chat<\/li>\n<\/ul>\n\n\n\n

    \u5b9f\u88c5\u30bf\u30b9\u30af<\/h3>\n\n\n\n

    \u7ba1\u7406\u753b\u9762\u7528\u306e\u30c7\u30fc\u30bf\u30c6\u30fc\u30d6\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3002\u4ee5\u4e0b\u306e\u8981\u4ef6\u3067\u3059\u3002<\/p>\n\n\n\n

      \n
    • TypeScript + React\uff08\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff09<\/li>\n
    • \u30bd\u30fc\u30c8\u6a5f\u80fd\uff08\u30ab\u30e9\u30e0\u30d8\u30c3\u30c0\u30fc\u30af\u30ea\u30c3\u30af\u3067\u6607\u9806\/\u964d\u9806\u5207\u66ff\uff09<\/li>\n
    • \u691c\u7d22\u30d5\u30a3\u30eb\u30bf\uff08\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u7d5e\u308a\u8fbc\u307f\uff09<\/li>\n
    • \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\uff0810\u4ef6\u305a\u3064\u8868\u793a\u3001\u30da\u30fc\u30b8\u5207\u66ff\uff09<\/li>\n
    • \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff08\u30e2\u30d0\u30a4\u30eb\u3067\u306f\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\uff09<\/li>\n<\/ul>\n\n\n\n

      \u7ba1\u7406\u753b\u9762\u3067\u306f\u3088\u304f\u3042\u308b\u8981\u4ef6\u3067\u3059\u3088\u306d\u3002\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3048\u3070\u4e00\u77ac\u3067\u3059\u304c\u3001\u4eca\u56de\u306fAI\u306b\u30bc\u30ed\u304b\u3089\u66f8\u304b\u305b\u3066\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

      Cursor\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408<\/h2>\n\n\n\n

      \u4f5c\u696d\u30d5\u30ed\u30fc<\/h3>\n\n\n\n

      Cursor\u306eComposer\u6a5f\u80fd\u3092\u4f7f\u3044\u3001\u30c1\u30e3\u30c3\u30c8\u3067\u8981\u4ef6\u3092\u4f1d\u3048\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

      \u30c7\u30fc\u30bf\u30c6\u30fc\u30d6\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u3063\u3066\u304f\u3060\u3055\u3044\u3002\n\n- TypeScript + React\n- props: data\uff08\u914d\u5217\uff09\u3001columns\uff08\u30ab\u30e9\u30e0\u5b9a\u7fa9\u914d\u5217\uff09\n- \u30bd\u30fc\u30c8\uff1a\u30ab\u30e9\u30e0\u30d8\u30c3\u30c0\u30fc\u30af\u30ea\u30c3\u30af\u3067\u6607\u9806\/\u964d\u9806\n- \u691c\u7d22\uff1a\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u3067\u5168\u30ab\u30e9\u30e0\u6a2a\u65ad\u691c\u7d22\n- \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\uff1a10\u4ef6\/\u30da\u30fc\u30b8\n- Tailwind CSS\u3067\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/code><\/pre>\n\n\n\n
      Cursor\u306f\u30d5\u30a1\u30a4\u30eb\u5168\u4f53\u3092\u4e00\u5ea6\u306b\u751f\u6210<\/strong>\u3057\u3066\u304f\u308c\u307e\u3059\u3002Composer\u304c1\u30d5\u30a1\u30a4\u30eb\u306b\u307e\u3068\u3081\u3066\u304f\u308c\u308b\u306e\u3067\u3001\u30b3\u30d4\u30da\u306e\u624b\u9593\u304c\u306a\u3044\u3002<\/p>\n\n\n\n
      Cursor\u304c\u51fa\u3057\u305f\u30b3\u30fc\u30c9<\/h3>\n\n\n\n
      \/\/ Cursor\u304c\u751f\u6210\uff1aDataTable.tsx\n'use client';\n\nimport { useState, useMemo } from 'react';\n\ntype Column<T> = {\n  key: keyof T;\n  label: string;\n  sortable?: boolean;\n};\n\ntype SortConfig<T> = {\n  key: keyof T;\n  direction: 'asc' | 'desc';\n} | null;\n\ntype Props<T extends Record<string, unknown>> = {\n  data: T[];\n  columns: Column<T>[];\n  pageSize?: number;\n};\n\nexport function DataTable<T extends Record<string, unknown>>({\n  data,\n  columns,\n  pageSize = 10,\n}: Props<T>) {\n  const [search, setSearch] = useState('');\n  const [sortConfig, setSortConfig] = useState<SortConfig<T>>(null);\n  const [currentPage, setCurrentPage] = useState(1);\n\n  \/\/ \u691c\u7d22\u30d5\u30a3\u30eb\u30bf\n  const filtered = useMemo(() => {\n    if (!search.trim()) return data;\n    const term = search.toLowerCase();\n    return data.filter(row =>\n      columns.some(col => {\n        const value = row[col.key];\n        return String(value).toLowerCase().includes(term);\n      })\n    );\n  }, [data, search, columns]);\n\n  \/\/ \u30bd\u30fc\u30c8\n  const sorted = useMemo(() => {\n    if (!sortConfig) return filtered;\n    return [...filtered].sort((a, b) => {\n      const aVal = a[sortConfig.key];\n      const bVal = b[sortConfig.key];\n      if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;\n      if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;\n      return 0;\n    });\n  }, [filtered, sortConfig]);\n\n  \/\/ \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\n  const totalPages = Math.ceil(sorted.length \/ pageSize);\n  const paginated = sorted.slice(\n    (currentPage - 1) * pageSize,\n    currentPage * pageSize\n  );\n\n  const handleSort = (key: keyof T) => {\n    setSortConfig(prev => {\n      if (prev?.key === key) {\n        return prev.direction === 'asc'\n          ? { key, direction: 'desc' }\n          : null;\n      }\n      return { key, direction: 'asc' };\n    });\n    setCurrentPage(1);\n  };\n\n  const handleSearch = (value: string) => {\n    setSearch(value);\n    setCurrentPage(1);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <input\n        type=\"text\"\n        value={search}\n        onChange={e => handleSearch(e.target.value)}\n        placeholder=\"\u691c\u7d22...\"\n        className=\"w-full max-w-sm border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500\"\n      \/>\n\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr className=\"bg-gray-50 border-b\">\n              {columns.map(col => (\n                <th\n                  key={String(col.key)}\n                  onClick={() => col.sortable !== false && handleSort(col.key)}\n                  className={`px-4 py-3 text-left text-sm font-medium text-gray-700 ${\n                    col.sortable !== false ? 'cursor-pointer hover:bg-gray-100' : ''\n                  }`}\n                >\n                  <span className=\"flex items-center gap-1\">\n                    {col.label}\n                    {sortConfig?.key === col.key && (\n                      <span>{sortConfig.direction === 'asc' ? '\u2191' : '\u2193'}<\/span>\n                    )}\n                  <\/span>\n                <\/th>\n              ))}\n            <\/tr>\n          <\/thead>\n          <tbody>\n            {paginated.length === 0 ? (\n              <tr>\n                <td colSpan={columns.length} className=\"px-4 py-8 text-center text-gray-500\">\n                  \u30c7\u30fc\u30bf\u304c\u3042\u308a\u307e\u305b\u3093\n                <\/td>\n              <\/tr>\n            ) : (\n              paginated.map((row, i) => (\n                <tr key={i} className=\"border-b hover:bg-gray-50\">\n                  {columns.map(col => (\n                    <td key={String(col.key)} className=\"px-4 py-3 text-sm\">\n                      {String(row[col.key] ?? '')}\n                    <\/td>\n                  ))}\n                <\/tr>\n              ))\n            )}\n          <\/tbody>\n        <\/table>\n      <\/div>\n\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-sm text-gray-600\">\n            {sorted.length}\u4ef6\u4e2d {(currentPage - 1) * pageSize + 1}\u301c\n            {Math.min(currentPage * pageSize, sorted.length)}\u4ef6\u3092\u8868\u793a\n          <\/span>\n          <div className=\"flex gap-1\">\n            <button\n              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}\n              disabled={currentPage === 1}\n              className=\"px-3 py-1 border rounded text-sm disabled:opacity-50\"\n            >\n              \u524d\u3078\n            <\/button>\n            {Array.from({ length: totalPages }, (_, i) => (\n              <button\n                key={i}\n                onClick={() => setCurrentPage(i + 1)}\n                className={`px-3 py-1 border rounded text-sm ${\n                  currentPage === i + 1\n                    ? 'bg-blue-600 text-white'\n                    : 'hover:bg-gray-100'\n                }`}\n              >\n                {i + 1}\n              <\/button>\n            ))}\n            <button\n              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}\n              disabled={currentPage === totalPages}\n              className=\"px-3 py-1 border rounded text-sm disabled:opacity-50\"\n            >\n              \u6b21\u3078\n            <\/button>\n          <\/div>\n        <\/div>\n      )}\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
      Cursor\u306e\u6240\u611f<\/h3>\n\n\n\n
      \u826f\u304b\u3063\u305f\u70b9\uff1a<\/strong><\/p>\n\n\n\n