#90

2026-06-03 23:34:33 +09:00 · 2026-06-03 23:05:46 +09:00 · 2026-06-03 22:04:43 +09:00 · 2026-06-03 07:40:15 +09:00 · 2026-06-03 07:25:24 +09:00 · 2026-05-26 05:52:09 +09:00
@@ -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.

@@ -1,4 +1,7 @@
 class ApplicationController < ActionController::API
+  rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
+  rescue_from ActiveRecord::RecordNotUnique, with: :render_record_not_unique
+
  before_action :reject_banned_ip_address!
  before_action :authenticate_user
  before_action :reject_banned_user!
@@ -25,6 +28,27 @@ class ApplicationController < ActionController::API
    end
  end

+  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
+    render_validation_error(fields: field ? { field => [message] } : { },
+                            base: field ? [] : [message])
+  end
+
+  def render_record_invalid error
+    render_validation_error error.record
+  end
+
+  def render_record_not_unique _error = nil
+    render_validation_error base: ['すでに存在してゐます．']
+  end
+
  def reject_banned_ip_address!
    ip_address = IpAddress.find_by(ip_address: IPAddr.new(request.remote_ip).hton)
    return unless ip_address&.banned?
@@ -37,4 +61,28 @@ class ApplicationController < ActionController::API

    head :forbidden
  end
+
+  def render_validation_error record = nil, fields: { }, base: [], status: :unprocessable_entity
+    errors = { }
+
+    if record
+      record.errors.each do |error|
+        errors[error.attribute] ||= []
+        errors[error.attribute] << error.message
+      end
+    end
+
+    fields.each do |attr, messages|
+      errors[attr.to_sym] ||= []
+      errors[attr.to_sym].concat(Array(messages))
+    end
+
+    base_errors = Array(base) + Array(errors.delete(:base))
+
+    render json: { type: 'validation_error',
+                   message: '入力内容を確認してください．',
+                   errors:,
+                   base_errors: },
+           status:
+  end
 end
@@ -2,7 +2,8 @@ class DeerjikistsController < ApplicationController
  def show
    platform = params[:platform].to_s.strip
    code = params[:code].to_s.strip
-    return head :bad_request if platform.blank? || code.blank?
+    return render_bad_request('platform は必須です．') if platform.blank?
+    return render_bad_request('code は必須です．') if code.blank?

    deerjikist = Deerjikist
                 .joins(:tag)
@@ -22,7 +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 head :bad_request if platform.blank? || code.blank? || 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
@@ -38,7 +41,8 @@ class DeerjikistsController < ApplicationController

    platform = params[:platform].to_s.strip
    code = params[:code].to_s.strip
-    return head :bad_request if platform.blank? || code.blank?
+    return render_bad_request('platform は必須です．') if platform.blank?
+    return render_bad_request('code は必須です．') if code.blank?

    Deerjikist.find([platform, code]).destroy!

@@ -40,7 +40,11 @@ class MaterialsController < ApplicationController
    tag_name_raw = params[:tag].to_s.strip
    file = params[:file]
    url = params[:url].to_s.strip.presence
