AGENTS.md

@@ -122,6 +122,42 @@ 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.

backend/app/controllers/materials_controller.rb

@@ -55,7 +55,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
 
@@ -86,7 +86,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/posts_controller.rb

@@ -672,11 +672,11 @@ class PostsController < ApplicationController
 
   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|
+      render_validation_error fields: { tags: e.record.errors.full_messages.map { |message|
         "タグ名 “#{ e.record.name }”: #{ message }"
-      } })
+      } }
     else
-      render_validation_error(record)
+      render_validation_error record
     end
   end
 end

backend/app/controllers/users_controller.rb

@@ -47,7 +47,7 @@ class UsersController < ApplicationController
     if user.update(name:)
       render json: user.slice(:id, :name, :inheritance_code, :role), status: :ok
     else
-      render_model_errors(user)
+      render_validation_errors user
     end
   end
 

backend/app/controllers/wiki_pages_controller.rb

@@ -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_errors 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 ({ })
+    clearValidationErrors ()
-    setBaseErrors ([])
 
     try
     {
@@ -79,12 +77,8 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 
       if (response?.status !== 409)
 	{
-	  const validationError = extractValidationError<PostFormField> (e)
+	  if (applyValidationError (e))
-
-	  if (validationError)
 	    {
-	      setFieldErrors (validationError.fieldErrors)
-	      setBaseErrors (validationError.baseErrors)
 	      toast ({ description: '更新はできなかったよ……' })
 	      return
 	    }
@@ -148,31 +142,28 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	<FieldError messages={baseErrors}/>
 
 	{/* タイトル */}
-	<div>
+	<FormField label="タイトル">
-	  <Label>タイトル</Label>
+	  {({ invalid }) => (
 	      <input
 		  type="text"
 		  disabled={disabled}
-	      className={inputClass ()}
+		  className={inputClass (invalid)}
 		  value={title ?? ''}
-	      onChange={ev => setTitle (ev.target.value)}/>
+		  onChange={ev => setTitle (ev.target.value)}/>)}
-	</div>
+	</FormField>
 
 	{/* 親投稿 */}
-	<div>
+	<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
-	  <Label invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}>
+	  {({ describedBy, invalid }) => (
-	    親投稿
-	  </Label>
 	      <input
 		  type="text"
 		  disabled={disabled}
 		  value={parentPostIds}
 		  onChange={e => setParentPostIds (e.target.value)}
-	      aria-invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}
+		  aria-describedby={describedBy}
-	      className={inputClass (fieldErrors.parentPostIds
+		  aria-invalid={invalid}
-				     && fieldErrors.parentPostIds.length > 0)}/>
+		  className={inputClass (invalid)}/>)}
-	  <FieldError messages={fieldErrors.parentPostIds}/>
+	</FormField>
-	</div>
 
 	{/* タグ */}
 	<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 FormField from '@/components/common/FormField'
-import Label from '@/components/common/Label'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'
 
@@ -75,13 +74,15 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   }
 
   return (
-      <div className="relative w-full">
+      <FormField className="relative w-full" label="タグ" messages={errors}>
-	<Label invalid={errors && errors.length > 0}>タグ</Label>
+	{({ describedBy, invalid }) => (
+	    <>
 	      <TextArea
 		  {...rest}
 		  ref={ref}
 		  value={tags}
-	    invalid={errors && errors.length > 0}
+		  aria-describedby={describedBy}
+		  invalid={invalid}
 		  onChange={ev => setTags (ev.target.value)}
 		  onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
 		    const pos = (ev.target as HTMLTextAreaElement).selectionStart
@@ -99,8 +100,8 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 				   : [] as Tag[]}
 		      activeIndex={-1}
 		      onSelect={handleTagSelect}/>)}
-	<FieldError messages={errors}/>
+	    </>)}
-      </div>)
+      </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 FormField from '@/components/common/FormField'
-import Label from '@/components/common/Label'
 import { Button } from '@/components/ui/button'
 
 import type { FC } from 'react'
