{"id":6686,"date":"2023-02-13T10:28:56","date_gmt":"2023-02-13T01:28:56","guid":{"rendered":"https:\/\/www.lancard.com\/blog\/?p=6686"},"modified":"2025-03-12T11:23:58","modified_gmt":"2025-03-12T02:23:58","slug":"solidstart_form_submit","status":"publish","type":"post","link":"https:\/\/www.lancard.com\/blog\/2023\/02\/13\/solidstart_form_submit\/","title":{"rendered":"SolidStart\u306e\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1"},"content":{"rendered":"

\u6700\u8fd1\u3001SolidJS\u3068SolidStart\u306e\u52c9\u5f37\u3092\u59cb\u3081\u307e\u3057\u305f\u3002
\nSolidJS\u306fReact\u30e9\u30a4\u30af\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u304c\u3001\u4eee\u60f3DOM\u3092\u4f7f\u308f\u306a\u3044\u4e8b\u306b\u3088\u308a\u8efd\u91cf\u30fb\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5b9f\u73fe\u3057\u3066\u3044\u307e\u3059\u3002
\n\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306a\u4ed6\u306e\u7406\u7531\u3068\u3057\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u95a2\u6570\u306f\u4e00\u5ea6\u3057\u304b\u5b9f\u884c\u3055\u308c\u305a\u3001\u5f8c\u306f\u8a72\u5f53\u7b87\u6240\u3060\u3051\u3092\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u66f4\u65b0\u3059\u308b\u3001\u3068\u3044\u3046\u306e\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

SolidStart\u306f\u3001React.js\u306b\u5bfe\u3059\u308bNext.js\u3068\u540c\u3058\u3067\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3084SSR\/SSG\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u30022023\u5e742\u6708\u73fe\u5728\u3001\u30d0\u30fc\u30b8\u30e7\u30f30.2.20\u3067\u307e\u3060\u03b2\u7248\u3067\u3059\u3002<\/p>\n

SolidStart\u306eGetting Started<\/a>\u3092\u8aad\u3093\u3067\u3066\u3053\u308c\u306f\u4fbf\u5229\u305d\u3046\u3060\u306a\u3068\u601d\u3063\u305f\u306e\u304c\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u9593\u306e\u30c7\u30fc\u30bf\u306e\u3084\u308a\u53d6\u308a\u3067\u4f7f\u308f\u308c\u308bActions<\/strong><\/a>\u3067\u3059\u3002<\/p>\n

<\/p>\n

\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u306e\u5834\u5408\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n

export default function MyComponent() {\n  const [sending, { Form }] = createServerAction$(async (formData: FormData) => {\n    console.log(formData);\n     return \"\u4fdd\u5b58\u3057\u307e\u3057\u305f\u3002\";\n  });\n\n  return (\n    <>\n      <Show when={sending.error}><div> {sending.error.message }<\/div><\/Show>\n      <Show when={sending.result}><div>{sending.result}<\/div><\/Show>\n      <Show when={sending.pending}><div>loading\u30fb\u30fb<\/div><\/Show> \n      <Form>\n        <label for=\"username\">Username:<\/label>\n        <input type=\"text\" name=\"username\" \/>\n        <input type=\"submit\" value=\"\u4fdd\u5b58\" \/>\n      <\/Form>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
\u4fdd\u5b58\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001multipart\/form-data\uff08\u2190\u305f\u3076\u3093\u30d5\u30a1\u30a4\u30eb\u3082\u9001\u308c\u308b\uff09\u3067POST\u9001\u4fe1\u3055\u308c\u3001\u30b5\u30fc\u30d0\u5074\u3067createServerAction$<\/strong>\u95a2\u6570\u304c\u5f15\u6570FormData\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u5b9f\u884c\u3055\u308c\u3001\u8fd4\u308a\u5024\u3092\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u8fd4\u3057\u307e\u3059\u3002\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u306f\u3001result\/error\/pending\u3092\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u66f4\u65b0\u3057\u307e\u3059\u3002
\nBaaS (Backend As A Service) \u306e\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u4f7f\u3063\u3066\u3066\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u76f4\u63a5\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u307b\u3057\u304f\u306a\u3044\u6642\u306a\u3069\u306b\u4f7f\u3048\u307e\u3059\u3002
\n\u306a\u304a\u3001createServerAction$<\/strong>\u3067\u306f\u306a\u304fcreateRouteAction<\/strong>\u3092\u4f7f\u3046\u3068\u3001\u30b5\u30fc\u30d0\u5074\u3067\u306f\u306a\u304f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002\u975e\u540c\u671f\u51e6\u7406\u3059\u308b\u6642\u306b\u4f7f\u3044\u307e\u3059\u3002<\/p>\n
\u3053\u306e\u6642\u306b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u3069\u3046\u5b9f\u88c5\u3059\u3079\u304d\u3067\u3057\u3087\u3046\u304b\u3002
\n\u30b5\u30fc\u30d0\u5074\u3067\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3057\u3001\u30a8\u30e9\u30fc\u3092\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u6295\u3052\u308b\u4e8b\u304c\u3067\u304d\u307e\u3059\u304c\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u3082\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3057\u305f\u3044\u3067\u3059\u3002
\nSolidJS\u672c\u5bb6\u306e\u30b5\u30a4\u30c8\u306b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u30b5\u30f3\u30d7\u30eb<\/a>\u304c\u3042\u308a\u307e\u3059\u304c\u3001DOM API\u3092\u4f7f\u3063\u3066\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3057\u3066\u307e\u3059\u3002\u78ba\u304b\u306b\u3053\u308c\u304c\u6700\u3082\u8efd\u91cf\u306a\u5b9f\u88c5\u65b9\u6cd5\u3067\u3059\u304c\u3001\u624b\u9593\u3067\u3059\u3002
\n\u4e0a\u8a18\u30b5\u30f3\u30d7\u30eb\u306e\u30bd\u30fc\u30b9\u3067\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u305f\u3002
\n\u3057\u304b\u3057\u554f\u984c\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002SolidStart\u306eActions<\/strong>\u3068\u306e\u9023\u643a\u304c\u3046\u307e\u304f\u3044\u304d\u307e\u305b\u3093\u3002<\/p>\n
<Form use:formSubmit={fn}>\n<\/code><\/pre>\n
\u4e0a\u8a18\u306e\u5f62\u3060\u3068\u3001createServerAction$<\/strong>\u306e\u5834\u5408\u306fformSubmit\u95a2\u6570\u304c\u5b9f\u884c\u3055\u308c\u307e\u305b\u3093\u3067\u3057\u305f\u3002createRouteAction<\/strong>\u3060\u3068\u3001formSubmit\u304c\u5b9f\u884c\u3055\u308c\u307e\u3059\u304c\u3002
\n\u7d50\u5c40\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
declare module \"solid-js\" {\n  namespace JSX {\n    interface Directives {\n      validate: any;\n    }\n  }\n}\n\nexport default function MyComponent() {\n  const { validate, formSubmit, errors } = useForm({\n    errorClass: \"error-input\"\n  });\n\n  const [sending, { Form }] = createServerAction$<FormData, string>(async (formData) => {\n    \u30fb\u30fb\u30fb\u30fb\n  });\n\n  return (\n    <>\n      <Show when={sending.error}><div> {sending.error.message }<\/div><\/Show>\n      <Show when={sending.result}><div>{sending.result}<\/div><\/Show>\n      <Show when={sending.pending}><div>loading\u30fb\u30fb<\/div><\/Show>\n      <Form onSubmit={formSubmit} novalidate>\n        {errors.username && <div>{errors.username}<\/div>}\n        <label for=\"username\">Username:<\/label>\n        <input\n          type=\"text\"\n          name=\"username\"\n          required\n          use:validate\n          \/>\n        <input type=\"submit\" value=\"\u4fdd\u5b58\" \/>\n      <\/Form>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
formSubmit\u95a2\u6570\u3082\u4e0a\u8a18\u5909\u66f4\u306b\u5408\u308f\u305b\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
  const formSubmit = (e: any) => {\n    let errored = false;\n    for (const k in fields) {\n      const field = fields[k];\n      checkValid(field, setErrors, errorClass)();\n      if (!errored && field.element.validationMessage) {\n        field.element.focus();\n        errored = true;\n      }\n    }\n    if (errored) e.preventDefault();\n  };\n<\/code><\/pre>\n
\u3067\u3082\u3084\u3063\u3071\u308a\u3082\u3063\u3068\u7c21\u5358\u306b\u5b9f\u88c5\u3057\u305f\u3044\u3001\u305d\u3057\u3066\u3067\u304d\u308c\u3070zod\u7b49\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u3001\u30b5\u30fc\u30d0\u5074\u3067\u3082\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u540c\u3058\u30ed\u30b8\u30c3\u30af\u3067\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3057\u305f\u3044\u3067\u3059\u3002
\n\u3068\u601d\u3063\u3066\u63a2\u3057\u305f\u3089\u3042\u308a\u307e\u3057\u305f\u3002
\nFelte<\/a>\u30e9\u30a4\u30d6\u30e9\u30ea\u304cSolidJS\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3057\u305f\u3002
\n\u3053\u3053<\/a>\u3092\u53c2\u8003\u306b\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002
\n\u304c\u3001\u4e0a\u8a18\u3068\u540c\u69d8\u306bSolidStart\u306eActions\u3068\u306e\u9023\u643a\u3067\u554f\u984c\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002<\/p>\n
<Form ref={form}>\n<\/code><\/pre>\n
\u3053\u306e\u5f62\u3060\u3068\u3001SolidStart\u306eActions<\/strong>\u304c\u6b63\u3057\u304f\u52d5\u4f5c\u3057\u307e\u305b\u3093\u3002<\/p>\n
\u307e\u305f\u3001<\/p>\n
<Form use:form>\n<\/code><\/pre>\n
\u3053\u306e\u5f62\u3060\u3068\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u6642\u306b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u304c\u50cd\u304d\u307e\u305b\u3093\u3002<\/p>\n
\u7d50\u5c40\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
import \"tippy.js\/dist\/tippy.css\";\nimport { createForm } from \"@felte\/solid\";\nimport { validator } from \"@felte\/validator-zod\";\nimport {  Show } from \"solid-js\";\nimport { FormError } from \"solid-start\";\nimport { createServerAction$ } from \"solid-start\/server\";\nimport reporter from \"@felte\/reporter-tippy\";\nimport { z } from \"zod\";\n\nconst schema = z.object({\n  username: z.string().min(1, { message: '\u5fc5\u9808\u3067\u3059\u3002' }),\n  email: z.string().min(1, { message: '\u5fc5\u9808\u3067\u3059\u3002' }).email({ message: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306b\u8aa4\u308a\u304c\u3042\u308a\u307e\u3059\u3002' }),\n});\n\nexport default function MyComponent() {\n  const { form } = createForm<z.infer<typeof schema>>({\n    initialValues: {\n      username: '',\n      email: '',\n    },\n    extend: [validator({ schema }), reporter()],\n    onSubmit: (values, context) => {\n      enroll(new FormData((document.getElementById('form') as HTMLFormElement)));\n    },\n  });\n\n\n  const [sending, enroll] = createServerAction$<FormData, string>(async (formData) => {\n    const formDataObj: any = {};\n    formData.forEach((value, key) => (formDataObj[key] = value));\n    \/\/ \u3082\u3057formDataObj\u304cschema\u306b\u4e00\u81f4\u3057\u306a\u304b\u3063\u305f\u3089\u30a8\u30e9\u30fc\u304c\u6295\u3052\u3089\u308c\u308b\u3002\n    const user = schema.parse(formDataObj);\n    if (user.username === \"admin\") {\n      throw new FormError(\"admin\u306f\u4f7f\u3048\u307e\u305b\u3093\u3002\");\n    } else {\n      return \"\u4fdd\u5b58\u3057\u307e\u3057\u305f\u3002\";\n    }\n  });\n  return (\n    <>\n      <Show when={sending.error}><div> {sending.error.message }<\/div><\/Show>\n      <Show when={sending.result}><div>{sending.result}<\/div><\/Show>\n      <Show when={sending.pending}><div>loading\u30fb\u30fb<\/div><\/Show>\n      <form ref={form} id=\"form\">\n        <label for=\"username\">username:<\/label>\n        <input id=\"username\" name=\"username\" type=\"text\" \/>\n        <label for=\"email\">Email:<\/label>\n        <input id=\"email\" name=\"email\" type=\"email\" \/>\n        <input type=\"submit\" value=\"\u4fdd\u5b58\" \/>\n      <\/form>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
\u30ad\u30e2\u306f\u3001<Form><\/strong>\u306f\u4f7f\u308f\u305a\u3001\u4ee5\u4e0b\u306e\u7b87\u6240\u3067\u30b5\u30fc\u30d0\u306bFormData\u3092\u9001\u4fe1\u3059\u308b\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n
    onSubmit: (values, context) => {\n      enroll(new FormData((document.getElementById('form') as HTMLFormElement)));\n    },\n<\/code><\/pre>\n
\u3053\u308c\u3067\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30fb\u30b5\u30fc\u30d0\u3068\u3082\u3001\u540c\u3058\u30ed\u30b8\u30c3\u30af\u3067\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002
\n\u305f\u3060\u3053\u3046\u306a\u308b\u3068\u3001FormData\u3092\u9001\u4fe1\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001values:{username: string;email: string;}\u3092\u9001\u4fe1\u3059\u308b\u306e\u304c\u6b63\u3057\u3044\u6c17\u304c\u3057\u307e\u3059\u3002
\n\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002
\n\u3053\u308c\u3067application\/json\u3067POST\u9001\u4fe1\u3055\u308c\u3001createServerAction$\u306fJSON\u304c\u30c7\u30b3\u30fc\u30c9\u3055\u308c\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d7\u3051\u53d6\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
export default function MyComponent() {\n  const { form } = createForm<z.infer<typeof schema>>({\n    initialValues: {\n      username: '',\n      email: '',\n    },\n    extend: [validator({ schema }), reporter()],\n    onSubmit: (values) => {\n      enroll(values); \/\/ {username: string;email: string;}\u3092\u9001\u4fe1\n    },\n  });\n\n  const [sending, enroll] = createServerAction$<any, string>(async (v) => {\n    \/\/ \u3082\u3057v\u304cschema\u306b\u4e00\u81f4\u3057\u306a\u304b\u3063\u305f\u3089\u30a8\u30e9\u30fc\u304c\u6295\u3052\u3089\u308c\u308b\u3002\n    const user = schema.parse(v);\n    if (user.username === \"admin\") {\n      throw new FormError(\"admin\u306f\u4f7f\u3048\u307e\u305b\u3093\u3002\");\n    } else {\n      return \"\u4fdd\u5b58\u3057\u307e\u3057\u305f\u3002\";\n    }\n  });\n  return (\n\u30fb\u30fb\u30fb\n<\/code><\/pre>\n\"Facebook\"<\/a>\"twitter\"<\/a>\"linkedin\"<\/a>\"tumblr\"<\/a>\"mail\"<\/a>","protected":false},"excerpt":{"rendered":"
\u6700\u8fd1\u3001SolidJS\u3068SolidStart\u306e\u52c9\u5f37\u3092\u59cb\u3081\u307e\u3057\u305f\u3002 SolidJS\u306fReact\u30e9\u30a4\u30af\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u304c\u3001\u4eee\u60f3DOM\u3092\u4f7f\u308f\u306a\u3044\u4e8b\u306b\u3088\u308a\u8efd\u91cf\u30fb\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5b9f\u73fe\u3057\u3066\u3044\u307e\u3059\u3002 \u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9 […]<\/p>\n","protected":false},"author":25,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[214,213],"class_list":["post-6686","post","type-post","status-publish","format-standard","hentry","category-web","tag-solidjs","tag-solidstart"],"_links":{"self":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/6686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/comments?post=6686"}],"version-history":[{"count":22,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/6686\/revisions"}],"predecessor-version":[{"id":6708,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/6686\/revisions\/6708"}],"wp:attachment":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/media?parent=6686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/categories?post=6686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/tags?post=6686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}