-    return head :bad_request if tag_name_raw.blank? || (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
@@ -54,7 +58,7 @@ class MaterialsController < ApplicationController
    if material.save
      render json: MaterialRepr.base(material, host: request.base_url), status: :created
    else
-      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+      render_validation_error material
    end
  end

@@ -68,7 +72,11 @@ class MaterialsController < ApplicationController
    tag_name_raw = params[:tag].to_s.strip
    file = params[:file]
    url = params[:url].to_s.strip.presence
-    return head :bad_request if tag_name_raw.blank? || (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
@@ -84,7 +92,7 @@ class MaterialsController < ApplicationController
    if material.save
      render json: MaterialRepr.base(material, host: request.base_url)
    else
-      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+      render_validation_error material
    end
  end

@@ -30,12 +30,14 @@ class NicoTagsController < ApplicationController
    id = params[:id].to_i

    tag = Tag.find(id)
-    return head :bad_request 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)
-    return head :bad_request if linked_tags.any? { |t| t.nico? }
+    if linked_tags.any? { |t| t.nico? }
+      return render_unprocessable_entity('ニコニコ・タグ同士は連携できません．', field: :tags)
+    end

    ApplicationRecord.transaction do
      TagVersioning.record_tag_snapshots!(linked_tags, created_by_user: current_user)
@@ -44,7 +44,7 @@ class PostsController < ApplicationController
        filtered_posts
        .joins("LEFT JOIN (#{ pt_max_sql }) pt_max ON pt_max.post_id = posts.id")
        .reselect('posts.*', Arel.sql("#{ updated_at_all_sql } AS updated_at_all"))
-        .preload(tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+        .preload(:uploaded_user, tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
        .with_attached_thumbnail

    q = q.where('posts.url LIKE ?', "%#{ url }%") if url
@@ -95,7 +95,9 @@ class PostsController < ApplicationController
  end

  def random
-    post = filtered_posts.preload(tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+    post = filtered_posts.preload(:uploaded_user,
+                                  tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+                         .with_attached_thumbnail
                         .order('RAND()')
                         .first
    return head :not_found unless post
@@ -104,12 +106,24 @@ class PostsController < ApplicationController
  end

  def show
-    post = Post.includes(tags: [:deerjikists, :materials, { tag_name: :wiki_page }]).find_by(id: params[:id])
+    post =
+        Post
+        .includes(:uploaded_user, tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+        .with_attached_thumbnail
+        .find_by(id: params[:id])
    return head :not_found unless post

-    render json: PostRepr.base(post, current_user)
-                         .merge(tags: build_tag_tree_for(post.tags),
-                                related: PostRepr.many(post.related(limit: 20)))
+    parent_posts = post.parents.with_attached_thumbnail.order(:id).to_a
+    child_posts = post.children.with_attached_thumbnail.order(:id).to_a
+    sibling_posts = sibling_posts_by_parent(parent_posts.map(&:id))
+    related = post.related(limit: 20).to_a
+
+    render json: PostRepr.detail(post, current_user,
+                                 parent_posts:,
+                                 child_posts:,
+                                 sibling_posts:,
+                                 related:)
+                         .merge(tags: build_tag_tree_for(post.tags))
  end

  def create
@@ -148,11 +162,11 @@ class PostsController < ApplicationController
    post.reload
    render json: PostRepr.base(post), status: :created
  rescue Tag::NicoTagNormalisationError
-    head :bad_request
+    render_validation_error fields: { tags: 'ニコニコ・タグは直接指定できません．' }
  rescue ArgumentError => e
-    render json: { errors: [e.message] }, status: :unprocessable_entity
+    render_validation_error fields: { parent_post_ids: [e.message] }
  rescue ActiveRecord::RecordInvalid => e
-    render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+    render_post_form_record_invalid e.record
  end

  def viewed
@@ -175,10 +189,10 @@ class PostsController < ApplicationController

    force = bool?(:force)
    merge = bool?(:merge)
-    return head :bad_request if force && merge
+    return render_bad_request('force と merge は同時に指定できません．') if force && merge

    base_version_no = parse_base_version_no
-    return head :bad_request 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
@@ -238,11 +252,11 @@ class PostsController < ApplicationController
    json['tags'] = build_tag_tree_for(post.tags)
    render json:, status: :ok
  rescue Tag::NicoTagNormalisationError
-    head :bad_request
+    render_validation_error fields: { tags: ['ニコニコ・タグは直接指定できません．'] }
  rescue ArgumentError => e
-    render json: { errors: [e.message] }, status: :unprocessable_entity
+    render_validation_error fields: { parent_post_ids: [e.message] }
  rescue ActiveRecord::RecordInvalid => e
-    render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+    render_post_form_record_invalid e.record
  end

  def changes
@@ -385,7 +399,7 @@ class PostsController < ApplicationController
      return nil unless tag

      if path.include?(tag_id)
-        return TagRepr.base(tag).merge(children: [])
+        return TagRepr.inline(tag).merge(children: [])
      end

      if memo.key?(tag_id)
@@ -397,12 +411,26 @@ class PostsController < ApplicationController

      children = child_ids.filter_map { |cid| build_node.(cid, new_path) }

-      memo[tag_id] = TagRepr.base(tag).merge(children:)
+      memo[tag_id] = TagRepr.inline(tag).merge(children:)
    end

    root_ids.filter_map { |id| build_node.call(id, []) }
  end

+  def sibling_posts_by_parent parent_post_ids
+    return { } if parent_post_ids.blank?
+
+    implications =
+        PostImplication
+        .where(parent_post_id: parent_post_ids)
+        .includes(post: { thumbnail_attachment: :blob })
+        .order(:parent_post_id, :post_id)
+
+    implications.group_by(&:parent_post_id).transform_values { |items|
+      items.map(&:post)
+    }
+  end
+
  def parse_parent_post_ids
    raise ArgumentError, 'parent_post_ids は必須です．' unless params.key?(:parent_post_ids)

@@ -416,7 +444,7 @@ class PostsController < ApplicationController

  def sync_parent_posts! post, parent_post_ids
    if parent_post_ids.include?(post.id)
-      post.errors.add(:base, '自分自身を親投稿にはできません．')
+      post.errors.add :parent_post_ids, '自分自身を親投稿にはできません．'
      raise ActiveRecord::RecordInvalid, post
    end

@@ -424,7 +452,8 @@ class PostsController < ApplicationController
    missing_ids = parent_post_ids - existing_ids

    if missing_ids.present?
-      post.errors.add(:base, "存在しない親投稿 ID があります: #{ missing_ids.join(' ') }")
+      post.errors.add :parent_post_ids,
+                      "存在しない親投稿 ID があります: #{ missing_ids.join(' ') }"
      raise ActiveRecord::RecordInvalid, post
    end

@@ -640,4 +669,14 @@ class PostsController < ApplicationController

    merged.uniq.sort
  end
+
+  def render_post_form_record_invalid record
+    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
+    end
+  end
 end
@@ -4,7 +4,7 @@ class PreviewController < ApplicationController
    return head :unauthorized unless current_user

    url = params[:url]
-    return head :bad_request 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 json: { error: e.message }, status: :bad_request
+    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 head :bad_request if url.blank?
+    return render_bad_request('URL は必須です．') if url.blank?

    unless url.start_with?(/http(s)?:\/\//)
      url = 'http://' + url
@@ -40,7 +40,11 @@ class PreviewController < ApplicationController
      File.delete(path) rescue nil
      send_file image.path, type: 'image/png', disposition: 'inline'
    else
-      render json: { error: 'Failed to generate thumbnail' }, status: :internal_server_error
+      render json: { type: 'internal_server_error',
+                     message: 'サムネールを生成できませんでした．',
+                     errors: { },
+                     base_errors: ['サムネールを生成できませんでした．'] },
+             status: :internal_server_error
    end
  end
 end
@@ -5,11 +5,12 @@ class TagChildrenController < ApplicationController

    parent_id = params[:parent_id]
    child_id = params[:child_id]
-    return head :bad_request if parent_id.blank? || 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)
-    return head :bad_request if parent.nico? || child.nico?
+    return render_bad_request('ニコニコ・タグの階層は変更できません．') if parent.nico? || child.nico?

    ApplicationRecord.transaction do
      TagVersioning.ensure_snapshot!(child, created_by_user: current_user)
@@ -27,11 +28,12 @@ class TagChildrenController < ApplicationController

    parent_id = params[:parent_id]
    child_id = params[:child_id]
-    return head :bad_request if parent_id.blank? || 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)
-    return head :bad_request if parent.nico? || child.nico?
+    return render_bad_request('ニコニコ・タグの階層は変更できません．') if parent.nico? || child.nico?

    ApplicationRecord.transaction do
      TagVersioning.ensure_snapshot!(child, created_by_user: current_user)
@@ -168,7 +168,7 @@ class TagsController < ApplicationController

  def show_by_name
    name = params[:name].to_s.strip
-    return head :bad_request 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 head :bad_request 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 head :bad_request if name.blank?
+    return render_bad_request('name は必須です．') if name.blank?

    tag = Tag.joins(:tag_name)
             .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -247,17 +250,16 @@ class TagsController < ApplicationController

    name = params[:name].to_s.strip
    category = params[:category].to_s.strip
-    return head :unprocessable_entity if name.blank? || category.blank?
+    return render_unprocessable_entity('名前は必須です．', field: :name) if name.blank?
+    return render_unprocessable_entity('カテゴリは必須です．', field: :category) if category.blank?

    if name != tag.name &&
        tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico])
-      return render json: { error: 'システム・タグの名称は変更できません．' },
-                    status: :unprocessable_entity
+      return render_unprocessable_entity('システム・タグの名称は変更できません．', field: :name)
    end

    if tag.nico? || category == 'nico'
-      return render json: { error: 'ニコタグは変更できません．' },
-                    status: :unprocessable_entity
+      return render_unprocessable_entity('ニコタグは変更できません．', field: :category)
    end

    alias_names = params[:aliases].to_s.split.uniq
@@ -302,8 +304,7 @@ class TagsController < ApplicationController
    tag = Tag.find(params[:id])

    if tag.nico? || (category.present? && category == 'nico')
-      return render json: { error: 'ニコタグは変更できません．' },
-                    status: :unprocessable_entity
+      return render_unprocessable_entity('ニコタグは変更できません．', field: :category)
    end

    ApplicationRecord.transaction do
@@ -437,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
@@ -15,7 +15,7 @@ class TheatreCommentsController < ApplicationController
    return head :unauthorized unless current_user

    content = params[:content]
-    return head :unprocessable_entity if content.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :content) if content.blank?

    theatre = Theatre.find_by(id: params[:theatre_id])
    return head :not_found unless theatre
@@ -42,12 +42,12 @@ class UsersController < ApplicationController
    return head :unauthorized if user&.id != params[:id].to_i

    name = params[:name]
-    return head :bad_request 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 json: user.errors, status: :unprocessable_entity
+      render_validation_error user
    end
  end

@@ -46,7 +46,7 @@ class WikiPagesController < ApplicationController

  def diff
    id = params[:id]
-    return head :bad_request if id.blank?
+    return render_bad_request('id は必須です．') if id.blank?

    from = params[:from].presence
    to = params[:to].presence
@@ -56,7 +56,7 @@ class WikiPagesController < ApplicationController
    from_rev = from && page.wiki_revisions.find(from)
    to_rev = to ? page.wiki_revisions.find(to) : page.current_revision
    if ((from_rev && !(from_rev.content?)) || !(to_rev&.content?))
-      return head :unprocessable_entity
+      return render_unprocessable_entity('差分を表示できない版です．')
    end

    diffs = Diff::LCS.sdiff(from_rev&.body&.lines || [], to_rev.body.lines)
@@ -89,7 +89,8 @@ class WikiPagesController < ApplicationController
    body = params[:body].to_s
    message = params[:message].presence

-    return head :unprocessable_entity if title.blank? || body.blank?
+    return render_unprocessable_entity('タイトルは必須です．', field: :title) if title.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :body) if body.blank?

    tag_name = TagName.find_undiscard_or_create_by!(name: title)

@@ -101,8 +102,10 @@ class WikiPagesController < ApplicationController
            message:)

    render json: WikiPageRepr.base(page), status: :created