@@ -22,16 +21,17 @@ const PostOriginalCreatedTimeField: FC<Props> = (
       setOriginalCreatedBefore,
       errors }: Props,
 ) => (
-    <div>
+    <FormField label="オリジナルの作成日時" messages={errors}>
-      <Label invalid={errors && errors.length > 0}>オリジナルの作成日時</Label>
+      {({ describedBy, invalid }) => (
-
+	  <>
 	    <div className="my-1 flex">
 	      <div className="w-80">
 		<DateTimeField
 		    className="mr-2"
 		    disabled={disabled ?? false}
-	      aria-invalid={errors && errors.length > 0}
+		    aria-describedby={describedBy}
-	      invalid={errors && errors.length > 0}
+		    aria-invalid={invalid}
+		    invalid={invalid}
 		    value={originalCreatedFrom ?? undefined}
 		    onChange={setOriginalCreatedFrom}
 		    onBlur={ev => {
@@ -65,8 +65,9 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 		<DateTimeField
 		    className="mr-2"
 		    disabled={disabled}
-	      aria-invalid={errors && errors.length > 0}
+		    aria-describedby={describedBy}
-	      invalid={errors && errors.length > 0}
+		    aria-invalid={invalid}
+		    invalid={invalid}
 		    value={originalCreatedBefore ?? undefined}
 		    onChange={setOriginalCreatedBefore}/>
 		より前
@@ -82,8 +83,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 		</Button>
 	      </div>
 	    </div>
-
+	  </>)}
-      <FieldError messages={errors}/>
+    </FormField>)
-    </div>)
 
 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,7 +111,8 @@ 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}/>

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 = {
+    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[]}

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>
+		      <FormField
-			<Label>プラットフォーム</Label>
+			  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>
+			</select>)}
-		      </div>
+		      </FormField>
 
 		      {/* コード */}
-		      <div>
+		      <FormField
-			<Label>コード</Label>
+			  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,18 +128,27 @@ const MaterialDetailPage: FC = () => {
 
 		<Tab name="編輯">
 		  <div className="max-w-wl pt-2 space-y-4">
+		    <FieldError messages={baseErrors}/>
+
 		    {/* タグ */}
-		    <div>
+		    <FormField label="タグ" messages={fieldErrors.tag}>
-		      <Label>タグ</Label>
+		      {({ describedBy, invalid }) => (
-		      <TagInput value={tag} setValue={setTag}/>
+			  <TagInput
-		    </div>
+			      describedBy={describedBy}
+			      invalid={invalid}
+			      value={tag}
+			      setValue={setTag}/>)}
+		    </FormField>
 
 		    {/* ファイル */}
-		    <div>
+		    <FormField label="ファイル" messages={fieldErrors.file}>
-		      <Label>ファイル</Label>
+		      {({ 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)
@@ -155,17 +174,20 @@ const MaterialDetailPage: FC = () => {
 				    <p className="text-red-600 dark:text-red-400">
 				      その形式のファイルには対応していません．
 				    </p>))}
-		    </div>
+			  </>)}
+		    </FormField>
 
 		    {/* 参考 URL */}
-		    <div>
+		    <FormField label="参考 URL" messages={fieldErrors.url}>
-		      <Label>参考 URL</Label>
+		      {({ describedBy, invalid }) => (
 			  <input
 			      type="url"
 			      value={url}
 			      onChange={e => setURL (e.target.value)}
-			  className="w-full border p-2 rounded"/>
+			      aria-describedby={describedBy}
-		    </div>
+			      aria-invalid={invalid}
+			      className={inputClass (invalid)}/>)}
+		    </FormField>
 
 		    {/* 送信 */}
 		    <Button

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,19 +72,27 @@ const MaterialNewPage: FC = () => {
 
 	<Form>
 	  <PageTitle>素材追加</PageTitle>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* タグ */}
