React + Viteの初歩的な理解を深める。

node -v

npm create vite@latest react-vite-form-app -- --template react
cd react-vite-form-app
npm install
npm run dev

import { useState } from 'react'
import './App.css'

const initialForm = {
  name: '',
  email: '',
  message: '',
}

function validateForm(form) {
  const nextErrors = {}

  if (!form.name.trim()) {
    nextErrors.name = '名前を入力してください'
  }

  if (!form.email.trim()) {
    nextErrors.email = 'メールアドレスを入力してください'
  } else if (!form.email.includes('@')) {
    nextErrors.email = 'メールアドレスの形式を確認してください'
  }

  if (!form.message.trim()) {
    nextErrors.message = '問い合わせ内容を入力してください'
  }

  return nextErrors
}

export default function App() {
  const [form, setForm] = useState(initialForm)
  const [errors, setErrors] = useState({})
  const [submitted, setSubmitted] = useState(null)

  function handleChange(event) {
    const { name, value } = event.target

    setForm((currentForm) => ({
      ...currentForm,
      [name]: value,
    }))

    setErrors((currentErrors) => ({
      ...currentErrors,
      [name]: '',
    }))

    setSubmitted(null)
  }

  function handleSubmit(event) {
    event.preventDefault()

    const nextErrors = validateForm(form)
    setErrors(nextErrors)

    if (Object.keys(nextErrors).length > 0) {
      return
    }

    setSubmitted(form)
    setForm(initialForm)
  }

  return (
    <main className="app">
      <section className="form-panel">
        <p className="eyebrow">React + Vite</p>
        <h1>問い合わせフォーム</h1>
        <p className="lead">
          入力値を state で管理し、送信時に簡単なチェックを行います。
        </p>

        <form onSubmit={handleSubmit} noValidate>
          <label>
            名前
            <input
              type="text"
              name="name"
              value={form.name}
              onChange={handleChange}
              aria-invalid={Boolean(errors.name)}
            />
          </label>
          {errors.name && <p className="error">{errors.name}</p>}

          <label>
            メールアドレス
            <input
              type="email"
              name="email"
              value={form.email}
              onChange={handleChange}
              aria-invalid={Boolean(errors.email)}
            />
          </label>
          {errors.email && <p className="error">{errors.email}</p>}

          <label>
            問い合わせ内容
            <textarea
              name="message"
              value={form.message}
              onChange={handleChange}
              rows="5"
              aria-invalid={Boolean(errors.message)}
            />
          </label>
          {errors.message && <p className="error">{errors.message}</p>}

          <button type="submit">送信する</button>
        </form>
      </section>

      {submitted && (
        <section className="result-panel">
          <h2>送信内容を受け付けました</h2>
          <dl>
            <div>
              <dt>名前</dt>
              <dd>{submitted.name}</dd>
            </div>
            <div>
              <dt>メール</dt>
              <dd>{submitted.email}</dd>
            </div>
            <div>
              <dt>内容</dt>
              <dd>{submitted.message}</dd>
            </div>
          </dl>
        </section>
      )}
    </main>
  )
}

#root {
  width: 100%;
}

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 24px;
  padding: 40px 20px;
  background: #edf2f7;
  color: #1f2937;
}

.form-panel,
.result-panel {
  width: min(100%, 640px);
  padding: 28px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #ffffff;
}

.eyebrow {
  margin: 0 0 8px;
  color: #2563eb;
  font-size: 0.85rem;
  font-weight: 700;
}

h1,
h2,
p {
  margin-top: 0;
}

.lead {
  color: #4b5563;
}

form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
}

input:focus,
textarea:focus {
  outline: 3px solid #bfdbfe;
  border-color: #2563eb;
}

[aria-invalid='true'] {
  border-color: #dc2626;
}

.error {
  margin: -6px 0 0;
  color: #dc2626;
  font-size: 0.9rem;
}

button {
  border: 0;
  border-radius: 6px;
  padding: 12px 16px;
  background: #2563eb;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

.result-panel dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.result-panel div {
  display: grid;
  gap: 4px;
}

.result-panel dt {
  font-weight: 700;
}

.result-panel dd {
  margin: 0;
  color: #4b5563;
}

npm run build

dist/
  index.html
  assets/
    ...