-  rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotUnique
-    head :unprocessable_entity
+  rescue ActiveRecord::RecordInvalid => e
+    render_validation_error e.record
+  rescue ActiveRecord::RecordNotUnique
+    render_record_not_unique
  end

  def update
@@ -112,7 +115,8 @@ class WikiPagesController < ApplicationController
    title = params[:title]&.strip
    body = params[:body].to_s

-    return head :unprocessable_entity if title.blank? || body.blank?
+    return render_unprocessable_entity('タイトルは必須です．', field: :title) if title.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :body) if body.blank?

    page = WikiPage.find(params[:id])
    base_revision_id = params[:base_revision_id].presence
@@ -94,7 +94,7 @@ class Post < ApplicationRecord
    return if !(f) || !(b)

    if f >= b
-      errors.add :original_created_before, 'オリジナルの作成日時の順番がをかしぃです．'
+      errors.add :original_created_at, 'オリジナルの作成日時の順番がをかしぃです．'
    end
  end

@@ -2,20 +2,65 @@


 module PostRepr
-  BASE = { include: { tags: TagRepr::BASE, uploaded_user: UserRepr::BASE },
-           methods: [:parent_posts, :child_posts, :sibling_posts] }.freeze
+  BASE_FIELDS = [
+      :id,
+      :version_no,
+      :url,
+      :title,
+      :thumbnail_base,
+      :original_created_from,
+      :original_created_before,
+      :created_at,
+      :updated_at
+  ].freeze

  module_function

  def base post, current_user = nil
-    json = post.as_json(BASE)
-    return json.merge(viewed: false) unless current_user
+    json = common(post)
+    json['tags'] = tag_json(post.tags)
+    json['uploaded_user'] = post.uploaded_user && UserRepr.base(post.uploaded_user)
+    json['viewed'] = current_user ? current_user.viewed?(post) : false
+    json
+  end

-    viewed = current_user.viewed?(post)
-    json.merge(viewed:)
+  def detail post, current_user = nil, parent_posts: [], child_posts: [],
+             sibling_posts: { }, related: []
+    base(post, current_user).merge(
+        'parent_posts' => cards(parent_posts),
+        'child_posts' => cards(child_posts),
+        'sibling_posts' => sibling_posts.transform_keys(&:to_s).transform_values { |posts|
+          cards(posts)
+        },
+        'related' => cards(related))
+  end
+
+  def card post
+    common(post).merge('parent_posts' => [], 'child_posts' => [])
+  end
+
+  def cards posts
+    posts.map { |post| card(post) }
  end

  def many posts, current_user = nil
    posts.map { |p| base(p, current_user) }
  end
+
+  def common post
+    BASE_FIELDS.to_h { |field| [field.to_s, post.public_send(field)] }
+               .merge('thumbnail' => thumbnail_url(post))
+  end
+
+  def tag_json tags
+    tags.map { |tag| TagRepr.inline(tag) }
+  end
+
+  def thumbnail_url post
+    return nil unless post.thumbnail.attached?
+
+    Rails.application.routes.url_helpers.rails_blob_url(post.thumbnail, only_path: false)
+  rescue
+    nil
+  end
 end
@@ -12,5 +12,9 @@ module TagRepr
                            parents: tag.parents.map { _1.as_json(BASE) })
  end

+  def inline tag
+    tag.as_json(BASE).merge(aliases: [], parents: [])
+  end
+
  def many(tags) = tags.map { |t| base(t) }
 end
