{"id":77892,"date":"2025-06-13T10:00:00","date_gmt":"2025-06-13T01:00:00","guid":{"rendered":"https:\/\/www.creationline.com\/tech-blog\/?p=77892"},"modified":"2025-06-09T08:44:07","modified_gmt":"2025-06-08T23:44:07","slug":"gitlab-duo%e3%81%a7%e3%83%9e%e3%83%bc%e3%82%b8%e3%83%aa%e3%82%af%e3%82%a8%e3%82%b9%e3%83%88mr%e3%81%ae%e8%aa%ac%e6%98%8e%e3%82%92%e8%87%aa%e5%8b%95%e4%bd%9c%e6%88%90-gitlab-gitlabduo-ai-2-2","status":"publish","type":"post","link":"https:\/\/www.creationline.com\/tech-blog\/chatgpt-ai\/ai\/77892","title":{"rendered":"GitLab Duo\u3067\u81ea\u52d5\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0 #GitLab #GitLabDuo #AI"},"content":{"rendered":"\n

\u306f\u3058\u3081\u306b<\/h2>\n\n\n\n

GitLab Duo<\/a>\u306f\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u5168\u4f53\u3067AI\u3092\u6d3b\u7528\u3067\u304d\u308b\u67a0\u7d44\u307f\u3067\u3059\u3002
GitLab Duo<\/a>\u306b\u306f\u69d8\u3005\u306a\u6a5f\u80fd(\u4e00\u89a7<\/a>)\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\u4eca\u56de\u306fAI\u306b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3057\u3066\u3082\u3089\u3046\u6a5f\u80fd<\/a>\u3092\u8a66\u3057\u3066\u307f\u307e\u3057\u3087\u3046\uff01<\/p>\n\n\n\n

\u30c1\u30e3\u30ec\u30f3\u30b8\u5185\u5bb9<\/h2>\n\n\n\n

\u4ee5\u524d\u4f5c\u6210\u3057\u305f\u5f01\u5f53\u6ce8\u6587\u30a2\u30d7\u30ea<\/a>\u306b\u5bfe\u3057\u3066GitLab Duo\u3092\u4f7f\u3063\u3066\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3057\u3066\u307f\u307e\u3059\u3002
\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u3066\u3001\u3088\u304f\u3067\u304d\u3066\u3044\u308b\u70b9\u3084\u4fee\u6b63\u304c\u5fc5\u8981\u306a\u70b9\u3092\u8a55\u4fa1\u3057\u3066\u3044\u304d\u307e\u3059\u3002
\u306a\u304a\u3001\/tests<\/code>\u306b\u3088\u308bUT(\u81ea\u52d5\u30c6\u30b9\u30c8)\u306e\u751f\u6210\u3068\u306f\u7570\u306a\u308a\u3001\u672c\u6a5f\u80fd\u306fGitHub Copilot\u306e\u30b9\u30e9\u30c3\u30b7\u30e5\u30b3\u30de\u30f3\u30c9\u306b\u306f\u5b58\u5728\u3057\u307e\u305b\u3093\u3002(\u81ea\u524d\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u66f8\u3044\u3066\u30b3\u30fc\u30c9\u3092\u6539\u5584\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u3059\u3002)<\/p>\n\n\n\n

\u30c1\u30e3\u30ec\u30f3\u30b8\u7d50\u679c<\/h2>\n\n\n\n

\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3057\u3066\u3082\u3089\u3046\u6a5f\u80fd<\/a>\u306e\u4f7f\u3044\u65b9\u306f\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002VS Code\u4e0a\u3067\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3057\u305f\u3044\u30b3\u30fc\u30c9\u3092\u9078\u629e\u3057\u3001GitLab Duo Chat\u3067\/refactor<\/code>\u3068\u5165\u529b\u3059\u308b\u3060\u3051\u3067\u3059\u3002\u5fc5\u8981\u306b\u5fdc\u3058\u3066\/refactor XXX\u3092\u8003\u616e<\/code>\u3084\/refactor XXX\u5f62\u5f0f\u306b\u5909\u66f4<\/code>\u306a\u3069\u3068\u6307\u793a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\u4ed6\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3078\u306e\u5909\u63db\u3082\u53ef\u80fd\u3067\u3059\u3002\u65e9\u901f\u5b9f\u884c\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u76f8\u5909\u308f\u3089\u305a\u82f1\u8a9e\u3067\u3059\u304c\u3001\u6982\u8981\u306e\u5f8c\u306b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u7d50\u679c\u304c\u51fa\u529b\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u5f8c\u308d\u306b\u306f\u30ad\u30fc\u3068\u306a\u308b\u6539\u5584\u70b9\u304c\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u6587\u5b57\u6570\u5236\u9650\u306b\u9054\u3057\u305f\u3088\u3046\u3067\u5207\u308c\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3059\u3002\u3044\u3064\u3082\u306e\u3088\u3046\u306b\u7d9a\u304d<\/code>\u3068\u6307\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u306a\u305c\u304b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u7d50\u679c\u304c\u518d\u51fa\u529b\u3055\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u304c\u3001\u4eca\u5ea6\u306f\u5207\u308c\u305a\u306b\u6700\u5f8c\u307e\u3067\u51fa\u529b\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u30b6\u30c3\u3068\u898b\u6bd4\u3079\u305f\u3068\u3053\u308d2\u56de\u76ee\u306e\u65b9\u304c\u3088\u308a\u6df1\u304f\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3055\u308c\u3066\u3044\u308b\u3088\u3046\u306a\u306e\u3067\u3001\u3053\u3061\u3089\u3092\u8a73\u3057\u304f\u8a55\u4fa1\u3057\u3066\u3044\u304f\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u5143\u306e\u30b3\u30fc\u30c9<\/h3>\n\n\n\n
import React, { useCallback, useState } from 'react';\nimport { mkConfig, generateCsv, download } from 'export-to-csv';\n\nimport awsExports from '.\/aws-exports';\nimport { Amplify } from 'aws-amplify';\nimport { generateClient } from 'aws-amplify\/api';\nimport { createBento } from '.\/graphql\/mutations';\nimport { CreateBentoInput } from '.\/API';\n\nimport I_hamburger from '.\/image\/28206674_s.jpg';\nimport I_karaage from '.\/image\/28796399_s.jpg';\nimport I_makunouchi from '.\/image\/28927123_s.jpg';\nimport I_hirekatsu from '.\/image\/28939604_s.jpg';\nimport { listBentos } from '.\/graphql\/queries';\n\nAmplify.configure(awsExports);\n\n\/\/ v0 by Vercel.\n\/\/ https:\/\/v0.dev\/t\/w1UzOcXfEI5\nexport default function Main() {\n  type Bento = {\n    id: number;\n    name: string;\n    imageUrl: string;\n  };\n  const bentoList: Bento[] = [\n    { id: 1, name: '\u30cf\u30f3\u30d0\u30fc\u30b0', imageUrl: I_hamburger },\n    { id: 2, name: '\u5510\u63da\u3052', imageUrl: I_karaage },\n    { id: 3, name: '\u5e55\u306e\u5185', imageUrl: I_makunouchi },\n    { id: 4, name: '\u30d2\u30ec\u30ab\u30c4', imageUrl: I_hirekatsu },\n  ];\n\n  const [employeeNumber, setEmployeeNumber] = useState('');\n\n  const onClick: React.MouseEventHandler<HTMLDivElement> = useCallback(\n    async (e) => {\n      if (employeeNumber === '') {\n        alert('\u793e\u54e1\u756a\u53f7\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002');\n        return;\n      }\n\n      const bentoId = parseInt(e.currentTarget.dataset.bentoId ?? '');\n      const answer = confirm(bentoList.find((bento) => bento.id === bentoId)?.name + ' \u3092\u6ce8\u6587\u3057\u307e\u3059\u304b\uff1f');\n      if (!answer) {\n        return;\n      }\n\n      \/\/ \u6ce8\u6587\u51e6\u7406\u3002\n      const input: CreateBentoInput = {\n        date: Date.now(),\n        employeeNumber: employeeNumber,\n        bentoId: bentoId,\n      };\n      const response = await generateClient().graphql({ query: createBento, variables: { input: input } });\n      if (response.errors) {\n        throw new Error();\n      }\n\n      alert('\u6ce8\u6587\u3057\u307e\u3057\u305f\u3002');\n    },\n    [employeeNumber],\n  );\n\n  const downloadCsv: React.MouseEventHandler<HTMLButtonElement> = async () => {\n    const csvConfig = mkConfig({\n      useKeysAsHeaders: true,\n      filename: 'orders',\n    });\n\n    const response = await generateClient().graphql({ query: listBentos });\n    if (response.errors) {\n      throw new Error();\n    }\n\n    type CsvRecord = {\n      date: string;\n      employeeNumber: string;\n      bentoId: number;\n    };\n    const records: CsvRecord[] = response.data.listBentos.items.map((item) => {\n      return {\n        date: new Date(item.date).toJSON(),\n        employeeNumber: item.employeeNumber,\n        bentoId: item.bentoId,\n      };\n    });\n\n    const csv = generateCsv(csvConfig)(records);\n    download(csvConfig)(csv);\n  };\n\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-screen py-12 space-y-4 md:py-24\">\n      <div className=\"grid gap-4 w-full max-w-sm p-4 sm:max-w-md\">\n        <div className=\"grid gap-2\">\n          <label className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" htmlFor=\"employee-number\">\n            Employee number\n          <\/label>\n          <input\n            className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n            id=\"employee-number\"\n            placeholder=\"Enter employee number\"\n            value={employeeNumber}\n            onChange={(e) => setEmployeeNumber(e.target.value)}\n          \/>\n        <\/div>\n\n        <div className=\"grid gap-2 mt-10\">\n          <label className=\"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">Choose your bento<\/label>\n          <div className=\"grid gap-2 md:grid-cols-2\">\n            {bentoList.map((bento) => (\n              <div key={bento.id} data-bento-id={bento.id} className=\"flex items-center gap-2 cursor-pointer mt-2 bg-stone-800\" onClick={onClick}>\n                <img alt={bento.name} className=\"aspect-square rounded-md object-cover\" height=\"100\" src={bento.imageUrl} width=\"100\" \/>\n                <span className=\"text-center text-base\">{bento.name}<\/span>\n              <\/div>\n            ))}\n          <\/div>\n        <\/div>\n\n        <button\n          className=\"mt-20 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2\"\n          onClick={downloadCsv}>\n          CSV output\n        <\/button>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
1\u56de\u76ee\u306e\u51fa\u529b\u7d50\u679c<\/h3>\n\n\n\n
import React, { useCallback, useState } from 'react';\nimport { mkConfig, generateCsv, download } from 'export-to-csv';\n\nimport awsExports from '.\/aws-exports';\nimport { Amplify } from 'aws-amplify';\nimport { generateClient } from 'aws-amplify\/api';\nimport { createBento } from '.\/graphql\/mutations';\nimport { CreateBentoInput } from '.\/API';\nimport { listBentos } from '.\/graphql\/queries';\n\n\/\/ Bento images\nimport I_hamburger from '.\/image\/28206674_s.jpg';\nimport I_karaage from '.\/image\/28796399_s.jpg';\nimport I_makunouchi from '.\/image\/28927123_s.jpg';\nimport I_hirekatsu from '.\/image\/28939604_s.jpg';\n\nAmplify.configure(awsExports);\n\n\/\/ Types\ntype Bento = {\n  id: number;\n  name: string;\n  imageUrl: string;\n};\n\ntype BentoOrder = {\n  date: string;\n  employeeNumber: string;\n  bentoId: number;\n};\n\n\/\/ Constants\nconst BENTO_LIST: Bento[] = [\n  { id: 1, name: '\u30cf\u30f3\u30d0\u30fc\u30b0', imageUrl: I_hamburger },\n  { id: 2, name: '\u5510\u63da\u3052', imageUrl: I_karaage },\n  { id: 3, name: '\u5e55\u306e\u5185', imageUrl: I_makunouchi },\n  { id: 4, name: '\u30d2\u30ec\u30ab\u30c4', imageUrl: I_hirekatsu },\n];\n\nconst CSV_CONFIG = mkConfig({\n  useKeysAsHeaders: true,\n  filename: 'orders',\n});\n\n\/\/ Components\nconst BentoCard: React.FC<{\n  bento: Bento;\n  onClick: (bentoId: number) => void;\n}> = ({ bento, onClick }) => (\n  <div \n    data-bento-id={bento.id} \n    className=\"flex items-center gap-2 cursor-pointer mt-2 bg-stone-800\" \n    onClick={() => onClick(bento.id)}\n  >\n    <img \n      alt={bento.name} \n      className=\"aspect-square rounded-md object-cover\" \n      height=\"100\" \n      src={bento.imageUrl} \n      width=\"100\" \n    \/>\n    <span className=\"text-center text-base\">{bento.name}<\/span>\n  <\/div>\n);\n\n\/\/ Main component\nexport default function Main() {\n  const [employeeNumber, setEmployeeNumber] = useState('');\n  const client = generateClient();\n\n  const handleBentoSelection = useCallback(\n    async (bentoId: number) => {\n      if (!employeeNumber) {\n        alert('\u793e\u54e1\u756a\u53f7\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002');\n        return;\n      }\n\n      const selectedBento = BENTO_LIST.find((bento) => bento.id === bentoId);\n      if (!selectedBento) {\n        alert('\u9078\u629e\u3055\u308c\u305f\u5f01\u5f53\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002');\n        return;\n      }\n\n      const confirmOrder = confirm(`${selectedBento.name} \u3092\u6ce8\u6587\u3057\u307e\u3059\u304b\uff1f`);\n      if (!confirmOrder) {\n        return;\n      }\n\n      try {\n        \/\/ Create order\n        const input: CreateBentoInput = {\n          date: Date.now(),\n          employeeNumber,\n          bentoId,\n        };\n        \n        const response = await client.graphql({ \n          query: createBento, \n          variables: { input } \n        });\n        \n        if (response.errors) {\n          throw new Error('\u6ce8\u6587\u306e\u51e6\u7406\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\n        }\n\n        alert('\u6ce8\u6587\u3057\u307e\u3057\u305f\u3002');\n      } catch (error) {\n        console.error('Order submission error:', error);\n        alert('\u6ce8\u6587\u306e\u51e6\u7406\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002');\n      }\n    },\n    [employeeNumber]\n  );\n\n  const handleDownloadCsv = async () => {\n    try {\n      const response = await client.graphql({ query: listBentos });\n      \n      if (response.errors) {\n        throw new Error('\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\n      }\n\n      const records: BentoOrder[] = response.data.listBentos.items.map((item) => ({\n        date: new Date(item.date).toJSON(),\n        employeeNumber: item.employeeNumber,\n        bentoId: item.bentoId,\n      }));\n\n      const csv = generateCsv(CSV_CONFIG)(records);\n      download(CSV_CONFIG)(csv);\n    } catch (error) {\n      console.error('CSV download error:', error);\n      alert('CSV\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002');\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-screen py-12 space-y-4 md:py-24\">\n      <div className=\"grid gap-4 w-full max-w-sm p-4 sm:max-w-md\">\n        {\/* Employee Number Input *\/}\n        <div className=\"grid gap-2\">\n          <label \n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" \n            htmlFor=\"employee-number\"\n          >\n            Employee number\n          <\/label>\n          <input\n            className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n            id=\"employee-number\"\n            placeholder=\"Enter employee number\"\n            value={employeeNumber}\n            onChange={(e) => setEmployeeNumber(e.target.value)}\n          \/>\n        <\/div>\n\n        {\/* Bento Selection *\/}\n        <div className=\"grid gap-2 mt-10\">\n          <label className=\"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            Choose your bento\n          <\/label>\n          <div className=\"grid gap-2 md:grid-cols-2\">\n            {BENTO_LIST.map((bento) => (\n              <BentoCard \n                key={bento.id} \n                bento={bento} \n                onClick={handleBentoSelection} \n              \/>\n            ))}\n          <\/div>\n        <\/div>\n\n        {\/* CSV Download Button *\/}\n        <button\n          className=\"mt-20 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2\"\n          onClick={handleDownloadCsv}\n        >\n          CSV output\n        <\/button>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
2\u56de\u76ee\u306e\u51fa\u529b\u7d50\u679c\uff1a<\/h3>\n\n\n\n
import React, { useCallback, useState } from 'react';\nimport { mkConfig, generateCsv, download } from 'export-to-csv';\n\nimport awsExports from '.\/aws-exports';\nimport { Amplify } from 'aws-amplify';\nimport { generateClient } from 'aws-amplify\/api';\nimport { createBento } from '.\/graphql\/mutations';\nimport { CreateBentoInput } from '.\/API';\nimport { listBentos } from '.\/graphql\/queries';\n\n\/\/ Bento images\nimport I_hamburger from '.\/image\/28206674_s.jpg';\nimport I_karaage from '.\/image\/28796399_s.jpg';\nimport I_makunouchi from '.\/image\/28927123_s.jpg';\nimport I_hirekatsu from '.\/image\/28939604_s.jpg';\n\nAmplify.configure(awsExports);\n\n\/\/ Types\ntype Bento = {\n  id: number;\n  name: string;\n  imageUrl: string;\n};\n\ntype CsvRecord = {\n  date: string;\n  employeeNumber: string;\n  bentoId: number;\n};\n\n\/\/ Constants\nconst BENTO_LIST: Bento[] = [\n  { id: 1, name: '\u30cf\u30f3\u30d0\u30fc\u30b0', imageUrl: I_hamburger },\n  { id: 2, name: '\u5510\u63da\u3052', imageUrl: I_karaage },\n  { id: 3, name: '\u5e55\u306e\u5185', imageUrl: I_makunouchi },\n  { id: 4, name: '\u30d2\u30ec\u30ab\u30c4', imageUrl: I_hirekatsu },\n];\n\nconst CSV_CONFIG = mkConfig({\n  useKeysAsHeaders: true,\n  filename: 'orders',\n});\n\n\/\/ Custom hooks\nconst useGraphQLClient = () => {\n  return generateClient();\n};\n\n\/\/ Components\nconst BentoCard: React.FC<{\n  bento: Bento;\n  onSelect: (bentoId: number) => void;\n}> = ({ bento, onSelect }) => (\n  <div \n    data-bento-id={bento.id} \n    className=\"flex items-center gap-2 cursor-pointer mt-2 bg-stone-800 hover:bg-stone-700 transition-colors rounded-md p-2\" \n    onClick={() => onSelect(bento.id)}\n  >\n    <img \n      alt={bento.name} \n      className=\"aspect-square rounded-md object-cover\" \n      height=\"100\" \n      src={bento.imageUrl} \n      width=\"100\" \n    \/>\n    <span className=\"text-center text-base\">{bento.name}<\/span>\n  <\/div>\n);\n\nconst EmployeeNumberInput: React.FC<{\n  value: string;\n  onChange: (value: string) => void;\n}> = ({ value, onChange }) => (\n  <div className=\"grid gap-2\">\n    <label \n      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" \n      htmlFor=\"employee-number\"\n    >\n      Employee number\n    <\/label>\n    <input\n      className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n      id=\"employee-number\"\n      placeholder=\"Enter employee number\"\n      value={value}\n      onChange={(e) => onChange(e.target.value)}\n      required\n    \/>\n  <\/div>\n);\n\n\/\/ Utility functions\nconst validateEmployeeNumber = (employeeNumber: string): boolean => {\n  return employeeNumber.trim() !== '';\n};\n\nconst findBentoById = (bentoId: number): Bento | undefined => {\n  return BENTO_LIST.find((bento) => bento.id === bentoId);\n};\n\n\/\/ Main component\nexport default function Main() {\n  const [employeeNumber, setEmployeeNumber] = useState('');\n  const [isLoading, setIsLoading] = useState(false);\n  const client = useGraphQLClient();\n\n  const handleBentoSelection = useCallback(\n    async (bentoId: number) => {\n      if (!validateEmployeeNumber(employeeNumber)) {\n        alert('\u793e\u54e1\u756a\u53f7\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002');\n        return;\n      }\n\n      const selectedBento = findBentoById(bentoId);\n      if (!selectedBento) {\n        alert('\u9078\u629e\u3055\u308c\u305f\u5f01\u5f53\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002');\n        return;\n      }\n\n      const confirmOrder = confirm(`${selectedBento.name} \u3092\u6ce8\u6587\u3057\u307e\u3059\u304b\uff1f`);\n      if (!confirmOrder) {\n        return;\n      }\n\n      setIsLoading(true);\n      \n      try {\n        const input: CreateBentoInput = {\n          date: Date.now(),\n          employeeNumber: employeeNumber.trim(),\n          bentoId,\n        };\n        \n        const response = await client.graphql({ \n          query: createBento, \n          variables: { input } \n        });\n        \n        if (response.errors) {\n          throw new Error('\u6ce8\u6587\u306e\u51e6\u7406\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\n        }\n\n        alert('\u6ce8\u6587\u3057\u307e\u3057\u305f\u3002');\n        setEmployeeNumber(''); \/\/ Clear form after successful order\n      } catch (error) {\n        console.error('Order submission error:', error);\n        alert('\u6ce8\u6587\u306e\u51e6\u7406\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002');\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [employeeNumber, client]\n  );\n\n  const handleDownloadCsv = useCallback(async () => {\n    setIsLoading(true);\n    \n    try {\n      const response = await client.graphql({ query: listBentos });\n      \n      if (response.errors) {\n        throw new Error('\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\n      }\n\n      const records: CsvRecord[] = response.data.listBentos.items.map((item) => ({\n        date: new Date(item.date).toJSON(),\n        employeeNumber: item.employeeNumber,\n        bentoId: item.bentoId,\n      }));\n\n      const csv = generateCsv(CSV_CONFIG)(records);\n      download(CSV_CONFIG)(csv);\n    } catch (error) {\n      console.error('CSV download error:', error);\n      alert('CSV\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002');\n    } finally {\n      setIsLoading(false);\n    }\n  }, [client]);\n\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-screen py-12 space-y-4 md:py-24\">\n      <div className=\"grid gap-4 w-full max-w-sm p-4 sm:max-w-md\">\n        {\/* Employee Number Input *\/}\n        <EmployeeNumberInput \n          value={employeeNumber}\n          onChange={setEmployeeNumber}\n        \/>\n\n        {\/* Bento Selection *\/}\n        <div className=\"grid gap-2 mt-10\">\n          <label className=\"leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            Choose your bento\n          <\/label>\n          <div className=\"grid gap-2 md:grid-cols-2\">\n            {BENTO_LIST.map((bento) => (\n              <BentoCard \n                key={bento.id} \n                bento={bento} \n                onSelect={handleBentoSelection} \n              \/>\n            ))}\n          <\/div>\n        <\/div>\n\n        {\/* CSV Download Button *\/}\n        <button\n          className=\"mt-20 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2\"\n          onClick={handleDownloadCsv}\n          disabled={isLoading}\n        >\n          {isLoading ? 'Processing...' : 'CSV output'}\n        <\/button>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u7d50\u679c\u306e\u8a55\u4fa1<\/h2>\n\n\n\n
import<\/code>\u306e\u6574\u7406<\/h3>\n\n\n\n
VS Code\u306b\u81ea\u52d5\u3067\u8a18\u8ff0\u3055\u305b\u305fimport\u306e\u4e26\u3073\u9806\u304c\u6574\u7406\u3055\u308c\u307e\u3057\u305f\u3002\u6709\u308a\u96e3\u3044\u3067\u3059\u304c\u3001\u6574\u7406\u304c\u5fc5\u8981\u306a\u306e\u3067\u3042\u308c\u3070ESLint\u3067\u78ba\u5b9f\u306b\u5bfe\u5fdc\u3057\u305f\u65b9\u304c\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u3054\u3068\u306e\u30b3\u30e1\u30f3\u30c8<\/h3>\n\n\n\n
\u5404\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u306e\u5148\u982d\u306b\u7c21\u5358\u306a\u30b3\u30e1\u30f3\u30c8\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\u3002\u82f1\u8a9e\u3067\u3059\u3002\u591a\u5c11\u3067\u3059\u304c\u3001\u30b3\u30fc\u30c9\u3092\u8aad\u3080\u969b\u306e\u52a9\u3051\u306b\u306a\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
v0\u3067\u751f\u6210\u3055\u308c\u305f\u65e8\u306e\u30b3\u30e1\u30f3\u30c8<\/h3>\n\n\n\n
Main<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fv0<\/a>\u3067\u751f\u6210\u3057\u3066\u3042\u308a\u3001\u305d\u306e\u65e8\u304c\u30b3\u30e1\u30f3\u30c8\u3057\u3066\u3042\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u305d\u306e\u30b3\u30e1\u30f3\u30c8\u306f\u524a\u9664\u3055\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u624b\u52d5\u3067\u5fa9\u6d3b\u3055\u305b\u308b\u306e\u304c\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u578b\u5b9a\u7fa9\u306e\u5207\u308a\u51fa\u3057<\/h3>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u5b9a\u7fa9\u3057\u3066\u3042\u3063\u305f\u578b\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5916\u306b\u5207\u308a\u51fa\u3055\u308c\u307e\u3057\u305f\u3002\u578b\u306e\u518d\u5229\u7528\u3084\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u672c\u4f53\u306e\u7c21\u7d20\u5316\u3068\u3044\u3046\u89b3\u70b9\u3067\u306f\u5207\u308a\u51fa\u3059\u306e\u3082\u60aa\u304f\u306a\u3044\u3067\u3059\u304c\u3001\u30ab\u30d7\u30bb\u30eb\u5316\u30fb\u96a0\u853d\u30fb\u51dd\u96c6\u5ea6\u306a\u3069\u306e\u89b3\u70b9\u304b\u3089\u306f\u4f7f\u3046\u7b87\u6240\u306e\u8fd1\u304f\u3067\u5b9a\u7fa9\u3057\u3066\u304a\u3044\u305f\u65b9\u304c\u3088\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5b9a\u6570\u540d\u306e\u5909\u66f4<\/h3>\n\n\n\n
bentoList<\/code>\u304cBENTO_LIST<\/code>\u306b\u5909\u66f4\u3055\u308c\u307e\u3057\u305f\u3002\u4eca\u56de\u306f\u30e2\u30c3\u30af\u30c7\u30fc\u30bf\u3067\u56fa\u5b9a\u306e\u4e00\u89a7\u306a\u306e\u3067\u3053\u306e\u540d\u524d\u306e\u65b9\u304c\u3088\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u672c\u6765\u306fAPI\u304b\u3089\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092\u4fdd\u6301\u3059\u308b\u5909\u6570\u306a\u306e\u3067\u3001\u5143\u306e\u540d\u524d\u306e\u65b9\u304c\u3088\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u8a2d\u5b9a\u306e\u5207\u308a\u51fa\u3057<\/h3>\n\n\n\n
\u8a2d\u5b9a\u5024CSV_CONFIG<\/code>\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5916\u306b\u5207\u308a\u51fa\u3055\u308c\u307e\u3057\u305f\u3002CSV\u95a2\u9023\u306f\u5225\u30d5\u30a1\u30a4\u30eb\u306b\u5207\u308a\u51fa\u3059\u3068\u8cac\u52d9\u306e\u660e\u78ba\u5316\u30fb\u518d\u5229\u7528\u306e\u5bb9\u6613\u5316\u30fb\u672c\u30d5\u30a1\u30a4\u30eb\u306e\u7c21\u7d20\u5316\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u306e\u4e00\u6b69\u3068\u3057\u3066\u3001\u307e\u305a\u306f\u3053\u306e\u8a2d\u5b9a\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5916\u306b\u5207\u308a\u51fa\u3055\u308c\u305f\u306e\u306f\u3088\u3044\u30b9\u30c6\u30c3\u30d7\u3067\u3059\u3002\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u7d9a\u304d\u3067\u307e\u305f\u306f\u3044\u305a\u308c\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3092\u9032\u3081\u308c\u3070\u3088\u3055\u305d\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
GraphQL\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u53d6\u5f97\u51e6\u7406\u306e\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u5316<\/h3>\n\n\n\n
GraphQL\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u751f\u6210\u3059\u308bgenerateClient<\/code>\u306e\u547c\u3073\u51fa\u3057\u304cuseGraphQLClient<\/code>\u5185\u306b\u5207\u308a\u51fa\u3055\u308c\u307e\u3057\u305f\u3002\u3053\u308c\u3067\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u751f\u6210\u51e6\u7406\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u969b\u306b\u624b\u3092\u5165\u308c\u3084\u3059\u304f\u306a\u308a\u307e\u3057\u305f\u3002\u3053\u306e\u90e8\u5206\u3082\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u5225\u30d5\u30a1\u30a4\u30eb\u306b\u5207\u308a\u51fa\u3059\u3068\u3055\u3089\u306b\u3088\u304f\u306a\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5207\u308a\u51fa\u3057<\/h3>\n\n\n\n
Main<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e2d\u306b\u76f4\u63a5\u8a18\u8ff0\u3057\u3066\u3044\u305f\u8981\u7d20\u306e\u3046\u3061\u3001\u610f\u5473\u306e\u3042\u308b\u56fa\u307e\u308a\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u5207\u308a\u51fa\u3055\u308c\u307e\u3057\u305f\u3002\u7279\u306bReact\u521d\u5fc3\u8005\u304c\u66f8\u3044\u305f\u30b3\u30fc\u30c9\u3084v0\u3067\u751f\u6210\u3057\u305f\u30b3\u30fc\u30c9\u306a\u3069\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u7c92\u5ea6\u304c\u8352\u3059\u304e\u308b\u3053\u3068\u304c\u591a\u3044\u306e\u3067\u3001\u3053\u306e\u3088\u3046\u306a\u6539\u5584\u306f\u54c1\u8cea\u5411\u4e0a\u3060\u3051\u3067\u306a\u304f\u5b66\u7fd2\u76ee\u7684\u3067\u3082\u52a9\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
BentoCard<\/code>\u306fhover:bg-stone-700 transition-colors rounded-md p-2<\/code>\u3068\u3044\u3046class<\/code>\u304c\u8ffd\u52a0\u3055\u308c\u3066\u898b\u305f\u76ee\u304c\u5909\u308f\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002EmployeeNumberInput<\/code>\u306einput<\/code>\u8981\u7d20\u306b\u306frequired<\/code>\u5c5e\u6027\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u751f\u6210\u7d50\u679c\u306e\u30ec\u30d3\u30e5\u30fc\u3084\u52d5\u4f5c\u306e\u78ba\u8a8d\u306f\u5fc5\u9808\u3067\u3059\u304c\u3001\u3061\u3087\u3063\u3068\u3057\u305f\u5909\u5316\u306f\u898b\u843d\u3068\u3057\u3066\u3057\u307e\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30ca\u30c3\u30d7\u30b7\u30e7\u30c3\u30c8\u30c6\u30b9\u30c8\u304c\u3042\u308b\u3068\u610f\u56f3\u3057\u306a\u3044\u5dee\u5206\u3092\u78ba\u5b9f\u306b\u691c\u51fa\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\u306e\u5207\u308a\u51fa\u3057<\/h3>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u5b9a\u7fa9\u3057\u3066\u3042\u3063\u305f\u95a2\u6570\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5916\u306b\u5207\u308a\u51fa\u3055\u308c\u307e\u3057\u305f\u3002\u3053\u308c\u3067\u3001\u518d\u5229\u7528\u3084\u3055\u3089\u306a\u308b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u304c\u884c\u3044\u3084\u3059\u304f\u306a\u308a\u307e\u3057\u305f\u3002\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3084\u5f01\u5f53\u30c7\u30fc\u30bf\u306e\u51e6\u7406\u306a\u3069\u306f\u3001\u4eca\u5f8c\u30e2\u30c7\u30eb\u3092\u5c0e\u5165\u3057\u3066\u305d\u3061\u3089\u306b\u79fb\u52d5\u3059\u308b\u3068\u3088\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5f01\u5f53\u9078\u629e\u6642\u306e\u51e6\u7406<\/h3>\n\n\n\n
\u5f01\u5f53\u9078\u629e\u6642\u306e\u30cf\u30f3\u30c9\u30e9\u95a2\u6570\u540d\u304conClick<\/code>\u304b\u3089handleBentoSelection<\/code>\u306b\u6539\u5584\u3055\u308c\u307e\u3057\u305f\u3002React\u3067\u306e\u6a19\u6e96\u7684\u306a\u540d\u524d\u306e\u4ed8\u3051\u65b9\u306b\u5f93\u3063\u3066\u3044\u3066\u3001\u3088\u3044\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
BentoCard<\/code>\u306eprops<\/code>\u3067Bento<\/code>\u3092\u53d7\u3051\u53d6\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u305f\u3081\u3001BentoCard<\/code>\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u5185\u3067\u306f\u5f01\u5f53\u306eID\u304c\u65e2\u77e5\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u305d\u306e\u305f\u3081\u3001\u9078\u629e\u3055\u308c\u305f\u5f01\u5f53\u306eID\u3092data<\/code>\u5c5e\u6027\u304b\u3089\u53d6\u5f97\u3057\u3066\u3044\u305f\u51e6\u7406\u306f\u5ec3\u6b62\u3055\u308c\u3001async<\/code>\u306e\u95a2\u6570\u306b\u76f4\u63a5\u5f01\u5f53ID\u3092\u6e21\u3059\u8a2d\u8a08\u306b\u5909\u66f4\u3055\u308c\u3066\u3044\u307e\u3059\u3002data<\/code>\u5c5e\u6027\u306f\u4fbf\u5229\u3067\u3059\u304c\u3001\u8907\u96d1\u5316\u3084\u30d0\u30b0\u306e\u539f\u56e0\u306b\u306a\u308b\u3053\u3068\u304c\u3042\u308b\u305f\u3081\u3001\u4eca\u56de\u306e\u5b9f\u88c5\u306e\u65b9\u304c\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5f01\u5f53\u691c\u7d22\u51e6\u7406\u306f\u540d\u524d\u5909\u66f4\u3068\u51e6\u7406\u306e\u5207\u308a\u51fa\u3057\u304c\u884c\u308f\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30ed\u30b8\u30c3\u30af\u306f\u5143\u306e\u307e\u307e\u3067\u3059\u3002async<\/code>\u306e\u95a2\u6570\u3067\u5f01\u5f53\u306eID\u3067\u306f\u306a\u304f\u5f01\u5f53\u81ea\u4f53\u3092\u53d7\u3051\u53d6\u308b\u3088\u3046\u306b\u3059\u308c\u3070\u3001\u3053\u306e\u691c\u7d22\u51e6\u7406\u306f\u4e0d\u8981\u306b\u306a\u308b\u306f\u305a\u3067\u3059\u3002\u3042\u3068\u4e00\u6b69\u3067\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u6b21\u306f\u3001\u9078\u629e\u3055\u308c\u305f\u5f01\u5f53\u304c\u5f01\u5f53\u306e\u4e00\u89a7\u304b\u3089\u898b\u3064\u304b\u3063\u305f\u304b\u3069\u3046\u304b\u306e\u78ba\u8a8d\u3067\u3059\u3002\u3053\u306e\u78ba\u8a8d\u51e6\u7406\u306f\u5143\u3005\u306f\u5b58\u5728\u3057\u3066\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u5b58\u5728\u3059\u308b\u5f01\u5f53\u306e\u4e00\u89a7\u304b\u3089\u9078\u629e\u3055\u305b\u3066\u3044\u308b\u306e\u3067\u300c\u898b\u3064\u304b\u3089\u306a\u3044\u300d\u3068\u3044\u3046\u3053\u3068\u306f\u8d77\u3053\u308a\u3048\u305a\u3001\u7121\u99c4\u306a\u51e6\u7406\u3068\u8a00\u3048\u307e\u3059\u3002\u4f55\u3089\u304b\u306e\u554f\u984c\u304c\u8d77\u3053\u3063\u305f\u3068\u304d\u306e\u305f\u3081\u30c7\u30a3\u30d5\u30a7\u30f3\u30b7\u30d6\u306b\u30ac\u30fc\u30c9\u3057\u3066\u304a\u304f\u3068\u3044\u3046\u8003\u3048\u65b9\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u4e0d\u8981\u306a\u30b3\u30fc\u30c9\u306b\u3088\u3063\u3066\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u304c\u4e0b\u304c\u308b\u3053\u3068\u3068\u306e\u30c8\u30ec\u30fc\u30c9\u30aa\u30d5\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u5148\u8ff0\u306e\u3088\u3046\u306b\u5f01\u5f53ID\u3067\u306f\u306a\u304f\u5f01\u5f53\u81ea\u4f53\u3092\u53d7\u3051\u53d6\u3063\u3066\u3044\u308c\u3070\u3001\u305d\u3082\u305d\u3082\u691c\u7d22\u51e6\u7406\u81ea\u4f53\u304c\u4e0d\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u78ba\u8a8d\u7528\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb\u3092\u4f7f\u3063\u305f\u65b9\u5f0f\u306b\u5909\u66f4\u3055\u308c\u307e\u3057\u305f\u3002\u5143\u306e\u51e6\u7406\u3067\u306f\u691c\u7d22\u3068\u78ba\u8a8d\u304c\u4e00\u4f53\u306b\u306a\u3063\u3066\u3044\u305f\u3068\u3044\u3046\u3053\u3068\u3082\u3042\u308a\u307e\u3059\u304c\u3001\u4eca\u56de\u306e\u5909\u66f4\u3067\u660e\u3089\u304b\u306b\u5206\u304b\u308a\u3084\u3059\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u306a\u304a\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb\u306fESLint\u3067\u4f7f\u7528\u3092\u5f37\u5236\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u78ba\u8a8d\u7d50\u679c\u3092\u4fdd\u6301\u3059\u308b\u5909\u6570\u306e\u540d\u524d\u304canswer<\/code>\u304b\u3089confirmOrder<\/code>\u306b\u5909\u66f4\u3055\u308c\u3001\u3088\u308a\u5177\u4f53\u7684\u306a\u5185\u5bb9\u3092\u8868\u3059\u3088\u3046\u306b\u6539\u5584\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u6ce8\u6587\u306e\u30e1\u30a4\u30f3\u51e6\u7406\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\u307e\u305a\u3001\u5168\u4f53\u304csetIsLoading(true)<\/code>\u3068setIsLoading(false)<\/code>\u3067\u631f\u307e\u308c\u307e\u3057\u305f\u3002\u3053\u306estate\u306f\u65b0\u305f\u306b\u5c0e\u5165\u3055\u308c\u305f\u3082\u306e\u3067\u3059\u304c\u3001\u3053\u306estate\u3067\u306e\u5236\u5fa1\u306b\u3064\u3044\u3066\u306f\u5f8c\u307b\u3069\u8a73\u3057\u304f\u78ba\u8a8d\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002\u6b21\u306b\u3001\u5168\u4f53\u304ctry<\/code>-catch<\/code>\u3067\u56f2\u307e\u308c\u3066\u3044\u307e\u3059\u3002GraphQL\u306eAPI\u3092\u547c\u3073\u51fa\u3059\u90e8\u5206\u306a\u306e\u3067\u3001\u3053\u306e\u3088\u3046\u306btry<\/code>\u3067\u56f2\u3093\u3067\u304a\u3044\u305f\u65b9\u304c\u5b89\u5168\u3067\u3057\u3087\u3046\u3002\u305d\u308c\u304b\u3089\u3001API\u547c\u3073\u51fa\u3057\u306e\u7d50\u679c\u304c\u30a8\u30e9\u30fc\u3060\u3063\u305f(response.errors<\/code>)\u5834\u5408\u306f\u5358\u306bthrow new Error()<\/code>\u3057\u3066\u3044\u308b\u3060\u3051\u3060\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3082\u3046\u5c11\u3057\u30de\u30b7\u306a\u30a8\u30e9\u30fc\u8868\u793a\u306b\u5909\u66f4\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u7d9a\u3051\u3066\u3001\u7d30\u304b\u3044\u90e8\u5206\u3092\u898b\u3066\u3044\u304d\u307e\u3059\u3002employeeNumber<\/code>\u306f\u5165\u529b\u5024\u3092\u305d\u306e\u307e\u307e\u63a1\u7528\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001trim<\/code>\u3057\u305f\u7d50\u679c\u3092\u4f7f\u3046\u3088\u3046\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u305d\u306e\u3088\u3046\u306a\u8981\u4ef6\u3067\u3042\u308c\u3070\u3053\u308c\u3067\u3088\u3044\u3067\u3059\u304c\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070\u4e0d\u8981\u306a\u51e6\u7406\u3092\u8ffd\u52a0\u3055\u308c\u3066\u30d0\u30b0\u304c\u6df7\u5165\u3057\u305f\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\u81ea\u52d5\u30c6\u30b9\u30c8(UT)\u304c\u3042\u308c\u3070\u3001\u610f\u56f3\u3057\u306a\u3044\u6319\u52d5\u306e\u5909\u5316\u3092\u691c\u51fa\u3067\u304d\u308b\u53ef\u80fd\u6027\u304c\u9ad8\u307e\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
bentoId: bentoId<\/code>\u306fbentoId<\/code>\u3068\u3044\u3046\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u306b\u5909\u66f4\u3055\u308c\u307e\u3057\u305f\u3002\u3053\u306e\u5f8c\u306b\u51fa\u3066\u304f\u308b{ input: input }<\/code>\u3082{ input }<\/code>\u306b\u5909\u66f4\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3064\u3044\u3066\u306f\u3001\u5358\u306b\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u306e\u554f\u984c\u3067\u3042\u308a\u3001\u3069\u3061\u3089\u304c\u3088\u3044\u3068\u306f\u8a00\u3044\u304d\u308c\u307e\u305b\u3093\u3002\u5fc5\u8981\u3067\u3042\u308c\u3070ESLint\u3067\u3069\u3061\u3089\u304b\u3092\u5f37\u5236\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
CSV\u51fa\u529b\u51e6\u7406<\/h3>\n\n\n\n
\u540d\u524d\u306e\u5909\u66f4\u3084try<\/code>-catch<\/code>\u306e\u5c0e\u5165\u306a\u3069\u3001\u5f01\u5f53\u9078\u629e\u6642\u306e\u51e6\u7406\u3068\u540c\u69d8\u306e\u6539\u5584\u304c\u52a0\u3048\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u305d\u308c\u3089\u306f\u8a73\u7d30\u3092\u5272\u611b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30a2\u30ed\u30fc\u95a2\u6570\u3067\u30d6\u30ed\u30c3\u30af\u30dc\u30c7\u30a3\u306ereturn<\/code>\u3092\u4f7f\u3063\u3066\u3044\u305f\u7b87\u6240\u304c\u5f0f\u30dc\u30c7\u30a3\u306ereturn<\/code>\u306b\u5909\u66f4\u3055\u308c\u307e\u3057\u305f\u3002\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u306e\u554f\u984c\u3068\u3082\u8a00\u3048\u307e\u3059\u304c\u3001\u5f8c\u8005\u306e\u65b9\u304c\u30b9\u30c3\u30ad\u30ea\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3082\u3001ESLint\u3067\u5f37\u5236\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u95a2\u6570\u306ereturn<\/code>\u90e8\u5206<\/h3>\n\n\n\n
\u8981\u7d20\u306e\u56fa\u307e\u308a\u304c\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u5207\u308a\u51fa\u3055\u308c\u307e\u3057\u305f\u3002\u898b\u3084\u3059\u304f\u3001\u5206\u304b\u308a\u3084\u3059\u304f\u306a\u308a\u3001\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u304c\u5411\u4e0a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
loading<\/code>\u3068\u3044\u3046state<\/h3>\n\n\n\n
\u4eca\u56de\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3067loading<\/code>\u3068\u3044\u3046state\u304c\u65b0\u305f\u306b\u5c0e\u5165\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3053\u306e\u5024\u304c\u53c2\u7167\u3055\u308c\u3066\u3044\u308b\u306e\u306fCSV\u51fa\u529b\u30dc\u30bf\u30f3\u306e\u5236\u5fa1\u3060\u3051\u3067\u3059\u3002\u30ed\u30fc\u30c9(\u51e6\u7406)\u4e2d\u306fCSV\u51fa\u529b\u3092\u5b9f\u884c\u3055\u305b\u306a\u3044\u3088\u3046\u306b\u5909\u66f4\u3055\u308c\u305f\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3053\u306e\u5024\u3092\u5236\u5fa1\u3057\u3066\u3044\u308b\u306e\u306f2\u7b87\u6240\u3067\u3059\u30021\u3064\u306f\u3001\u5f01\u5f53\u8cfc\u5165\u6642\u306eAPI\u547c\u3073\u51fa\u3057\u524d\u5f8c(\u5148\u8ff0\u306e\u7b87\u6240)\u3067\u3059\u3002\u3082\u30461\u3064\u306f\u3001CSV\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u51e6\u7406\u306e\u958b\u59cb\u6642\u306btrue<\/code>\u306b\u3057\u3066\u7d42\u4e86\u6642\u306bfalse<\/code>\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3064\u307e\u308a\u3001API\u547c\u3073\u51fa\u3057\u4e2d\u3084CSV\u51fa\u529b\u4e2d\u306fCSV\u51fa\u529b\u30dc\u30bf\u30f3\u3092\u62bc\u3055\u305b\u306a\u3044\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u524d\u8005\u306f\u3001API\u547c\u3073\u51fa\u3057\u4e2d\u3067\u3082CSV\u51fa\u529b\u3092\u30ea\u30af\u30a8\u30b9\u30c8\u3067\u304d\u3066\u3088\u3044\u6c17\u304c\u3059\u308b\u306e\u3067\u3001\u4e0d\u8981\u306a\u30ac\u30fc\u30c9\u306b\u3088\u3063\u3066UX\u304c\u4f4e\u4e0b\u3057\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u3088\u3046\u306b\u601d\u3048\u307e\u3059\u3002\u5f8c\u8005\u306f\u9023\u6253\u9632\u6b62\u306a\u3069\u306b\u6709\u52b9\u306a\u5b9f\u88c5\u30d1\u30bf\u30fc\u30f3\u306a\u306e\u3067\u3001\u3053\u308c\u3067\u554f\u984c\u306a\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\u81ea\u52d5\u30c6\u30b9\u30c8(UT)<\/h2>\n\n\n\n
\u5148\u65e5\u306e\u8a18\u4e8b<\/a>\u3067GitLab Duo\u3092\u4f7f\u3063\u3066UT\u3092\u81ea\u52d5\u751f\u6210\u3057\u3001\u4eba\u529b\u3067\u5fae\u8abf\u6574\u3057\u3066\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u306b\u3088\u3063\u3066\u4e00\u90e8\u306eUT\u304c\u5931\u6557\u3059\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u8a73\u7d30\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u300cmkConfig<\/code>\u304c\u547c\u3070\u308c\u308b\u306f\u305a\u3060\u304c\u547c\u3070\u308c\u3066\u3044\u306a\u3044\u300d\u3068\u3044\u3046\u5185\u5bb9\u3067\u3059\u3002\u5148\u8ff0\u306e\u901a\u308a\u3001mkConfig<\/code>\u306e\u547c\u3073\u51fa\u3057\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306b\u3042\u3063\u305f\u3082\u306e\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5916\u306b\u5207\u308a\u51fa\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u3067\u306f\u306a\u304fimport<\/code>\u6642\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002UT\u3067\u306f\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u306e\u5b9f\u884c\u524d(beforeEach<\/code>)\u306bclearAllMocks<\/code>\u3057\u3066\u304a\u308a\u3001\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u5185\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306b\u306fmkConfig<\/code>\u306f\u547c\u3070\u308c\u306a\u3044\u305f\u3081\u3001\u30c6\u30b9\u30c8\u304c\u5931\u6557\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u300c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306bmkConfig<\/code>\u304c\u547c\u3070\u308c\u308b\u306f\u305a\u300d\u3068\u3044\u3046\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\u81ea\u4f53\u304c\u4e0d\u8981\u306b\u306a\u3063\u305f\u305f\u3081\u3001\u5f53\u8a72\u7b87\u6240\u3092\u524a\u9664(\u3072\u3068\u307e\u305a\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8)\u3057\u307e\u3059\u3002\u3053\u308c\u3067\u3001\u30c6\u30b9\u30c8\u304c\u901a\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u307e\u3068\u3081<\/h2>\n\n\n\n
GitLab Duo\u3092\u4f7f\u3063\u305f\u81ea\u52d5\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u5168\u4f53\u306e\u632f\u308a\u8fd4\u308a\u3067\u3059\u3002<\/p>\n\n\n\n