#90

AGENTS.md

@@ -84,12 +84,14 @@ cd frontend
 npm run dev
 npm run build
 npm run lint
+npm run test
+npm run test:run
 npm run preview
 ```
 
 `npm run build` runs `tsc -b && vite build`, then `postbuild` runs `node scripts/generate-sitemap.js`.
 
-Do not write or report `npm test` as a repository command unless a `test` script is added to `frontend/package.json`.
+`npm run test` runs Vitest in watch mode. Use `npm run test:run` for a non-watch frontend test run.
 
 ## Coding style
 
@@ -122,13 +124,49 @@ Do not write or report `npm test` as a repository command unless a `test` script
 - Keep page-level code under `frontend/src/pages` and shared UI/feature code under `frontend/src/components` unless existing patterns point elsewhere.
 - Match existing Tailwind, component, and import alias conventions.
 
+### Frontend TSX style
+
+- Preserve the local TSX formatting style. Do not normalize TSX to common Prettier-style React formatting unless explicitly asked.
+- Prefer `const` arrow functions for TypeScript/TSX component and helper declarations.
+- Put two blank lines before and after top-level `const` function declarations, unless imports, exports, or file boundaries make that awkward.
+- In TSX, indent nested tag attributes with one tab relative to the tag line. With the project tab width, this visually appears as 4 spaces.
+- Keep a tag's closing marker on the same line as the final prop when the tag spans multiple lines. Do not put `/>` or `>` on its own line unless the existing surrounding code does so.
+- Keep JSX closing parentheses in the existing compact style, for example `</div>)` rather than moving `)` onto a separate line.
+
+Preferred:
+
+```tsx
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
+  return (
+      <TextArea
+	  {...rest}
+	  ref={ref}
+	  value={tags}
+	  invalid={errors && errors.length > 0}
+	  onChange={ev => setTags (ev.target.value)}/>)
+}
+```
+
+Avoid:
+
+```tsx
+function PostFormTagsArea ({ tags, setTags }: Props) {
+  return (
+    <TextArea
+      value={tags}
+      onChange={ev => setTags (ev.target.value)}
+    />
+  )
+}
+```
+
 ## Codex workflow
 
 - First inspect existing patterns; do not invent new architecture when a local convention exists.
 - Keep changes scoped to the requested issue.
 - Do not scan or summarize dependency/generated/runtime directories such as `node_modules`, `dist`, `tmp`, `log`, and `storage` unless explicitly needed.
 - Before touching wiki, tag, versioning, BAN, IP BAN, or authentication behavior, inspect the related request specs and service objects.
-- If frontend code changes, run the existing frontend verification commands that apply: `npm run build` and `npm run lint`.
+- If frontend code changes, run the existing frontend verification commands that apply: `npm run build`, `npm run lint`, and `npm run test:run`.
 - If backend code changes, run the relevant RSpec command; for broad backend changes, run `bundle exec rspec`.
 - If a verification command cannot be run or fails, report the exact command and failure.
 

backend/app/controllers/application_controller.rb

@@ -28,19 +28,17 @@ class ApplicationController < ActionController::API
     end
   end
 
-  def render_bad_request message = 'リクエストが不正です．', field: nil, code: :bad_request
-    render_error(:bad_request, message, field:, code:)
+  def render_bad_request message = 'リクエストが不正です．'
+    render json: { type: 'bad_request',
+                   message:,
+                   errors: { },
+                   base_errors: [message] },
+           status: :bad_request
   end
 
-  def render_unprocessable_entity message = '入力を確認してください．', field: nil, code: :invalid
-    render_error(:unprocessable_entity, message, field:, code:)
-  end
-
-  def render_error status, message, field: nil, code: status
-    error = { code: code.to_s, message: }
-    error[:field] = field.to_s if field.present?
-
-    render json: { errors: [error] }, status:
+  def render_unprocessable_entity message = '入力を確認してください．', field: nil
+    render_validation_error(fields: field ? { field => [message] } : { },
+                            base: field ? [] : [message])
   end
 
   def render_record_invalid error

backend/app/controllers/deerjikists_controller.rb

@@ -2,8 +2,8 @@ class DeerjikistsController < ApplicationController
   def show
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
-    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
-    return render_bad_request('code は必須です．', field: :code) if code.blank?
+    return render_bad_request('platform は必須です．') if platform.blank?
+    return render_bad_request('code は必須です．') if code.blank?
 
     deerjikist = Deerjikist
                  .joins(:tag)
@@ -23,9 +23,9 @@ class DeerjikistsController < ApplicationController
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
     tag_id = params[:tag_id].to_i
-    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
-    return render_bad_request('code は必須です．', field: :code) if code.blank?
-    return render_bad_request('tag_id が不正です．', field: :tag_id) if tag_id <= 0
+    return render_bad_request('platform は必須です．') if platform.blank?
+    return render_bad_request('code は必須です．') if code.blank?
+    return render_bad_request('tag_id が不正です．') if tag_id <= 0
 
     deerjikist = Deerjikist.find_or_initialize_by(platform:, code:).tap do |d|
       d.tag_id = tag_id
@@ -41,8 +41,8 @@ class DeerjikistsController < ApplicationController
 
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
-    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
-    return render_bad_request('code は必須です．', field: :code) if code.blank?
+    return render_bad_request('platform は必須です．') if platform.blank?
+    return render_bad_request('code は必須です．') if code.blank?
 
     Deerjikist.find([platform, code]).destroy!
 

backend/app/controllers/materials_controller.rb

@@ -40,8 +40,11 @@ class MaterialsController < ApplicationController
     tag_name_raw = params[:tag].to_s.strip
     file = params[:file]
     url = params[:url].to_s.strip.presence
-    return render_bad_request('タグは必須です．', field: :tag) if tag_name_raw.blank?
-    return render_bad_request('ファイルまたは URL は必須です．') if file.blank? && url.blank?
+    return render_unprocessable_entity('タグは必須です．', field: :tag) if tag_name_raw.blank?
+    if file.blank? && url.blank?
+      return render_validation_error fields: { file: ['ファイルまたは URL は必須です．'],
+                                               url: ['ファイルまたは URL は必須です．'] }
+    end
 
     tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
     tag = tag_name.tag
@@ -55,7 +58,7 @@ class MaterialsController < ApplicationController
     if material.save
       render json: MaterialRepr.base(material, host: request.base_url), status: :created
     else
-      render_model_errors(material)
+      render_validation_error material
     end
   end
 
@@ -69,8 +72,11 @@ class MaterialsController < ApplicationController
     tag_name_raw = params[:tag].to_s.strip
     file = params[:file]
     url = params[:url].to_s.strip.presence
-    return render_bad_request('タグは必須です．', field: :tag) if tag_name_raw.blank?
-    return render_bad_request('ファイルまたは URL は必須です．') if file.blank? && url.blank?
+    return render_unprocessable_entity('タグは必須です．', field: :tag) if tag_name_raw.blank?
+    if file.blank? && url.blank?
+      return render_validation_error fields: { file: ['ファイルまたは URL は必須です．'],
+                                               url: ['ファイルまたは URL は必須です．'] }
+    end
 
     tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
     tag = tag_name.tag
@@ -86,7 +92,7 @@ class MaterialsController < ApplicationController
     if material.save
       render json: MaterialRepr.base(material, host: request.base_url)
     else
-      render_model_errors(material)
+      render_validation_error material
     end
   end
 

backend/app/controllers/nico_tags_controller.rb

@@ -30,13 +30,13 @@ class NicoTagsController < ApplicationController
     id = params[:id].to_i
 
     tag = Tag.find(id)
-    return render_bad_request('ニコニコ・タグを指定してください．', field: :id) unless tag.nico?
+    return render_bad_request('ニコニコ・タグを指定してください．') unless tag.nico?
 
     linked_tag_names = params[:tags].to_s.split
     linked_tags = Tag.normalise_tags!(linked_tag_names, with_tagme: false,
                                                         with_no_deerjikist: false)
     if linked_tags.any? { |t| t.nico? }
-      return render_bad_request('ニコニコ・タグ同士は連携できません．', field: :tags)
+      return render_unprocessable_entity('ニコニコ・タグ同士は連携できません．', field: :tags)
     end
 
     ApplicationRecord.transaction do

backend/app/controllers/posts_controller.rb

@@ -192,7 +192,7 @@ class PostsController < ApplicationController
     return render_bad_request('force と merge は同時に指定できません．') if force && merge
 
     base_version_no = parse_base_version_no
-    return render_bad_request('base_version_no は必須です．', field: :base_version_no) if !(force) && !(base_version_no)
+    return render_bad_request('base_version_no は必須です．') if !(force) && !(base_version_no)
 
     title = params[:title].presence
     tag_names = params[:tags].to_s.split
@@ -671,12 +671,12 @@ class PostsController < ApplicationController
   end
 
   def render_post_form_record_invalid record
-    if e.record.is_a?(TagName) || e.record.is_a?(Tag)
-      render_validation_error(fields: { tags: e.record.errors.full_messages.map { |message|
-        "タグ名 “#{ e.record.name }”: #{ message }"
-      } })
+    if record.is_a?(TagName) || record.is_a?(Tag)
+      render_validation_error fields: { tags: record.errors.full_messages.map { |message|
+        "タグ名 “#{ record.name }”: #{ message }"
+      } }
     else
-      render_validation_error(record)
+      render_validation_error record
     end
   end
 end

backend/app/controllers/preview_controller.rb

@@ -4,7 +4,7 @@ class PreviewController < ApplicationController
     return head :unauthorized unless current_user
 
     url = params[:url]
-    return render_bad_request('URL は必須です．', field: :url) unless url.present?
+    return render_bad_request('URL は必須です．') unless url.present?
 
     unless url.start_with?(/http(s)?:\/\//)
       url = 'http://' + url
@@ -16,7 +16,7 @@ class PreviewController < ApplicationController
 
     render json: { title: title }
   rescue => e
-    render_bad_request(e.message, field: :url)
+    render_bad_request(e.message)
   end
 
   def thumbnail
@@ -25,7 +25,7 @@ class PreviewController < ApplicationController
     return head :unauthorized unless current_user
 
     url = params[:url]
-    return render_bad_request('URL は必須です．', field: :url) if url.blank?
+    return render_bad_request('URL は必須です．') if url.blank?
 
     unless url.start_with?(/http(s)?:\/\//)
       url = 'http://' + url
@@ -40,8 +40,11 @@ class PreviewController < ApplicationController
       File.delete(path) rescue nil
       send_file image.path, type: 'image/png', disposition: 'inline'
     else
-      render_error(:internal_server_error, 'サムネールを生成できませんでした．',
-                   code: :thumbnail_generation_failed)
+      render json: { type: 'internal_server_error',
+                     message: 'サムネールを生成できませんでした．',
+                     errors: { },
+                     base_errors: ['サムネールを生成できませんでした．'] },
+             status: :internal_server_error
     end
   end
 end

backend/app/controllers/tag_children_controller.rb

@@ -5,8 +5,8 @@ class TagChildrenController < ApplicationController
 
     parent_id = params[:parent_id]
     child_id = params[:child_id]
-    return render_bad_request('parent_id は必須です．', field: :parent_id) if parent_id.blank?
-    return render_bad_request('child_id は必須です．', field: :child_id) if child_id.blank?
+    return render_bad_request('parent_id は必須です．') if parent_id.blank?
+    return render_bad_request('child_id は必須です．') if child_id.blank?
 
     parent = Tag.find(parent_id)
     child = Tag.find(child_id)
@@ -28,8 +28,8 @@ class TagChildrenController < ApplicationController
 
     parent_id = params[:parent_id]
     child_id = params[:child_id]
-    return render_bad_request('parent_id は必須です．', field: :parent_id) if parent_id.blank?
-    return render_bad_request('child_id は必須です．', field: :child_id) if child_id.blank?
+    return render_bad_request('parent_id は必須です．') if parent_id.blank?
+    return render_bad_request('child_id は必須です．') if child_id.blank?
 
     parent = Tag.find(parent_id)
     child = Tag.find(child_id)

backend/app/controllers/tags_controller.rb

@@ -168,7 +168,7 @@ class TagsController < ApplicationController
 
   def show_by_name
     name = params[:name].to_s.strip
-    return render_bad_request('name は必須です．', field: :name) if name.blank?
+    return render_bad_request('name は必須です．') if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -192,7 +192,7 @@ class TagsController < ApplicationController
 
   def deerjikists_by_name
     name = params[:name].to_s.strip
-    return render_bad_request('name は必須です．', field: :name) if name.blank?
+    return render_bad_request('name は必須です．') if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, tag_name: :wiki_page)
@@ -214,21 +214,24 @@ class TagsController < ApplicationController
 
     ApplicationRecord.transaction do
       tag.deerjikists = []
-      params[:_json].each do
-        platform = _1[:platform]
-        code = normalise_deerjikist_code(platform, _1[:code])
+      params[:_json].each.with_index do |item, i|
+        platform = item[:platform]
+        code = normalise_deerjikist_code(platform, item[:code])
         deerjikist = Deerjikist.find_or_initialize_by(platform:, code:)
         deerjikist.tag = tag
-        deerjikist.save!
+        render_deerjikist_form_record_invalid(deerjikist, i) unless deerjikist.save
+        raise ActiveRecord::Rollback if performed?
       end
     end
 
+    return if performed?
+
     render json: DeerjikistRepr.many(tag.reload.deerjikists)
   end
 
   def materials_by_name
     name = params[:name].to_s.strip
-    return render_bad_request('name は必須です．', field: :name) if name.blank?
+    return render_bad_request('name は必須です．') if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -435,4 +438,23 @@ class TagsController < ApplicationController
   rescue
     nil
   end
+
+  def render_deerjikist_form_record_invalid deerjikist, index
+    fields = { }
+
+    deerjikist.errors.each do |error|
+      field =
+          case error.attribute
+          when :platform, :code
+            "deerjikists.#{ index }.#{ error.attribute }"
+          else
+            :deerjikists
+          end
+
+      fields[field] ||= []
+      fields[field] << error.full_message
+    end
+
+    render_validation_error fields:
+  end
 end

backend/app/controllers/users_controller.rb

@@ -42,12 +42,12 @@ class UsersController < ApplicationController
     return head :unauthorized if user&.id != params[:id].to_i
 
     name = params[:name]
-    return render_bad_request('名前は必須です．', field: :name) if name.blank?
+    return render_unprocessable_entity('名前は必須です．', field: :name) if name.blank?
 
     if user.update(name:)
       render json: user.slice(:id, :name, :inheritance_code, :role), status: :ok
     else
-      render_model_errors(user)
+      render_validation_error user
     end
   end
 

backend/app/controllers/wiki_pages_controller.rb

@@ -46,7 +46,7 @@ class WikiPagesController < ApplicationController
 
   def diff
     id = params[:id]
-    return render_bad_request('id は必須です．', field: :id) if id.blank?
+    return render_bad_request('id は必須です．') if id.blank?
 
     from = params[:from].presence
     to = params[:to].presence
@@ -103,7 +103,7 @@ class WikiPagesController < ApplicationController
 
     render json: WikiPageRepr.base(page), status: :created
   rescue ActiveRecord::RecordInvalid => e
-    render_model_errors(e.record)
+    render_validation_error e.record
   rescue ActiveRecord::RecordNotUnique
     render_record_not_unique
   end

frontend/src/components/PostEditForm.tsx

@@ -3,22 +3,21 @@ import { useEffect, useState } from 'react'
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
-import { extractValidationError } from '@/lib/apiErrors'
 import { updatePost } from '@/lib/posts'
 import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
 
-import type { FieldErrors } from '@/lib/apiErrors'
 import type { Post, Tag } from '@/types'
 
 type PostFormField =
-    'parentPostId' | 'tags' | 'originalCreatedFrom' | 'originalCreatedBefore'
+    'parentPostIds' | 'tags' | 'originalCreatedAt'
 
 
 const tagsToStr = (tags: Tag[]): string => {
@@ -41,9 +40,9 @@ type Props = { post:    Post
 
 
 const PostEditForm: FC<Props> = ({ post, onSave }) => {
-  const [baseErrors, setBaseErrors] = useState<string[]> ([])
   const [disabled, setDisabled] = useState (false)
-  const [fieldErrors, setFieldErrors] = useState<FieldErrors> ({ })
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<PostFormField> ()
   const [originalCreatedBefore, setOriginalCreatedBefore] =
       useState<string | null> (post.originalCreatedBefore)
   const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -56,8 +55,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const dialogue = useDialogue ()
 
   const update = async (...args: Parameters<typeof updatePost>) => {
-    setFieldErrors ({ })
-    setBaseErrors ([])
+    clearValidationErrors ()
 
     try
     {
@@ -79,12 +77,8 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 
       if (response?.status !== 409)
 	{
-	  const validationError = extractValidationError<PostFormField> (e)
-
-	  if (validationError)
+	  if (applyValidationError (e))
 	    {
-	      setFieldErrors (validationError.fieldErrors)
-	      setBaseErrors (validationError.baseErrors)
 	      toast ({ description: '更新はできなかったよ……' })
 	      return
 	    }
@@ -148,31 +142,28 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	<FieldError messages={baseErrors}/>
 
 	{/* タイトル */}
-	<div>
-	  <Label>タイトル</Label>
-	  <input
-	      type="text"
-	      disabled={disabled}
-	      className={inputClass ()}
-	      value={title ?? ''}
-	      onChange={ev => setTitle (ev.target.value)}/>
-	</div>
+	<FormField label="タイトル">
+	  {({ invalid }) => (
+	      <input
+		  type="text"
+		  disabled={disabled}
+		  className={inputClass (invalid)}
+		  value={title ?? ''}
+		  onChange={ev => setTitle (ev.target.value)}/>)}
+	</FormField>
 
 	{/* 親投稿 */}
-	<div>
-	  <Label invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}>
-	    親投稿
-	  </Label>
-	  <input
-	      type="text"
-	      disabled={disabled}
-	      value={parentPostIds}
-	      onChange={e => setParentPostIds (e.target.value)}
-	      aria-invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}
-	      className={inputClass (fieldErrors.parentPostIds
-				     && fieldErrors.parentPostIds.length > 0)}/>
-	  <FieldError messages={fieldErrors.parentPostIds}/>
-	</div>
+	<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
+	  {({ describedBy, invalid }) => (
+	      <input
+		  type="text"
+		  disabled={disabled}
+		  value={parentPostIds}
+		  onChange={e => setParentPostIds (e.target.value)}
+		  aria-describedby={describedBy}
+		  aria-invalid={invalid}
+		  className={inputClass (invalid)}/>)}
+	</FormField>
 
 	{/* タグ */}
 	<PostFormTagsArea

frontend/src/components/PostFormTagsArea.tsx

@@ -3,8 +3,7 @@
 import { useRef, useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
-import FieldError from '@/components/common/FieldError'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'
 
@@ -75,32 +74,34 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   }
 
   return (
-      <div className="relative w-full">
-	<Label invalid={errors && errors.length > 0}>タグ</Label>
-	<TextArea
-	    {...rest}
-	    ref={ref}
-	    value={tags}
-	    invalid={errors && errors.length > 0}
-	    onChange={ev => setTags (ev.target.value)}
-	    onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
-	      const pos = (ev.target as HTMLTextAreaElement).selectionStart
-	      await recompute (pos)
-	    }}
-	    onFocus={() => setFocused (true)}
-	    onBlur={() => {
-	      setFocused (false)
-	      setSuggestionsVsbl (false)
-	    }}/>
-	{focused && (
-	    <TagSearchBox
-		suggestions={suggestionsVsbl && suggestions.length > 0
-			     ? suggestions
-			     : [] as Tag[]}
-		activeIndex={-1}
-		onSelect={handleTagSelect}/>)}
-	<FieldError messages={errors}/>
-      </div>)
+      <FormField className="relative w-full" label="タグ" messages={errors}>
+	{({ describedBy, invalid }) => (
+	    <>
+	      <TextArea
+		  {...rest}
+		  ref={ref}
+		  value={tags}
+		  aria-describedby={describedBy}
+		  invalid={invalid}
+		  onChange={ev => setTags (ev.target.value)}
+		  onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
+		    const pos = (ev.target as HTMLTextAreaElement).selectionStart
+		    await recompute (pos)
+		  }}
+		  onFocus={() => setFocused (true)}
+		  onBlur={() => {
+		    setFocused (false)
+		    setSuggestionsVsbl (false)
+		  }}/>
+	      {focused && (
+		  <TagSearchBox
+		      suggestions={suggestionsVsbl && suggestions.length > 0
+				   ? suggestions
+				   : [] as Tag[]}
+		      activeIndex={-1}
+		      onSelect={handleTagSelect}/>)}
+	    </>)}
+      </FormField>)
 }
 
 export default PostFormTagsArea

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -1,6 +1,5 @@
 import DateTimeField from '@/components/common/DateTimeField'
-import { FieldError } from '@/components/common/FieldError'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
 
 import type { FC } from 'react'
@@ -22,68 +21,69 @@ const PostOriginalCreatedTimeField: FC<Props> = (
       setOriginalCreatedBefore,
       errors }: Props,
 ) => (
-    <div>
-      <Label invalid={errors && errors.length > 0}>オリジナルの作成日時</Label>
+    <FormField label="オリジナルの作成日時" messages={errors}>
+      {({ describedBy, invalid }) => (
+	  <>
+	    <div className="my-1 flex">
+	      <div className="w-80">
+		<DateTimeField
+		    className="mr-2"
+		    disabled={disabled ?? false}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    invalid={invalid}
+		    value={originalCreatedFrom ?? undefined}
+		    onChange={setOriginalCreatedFrom}
+		    onBlur={ev => {
+		      const v = ev.target.value
+		      if (!(v))
+			return
 
-      <div className="my-1 flex">
-	<div className="w-80">
-	  <DateTimeField
-	      className="mr-2"
-	      disabled={disabled ?? false}
-	      aria-invalid={errors && errors.length > 0}
-	      invalid={errors && errors.length > 0}
-	      value={originalCreatedFrom ?? undefined}
-	      onChange={setOriginalCreatedFrom}
-	      onBlur={ev => {
-		const v = ev.target.value
-		if (!(v))
-		  return
+		      const d = new Date (v)
+		      if (d.getMinutes () === 0 && d.getHours () === 0)
+			d.setDate (d.getDate () + 1)
+		      else
+			d.setMinutes (d.getMinutes () + 1)
+		      setOriginalCreatedBefore (d.toISOString ())
+		    }}/>
+		以降
+	      </div>
+	      <div>
+		<Button
+		    className="bg-gray-600 text-white rounded"
+		    disabled={disabled}
+		    onClick={() => {
+		      setOriginalCreatedFrom (null)
+		    }}>
+		  リセット
+		</Button>
+	      </div>
+	    </div>
 
-		const d = new Date (v)
-		if (d.getMinutes () === 0 && d.getHours () === 0)
-		  d.setDate (d.getDate () + 1)
-		else
-		  d.setMinutes (d.getMinutes () + 1)
-		setOriginalCreatedBefore (d.toISOString ())
-	      }}/>
-	  以降
-	</div>
-	<div>
-	  <Button
-	      className="bg-gray-600 text-white rounded"
-	      disabled={disabled}
-	      onClick={() => {
-		setOriginalCreatedFrom (null)
-	      }}>
-	    リセット
-	  </Button>
-	</div>
-      </div>
-
-      <div className="my-1 flex">
-	<div className="w-80">
-	  <DateTimeField
-	      className="mr-2"
-	      disabled={disabled}
-	      aria-invalid={errors && errors.length > 0}
-	      invalid={errors && errors.length > 0}
-	      value={originalCreatedBefore ?? undefined}
-	      onChange={setOriginalCreatedBefore}/>
-	  より前
-	</div>
-	<div>
-	  <Button
-	      className="bg-gray-600 text-white rounded"
-	      disabled={disabled}
-	      onClick={() => {
-		setOriginalCreatedBefore (null)
-	      }}>
-	    リセット
-	  </Button>
-	</div>
-      </div>
-
-      <FieldError messages={errors}/>
-    </div>)
+	    <div className="my-1 flex">
+	      <div className="w-80">
+		<DateTimeField
+		    className="mr-2"
+		    disabled={disabled}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    invalid={invalid}
+		    value={originalCreatedBefore ?? undefined}
+		    onChange={setOriginalCreatedBefore}/>
+		より前
+	      </div>
+	      <div>
+		<Button
+		    className="bg-gray-600 text-white rounded"
+		    disabled={disabled}
+		    onClick={() => {
+		      setOriginalCreatedBefore (null)
+		    }}>
+		  リセット
+		</Button>
+	      </div>
+	    </div>
+	  </>)}
+    </FormField>)
 
 export default PostOriginalCreatedTimeField

frontend/src/components/TagSearch.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 
 import { apiGet } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
 
 import TagSearchBox from './TagSearchBox'
 
@@ -110,11 +111,12 @@ const TagSearch: FC = () => {
 	       onFocus={() => setSuggestionsVsbl (true)}
 	       onBlur={() => setSuggestionsVsbl (false)}
 	       onKeyDown={handleKeyDown}
-	       className="w-full px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white"/>
+	       className={inputClass (false,
+				      'px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white')}/>
 	<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
 		      activeIndex={activeIndex}
 		      onSelect={handleTagSelect}/>
       </div>)
 }
 
-export default TagSearch
+export default TagSearch

frontend/src/components/common/FieldError.tsx

@@ -1,14 +1,15 @@
 import type { FC } from 'react'
 
-type Props = { messages?: string[] }
+type Props = { id?:        string
+	       messages?:  string[] }
 
 
-export const FieldError: FC<Props> = ({ messages }: Props) => {
+export const FieldError: FC<Props> = ({ id, messages }: Props) => {
   if (!(messages) || messages.length === 0)
     return null
 
   return (
-      <ul className="mt-1 space-y-1 text-red-700 dark:text-red-300">
+      <ul id={id} className="mt-1 space-y-1 text-red-700 dark:text-red-300">
 	{messages.map ((message, i) => <li key={i}>{message}</li>)}
       </ul>)
 }

frontend/src/components/common/FormField.tsx

@@ -0,0 +1,36 @@
+import { useId } from 'react'
+
+import FieldError from '@/components/common/FieldError'
+import Label from '@/components/common/Label'
+import { cn } from '@/lib/utils'
+
+import type { FC, ReactNode } from 'react'
+
+type FieldState = { describedBy?: string
+		    invalid:      boolean }
+
+type Props = {
+    children:   (state: FieldState) => ReactNode
+    checkBox?:   { label:    string
+		   checked:  boolean
+		   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+    className?:  string
+    label:      ReactNode
+    messages?:  string[] }
+
+
+const FormField: FC<Props> = ({ children, checkBox, className, label, messages }: Props) => {
+  const id = useId ()
+  const invalid = messages != null && messages.length > 0
+  const errorId = invalid ? `${ id }-error` : undefined
+
+  return (
+      <div className={cn (className)}>
+	<Label checkBox={checkBox} invalid={invalid}>{label}</Label>
+	{children ({ describedBy: errorId, invalid })}
+	<FieldError id={errorId} messages={messages}/>
+      </div>)
+}
+
+
+export default FormField

frontend/src/components/common/TagInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
 import { apiGet } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
 
 import type { FC, ChangeEvent, KeyboardEvent } from 'react'
 
@@ -9,10 +10,13 @@ import type { Tag } from '@/types'
 
 
 type Props = {
-    value:      string
-    setValue:   (value: string) => void }
+    describedBy?:  string
+    invalid?:      boolean
+    value:         string
+    setValue:      (value: string) => void }
 
-const TagInput: FC<Props> = ({ value, setValue }) => {
+
+const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -85,12 +89,14 @@ const TagInput: FC<Props> = ({ value, setValue }) => {
       <div className="relative">
 	<input
 	    type="text"
+	    aria-describedby={describedBy}
+	    aria-invalid={invalid}
 	    value={value}
 	    onChange={whenChanged}
 	    onFocus={() => setSuggestionsVsbl (true)}
 	    onBlur={() => setSuggestionsVsbl (false)}
 	    onKeyDown={handleKeyDown}
-	    className="w-full border p-2 rounded"/>
+	    className={inputClass (invalid)}/>
 	<TagSearchBox
 	    suggestions={
 		suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
@@ -99,4 +105,4 @@ const TagInput: FC<Props> = ({ value, setValue }) => {
       </div>)
 }
 
-export default TagInput
+export default TagInput

frontend/src/components/common/TextArea.tsx

@@ -16,7 +16,7 @@ export default forwardRef<HTMLTextAreaElement, Props> (
 			   (invalid
 			    ? ['border-red-500 bg-red-50 text-red-900',
 			       'focus:border-red-500 focus:outline-none focus:ring-2',
-			       'foucs:ring-red-200',
+			       'focus:ring-red-200',
 			       'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
 			    : ['border-gray-300',
 			       'focus:border-blue-500 focus:outline-none focus:ring-2',

frontend/src/lib/useValidationErrors.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+
+import { extractValidationError } from '@/lib/apiErrors'
+
+import type { FieldErrors } from '@/lib/apiErrors'
+
+
+export const useValidationErrors = <T extends string> () => {
+  const [baseErrors, setBaseErrors] = useState<string[]> ([])
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors<T>> ({ })
+
+  const clearValidationErrors = () => {
+    setBaseErrors ([])
+    setFieldErrors ({ })
+  }
+
+  const applyValidationError = (error: unknown): boolean => {
+    const validationError = extractValidationError<T> (error)
+    if (!(validationError))
+      return false
+
+    setBaseErrors (validationError.baseErrors)
+    setFieldErrors (validationError.fieldErrors)
+    return true
+  }
+
+  return { baseErrors, fieldErrors, clearValidationErrors, applyValidationError }
+}

frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx

@@ -3,7 +3,8 @@ import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
-import Label from '@/components/common/Label'
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
@@ -11,12 +12,16 @@ import { PLATFORM_NAMES, PLATFORMS } from '@/consts'
 import { apiPut } from '@/lib/api'
 import { tagsKeys } from '@/lib/queryKeys'
 import { fetchDeerjikistsByTag } from '@/lib/tags'
-import { cn } from '@/lib/utils'
+import { cn, inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
 
 import type { Deerjikist, Platform } from '@/types'
 
+type DeerjikistFormField =
+    'deerjikists' | `deerjikists.${ number }.platform` | `deerjikists.${ number }.code`
+
 
 const DeerjikistDetailPage: FC = () => {
   const { id } = useParams ()
@@ -31,11 +36,14 @@ const DeerjikistDetailPage: FC = () => {
   const [data, setData] =
       useState<(Omit<Deerjikist, 'platform'> & { platform: Platform | null })[]> ([])
   const [disabled, setDisabled] = useState (true)
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<DeerjikistFormField> ()
 
   const qc = useQueryClient ()
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault ()
+    clearValidationErrors ()
 
     try
     {
@@ -46,8 +54,9 @@ const DeerjikistDetailPage: FC = () => {
 
       toast ({ description: '更新しました．' })
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '更新失敗', description: '入力内容を確認してください．' })
     }
     finally
@@ -76,6 +85,9 @@ const DeerjikistDetailPage: FC = () => {
 	      </PageTitle>
 
 	      <form onSubmit={handleSubmit} className="my-4 space-y-2">
+		<FieldError messages={baseErrors}/>
+		<FieldError messages={fieldErrors.deerjikists}/>
+
 		{data.map ((datum, i) => (
 		    <fieldset key={i} className="min-w-0 rounded-lg border border-gray-300
 						 dark:border-gray-700 p-4">
@@ -91,12 +103,16 @@ const DeerjikistDetailPage: FC = () => {
 		      </legend>
 
 		      {/* プラットフォーム */}
-		      <div>
-			<Label>プラットフォーム</Label>
+		      <FormField
+			  label="プラットフォーム"
+			  messages={fieldErrors[`deerjikists.${ i }.platform`]}>
+			{({ describedBy, invalid }) => (
 			<select
-			    className="w-full border p-2 rounded"
 			    disabled={disabled}
 			    value={datum.platform ?? ''}
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}
 			    onChange={e => setData (prev => {
 			      const rtn = [...prev]
 			      rtn[i] = { ...rtn[i],
@@ -108,23 +124,27 @@ const DeerjikistDetailPage: FC = () => {
 			      <option key={p} value={p}>
 				{PLATFORM_NAMES[p]}
 			      </option>))}
-			</select>
-		      </div>
+			</select>)}
+		      </FormField>
 
 		      {/* コード */}
-		      <div>
-			<Label>コード</Label>
+		      <FormField
+			  label="コード"
+			  messages={fieldErrors[`deerjikists.${ i }.code`]}>
+			{({ describedBy, invalid }) => (
 			<input
 			    type="text"
 			    disabled={disabled}
-			    className="w-full border p-2 rounded"
 			    value={datum.code}
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}
 			    onChange={e => setData (prev => {
 			      const rtn = [...prev]
 			      rtn[i] = { ...rtn[i], code: e.target.value }
 			      return rtn
-			    })}/>
-		      </div>
+			    })}/>)}
+		      </FormField>
 		    </fieldset>
 		))}
 

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -4,7 +4,8 @@ import { useParams } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
 import WikiBody from '@/components/WikiBody'
-import Label from '@/components/common/Label'
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import TagInput from '@/components/common/TagInput'
@@ -13,6 +14,8 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC } from 'react'
 
@@ -20,6 +23,8 @@ import type { Material, Tag } from '@/types'
 
 type MaterialWithTag = Material & { tag: Tag }
 
+type MaterialFormField = 'tag' | 'file' | 'url'
+
 
 const MaterialDetailPage: FC = () => {
   const { id } = useParams ()
@@ -31,8 +36,12 @@ const MaterialDetailPage: FC = () => {
   const [sending, setSending] = useState (false)
   const [tag, setTag] = useState ('')
   const [url, setURL] = useState ('')
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<MaterialFormField> ()
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     if (tag.trim ())
       formData.append ('tag', tag)
@@ -48,8 +57,9 @@ const MaterialDetailPage: FC = () => {
       setMaterial (data)
       toast ({ title: '更新成功!' })
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '更新失敗……', description: '入力を見直してください．' })
     }
     finally
@@ -118,54 +128,66 @@ const MaterialDetailPage: FC = () => {
 
 		<Tab name="編輯">
 		  <div className="max-w-wl pt-2 space-y-4">
+		    <FieldError messages={baseErrors}/>
+
 		    {/* タグ */}
-		    <div>
-		      <Label>タグ</Label>
-		      <TagInput value={tag} setValue={setTag}/>
-		    </div>
+		    <FormField label="タグ" messages={fieldErrors.tag}>
+		      {({ describedBy, invalid }) => (
+			  <TagInput
+			      describedBy={describedBy}
+			      invalid={invalid}
+			      value={tag}
+			      setValue={setTag}/>)}
+		    </FormField>
 
 		    {/* ファイル */}
-		    <div>
-		      <Label>ファイル</Label>
-		      <input
-			  type="file"
-			  accept="image/*,video/*,audio/*"
-			  onChange={e => {
-			    const f = e.target.files?.[0]
-			    setFile (f ?? null)
-			    setFilePreview (f ? URL.createObjectURL (f) : '')
-			  }}/>
-		      {(file && filePreview) && (
-			  (/image\/.*/.test (file.type) && (
-			      <img
-				  src={filePreview}
-				  alt="preview"
-				  className="mt-2 max-h-48 rounded border"/>))
-			  || (/video\/.*/.test (file.type) && (
-			      <video
-				  src={filePreview}
-				  controls
-				  className="mt-2 max-h-48 rounded border"/>))
-			  || (/audio\/.*/.test (file.type) && (
-			      <audio
-				  src={filePreview}
-				  controls
-				  className="mt-2 max-h-48"/>))
-			  || (
-			      <p className="text-red-600 dark:text-red-400">
-				その形式のファイルには対応していません．
-			      </p>))}
-		    </div>
+		    <FormField label="ファイル" messages={fieldErrors.file}>
+		      {({ describedBy, invalid }) => (
+			  <>
+			    <input
+				type="file"
+				accept="image/*,video/*,audio/*"
+				aria-describedby={describedBy}
+				aria-invalid={invalid}
+				onChange={e => {
+				  const f = e.target.files?.[0]
+				  setFile (f ?? null)
+				  setFilePreview (f ? URL.createObjectURL (f) : '')
+				}}/>
+			    {(file && filePreview) && (
+				(/image\/.*/.test (file.type) && (
+				    <img
+					src={filePreview}
+					alt="preview"
+					className="mt-2 max-h-48 rounded border"/>))
+				|| (/video\/.*/.test (file.type) && (
+				    <video
+					src={filePreview}
+					controls
+					className="mt-2 max-h-48 rounded border"/>))
+				|| (/audio\/.*/.test (file.type) && (
+				    <audio
+					src={filePreview}
+					controls
+					className="mt-2 max-h-48"/>))
+				|| (
+				    <p className="text-red-600 dark:text-red-400">
+				      その形式のファイルには対応していません．
+				    </p>))}
+			  </>)}
+		    </FormField>
 
 		    {/* 参考 URL */}
-		    <div>
-		      <Label>参考 URL</Label>
-		      <input
-			  type="url"
-			  value={url}
-			  onChange={e => setURL (e.target.value)}
-			  className="w-full border p-2 rounded"/>
-		    </div>
+		    <FormField label="参考 URL" messages={fieldErrors.url}>
+		      {({ describedBy, invalid }) => (
+			  <input
+			      type="url"
+			      value={url}
+			      onChange={e => setURL (e.target.value)}
+			      aria-describedby={describedBy}
+			      aria-invalid={invalid}
+			      className={inputClass (invalid)}/>)}
+		    </FormField>
 
 		    {/* 送信 */}
 		    <Button
@@ -181,4 +203,4 @@ const MaterialDetailPage: FC = () => {
       </MainArea>)
 }
 
-export default MaterialDetailPage
+export default MaterialDetailPage

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation, useNavigate } from 'react-router-dom'
 
+import FieldError from '@/components/common/FieldError'
 import Form from '@/components/common/Form'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
@@ -11,9 +12,13 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC } from 'react'
 
+type MaterialFormField = 'tag' | 'file' | 'url'
+
 
 const MaterialNewPage: FC = () => {
   const location = useLocation ()
@@ -27,8 +32,12 @@ const MaterialNewPage: FC = () => {
   const [sending, setSending] = useState (false)
   const [tag, setTag] = useState (tagQuery)
   const [url, setURL] = useState ('')
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<MaterialFormField> ()
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     if (tag)
       formData.append ('tag', tag)
@@ -44,8 +53,9 @@ const MaterialNewPage: FC = () => {
       toast ({ title: '送信成功!' })
       navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '送信失敗……', description: '入力を見直してください．' })
     }
     finally
@@ -62,55 +72,66 @@ const MaterialNewPage: FC = () => {
 
 	<Form>
 	  <PageTitle>素材追加</PageTitle>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* タグ */}
-	  <div>
-	    <Label>タグ</Label>
-	    <TagInput value={tag} setValue={setTag}/>
-	  </div>
+	  <FormField label="タグ" messages={fieldErrors.tag}>
+	    {({ describedBy, invalid }) => (
+		<TagInput
+		    describedBy={describedBy}
+		    invalid={invalid}
+		    value={tag}
+		    setValue={setTag}/>)}
+	  </FormField>
 
 	  {/* ファイル */}
-	  <div>
-	    <Label>ファイル</Label>
-	    <input
-		type="file"
-		accept="image/*,video/*,audio/*"
-		onChange={e => {
-		  const f = e.target.files?.[0]
-		  setFile (f ?? null)
-		  setFilePreview (f ? URL.createObjectURL (f) : '')
-		}}/>
-	    {(file && filePreview) && (
-		(/image\/.*/.test (file.type) && (
-		    <img
-			src={filePreview}
-			alt="preview"
-			className="mt-2 max-h-48 rounded border"/>))
-		|| (/video\/.*/.test (file.type) && (
-		    <video
-			src={filePreview}
-			controls
-			className="mt-2 max-h-48 rounded border"/>))
-		|| (/audio\/.*/.test (file.type) && (
-		    <audio
-			src={filePreview}
-			controls
-			className="mt-2 max-h-48"/>))
-		|| (
-		    <p className="text-red-600 dark:text-red-400">
-		      その形式のファイルには対応していません．
-		    </p>))}
-	  </div>
+	  <FormField label="ファイル" messages={fieldErrors.file}>
+	    {({ describedBy, invalid }) => (
+		<>
+		  <input
+		      type="file"
+		      accept="image/*,video/*,audio/*"
+		      aria-describedby={describedBy}
+		      aria-invalid={invalid}
+		      onChange={e => {
+			const f = e.target.files?.[0]
+			setFile (f ?? null)
+			setFilePreview (f ? URL.createObjectURL (f) : '')
+		      }}/>
+		  {(file && filePreview) && (
+		      (/image\/.*/.test (file.type) && (
+			  <img
+			      src={filePreview}
+			      alt="preview"
+			      className="mt-2 max-h-48 rounded border"/>))
+		      || (/video\/.*/.test (file.type) && (
+			  <video
+			      src={filePreview}
+			      controls
+			      className="mt-2 max-h-48 rounded border"/>))
+		      || (/audio\/.*/.test (file.type) && (
+			  <audio
+			      src={filePreview}
+			      controls
+			      className="mt-2 max-h-48"/>))
+		      || (
+			  <p className="text-red-600 dark:text-red-400">
+			    その形式のファイルには対応していません．
+			  </p>))}
+		</>)}
+	  </FormField>
 
 	  {/* 参考 URL */}
-	  <div>
-	    <Label>参考 URL</Label>
-	    <input
-		type="url"
-		value={url}
-		onChange={e => setURL (e.target.value)}
-		className="w-full border p-2 rounded"/>
-	  </div>
+	  <FormField label="参考 URL" messages={fieldErrors.url}>
+	    {({ describedBy, invalid }) => (
+		<input
+		    type="url"
+		    value={url}
+		    onChange={e => setURL (e.target.value)}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* 送信 */}
 	  <Button
@@ -123,4 +144,4 @@ const MaterialNewPage: FC = () => {
       </MainArea>)
 }
 
-export default MaterialNewPage
+export default MaterialNewPage

frontend/src/pages/materials/MaterialSearchPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
@@ -29,23 +29,23 @@ const MaterialSearchPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タグ */}
-	    <div>
-	      <Label>タグ</Label>
-	      <TagInput
-		  value={tagName}
-		  setValue={setTagName}/>
-	    </div>
+	    <FormField label="タグ">
+	      {() => (
+		  <TagInput
+		      value={tagName}
+		      setValue={setTagName}/>)}
+	    </FormField>
 
 	    {/* 親タグ */}
-	    <div>
-	      <Label>親タグ</Label>
-	      <TagInput
-		  value={parentTagName}
-		  setValue={setParentTagName}/>
-	    </div>
+	    <FormField label="親タグ">
+	      {() => (
+		  <TagInput
+		      value={parentTagName}
+		      setValue={setParentTagName}/>)}
+	    </FormField>
 	  </form>
 	</div>
       </MainArea>)
 }
 
-export default MaterialSearchPage
+export default MaterialSearchPage

frontend/src/pages/posts/PostNewPage.tsx

@@ -4,8 +4,9 @@ import { useNavigate } from 'react-router-dom'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+import FieldError from '@/components/common/FieldError'
 import Form from '@/components/common/Form'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
@@ -13,6 +14,8 @@ import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPost } from '@/lib/api'
 import { canEditContent } from '@/lib/users'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 import Forbidden from '@/pages/Forbidden'
 
 import type { FC } from 'react'
@@ -21,12 +24,18 @@ import type { User } from '@/types'
 
 type Props = { user: User | null }
 
+type PostFormField =
+    'url' | 'title' | 'tags' | 'parentPostIds' | 'originalCreatedAt' | 'thumbnail'
+
 
 const PostNewPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
 
   const navigate = useNavigate ()
 
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<PostFormField> ()
+
   const [originalCreatedBefore, setOriginalCreatedBefore] = useState<string | null> (null)
   const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
   const [parentPostIds, setParentPostIds] = useState ('')
@@ -44,6 +53,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const thumbnailPreviewRef = useRef ('')
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     formData.append ('title', title)
     formData.append ('url', url)
@@ -62,8 +73,9 @@ const PostNewPage: FC<Props> = ({ user }) => {
       toast ({ title: '投稿成功!' })
       navigate ('/posts')
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '投稿失敗', description: '入力を確認してください。' })
     }
   }
@@ -127,85 +139,99 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	</Helmet>
 	<Form>
 	  <PageTitle>広場に投稿を追加する</PageTitle>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* URL */}
-	  <div>
-	    <Label>URL</Label>
-	    <input type="url"
-		   placeholder="例：https://www.nicovideo.jp/watch/..."
-		   value={url}
-		   onChange={e => setURL (e.target.value)}
-		   className="w-full border p-2 rounded"
-		   onBlur={handleURLBlur}/>
-	  </div>
+	  <FormField label="URL" messages={fieldErrors.url}>
+	    {({ describedBy, invalid }) => (
+		<input type="url"
+		       placeholder="例：https://www.nicovideo.jp/watch/..."
+		       value={url}
+		       onChange={e => setURL (e.target.value)}
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}
+		       onBlur={handleURLBlur}/>)}
+	  </FormField>
 
 	  {/* タイトル */}
-	  <div>
-	    <Label checkBox={{
-		label:    '自動',
-		checked:  titleAutoFlg,
-		onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
-	      タイトル
-	    </Label>
-	    <input type="text"
-		   className="w-full border rounded p-2"
-		   value={title}
-		   placeholder={titleLoading ? 'Loading...' : ''}
-		   onChange={ev => setTitle (ev.target.value)}
-		   disabled={titleAutoFlg}/>
-	  </div>
+	  <FormField
+	      checkBox={{
+		  label:    '自動',
+		  checked:  titleAutoFlg,
+		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
+	      label="タイトル"
+	      messages={fieldErrors.title}>
+	    {({ describedBy, invalid }) => (
+		<input type="text"
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}
+		       value={title}
+		       placeholder={titleLoading ? 'Loading...' : ''}
+		       onChange={ev => setTitle (ev.target.value)}
+		       disabled={titleAutoFlg}/>)}
+	  </FormField>
 
 	  {/* サムネール */}
-	  <div>
-	    <Label checkBox={{
-		label:    '自動',
-		checked:  thumbnailAutoFlg,
-		onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
-	      サムネール
-	    </Label>
-	    {thumbnailAutoFlg
-	     ? (thumbnailLoading
-		? <p className="text-gray-500 text-sm">Loading...</p>
-		: !(thumbnailPreview) && (
-		    <p className="text-gray-500 text-sm">
-		      URL から自動取得されます。
-		    </p>))
-	     : (
-		<input type="file"
-		       accept="image/*"
-		       onChange={e => {
-			 const file = e.target.files?.[0]
-			 if (file)
-			   {
-			     setThumbnailFile (file)
-			     setThumbnailPreview (URL.createObjectURL (file))
-			   }
-		       }}/>)}
-	    {thumbnailPreview && (
-		<img src={thumbnailPreview}
-		     alt="preview"
-		     className="mt-2 max-h-48 rounded border"/>)}
-	  </div>
+	  <FormField
+	      checkBox={{
+		  label:    '自動',
+		  checked:  thumbnailAutoFlg,
+		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
+	      label="サムネール"
+	      messages={fieldErrors.thumbnail}>
+	    {({ describedBy, invalid }) => (
+		<>
+		  {thumbnailAutoFlg
+		   ? (thumbnailLoading
+		      ? <p className="text-gray-500 text-sm">Loading...</p>
+		      : !(thumbnailPreview) && (
+			  <p className="text-gray-500 text-sm">
+			    URL から自動取得されます。
+			  </p>))
+		   : (
+		      <input type="file"
+			     accept="image/*"
+			     aria-describedby={describedBy}
+			     aria-invalid={invalid}
+			     onChange={e => {
+			       const file = e.target.files?.[0]
+			       if (file)
+				 {
+				   setThumbnailFile (file)
+				   setThumbnailPreview (URL.createObjectURL (file))
+				 }
+			     }}/>)}
+		  {thumbnailPreview && (
+		      <img src={thumbnailPreview}
+			   alt="preview"
+			   className="mt-2 max-h-48 rounded border"/>)}
+		</>)}
+	  </FormField>
 
 	  {/* 親投稿 */}
-	  <div>
-	    <Label>親投稿</Label>
-	    <input
-		type="text"
-		value={parentPostIds}
-		onChange={e => setParentPostIds (e.target.value)}
-		className="w-full border p-2 rounded"/>
-	  </div>
+	  <FormField label="親投稿" messages={fieldErrors.parentPostIds}>
+	    {({ describedBy, invalid }) => (
+		<input
+		    type="text"
+		    value={parentPostIds}
+		    onChange={e => setParentPostIds (e.target.value)}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* タグ */}
-	  <PostFormTagsArea tags={tags} setTags={setTags}/>
+	  <PostFormTagsArea tags={tags} setTags={setTags} errors={fieldErrors.tags}/>
 
 	  {/* オリジナルの作成日時 */}
 	  <PostOriginalCreatedTimeField
 	      originalCreatedFrom={originalCreatedFrom}
 	      setOriginalCreatedFrom={setOriginalCreatedFrom}
 	      originalCreatedBefore={originalCreatedBefore}
-	      setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	      setOriginalCreatedBefore={setOriginalCreatedBefore}
+	      errors={fieldErrors.originalCreatedAt}/>
 
 	  {/* 送信 */}
 	  <Button onClick={handleSubmit}

frontend/src/pages/posts/PostSearchPage.tsx

@@ -8,7 +8,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import SortHeader from '@/components/SortHeader'
 import TagLink from '@/components/TagLink'
 import DateTimeField from '@/components/common/DateTimeField'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import TagInput from '@/components/common/TagInput'
@@ -16,7 +16,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
-import { dateString, originalCreatedAtString } from '@/lib/utils'
+import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
@@ -138,31 +138,33 @@ const PostSearchPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タイトル */}
-	    <div>
-	      <Label>タイトル</Label>
-	      <input
-		  type="text"
-		  value={title}
-		  onChange={e => setTitle (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+	    <FormField label="タイトル">
+	      {({ invalid }) => (
+		  <input
+		      type="text"
+		      value={title}
+		      onChange={e => setTitle (e.target.value)}
+		      className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* URL */}
-	    <div>
-	      <Label>URL</Label>
-	      <input
-		  type="text"
-		  value={url}
-		  onChange={e => setURL (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+	    <FormField label="URL">
+	      {({ invalid }) => (
+		  <input
+		      type="text"
+		      value={url}
+		      onChange={e => setURL (e.target.value)}
+		      className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* タグ */}
+	    <FormField label="タグ">
+	      {() => (
+		  <TagInput
+		      value={tagsStr}
+		      setValue={setTagsStr}/>)}
+	    </FormField>
 	    <div>
-	      <Label>タグ</Label>
-	      <TagInput
-		  value={tagsStr}
-		  setValue={setTagsStr}/>
 	      <fieldset className="w-full my-2">
 		<label>検索区分：</label>
 		<label className="mx-2">
@@ -185,40 +187,46 @@ const PostSearchPage: FC = () => {
 	    </div>
 
 	    {/* オリジナルの投稿日時 */}
-	    <div>
-	      <Label>オリジナルの投稿日時</Label>
-	      <DateTimeField
-		  value={originalCreatedFrom ?? undefined}
-		  onChange={setOriginalCreatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={originalCreatedTo ?? undefined}
-		  onChange={setOriginalCreatedTo}/>
-	    </div>
+	    <FormField label="オリジナルの投稿日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={originalCreatedFrom ?? undefined}
+			onChange={setOriginalCreatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={originalCreatedTo ?? undefined}
+			onChange={setOriginalCreatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 投稿日時 */}
-	    <div>
-	      <Label>投稿日時</Label>
-	      <DateTimeField
-		  value={createdFrom ?? undefined}
-		  onChange={setCreatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={createdTo ?? undefined}
-		  onChange={setCreatedTo}/>
-	    </div>
+	    <FormField label="投稿日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={createdFrom ?? undefined}
+			onChange={setCreatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={createdTo ?? undefined}
+			onChange={setCreatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 更新日時 */}
-	    <div>
-	      <Label>更新日時</Label>
-	      <DateTimeField
-		  value={updatedFrom ?? undefined}
-		  onChange={setUpdatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={updatedTo ?? undefined}
-		  onChange={setUpdatedTo}/>
-	    </div>
+	    <FormField label="更新日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={updatedFrom ?? undefined}
+			onChange={setUpdatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={updatedTo ?? undefined}
+			onChange={setUpdatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 検索 */}
 	    <div className="py-3">

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -4,12 +4,14 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
 import TagLink from '@/components/TagLink'
+import FieldError from '@/components/common/FieldError'
 import PageTitle from '@/components/common/PageTitle'
 import TextArea from '@/components/common/TextArea'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
+import { extractValidationError } from '@/lib/apiErrors'
 import { canEditContent } from '@/lib/users'
 
 import type { NicoTag, Tag, User } from '@/types'
@@ -20,6 +22,7 @@ type Props = { user: User | null }
 const NicoTagListPage: FC<Props> = ({ user }) => {
   const [cursor, setCursor] = useState ('')
   const [editing, setEditing] = useState<{ [key: number]: boolean }> ({ })
+  const [errorsByTagId, setErrorsByTagId] = useState<Record<number, string[]>> ({ })
   const [loading, setLoading] = useState (false)
   const [nicoTags, setNicoTags] = useState<NicoTag[]> ([])
   const [rawTags, setRawTags] = useState<{ [key: number]: string }> ({ })
@@ -66,15 +69,27 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 	const formData = new FormData
 	formData.append ('tags', rawTags[id])
 
-	const data = await apiPut<Tag[]> (`/tags/nico/${ id }`, formData,
-				    { headers: { 'Content-Type': 'multipart/form-data' } })
-	setNicoTags (nicoTags => {
-	  nicoTags.find (t => t.id === id)!.linkedTags = data
-	  return [...nicoTags]
-	})
-	setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
+	try
+	{
+	  const data = await apiPut<Tag[]> (`/tags/nico/${ id }`, formData,
+				      { headers: { 'Content-Type': 'multipart/form-data' } })
+	  setNicoTags (nicoTags => {
+	    nicoTags.find (t => t.id === id)!.linkedTags = data
+	    return [...nicoTags]
+	  })
+	  setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
+	  setErrorsByTagId (errors => ({ ...errors, [id]: [] }))
 
-	toast ({ title: '更新しました．' })
+	  toast ({ title: '更新しました．' })
+	}
+	catch (e)
+	{
+	  const validationError = extractValidationError<'tags'> (e)
+	  setErrorsByTagId (errors => ({ ...errors,
+					 [id]: validationError?.fieldErrors.tags ?? [] }))
+	  toast ({ title: '更新失敗', description: '入力内容を確認してください．' })
+	  return
+	}
       }
 
     setEditing (editing => ({ ...editing, [id]: !(editing[id]) }))
@@ -130,9 +145,17 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 			<td className="p-2">
 			  {editing[tag.id]
 			   ? (
-			      <TextArea value={rawTags[tag.id]} onChange={ev => {
-				setRawTags (rawTags => ({ ...rawTags, [tag.id]: ev.target.value }))
-			      }}/>)
+			      <>
+				<TextArea
+				    value={rawTags[tag.id]}
+				    invalid={(errorsByTagId[tag.id] ?? []).length > 0}
+				    onChange={ev => {
+				      setRawTags (rawTags => ({
+					  ...rawTags,
+					  [tag.id]: ev.target.value }))
+				    }}/>
+				<FieldError messages={errorsByTagId[tag.id]}/>
+			      </>)
 			   : tag.linkedTags.map((lt, j) => (
 			      <span key={j} className="mr-2">
 				<TagLink tag={lt}

frontend/src/pages/tags/TagDetailPage.tsx

@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
-import Label from '@/components/common/Label'
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
@@ -11,12 +12,15 @@ import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { apiPut } from '@/lib/api'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { fetchTag } from '@/lib/tags'
-import { cn } from '@/lib/utils'
+import { cn, inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
 
 import type { Category, Tag } from '@/types'
 
+type TagFormField = 'name' | 'category' | 'aliases' | 'parentTags'
+
 
 const TagDetailPage: FC = () => {
   const { id } = useParams ()
@@ -32,11 +36,14 @@ const TagDetailPage: FC = () => {
   const [aliases, setAliases] = useState ('')
   const [parentTags, setParentTags] = useState ('')
   const [disabled, setDisabled] = useState (true)
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<TagFormField> ()
 
   const qc = useQueryClient ()
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault ()
+    clearValidationErrors ()
 
     const formData = new FormData
     formData.append ('name', name)
@@ -57,8 +64,9 @@ const TagDetailPage: FC = () => {
       qc.invalidateQueries ({ queryKey: tagsKeys.root })
       toast ({ description: '更新しました．' })
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ description: '更新に失敗しました．' })
     }
   }
@@ -89,57 +97,73 @@ const TagDetailPage: FC = () => {
 	      </PageTitle>
 
 	      <form onSubmit={handleSubmit} className="my-4 space-y-2">
+		<FieldError messages={baseErrors}/>
+
 		{/* 名称 */}
-		<div>
-		  <Label>名称</Label>
-		  {/* TODO: 補完に対応させる */}
-		  <input
-		      type="text"
-		      disabled={disabled}
-		      value={name}
-		      onChange={e => setName (e.target.value)}
-		      className="w-full border p-2 rounded"/>
-		</div>
+		<FormField label="名称" messages={fieldErrors.name}>
+		  {({ describedBy, invalid }) => (
+		      <>
+			{/* TODO: 補完に対応させる */}
+			<input
+			    type="text"
+			    disabled={disabled}
+			    value={name}
+			    onChange={e => setName (e.target.value)}
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>
 
 		{/* カテゴリ */}
-		<div>
-		  <Label>カテゴリ</Label>
+		<FormField label="カテゴリ" messages={fieldErrors.category}>
+		  {({ describedBy, invalid }) => (
 		  <select
 		      disabled={disabled}
 		      value={category ?? ''}
 		      onChange={e => setCategory(e.target.value as Category)}
-		      className="w-full border p-2 rounded">
+		      aria-describedby={describedBy}
+		      aria-invalid={invalid}
+		      className={inputClass (invalid)}>
 		    {CATEGORIES.filter (cat => tag.category === 'nico' || cat !== 'nico')
 			       .map (cat => (
 			<option key={cat} value={cat}>
 			  {CATEGORY_NAMES[cat]}
 			</option>))}
-		  </select>
-		</div>
+		  </select>)}
+		</FormField>
 
 		{/* 別名 */}
-		<div>
-		  <Label>別名</Label>
-		  {/* TODO: 補完に対応させる */}
-		  <input
-		      type="text"
-		      disabled={disabled}
-		      value={aliases}
-		      onChange={e => setAliases (e.target.value)}
-		      className="w-full border p-2 rounded"/>
-		</div>
+		<FormField label="別名" messages={fieldErrors.aliases}>
+		  {({ describedBy, invalid }) => (
+		      <>
+			{/* TODO: 補完に対応させる */}
+			<input
+			    type="text"
+			    disabled={disabled}
+			    value={aliases}
+			    onChange={e => setAliases (e.target.value)}
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>
 
 		{/* 上位タグ */}
-		<div>
-		  <Label>上位タグ</Label>
-		  {/* TODO: 補完に対応させる */}
-		  <input
-		      type="text"
-		      disabled={disabled}
-		      value={parentTags}
-		      onChange={e => setParentTags (e.target.value)}
-		      className="w-full border p-2 rounded"/>
-		</div>
+		<FormField label="上位タグ" messages={fieldErrors.parentTags}>
+		  {({ describedBy, invalid }) => (
+		      <>
+			{/* TODO: 補完に対応させる */}
+			<input
+			    type="text"
+			    disabled={disabled}
+			    value={parentTags}
+			    onChange={e => setParentTags (e.target.value)}
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>
 
 		<div className="py-3">
 		  <button
@@ -157,4 +181,4 @@ const TagDetailPage: FC = () => {
       </MainArea>)
 }
 
-export default TagDetailPage
+export default TagDetailPage

frontend/src/pages/tags/TagListPage.tsx

@@ -7,7 +7,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import SortHeader from '@/components/SortHeader'
 import TagLink from '@/components/TagLink'
 import DateTimeField from '@/components/common/DateTimeField'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
@@ -15,7 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
 import { tagsKeys } from '@/lib/queryKeys'
 import { fetchTags } from '@/lib/tags'
-import { dateString } from '@/lib/utils'
+import { dateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
@@ -127,71 +127,79 @@ const TagListPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* 名前 */}
-	    <div>
-	      <Label>名前</Label>
-	      <input
-		  type="text"
-		  value={name}
-		  onChange={e => setName (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+	    <FormField label="名前">
+	      {({ invalid }) => (
+		  <input
+		      type="text"
+		      value={name}
+		      onChange={e => setName (e.target.value)}
+		      className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* カテゴリ */}
-	    <div>
-	      <Label>カテゴリ</Label>
-	      <select
-		  value={category ?? ''}
-		  onChange={e => setCategory((e.target.value || null) as Category | null)}
-		  className="w-full border p-2 rounded">
-		<option value="">&nbsp;</option>
-		{CATEGORIES.map (cat => (
-		    <option key={cat} value={cat}>
-		      {CATEGORY_NAMES[cat]}
-		    </option>))}
-	      </select>
-	    </div>
+	    <FormField label="カテゴリ">
+	      {({ invalid }) => (
+		  <select
+		      value={category ?? ''}
+		      onChange={e => setCategory((e.target.value || null) as Category | null)}
+		      className={inputClass (invalid)}>
+		    <option value="">&nbsp;</option>
+		    {CATEGORIES.map (cat => (
+			<option key={cat} value={cat}>
+			  {CATEGORY_NAMES[cat]}
+			</option>))}
+		  </select>)}
+	    </FormField>
 
 	    {/* 広場の投稿数 */}
-	    <div>
-	      <Label>広場の投稿数</Label>
-	      <input
-		  type="number"
-		  min="0"
-		  value={postCountGTE < 0 ? 0 : String (postCountGTE)}
-		  onChange={e => setPostCountGTE (Number (e.target.value || 0))}
-		  className="border rounded p-2"/>
-	      <span className="mx-1">〜</span>
-	      <input
-		  type="number"
-		  min="0"
-		  value={postCountLTE == null ? '' : String (postCountLTE)}
-		  onChange={e => setPostCountLTE (e.target.value ? Number (e.target.value) : null)}
-		  className="border rounded p-2"/>
-	    </div>
+	    <FormField label="広場の投稿数">
+	      {({ invalid }) => (
+		  <>
+		    <input
+			type="number"
+			min="0"
+			value={postCountGTE < 0 ? 0 : String (postCountGTE)}
+			onChange={e => setPostCountGTE (Number (e.target.value || 0))}
+			className={inputClass (invalid, 'w-auto')}/>
+		    <span className="mx-1">〜</span>
+		    <input
+			type="number"
+			min="0"
+			value={postCountLTE == null ? '' : String (postCountLTE)}
+			onChange={e => setPostCountLTE (e.target.value
+							? Number (e.target.value)
+							: null)}
+			className={inputClass (invalid, 'w-auto')}/>
+		  </>)}
+	    </FormField>
 
 	    {/* はじめて記載された日時 */}
-	    <div>
-	      <Label>はじめて記載された日時</Label>
-	      <DateTimeField
-		  value={createdFrom ?? undefined}
-		  onChange={setCreatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={createdTo ?? undefined}
-		  onChange={setCreatedTo}/>
-	    </div>
+	    <FormField label="はじめて記載された日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={createdFrom ?? undefined}
+			onChange={setCreatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={createdTo ?? undefined}
+			onChange={setCreatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 定義の更新日時 */}
-	    <div>
-	      <Label>定義の更新日時</Label>
-	      <DateTimeField
-		  value={updatedFrom ?? undefined}
-		  onChange={setUpdatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={updatedTo ?? undefined}
-		  onChange={setUpdatedTo}/>
-	    </div>
+	    <FormField label="定義の更新日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={updatedFrom ?? undefined}
+			onChange={setUpdatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={updatedTo ?? undefined}
+			onChange={setUpdatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    <div className="py-3">
 	      <button

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -6,12 +6,14 @@ import ErrorScreen from '@/components/ErrorScreen'
 import PostEmbed from '@/components/PostEmbed'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagDetailSidebar from '@/components/TagDetailSidebar'
+import FieldError from '@/components/common/FieldError'
 import MainArea from '@/components/layout/MainArea'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
 import { fetchPost } from '@/lib/posts'
-import { dateString } from '@/lib/utils'
+import { dateString, inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC } from 'react'
 
@@ -27,6 +29,8 @@ type TheatreInfo = {
     postStartedAt:  string | null
     watchingUsers:  { id: number; name: string }[] }
 
+type TheatreCommentField = 'content'
+
 const INITIAL_THEATRE_INFO =
     { hostFlg: false,
       postId: null,
@@ -53,6 +57,8 @@ const TheatreDetailPage: FC = () => {
   const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
   const [post, setPost] = useState<Post | null> (null)
   const [videoLength, setVideoLength] = useState (0)
+  const { fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<TheatreCommentField> ()
 
   useEffect (() => {
     loadingRef.current = loading
@@ -284,22 +290,28 @@ const TheatreDetailPage: FC = () => {
 		try
 		{
 		  setSending (true)
+		  clearValidationErrors ()
 		  await apiPost (`/theatres/${ id }/comments`, { content })
 		  setContent ('')
 		  commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
 		}
+		catch (error)
+		{
+		  applyValidationError (error)
+		}
 		finally
 		{
 		  setSending (false)
 		}
 	      }}>
 	    <input
-		className="w-full p-2 border rounded"
+		className={inputClass ((fieldErrors.content ?? []).length > 0)}
 		type="text"
 		placeholder="ここにコメントを入力"
 		value={content}
 		onChange={e => setContent (e.target.value)}
 		disabled={sending}/>
+	    <FieldError messages={fieldErrors.content}/>
 
 	    <div
 		ref={commentsRef}

frontend/src/pages/users/SettingPage.tsx

@@ -3,7 +3,9 @@ import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
+import FieldError from '@/components/common/FieldError'
 import Form from '@/components/common/Form'
+import FormField from '@/components/common/FormField'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
@@ -13,22 +15,30 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPut } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { User } from '@/types'
 
 type Props = { user:    User | null
 	       setUser: React.Dispatch<React.SetStateAction<User | null>> }
 
+type UserFormField = 'name'
+
 
 const SettingPage: FC<Props> = ({ user, setUser }) => {
   const [name, setName] = useState ('')
   const [userCodeVsbl, setUserCodeVsbl] = useState (false)
   const [inheritVsbl, setInheritVsbl] = useState (false)
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<UserFormField> ()
 
   const handleSubmit = async () => {
     if (!(user))
       return
 
+    clearValidationErrors ()
+
     const formData = new FormData
     formData.append ('name', name)
 
@@ -40,8 +50,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       setUser (user => ({ ...user, ...data }))
       toast ({ title: '設定を更新しました．' })
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: 'しっぱい……' })
     }
   }
@@ -65,11 +76,16 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 
 	  {user ? (
 	      <>
+		<FieldError messages={baseErrors}/>
+
 		{/* 名前 */}
-		<div>
-		  <Label>表示名</Label>
+		<FormField label="表示名" messages={fieldErrors.name}>
+		  {({ describedBy, invalid }) => (
+		      <>
 		  <input type="text"
-			 className="w-full border rounded p-2"
+			 aria-describedby={describedBy}
+			 aria-invalid={invalid}
+			 className={inputClass (invalid)}
 			 value={name}
 			 placeholder="名もなきニジラー"
 			 onChange={ev => setName (ev.target.value)}/>
@@ -77,7 +93,8 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		      <p className="mt-1 text-sm text-red-500">
 			名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
 		      </p>)}
-		</div>
+		      </>)}
+		</FormField>
 
 		{/* 送信 */}
 		<Button onClick={handleSubmit}

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -5,12 +5,16 @@ import { Helmet } from 'react-helmet-async'
 import MdEditor from 'react-markdown-editor-lite'
 import { useParams, useNavigate } from 'react-router-dom'
 
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
 import { wikiKeys } from '@/lib/queryKeys'
 import { canEditContent } from '@/lib/users'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 import Forbidden from '@/pages/Forbidden'
 
 import 'react-markdown-editor-lite/lib/index.css'
@@ -23,6 +27,8 @@ const mdParser = new MarkdownIt
 
 type Props = { user: User | null }
 
+type WikiFormField = 'title' | 'body'
+
 
 const WikiEditPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
@@ -36,8 +42,12 @@ const WikiEditPage: FC<Props> = ({ user }) => {
   const [body, setBody] = useState ('')
   const [loading, setLoading] = useState (true)
   const [title, setTitle] = useState ('')
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<WikiFormField> ()
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData ()
     formData.append ('title', title)
     formData.append ('body', body)
@@ -52,8 +62,9 @@ const WikiEditPage: FC<Props> = ({ user }) => {
       toast ({ title: '投稿成功!' })
       navigate (`/wiki/${ title }`)
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '投稿失敗', description: '入力を確認してください。' })
     }
   }
@@ -84,24 +95,28 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 
 	  {loading ? 'Loading...' : (
 	      <>
+		<FieldError messages={baseErrors}/>
+
 		{/* タイトル */}
 		{/* TODO: タグ補完 */}
-		<div>
-		  <label className="block font-semibold mb-1">タイトル</label>
-		  <input type="text"
-			 value={title}
-			 onChange={e => setTitle (e.target.value)}
-			 className="w-full border p-2 rounded"/>
-		</div>
+		<FormField label="タイトル" messages={fieldErrors.title}>
+		  {({ describedBy, invalid }) => (
+		      <input type="text"
+			     value={title}
+			     onChange={e => setTitle (e.target.value)}
+			     aria-describedby={describedBy}
+			     aria-invalid={invalid}
+			     className={inputClass (invalid)}/>)}
+		</FormField>
 
 		{/* 本文 */}
-		<div>
-		  <label className="block font-semibold mb-1">本文</label>
-		  <MdEditor value={body}
-			    style={{ height: '500px' }}
-			    renderHTML={text => mdParser.render (text)}
-			    onChange={({ text }) => setBody (text)}/>
-		</div>
+		<FormField label="本文" messages={fieldErrors.body}>
+		  {() => (
+		      <MdEditor value={body}
+				style={{ height: '500px' }}
+				renderHTML={text => mdParser.render (text)}
+				onChange={({ text }) => setBody (text)}/>)}
+		</FormField>
 
 		{/* 送信 */}
 		<button onClick={handleSubmit}

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -6,11 +6,15 @@ import { Helmet } from 'react-helmet-async'
 import MdEditor from 'react-markdown-editor-lite'
 import { useLocation, useNavigate } from 'react-router-dom'
 
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
 import { canEditContent } from '@/lib/users'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 import Forbidden from '@/pages/Forbidden'
 
 import 'react-markdown-editor-lite/lib/index.css'
@@ -21,6 +25,8 @@ const mdParser = new MarkdownIt
 
 type Props = { user: User | null }
 
+type WikiFormField = 'title' | 'body'
+
 
 const WikiNewPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
@@ -33,8 +39,12 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 
   const [title, setTitle] = useState (titleQuery)
   const [body, setBody] = useState ('')
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<WikiFormField> ()
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     formData.append ('title', title)
     formData.append ('body', body)
@@ -46,8 +56,9 @@ const WikiNewPage: FC<Props> = ({ user }) => {
       toast ({ title: '投稿成功!' })
       navigate (`/wiki/${ data.title }`)
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '投稿失敗', description: '入力を確認してください。' })
     }
   }
@@ -62,25 +73,28 @@ const WikiNewPage: FC<Props> = ({ user }) => {
 	</Helmet>
 	<div className="max-w-xl mx-auto p-4 space-y-4">
 	  <h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* タイトル */}
 	  {/* TODO: タグ補完 */}
-	  <div>
-	    <label className="block font-semibold mb-1">タイトル</label>
-	    <input type="text"
-		   value={title}
-		   onChange={e => setTitle (e.target.value)}
-		   className="w-full border p-2 rounded"/>
-	  </div>
+	  <FormField label="タイトル" messages={fieldErrors.title}>
+	    {({ describedBy, invalid }) => (
+		<input type="text"
+		       value={title}
+		       onChange={e => setTitle (e.target.value)}
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* 本文 */}
-	  <div>
-	    <label className="block font-semibold mb-1">本文</label>
-	    <MdEditor value={body}
-		      style={{ height: '500px' }}
-		      renderHTML={text => mdParser.render (text)}
-		      onChange={({ text }) => setBody (text)}/>
-	  </div>
+	  <FormField label="本文" messages={fieldErrors.body}>
+	    {() => (
+		<MdEditor value={body}
+			  style={{ height: '500px' }}
+			  renderHTML={text => mdParser.render (text)}
+			  onChange={({ text }) => setBody (text)}/>)}
+	  </FormField>
 
 	  {/* 送信 */}
 	  <button onClick={handleSubmit}

frontend/src/pages/wiki/WikiSearchPage.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { apiGet } from '@/lib/api'
-import { dateString } from '@/lib/utils'
+import { dateString, inputClass } from '@/lib/utils'
 
 import type { FormEvent , FC } from 'react'
 
@@ -43,22 +44,22 @@ const WikiSearchPage: FC = () => {
 	  <PageTitle>Wiki</PageTitle>
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タイトル */}
-	    <div>
-	      <label>タイトル：</label><br />
-	      <input type="text"
-		     value={title}
-		     onChange={e => setTitle (e.target.value)}
-		     className="border p-1 w-full" />
-	    </div>
+	    <FormField label="タイトル">
+	      {({ invalid }) => (
+		  <input type="text"
+			 value={title}
+			 onChange={e => setTitle (e.target.value)}
+			 className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* 内容 */}
-	    <div>
-	      <label>内容：</label><br />
-	      <input type="text"
-		     value={text}
-		     onChange={e => setText (e.target.value)}
-		     className="border p-1 w-full" />
-	    </div>
+	    <FormField label="内容">
+	      {({ invalid }) => (
+		  <input type="text"
+			 value={text}
+			 onChange={e => setText (e.target.value)}
+			 className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* 検索 */}
 	    <div className="py-3">