@@ -0,0 +1,47 @@
+require 'rails_helper'
+
+RSpec.describe 'error responses', type: :request do
+  describe 'manual input errors' do
+    it 'returns a stable errors array for bad requests' do
+      user = create(:user)
+      sign_in_as(user)
+
+      put "/users/#{ user.id }", params: { name: '   ' }
+
+      expect(response).to have_http_status(:bad_request)
+      expect(json.fetch('errors')).to contain_exactly(
+          include('code' => 'bad_request',
+                  'field' => 'name',
+                  'message' => be_present))
+    end
+
+    it 'returns a stable errors array for unprocessable requests' do
+      member = create(:user, :member)
+      tag = create(:tag, :general, name: 'error_response_tag')
+      sign_in_as(member)
+
+      patch "/tags/#{ tag.id }", params: { category: 'nico' }
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to contain_exactly(
+          include('code' => 'invalid',
+                  'field' => 'category',
+                  'message' => be_present))
+    end
+  end
+
+  describe 'model validation errors' do
+    it 'returns field, code, and message for model errors' do
+      user = create(:user)
+      sign_in_as(user)
+
+      put "/users/#{ user.id }", params: { name: 'a' * 256 }
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+          include('code' => 'too_long',
+                  'field' => 'name',
+                  'message' => be_present))
+    end
+  end
+end
@@ -57,6 +57,23 @@ RSpec.describe 'Posts API', type: :request do
    post_write_params({ base_version_no: base_version.version_no }.merge(params))
  end

+  def count_sql_queries
+    count = 0
+
+    callback = lambda do |_name, _started, _finished, _id, payload|
+      next if payload[:cached]
+      next if ['SCHEMA', 'TRANSACTION'].include?(payload[:name])
+
+      count += 1
+    end
+
+    ActiveSupport::Notifications.subscribed(callback, 'sql.active_record') do
+      yield
+    end
+
+    count
+  end
+
  let!(:tag_name) { TagName.create!(name: 'spec_tag') }
  let!(:tag)      { Tag.create!(tag_name: tag_name, category: :general) }

@@ -558,6 +575,59 @@ RSpec.describe 'Posts API', type: :request do
          expect(sibling_ids).to include(sibling_post.id)
        end
      end
+
+      it 'does not issue a query per tag or related post' do
+        user = create_member_user!
+
+        tags =
+            15.times.map do |i|
+              tag_name = TagName.create!(name: "show_query_tag_#{ i }")
+              tag = Tag.create!(tag_name:, category: :general)
+              TagName.create!(name: "show_query_alias_#{ i }", canonical: tag_name)
+              PostTag.create!(post: post_record, tag:)
+              tag
+            end
+
+        tags.each_cons(2) do |parent_tag, child_tag|
+          TagImplication.create!(parent_tag:, tag: child_tag)
+        end
+
+        parent_post = Post.create!(
+          title: 'query parent post',
+          url: 'https://example.com/query-parent-post'
+        )
+        sibling_post = Post.create!(
+          title: 'query sibling post',
+          url: 'https://example.com/query-sibling-post'
+        )
+        child_post = Post.create!(
+          title: 'query child post',
+          url: 'https://example.com/query-child-post'
+        )
+
+        PostImplication.create!(post: post_record, parent_post:)
+        PostImplication.create!(post: sibling_post, parent_post:)
+        PostImplication.create!(post: child_post, parent_post: post_record)
+
+        20.times do |i|
+          related_post = Post.create!(
+            title: "query related post #{ i }",
+            url: "https://example.com/query-related-post-#{ i }"
+          )
+          PostSimilarity.create!(post: post_record,
+                                 target_post: related_post,
+                                 cos: 1.0 - (i / 100.0))
+        end
+
+        query_count =
+            count_sql_queries do
+              get "/posts/#{ post_record.id }",
+                  headers: { 'X-Transfer-Code' => user.inheritance_code }
+            end
+
+        expect(response).to have_http_status(:ok)
+        expect(query_count).to be <= 45
+      end
    end

    context 'when post does not exist' do
@@ -2,17 +2,23 @@ import { useEffect, useState } from 'react'

 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
-import Label from '@/components/common/Label'
+import FieldError from '@/components/common/FieldError'
+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 { updatePost } from '@/lib/posts'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'

 import type { FC, FormEvent } from 'react'

 import type { Post, Tag } from '@/types'

+type PostFormField =
+    'parentPostIds' | 'tags' | 'originalCreatedAt'
+

 const tagsToStr = (tags: Tag[]): string => {
  const result: Tag[] = []
@@ -35,6 +41,8 @@ type Props = { post:    Post

 const PostEditForm: FC<Props> = ({ post, onSave }) => {
  const [disabled, setDisabled] = useState (false)
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<PostFormField> ()
  const [originalCreatedBefore, setOriginalCreatedBefore] =
      useState<string | null> (post.originalCreatedBefore)
  const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -47,6 +55,8 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
  const dialogue = useDialogue ()

  const update = async (...args: Parameters<typeof updatePost>) => {
+    clearValidationErrors ()
+
    try
    {
      const data = await updatePost (...args)
@@ -66,11 +76,18 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
      const response = isApiError<{ mergeable?: boolean }> (e) ? e.response : undefined

      if (response?.status !== 409)
+	{
+	  if (applyValidationError (e))
 	    {
 	      toast ({ description: '更新はできなかったよ……' })
 	      return
 	    }

+	  toast ({ title: '失敗……', description: '入力を確認してください．' })
+
+	  return
+	}
+
      const action = await dialogue.choice ({
 	  title: '競合が発生しました．',
 	  description: (
@@ -122,33 +139,38 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {

  return (
      <form onSubmit={handleSubmit} className="max-w-xl pt-2 space-y-4">
+	<FieldError messages={baseErrors}/>
+
 	{/* タイトル */}
-	<div>
-	  <Label>タイトル</Label>
+	<FormField label="タイトル">
+	  {({ invalid }) => (
 	      <input
 		  type="text"
 		  disabled={disabled}
-	      className="w-full border rounded p-2"
+		  className={inputClass (invalid)}
 		  value={title ?? ''}
-	      onChange={ev => setTitle (ev.target.value)}/>
-	</div>
+		  onChange={ev => setTitle (ev.target.value)}/>)}
+	</FormField>

 	{/* 親投稿 */}
-	<div>
-	  <Label>親投稿</Label>
+	<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
+	  {({ describedBy, invalid }) => (
 	      <input
 		  type="text"
 		  disabled={disabled}
 		  value={parentPostIds}
 		  onChange={e => setParentPostIds (e.target.value)}
-	      className="w-full border p-2 rounded"/>
-	</div>
+		  aria-describedby={describedBy}
+		  aria-invalid={invalid}
+		  className={inputClass (invalid)}/>)}
+	</FormField>

 	{/* タグ */}
 	<PostFormTagsArea
 	    disabled={disabled}
 	    tags={tags}
-	    setTags={setTags}/>
+	    setTags={setTags}
+	    errors={fieldErrors.tags}/>

 	{/* オリジナルの作成日時 */}
 	<PostOriginalCreatedTimeField
@@ -156,12 +178,11 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    originalCreatedFrom={originalCreatedFrom}
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
-	    setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	    setOriginalCreatedBefore={setOriginalCreatedBefore}
+	    errors={fieldErrors.originalCreatedAt}/>

 	{/* 送信 */}
-	<Button
-	    type="submit"
-	    disabled={disabled}>
+	<Button type="submit" disabled={disabled}>
 	  更新
 	</Button>
      </form>)
@@ -3,7 +3,7 @@
 import { useRef, useState } from 'react'

 import TagSearchBox from '@/components/TagSearchBox'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'

@@ -33,10 +33,11 @@ const replaceToken = (value: string, start: number, end: number, text: string) =

 type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | 'onBlur'> & {
    tags:     string
-    setTags:  (tags: string) => void }
+    setTags:  (tags: string) => void
+    errors?:  string[] }


-const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
  const ref = useRef<HTMLTextAreaElement> (null)

  const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
@@ -73,12 +74,15 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
  }

  return (
-      <div className="relative w-full">
-	<Label>タグ</Label>
+      <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
@@ -96,7 +100,8 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
 				   : [] as Tag[]}
 		      activeIndex={-1}
 		      onSelect={handleTagSelect}/>)}
-      </div>)
+	    </>)}
+      </FormField>)
 }

 export default PostFormTagsArea