-	  <div>
+	  <FormField label="タグ" messages={fieldErrors.tag}>
-	    <Label>タグ</Label>
+	    {({ describedBy, invalid }) => (
-	    <TagInput value={tag} setValue={setTag}/>
+		<TagInput
-	  </div>
+		    describedBy={describedBy}
+		    invalid={invalid}
+		    value={tag}
+		    setValue={setTag}/>)}
+	  </FormField>
 
 	  {/* ファイル */}
-	  <div>
+	  <FormField label="ファイル" messages={fieldErrors.file}>
-	    <Label>ファイル</Label>
+	    {({ 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)
@@ -100,17 +118,20 @@ const MaterialNewPage: FC = () => {
 			  <p className="text-red-600 dark:text-red-400">
 			    その形式のファイルには対応していません．
 			  </p>))}
-	  </div>
+		</>)}
+	  </FormField>
 
 	  {/* 参考 URL */}
-	  <div>
+	  <FormField label="参考 URL" messages={fieldErrors.url}>
-	    <Label>参考 URL</Label>
+	    {({ describedBy, invalid }) => (
 		<input
 		    type="url"
 		    value={url}
 		    onChange={e => setURL (e.target.value)}
-		className="w-full border p-2 rounded"/>
+		    aria-describedby={describedBy}
-	  </div>
+		    aria-invalid={invalid}
+		    className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* 送信 */}
 	  <Button

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,20 +29,20 @@ const MaterialSearchPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タグ */}
-	    <div>
+	    <FormField label="タグ">
-	      <Label>タグ</Label>
+	      {() => (
 		  <TagInput
 		      value={tagName}
-		  setValue={setTagName}/>
+		      setValue={setTagName}/>)}
-	    </div>
+	    </FormField>
 
 	    {/* 親タグ */}
-	    <div>
+	    <FormField label="親タグ">
-	      <Label>親タグ</Label>
+	      {() => (
 		  <TagInput
 		      value={parentTagName}
-		  setValue={setParentTagName}/>
+		      setValue={setParentTagName}/>)}
-	    </div>
+	    </FormField>
 	  </form>
 	</div>
       </MainArea>)

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,42 +139,50 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	</Helmet>
 	<Form>
 	  <PageTitle>広場に投稿を追加する</PageTitle>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* URL */}
-	  <div>
+	  <FormField label="URL" messages={fieldErrors.url}>
-	    <Label>URL</Label>
+	    {({ describedBy, invalid }) => (
 		<input type="url"
 		       placeholder="例：https://www.nicovideo.jp/watch/..."
 		       value={url}
 		       onChange={e => setURL (e.target.value)}
-		   className="w-full border p-2 rounded"
+		       aria-describedby={describedBy}
-		   onBlur={handleURLBlur}/>
+		       aria-invalid={invalid}
-	  </div>
+		       className={inputClass (invalid)}
+		       onBlur={handleURLBlur}/>)}
+	  </FormField>
 
 	  {/* タイトル */}