@@ -1,5 +1,5 @@
 import DateTimeField from '@/components/common/DateTimeField'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'

 import type { FC } from 'react'
@@ -9,21 +9,29 @@ type Props = {
    originalCreatedFrom:      string | null
    setOriginalCreatedFrom:   (x: string | null) => void
    originalCreatedBefore:    string | null
-    setOriginalCreatedBefore: (x: string | null) => void }
+    setOriginalCreatedBefore: (x: string | null) => void
+    errors?:                  string[] }


-const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
+const PostOriginalCreatedTimeField: FC<Props> = (
+    { disabled,
      originalCreatedFrom,
      setOriginalCreatedFrom,
      originalCreatedBefore,
-		   setOriginalCreatedBefore }) => (
-    <div>
-      <Label>オリジナルの作成日時</Label>
+      setOriginalCreatedBefore,
+      errors }: Props,
+) => (
+    <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 => {
@@ -51,11 +59,15 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 		</Button>
 	      </div>
 	    </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}/>
 		より前
@@ -71,6 +83,7 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 		</Button>
 	      </div>
 	    </div>
-    </div>)
+	  </>)}
+    </FormField>)

 export default PostOriginalCreatedTimeField
@@ -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}/>
@@ -22,10 +22,11 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
    value?:     string
    onChange?:  (isoUTC: string | null) => void
    className?: string
-    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void }
+    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void
+    invalid?:   boolean }


-const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest }) => {
+const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid, ...rest }) => {
  const [local, setLocal] = useState ('')

  useEffect (() => {
@@ -35,9 +36,19 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest
  return (
      <input
 	  {...rest}
-	  className={cn ('border rounded p-2', className)}
+	  className={cn ('border rounded p-2',
+			 (invalid
+			  ? ['border-red-500 bg-red-50 text-red-900',
+			     'focus:border-red-500 focus:outline-none',
+			     'focus:ring-2 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 focus:ring-blue-200']),
+			 className)}
 	  type="datetime-local"
 	  value={local}
+	  aria-invalid={invalid}
 	  onChange={ev => {
 	    const v = ev.target.value
 	    setLocal (v)
@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+
+type Props = { id?:        string
+	       messages?:  string[] }
+
+
+export const FieldError: FC<Props> = ({ id, messages }: Props) => {
+  if (!(messages) || messages.length === 0)
+    return null
+
+  return (
+      <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>)
+}
+
+
+export default FieldError
@@ -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
@@ -1,18 +1,24 @@
 import React from 'react'

+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'

 type Props = { children:  React.ReactNode
 	       checkBox?: { label:    string
 			    checked:  boolean
-                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
+			    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+	       invalid?:  boolean }


-const Label: FC<Props> = ({ children, checkBox }) => {
+const Label: FC<Props> = ({ children, checkBox, invalid }: Props) => {
+  const labelClassName = cn ('block font-semibold mb-1',
+			     invalid && 'text-red-700 dark:text-red-300')
+
  if (!(checkBox))
    {
      return (
-          <label className="block font-semibold mb-1">
+	  <label className={labelClassName}>
 	    {children}
 	  </label>)
    }
@@ -29,4 +35,5 @@ const Label: FC<Props> = ({ children, checkBox }) => {
      </div>)
 }

+
 export default Label
@@ -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[]}
@@ -1,9 +1,25 @@
 import { forwardRef } from 'react'

+import { cn } from '@/lib/utils'
+
 import type { TextareaHTMLAttributes } from 'react'

-type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }


-export default forwardRef<HTMLTextAreaElement, Props> (({ ...props }, ref) => (
-    <textarea ref={ref} className="rounded border w-full p-2 h-32" {...props}/>))
+export default forwardRef<HTMLTextAreaElement, Props> (
+    ({ className, invalid = false, ...props }, ref) => (
+	<textarea
+	    ref={ref}
+	    aria-invalid={invalid}
+	    className={cn ('rounded border w-full p-2 h-32',
+			   (invalid
+			    ? ['border-red-500 bg-red-50 text-red-900',
+			       'focus:border-red-500 focus:outline-none focus:ring-2',
+			       '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',
+			       'focus:ring-blue-200']),
+			   className)}
+	    {...props}/>))
@@ -0,0 +1,31 @@
+import toCamel from 'camelcase-keys'
+
+import { isApiError } from '@/lib/api'
+
+export type FieldErrors<T extends string = string> = Partial<Record<T, string[]>>
+
+export type ValidationError<T extends string = string> =
+    { message:      string
+      fieldErrors:  FieldErrors<T>
+      baseErrors:   string[] }
+
+type RawValidationError = { type?:        string
+			    message?:     string
+			    errors?:      Record<string, string[]>
+			    baseErrors?:  string[] }
+
+
+export const extractValidationError = <T extends string = string> (err: unknown) => {
+  if (!(isApiError (err)) || err.response?.status !== 422)
+    return null
+
+  const data = toCamel ((err.response.data ?? { }) as Record<string, unknown>,
+			{ deep: true }) as RawValidationError
+
+  if (data.type !== 'validation_error' && !(data.errors))
+    return null
+
+  return { message: data.message ?? '入力内容を確認してください．',
+	   fieldErrors: (data.errors ?? { }) as FieldErrors<T>,
+	   baseErrors: data.baseErrors ?? [] }
+}
@@ -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 }
+}
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+
+import { canEditContent } from '@/lib/users'
+
+import type { UserRole } from '@/types'
+
+const userWithRole = (role: UserRole) => ({ role })
+
+describe ('user permission helpers', () => {
+  it ('allows admins and members to edit content', () => {
+    expect (canEditContent (userWithRole ('admin'))).toBe (true)
+    expect (canEditContent (userWithRole ('member'))).toBe (true)
+  })
+
+  it ('does not allow guests or missing users to edit content', () => {
+    expect (canEditContent (userWithRole ('guest'))).toBe (false)
+    expect (canEditContent (null)).toBe (false)
+    expect (canEditContent (undefined)).toBe (false)
+  })
+})
@@ -0,0 +1,7 @@
+import type { User, UserRole } from '@/types'
+
+const CONTENT_EDITOR_ROLES: readonly UserRole[] = ['admin', 'member']
+
+export const canEditContent = (
+    user: Pick<User, 'role'> | null | undefined,
+): boolean => user != null && CONTENT_EDITOR_ROLES.includes (user.role)
@@ -71,3 +71,15 @@ export const originalCreatedAtString = (
 	       .join (' '))
  return rtn === '〜' ? '年月日不詳' : rtn
 }
+
+
+export const inputClass = (invalid?: boolean, className?: string): string =>
+    cn ('w-full rounded border p-2',
+	(invalid
+	 ? ['border-red-500 bg-red-50 text-red-900',
+	    'placeholder:text-red-300',
+	    'focus:border-red-500 focus:outline-none focus:ring-2 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 focus:ring-blue-200']),
+	className)
@@ -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>
 		))}

@@ -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>
-		      <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>
+		    <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)
@@ -155,17 +174,20 @@ const MaterialDetailPage: FC = () => {
 				    <p className="text-red-600 dark:text-red-400">
 				      その形式のファイルには対応していません．
 				    </p>))}
-		    </div>
+			  </>)}
+		    </FormField>

 		    {/* 参考 URL */}
-		    <div>
-		      <Label>参考 URL</Label>
+		    <FormField label="参考 URL" messages={fieldErrors.url}>
+		      {({ describedBy, invalid }) => (
 			  <input
 			      type="url"
 			      value={url}
 			      onChange={e => setURL (e.target.value)}
-			  className="w-full border p-2 rounded"/>
-		    </div>
+			      aria-describedby={describedBy}
+			      aria-invalid={invalid}
+			      className={inputClass (invalid)}/>)}
+		    </FormField>

 		    {/* 送信 */}
 		    <Button
@@ -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>
-	    <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>
+	  <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)
@@ -100,17 +118,20 @@ const MaterialNewPage: FC = () => {
 			  <p className="text-red-600 dark:text-red-400">
 			    その形式のファイルには対応していません．
 			  </p>))}
-	  </div>
+		</>)}
+	  </FormField>

 	  {/* 参考 URL */}
-	  <div>
-	    <Label>参考 URL</Label>
+	  <FormField label="参考 URL" messages={fieldErrors.url}>
+	    {({ describedBy, invalid }) => (
 		<input
 		    type="url"
 		    value={url}
 		    onChange={e => setURL (e.target.value)}
-		className="w-full border p-2 rounded"/>
-	  </div>
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    className={inputClass (invalid)}/>)}
+	  </FormField>

 	  {/* 送信 */}
 	  <Button
@@ -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>
-	      <Label>タグ</Label>
+	    <FormField label="タグ">
+	      {() => (
 		  <TagInput
 		      value={tagName}
-		  setValue={setTagName}/>
-	    </div>
+		      setValue={setTagName}/>)}
+	    </FormField>

 	    {/* 親タグ */}
-	    <div>
-	      <Label>親タグ</Label>
+	    <FormField label="親タグ">
+	      {() => (
 		  <TagInput
 		      value={parentTagName}
-		  setValue={setParentTagName}/>
-	    </div>
+		      setValue={setParentTagName}/>)}
+	    </FormField>
 	  </form>
 	</div>
      </MainArea>)
@@ -3,7 +3,6 @@ import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
-
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
 import PostList from '@/components/PostList'
@@ -16,6 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
@@ -28,6 +28,7 @@ type Props = { user: User | null }


 const PostDetailPage: FC<Props> = ({ user }) => {
+  const editable = canEditContent (user)
  const { id } = useParams ()
  const postId = String (id ?? '')
  const postKey = postsKeys.show (postId)
@@ -164,7 +165,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		     ? <PostList posts={post.related}/>
 		     : 'まだないよ（笑）'}
 		  </Tab>
-		  {['admin', 'member'].some (r => user?.role === r) && (
+		  {editable && (
 		      <Tab name="編輯">
 			<PostEditForm
 			    post={post}
@@ -4,14 +4,18 @@ 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'
 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'
@@ -20,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 = ['admin', 'member'].some (r => user?.role === r)
+  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 ('')
@@ -43,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)
@@ -61,8 +73,9 @@ const PostNewPage: FC<Props> = ({ user }) => {
      toast ({ title: '投稿成功!' })
      navigate ('/posts')
    }
-    catch
+    catch (e)
    {
+      applyValidationError (e)
      toast ({ title: '投稿失敗', description: '入力を確認してください。' })
    }
  }
@@ -126,42 +139,50 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	</Helmet>
 	<Form>
 	  <PageTitle>広場に投稿を追加する</PageTitle>
+	  <FieldError messages={baseErrors}/>

 	  {/* URL */}
-	  <div>
-	    <Label>URL</Label>
+	  <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)}
-		   className="w-full border p-2 rounded"
-		   onBlur={handleURLBlur}/>
-	  </div>
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}
+		       onBlur={handleURLBlur}/>)}
+	  </FormField>

 	  {/* タイトル */}