-	  <div>
+	  <FormField
-	    <Label checkBox={{
+	      checkBox={{
 		  label:    '自動',
 		  checked:  titleAutoFlg,
-		onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
+		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
-	      タイトル
+	      label="タイトル"
-	    </Label>
+	      messages={fieldErrors.title}>
+	    {({ describedBy, invalid }) => (
 		<input type="text"
-		   className="w-full border rounded p-2"
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}
 		       value={title}
 		       placeholder={titleLoading ? 'Loading...' : ''}
 		       onChange={ev => setTitle (ev.target.value)}
-		   disabled={titleAutoFlg}/>
+		       disabled={titleAutoFlg}/>)}
-	  </div>
+	  </FormField>
 
 	  {/* サムネール */}
-	  <div>
+	  <FormField
-	    <Label checkBox={{
+	      checkBox={{
 		  label:    '自動',
 		  checked:  thumbnailAutoFlg,
-		onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
+		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
-	      サムネール
+	      label="サムネール"
-	    </Label>
+	      messages={fieldErrors.thumbnail}>
+	    {({ describedBy, invalid }) => (
+		<>
 		  {thumbnailAutoFlg
 		   ? (thumbnailLoading
 		      ? <p className="text-gray-500 text-sm">Loading...</p>
@@ -173,6 +193,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		   : (
 		      <input type="file"
 			     accept="image/*"
+			     aria-describedby={describedBy}
+			     aria-invalid={invalid}
 			     onChange={e => {
 			       const file = e.target.files?.[0]
 			       if (file)
@@ -185,27 +207,31 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		      <img src={thumbnailPreview}
 			   alt="preview"
 			   className="mt-2 max-h-48 rounded border"/>)}
-	  </div>
+		</>)}
+	  </FormField>
 
 	  {/* 親投稿 */}
-	  <div>
+	  <FormField label="親投稿" messages={fieldErrors.parentPostIds}>
-	    <Label>親投稿</Label>
+	    {({ describedBy, invalid }) => (
 		<input
 		    type="text"
 		    value={parentPostIds}
 		    onChange={e => setParentPostIds (e.target.value)}
-		className="w-full border p-2 rounded"/>
+		    aria-describedby={describedBy}
-	  </div>
+		    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>
+	    <FormField label="タイトル">
-	      <Label>タイトル</Label>
+	      {({ invalid }) => (
 		  <input
 		      type="text"
 		      value={title}
 		      onChange={e => setTitle (e.target.value)}
-		  className="w-full border p-2 rounded"/>
+		      className={inputClass (invalid)}/>)}
-	    </div>
+	    </FormField>
 
 	    {/* URL */}
-	    <div>
+	    <FormField label="URL">
-	      <Label>URL</Label>
+	      {({ invalid }) => (
 		  <input
 		      type="text"
 		      value={url}
 		      onChange={e => setURL (e.target.value)}
-		  className="w-full border p-2 rounded"/>
+		      className={inputClass (invalid)}/>)}
-	    </div>
+	    </FormField>
 
 	    {/* タグ */}
-	    <div>
+	    <FormField label="タグ">
-	      <Label>タグ</Label>
+	      {() => (
 		  <TagInput
 		      value={tagsStr}
-		  setValue={setTagsStr}/>
+		      setValue={setTagsStr}/>)}
+	    </FormField>
+	    <div>
 	      <fieldset className="w-full my-2">
 		<label>検索区分：</label>
 		<label className="mx-2">
@@ -185,8 +187,9 @@ const PostSearchPage: FC = () => {
 	    </div>
 
 	    {/* オリジナルの投稿日時 */}
-	    <div>
+	    <FormField label="オリジナルの投稿日時">
-	      <Label>オリジナルの投稿日時</Label>
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={originalCreatedFrom ?? undefined}
 			onChange={setOriginalCreatedFrom}/>
@@ -194,11 +197,13 @@ const PostSearchPage: FC = () => {
 		    <DateTimeField
 			value={originalCreatedTo ?? undefined}
 			onChange={setOriginalCreatedTo}/>
-	    </div>
+		  </>)}
+	    </FormField>
 
 	    {/* 投稿日時 */}
-	    <div>
+	    <FormField label="投稿日時">
-	      <Label>投稿日時</Label>
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={createdFrom ?? undefined}
 			onChange={setCreatedFrom}/>
@@ -206,11 +211,13 @@ const PostSearchPage: FC = () => {
 		    <DateTimeField
 			value={createdTo ?? undefined}
 			onChange={setCreatedTo}/>
-	    </div>
+		  </>)}
+	    </FormField>
 
 	    {/* 更新日時 */}
-	    <div>
+	    <FormField label="更新日時">
-	      <Label>更新日時</Label>
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={updatedFrom ?? undefined}
 			onChange={setUpdatedFrom}/>
@@ -218,7 +225,8 @@ const PostSearchPage: FC = () => {
 		    <DateTimeField
 			value={updatedTo ?? undefined}
 			onChange={setUpdatedTo}/>
-	    </div>
+		  </>)}
+	    </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,6 +69,8 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 	const formData = new FormData
 	formData.append ('tags', rawTags[id])
 
+	try
+	{
 	  const data = await apiPut<Tag[]> (`/tags/nico/${ id }`, formData,
 				      { headers: { 'Content-Type': 'multipart/form-data' } })
 	  setNicoTags (nicoTags => {
@@ -73,9 +78,19 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 	    return [...nicoTags]
 	  })
 	  setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
+	  setErrorsByTagId (errors => ({ ...errors, [id]: [] }))
 
 	  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>
+		<FormField label="名称" messages={fieldErrors.name}>
-		  <Label>名称</Label>
+		  {({ describedBy, invalid }) => (
+		      <>
 			{/* TODO: 補完に対応させる */}
 			<input
 			    type="text"
 			    disabled={disabled}
 			    value={name}
 			    onChange={e => setName (e.target.value)}
-		      className="w-full border p-2 rounded"/>
+			    aria-describedby={describedBy}
-		</div>
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>
 
 		{/* カテゴリ */}
-		<div>
+		<FormField label="カテゴリ" messages={fieldErrors.category}>
-		  <Label>カテゴリ</Label>
+		  {({ 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>
+		  </select>)}
-		</div>
+		</FormField>
 
 		{/* 別名 */}
-		<div>
+		<FormField label="別名" messages={fieldErrors.aliases}>
-		  <Label>別名</Label>
+		  {({ describedBy, invalid }) => (
+		      <>
 			{/* TODO: 補完に対応させる */}
 			<input
 			    type="text"
 			    disabled={disabled}
 			    value={aliases}
 			    onChange={e => setAliases (e.target.value)}
-		      className="w-full border p-2 rounded"/>
+			    aria-describedby={describedBy}
-		</div>
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>
 
 		{/* 上位タグ */}
-		<div>
+		<FormField label="上位タグ" messages={fieldErrors.parentTags}>
-		  <Label>上位タグ</Label>
+		  {({ describedBy, invalid }) => (
+		      <>
 			{/* TODO: 補完に対応させる */}
 			<input
 			    type="text"
 			    disabled={disabled}
 			    value={parentTags}
 			    onChange={e => setParentTags (e.target.value)}
-		      className="w-full border p-2 rounded"/>
+			    aria-describedby={describedBy}
-		</div>
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>
 
 		<div className="py-3">
 		  <button

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,51 +127,56 @@ const TagListPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* 名前 */}
-	    <div>
+	    <FormField label="名前">
-	      <Label>名前</Label>
+	      {({ invalid }) => (
 		  <input
 		      type="text"
 		      value={name}
 		      onChange={e => setName (e.target.value)}
-		  className="w-full border p-2 rounded"/>
+		      className={inputClass (invalid)}/>)}
-	    </div>
+	    </FormField>
 
 	    {/* カテゴリ */}
-	    <div>
+	    <FormField label="カテゴリ">
-	      <Label>カテゴリ</Label>
+	      {({ invalid }) => (
 		  <select
 		      value={category ?? ''}
 		      onChange={e => setCategory((e.target.value || null) as Category | null)}
-		  className="w-full border p-2 rounded">
+		      className={inputClass (invalid)}>
 		    <option value="">&nbsp;</option>
 		    {CATEGORIES.map (cat => (
 			<option key={cat} value={cat}>
 			  {CATEGORY_NAMES[cat]}
 			</option>))}
-	      </select>
+		  </select>)}
-	    </div>
+	    </FormField>
 
 	    {/* 広場の投稿数 */}
-	    <div>
+	    <FormField label="広場の投稿数">
-	      <Label>広場の投稿数</Label>
+	      {({ invalid }) => (
+		  <>
 		    <input
 			type="number"
 			min="0"
 			value={postCountGTE < 0 ? 0 : String (postCountGTE)}
 			onChange={e => setPostCountGTE (Number (e.target.value || 0))}
-		  className="border rounded p-2"/>
+			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)}
+			onChange={e => setPostCountLTE (e.target.value
-		  className="border rounded p-2"/>
+							? Number (e.target.value)
-	    </div>
+							: null)}
+			className={inputClass (invalid, 'w-auto')}/>
+		  </>)}
+	    </FormField>
 
 	    {/* はじめて記載された日時 */}
-	    <div>
+	    <FormField label="はじめて記載された日時">
-	      <Label>はじめて記載された日時</Label>
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={createdFrom ?? undefined}
 			onChange={setCreatedFrom}/>
@@ -179,11 +184,13 @@ const TagListPage: FC = () => {
 		    <DateTimeField
 			value={createdTo ?? undefined}
 			onChange={setCreatedTo}/>
-	    </div>
+		  </>)}
+	    </FormField>
 
 	    {/* 定義の更新日時 */}
-	    <div>
+	    <FormField label="定義の更新日時">
-	      <Label>定義の更新日時</Label>
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={updatedFrom ?? undefined}
 			onChange={setUpdatedFrom}/>
@@ -191,7 +198,8 @@ const TagListPage: FC = () => {
 		    <DateTimeField
 			value={updatedTo ?? undefined}
 			onChange={setUpdatedTo}/>
-	    </div>
+		  </>)}
+	    </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>
+		<FormField label="表示名" messages={fieldErrors.name}>
-		  <Label>表示名</Label>
+		  {({ 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>
+		<FormField label="タイトル" messages={fieldErrors.title}>
-		  <label className="block font-semibold mb-1">タイトル</label>
+		  {({ describedBy, invalid }) => (
 		      <input type="text"
 			     value={title}
 			     onChange={e => setTitle (e.target.value)}
-			 className="w-full border p-2 rounded"/>
+			     aria-describedby={describedBy}
-		</div>
+			     aria-invalid={invalid}
+			     className={inputClass (invalid)}/>)}
+		</FormField>
 
 		{/* 本文 */}
-		<div>
+		<FormField label="本文" messages={fieldErrors.body}>
-		  <label className="block font-semibold mb-1">本文</label>
+		  {() => (
 		      <MdEditor value={body}
 				style={{ height: '500px' }}
 				renderHTML={text => mdParser.render (text)}
-			    onChange={({ text }) => setBody (text)}/>
+				onChange={({ text }) => setBody (text)}/>)}
-		</div>
+		</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>
+	  <FormField label="タイトル" messages={fieldErrors.title}>
-	    <label className="block font-semibold mb-1">タイトル</label>
+	    {({ describedBy, invalid }) => (
 		<input type="text"
 		       value={title}
 		       onChange={e => setTitle (e.target.value)}
-		   className="w-full border p-2 rounded"/>
+		       aria-describedby={describedBy}
-	  </div>
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* 本文 */}
-	  <div>
+	  <FormField label="本文" messages={fieldErrors.body}>
-	    <label className="block font-semibold mb-1">本文</label>
+	    {() => (
 		<MdEditor value={body}
 			  style={{ height: '500px' }}
 			  renderHTML={text => mdParser.render (text)}
-		      onChange={({ text }) => setBody (text)}/>
+			  onChange={({ text }) => setBody (text)}/>)}
-	  </div>
+	  </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>
+	    <FormField label="タイトル">
-	      <label>タイトル：</label><br />
+	      {({ invalid }) => (
 		  <input type="text"
 			 value={title}
 			 onChange={e => setTitle (e.target.value)}
-		     className="border p-1 w-full" />
+			 className={inputClass (invalid)}/>)}
-	    </div>
+	    </FormField>
 
 	    {/* 内容 */}
-	    <div>
+	    <FormField label="内容">
-	      <label>内容：</label><br />
+	      {({ invalid }) => (
 		  <input type="text"
 			 value={text}
 			 onChange={e => setText (e.target.value)}
-		     className="border p-1 w-full" />
+			 className={inputClass (invalid)}/>)}
-	    </div>
+	    </FormField>
 
 	    {/* 検索 */}
 	    <div className="py-3">