-	  <div>
-	    <Label checkBox={{
+	  <FormField
+	      checkBox={{
 		  label:    '自動',
 		  checked:  titleAutoFlg,
-		onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
-	      タイトル
-	    </Label>
+		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
+	      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}/>
-	  </div>
+		       disabled={titleAutoFlg}/>)}
+	  </FormField>

 	  {/* サムネール */}
-	  <div>
-	    <Label checkBox={{
+	  <FormField
+	      checkBox={{
 		  label:    '自動',
 		  checked:  thumbnailAutoFlg,
-		onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
-	      サムネール
-	    </Label>
+		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
+	      label="サムネール"
+	      messages={fieldErrors.thumbnail}>
+	    {({ describedBy, invalid }) => (
+		<>
 		  {thumbnailAutoFlg
 		   ? (thumbnailLoading
 		      ? <p className="text-gray-500 text-sm">Loading...</p>
@@ -172,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)
@@ -184,27 +207,31 @@ const PostNewPage: FC<Props> = ({ user }) => {
 		      <img src={thumbnailPreview}
 			   alt="preview"
 			   className="mt-2 max-h-48 rounded border"/>)}
-	  </div>
+		</>)}
+	  </FormField>

 	  {/* 親投稿 */}
-	  <div>
-	    <Label>親投稿</Label>
+	  <FormField label="親投稿" messages={fieldErrors.parentPostIds}>
+	    {({ describedBy, invalid }) => (
 		<input
 		    type="text"
 		    value={parentPostIds}
 		    onChange={e => setParentPostIds (e.target.value)}
-		className="w-full border p-2 rounded"/>
-	  </div>
+		    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}
@@ -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>
+	    <FormField label="タイトル">
+	      {({ invalid }) => (
 		  <input
 		      type="text"
 		      value={title}
 		      onChange={e => setTitle (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+		      className={inputClass (invalid)}/>)}
+	    </FormField>

 	    {/* URL */}
-	    <div>
-	      <Label>URL</Label>
+	    <FormField label="URL">
+	      {({ invalid }) => (
 		  <input
 		      type="text"
 		      value={url}
 		      onChange={e => setURL (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+		      className={inputClass (invalid)}/>)}
+	    </FormField>

 	    {/* タグ */}
-	    <div>
-	      <Label>タグ</Label>
+	    <FormField 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>
-	      <Label>オリジナルの投稿日時</Label>
+	    <FormField label="オリジナルの投稿日時">
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={originalCreatedFrom ?? undefined}
 			onChange={setOriginalCreatedFrom}/>
@@ -194,11 +197,13 @@ const PostSearchPage: FC = () => {
 		    <DateTimeField
 			value={originalCreatedTo ?? undefined}
 			onChange={setOriginalCreatedTo}/>
-	    </div>
+		  </>)}
+	    </FormField>

 	    {/* 投稿日時 */}
-	    <div>
-	      <Label>投稿日時</Label>
+	    <FormField label="投稿日時">
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={createdFrom ?? undefined}
 			onChange={setCreatedFrom}/>
@@ -206,11 +211,13 @@ const PostSearchPage: FC = () => {
 		    <DateTimeField
 			value={createdTo ?? undefined}
 			onChange={setCreatedTo}/>
-	    </div>
+		  </>)}
+	    </FormField>

 	    {/* 更新日時 */}
-	    <div>
-	      <Label>更新日時</Label>
+	    <FormField 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">
@@ -4,12 +4,15 @@ 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'

@@ -19,13 +22,14 @@ 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 }> ({ })

  const loaderRef = useRef<HTMLDivElement | null> (null)

-  const memberFlg = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)

  const applyLoadedTags = useCallback ((data: { tags: NicoTag[]; nextCursor: string },
 					withCursor: boolean) => {
@@ -65,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 => {
@@ -72,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]) }))
  }
@@ -117,7 +133,7 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 		  <tr>
 		    <th className="p-2 text-left">ニコニコタグ</th>
 		    <th className="p-2 text-left">連携タグ</th>
-		    {memberFlg && <th></th>}
+		    {editable && <th></th>}
 		  </tr>
 		</thead>
 		<tbody>
@@ -129,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}
@@ -139,7 +163,7 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 					 withCount={false}/>
 			      </span>))}
 			</td>
-			{memberFlg && (
+			{editable && (
 			    <td className="p-2">
 			      <a href="#" onClick={ev => {
 				ev.preventDefault ()
@@ -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>
+		<FormField label="名称" messages={fieldErrors.name}>
+		  {({ describedBy, invalid }) => (
+		      <>
 			{/* TODO: 補完に対応させる */}
 			<input
 			    type="text"
 			    disabled={disabled}
 			    value={name}
 			    onChange={e => setName (e.target.value)}
-		      className="w-full border p-2 rounded"/>
-		</div>
+			    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>
+		<FormField label="別名" messages={fieldErrors.aliases}>
+		  {({ describedBy, invalid }) => (
+		      <>
 			{/* TODO: 補完に対応させる */}
 			<input
 			    type="text"
 			    disabled={disabled}
 			    value={aliases}
 			    onChange={e => setAliases (e.target.value)}
-		      className="w-full border p-2 rounded"/>
-		</div>
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>

 		{/* 上位タグ */}
-		<div>
-		  <Label>上位タグ</Label>
+		<FormField label="上位タグ" messages={fieldErrors.parentTags}>
+		  {({ describedBy, invalid }) => (
+		      <>
 			{/* TODO: 補完に対応させる */}
 			<input
 			    type="text"
 			    disabled={disabled}
 			    value={parentTags}
 			    onChange={e => setParentTags (e.target.value)}
-		      className="w-full border p-2 rounded"/>
-		</div>
+			    aria-describedby={describedBy}
+			    aria-invalid={invalid}
+			    className={inputClass (invalid)}/>
+		      </>)}
+		</FormField>

 		<div className="py-3">
 		  <button
@@ -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>
-	      <Label>名前</Label>
+	    <FormField label="名前">
+	      {({ invalid }) => (
 		  <input
 		      type="text"
 		      value={name}
 		      onChange={e => setName (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+		      className={inputClass (invalid)}/>)}
+	    </FormField>

 	    {/* カテゴリ */}
-	    <div>
-	      <Label>カテゴリ</Label>
+	    <FormField 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>
-	    </div>
+		  </select>)}
+	    </FormField>

 	    {/* 広場の投稿数 */}
-	    <div>
-	      <Label>広場の投稿数</Label>
+	    <FormField 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)}
-		  className="border rounded p-2"/>
-	    </div>
+			onChange={e => setPostCountLTE (e.target.value
+							? Number (e.target.value)
+							: null)}
+			className={inputClass (invalid, 'w-auto')}/>
+		  </>)}
+	    </FormField>

 	    {/* はじめて記載された日時 */}
-	    <div>
-	      <Label>はじめて記載された日時</Label>
+	    <FormField label="はじめて記載された日時">
+	      {() => (
+		  <>
 		    <DateTimeField
 			value={createdFrom ?? undefined}
 			onChange={setCreatedFrom}/>
@@ -179,11 +184,13 @@ const TagListPage: FC = () => {
 		    <DateTimeField
 			value={createdTo ?? undefined}
 			onChange={setCreatedTo}/>
-	    </div>
+		  </>)}
+	    </FormField>

 	    {/* 定義の更新日時 */}
-	    <div>
-	      <Label>定義の更新日時</Label>
+	    <FormField 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
@@ -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}
@@ -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}
@@ -5,11 +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'
@@ -22,9 +27,11 @@ const mdParser = new MarkdownIt

 type Props = { user: User | null }

+type WikiFormField = 'title' | 'body'
+

 const WikiEditPage: FC<Props> = ({ user }) => {
-  const editable = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)

  const { id } = useParams ()

@@ -35,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)
@@ -51,8 +62,9 @@ const WikiEditPage: FC<Props> = ({ user }) => {
      toast ({ title: '投稿成功!' })
      navigate (`/wiki/${ title }`)
    }
-    catch
+    catch (e)
    {
+      applyValidationError (e)
      toast ({ title: '投稿失敗', description: '入力を確認してください。' })
    }
  }
@@ -83,24 +95,28 @@ const WikiEditPage: FC<Props> = ({ user }) => {

 	  {loading ? 'Loading...' : (
 	      <>
+		<FieldError messages={baseErrors}/>
+
 		{/* タイトル */}
 		{/* TODO: タグ補完 */}
-		<div>
-		  <label className="block font-semibold mb-1">タイトル</label>
+		<FormField label="タイトル" messages={fieldErrors.title}>
+		  {({ describedBy, invalid }) => (
 		      <input type="text"
 			     value={title}
 			     onChange={e => setTitle (e.target.value)}
-			 className="w-full border p-2 rounded"/>
-		</div>
+			     aria-describedby={describedBy}
+			     aria-invalid={invalid}
+			     className={inputClass (invalid)}/>)}
+		</FormField>

 		{/* 本文 */}
-		<div>
-		  <label className="block font-semibold mb-1">本文</label>
+		<FormField label="本文" messages={fieldErrors.body}>
+		  {() => (
 		      <MdEditor value={body}
 				style={{ height: '500px' }}
 				renderHTML={text => mdParser.render (text)}
-			    onChange={({ text }) => setBody (text)}/>
-		</div>
+				onChange={({ text }) => setBody (text)}/>)}
+		</FormField>

 		{/* 送信 */}
 		<button onClick={handleSubmit}
@@ -6,10 +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'
@@ -20,9 +25,11 @@ const mdParser = new MarkdownIt

 type Props = { user: User | null }

+type WikiFormField = 'title' | 'body'
+

 const WikiNewPage: FC<Props> = ({ user }) => {
-  const editable = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)

  const location = useLocation ()
  const navigate = useNavigate ()
@@ -32,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)
@@ -45,8 +56,9 @@ const WikiNewPage: FC<Props> = ({ user }) => {
      toast ({ title: '投稿成功!' })
      navigate (`/wiki/${ data.title }`)
    }
-    catch
+    catch (e)
    {
+      applyValidationError (e)
      toast ({ title: '投稿失敗', description: '入力を確認してください。' })
    }
  }
@@ -61,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>
+	  <FormField label="タイトル" messages={fieldErrors.title}>
+	    {({ describedBy, invalid }) => (
 		<input type="text"
 		       value={title}
 		       onChange={e => setTitle (e.target.value)}
-		   className="w-full border p-2 rounded"/>
-	  </div>
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}/>)}
+	  </FormField>

 	  {/* 本文 */}
-	  <div>
-	    <label className="block font-semibold mb-1">本文</label>
+	  <FormField label="本文" messages={fieldErrors.body}>
+	    {() => (
 		<MdEditor value={body}
 			  style={{ height: '500px' }}
 			  renderHTML={text => mdParser.render (text)}
-		      onChange={({ text }) => setBody (text)}/>
-	  </div>
+			  onChange={({ text }) => setBody (text)}/>)}
+	  </FormField>

 	  {/* 送信 */}
 	  <button onClick={handleSubmit}
@@ -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 />
+	    <FormField label="タイトル">
+	      {({ invalid }) => (
 		  <input type="text"
 			 value={title}
 			 onChange={e => setTitle (e.target.value)}
-		     className="border p-1 w-full" />
-	    </div>
+			 className={inputClass (invalid)}/>)}
+	    </FormField>

 	    {/* 内容 */}
-	    <div>
-	      <label>内容：</label><br />
+	    <FormField label="内容">
+	      {({ invalid }) => (
 		  <input type="text"
 			 value={text}
 			 onChange={e => setText (e.target.value)}
-		     className="border p-1 w-full" />
-	    </div>
+			 className={inputClass (invalid)}/>)}
+	    </FormField>

 	    {/* 検索 */}
 	    <div className="py-3">
作成者	SHA1	メッセージ	日付
みてるぞ	cb21525698	#90	2026-06-03 23:34:33 +09:00
みてるぞ	b5834976d2	#90	2026-06-03 23:05:46 +09:00
みてるぞ	ba960de76f	#90	2026-06-03 22:04:43 +09:00
みてるぞ	8dc8cdf7f5	#90	2026-06-03 07:40:15 +09:00
みてるぞ	ff5e8c4d49	#90	2026-06-03 07:25:24 +09:00
みてるぞ	638dccad6d	#90	2026-05-26 05:52:09 +09:00