管理画面フォーマット制作編 #5
ユーザープロフィールUI ─ 情報確認・編集・パスワード変更

管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成

初回公開日2025/8/22

最終更新日2025/8/22

0. はじめに

前回までの記事で管理画面レイアウトUI・ユーザ管理UI・メニューと参照ページの同期を仕上げました。

今回は、ログインユーザが「自分自身の情報を確認・編集できるページ」のUI作成していきます。これは、管理画面を利用するユーザの以下のようなニーズに応えるためです。

名前やメールアドレスなどの 基本情報を確認・更新したい
パスワードをセキュリティ上の理由で 定期的に変更したい
アイコン画像を設定して 自分のプロフィールをわかりやすく表現したい

これらは日常的に利用される機能であり、管理画面の完成度を左右します。

本記事では、shadcn/ui を用いたフォーム構成と Zod を使った入力バリデーションを組み合わせて、
ユーザ情報確認・アバター画像アップロード・パスワード変更 を備えたプロフィールページのUIを実装していきます。

前提

本記事は、下記の続きとなります。

「 管理画面フォーマット制作編 #4 サイドバーのメニューと参照中ページの同期 」

ここまで作成ファイルを変更、追加していきます。今回はユーザ管理で作成した定義を流用する場面もあります。

技術スタック

Tool / Lib	Version	Purpose
React	19.x	UIの土台。コンポーネント/フックで状態と表示を組み立てる
Next.js	15.x	フルスタックFW。App Router/SSR/SSG、動的ルーティング、メタデータ管理
TypeScript	5.x	型安全・補完・リファクタリング
shadcn/ui	latest	RadixベースのUIキット
Tailwind CSS	4.x	ユーティリティファーストCSSで素早くスタイリング

1. プロフィールページの構成

プロフィールページは、ユーザが日常的に利用する場面が多いため、「シンプルで直感的に使えること」を重視して構成します。
本記事では /profile ページを作成し、次の2つのセクションを用意します。

セクション	内容
ユーザ情報の確認・変更	名前・メールアドレスの編集／ロールは表示のみ（変更不可）／アバター画像のプレビュー & アップロード
パスワード変更	現在のパスワード／新しいパスワード／確認用パスワード（Zodで一致チェック）

UIの全体イメージ

txt

// UIの全体イメージ（文字図）

[ Profile Page (/profile) ]
 ├─ ユーザ情報フォーム
 │    ├─ アバター画像プレビュー ＆ アップロード
 │    ├─ ロール（表示のみ）
 │    ├─ 名前（編集可能）
 │    ├─ メールアドレス（現在のメールアドレス表示とメールアドレス変更ボタン）
 │    └─ パスワード変更ボタン
 │
 ├─ メールアドレス変更フォーム
 │    ├─ 新メールアドレス
 │    └─ 認証フロー開始ボタン
 │
 └─ パスワード変更フォーム
      ├─ 現在のパスワード
      └─ 新しいパスワード

今回のゴール

/profile 配下にページを作成し、
- ユーザ情報フォーム（アバター画像含む）
- パスワード変更フォーム を配置する。
UIは shadcn/ui のフォームコンポーネントをベースに実装。
入力チェックは Zod スキーマを定義し、エラー表示を含めてUIで確認できるようにする。

このあと、まずは「ユーザ情報確認フォーム」から実装していきます。

2. ユーザ情報確認フォーム

この章では プロフィール編集ページ（/profile） を実装します。
本人専用のページとして、以下をカード内にまとめて表示・編集します。

ブロック	目的	仕様（UIのみ）
アバター	画像の確認・差し替え	プレビュー（既存 or 新規）／「画像を選択」ボタン（拡張子・容量チェック）
氏名	氏名を編集	shadcn/ui + RHF + Zod（既存 user-form のルールを再利用）
メール	現在のアドレスを確認	テキスト表示（変更は別画面 `/profile/email`）
パスワード	パスワード変更へ遷移	ボタン（`/profile/password` に遷移）
ロール	自分の権限を把握	バッジ（表示のみ）
フッター	操作確定	「キャンセル」「更新する」

今回の記事は UIのみ のため、保存はトースト表示で擬似。
フォームのバリデーションは Zod を利用し、画像は 拡張子（png/jpeg/webp/gif） と 容量（≤ 1MB） をチェックします。
加えてフロント側で 推奨：512×512 / 最大：1024×1024 の ピクセル検証 も行います（UI側のみ・非同期チェック）。

このページは SSR の page.tsx と、クライアントの薄いラッパー client.tsx に分離します。
データはログインユーザ想定の モック（src/lib/sidebar/mock-user.ts）から読み込む構成にします。

UI用のログインユーザ情報ファイルの編集

src/lib/sidebar/mock-user.tsを少し変更します。

// src/lib/sidebar/mock-user.ts
// ← 「ログイン中ユーザ」を擬似的に提供（UIのみ）
export type User = {
  displayId: string;
  name: string;
  email: string;
  avatar: string; // 例: "/user-avatar.png"（public配下のダミー）
  roleCode: "ADMIN" | "EDITOR" | "VIEWER";
};

export const mockUser: User = {
  displayId: "U00000001",
  name: "山田 太郎",
  email: "yamada@example.com",
  avatar: "/user-avatar.png",
  roleCode: "ADMIN",
};

💡ポイント

ログイン中ユーザの最小情報を保持します。
displayId は内部参照用（UIでは表示しません）。
avatar は既存画像の URL（public のダミーを想定）。
roleCode はロールの表示用。

UI用のロール情報ファイルの編集

src/lib/roles/preset.tsを下記内容で新規作成します。

// src/lib/roles/preset.ts
export type RolePreset = {
  label: string;
  badgeClass: string; // Tailwind のユーティリティで簡易色付け
};

export const ROLE_PRESETS: Record<"ADMIN" | "EDITOR" | "VIEWER", RolePreset> = {
  ADMIN: {
    label: "管理者",
    badgeClass: "bg-red-800 text-white border-none",
  },
  EDITOR: {
    label: "編集者",
    badgeClass: "bg-blue-800 text-white border-none",
  },
  VIEWER: {
    label: "閲覧専用",
    badgeClass: "bg-gray-800 text-white border-none",
  },
};

export function getRolePreset(code: "ADMIN" | "EDITOR" | "VIEWER"): RolePreset {
  return ROLE_PRESETS[code];
}

💡ポイント

今回は プリセット方式。将来は DB 管理へ差し替え予定ですが、UI側はこの関数に依存するだけにしておけば交換容易です。

Zodによるユーザ情報スキーマ定義

src/lib/users/schema.tsに関連内容を追記していきます。追記とコメントに記載した4箇所の追記になります。パスワードのところは、これまでユーザ新規作成だけで利用していたので、共通化していませんでした。今回は、あとでパスワード変更の箇所で利用するので、ついでに共通化するように変更しています。

// src/lib/users/schema.ts
import { z } from "zod";

/** ── 追加：ロールの定数と型 ── */
export const ROLE_CODES = ["ADMIN", "EDITOR", "VIEWER"] as const;
export type RoleCode = (typeof ROLE_CODES)[number];

/** ── 入力ルール（数字はあとから見直しやすいよう定数化） ── */
export const NAME_MAX = 100 as const;
export const PASSWORD_MIN = 15 as const;
export const PASSWORD_MAX = 128 as const;

/** 追記：── アバター画像のクライアント検証（UIのみ） ── */
export const MAX_IMAGE_MB = 1 as const;          // Slackをまねて軽量運用
export const IMAGE_MAX_PX = 1024 as const;       // 最大許容ピクセル（UIで非同期チェック）
export const IMAGE_RECOMMENDED_PX = 512 as const;

/** 共通フィールドの最小ルール */
const nameSchema = z
  .string()
  .min(1, "氏名を入力してください")
  .max(NAME_MAX, `${NAME_MAX}文字以内で入力してください`);

// Zod v4 形式：z.email()
const emailSchema = z.email("メールアドレスの形式が正しくありません");

// 変更：パスワード（新たに共通化）
const passwordSchema = z
  .string()
  .min(PASSWORD_MIN, `${PASSWORD_MIN}文字以上で入力してください`)
  .max(PASSWORD_MAX, `${PASSWORD_MAX}文字以内で入力してください`)
  .regex(/[A-Z]/, "大文字を1文字以上含めてください。")
  .regex(/[a-z]/, "小文字を1文字以上含めてください。")
  .regex(/[0-9]/, "数字を1文字以上含めてください。");

const roleCodeSchema = z.enum(ROLE_CODES, "ロールを選択してください"); // ← "ADMIN" | "EDITOR" | "VIEWER" になる

/** ── 新規作成用：password が必須 ── */
export const userCreateSchema = z.object({
  name: nameSchema,
  email: emailSchema,
  roleCode: roleCodeSchema,
  password: passwordSchema, // 変更：パスワード変更でも使うので共通化して利用
  isActive: z.boolean(),
});

/** ── 編集用：displayId を表示専用で扱い、password は扱わない ── */
export const userUpdateSchema = z.object({
  displayId: z.string().min(1, "表示IDの取得に失敗しました"),
  name: nameSchema,
  email: emailSchema,
  roleCode: roleCodeSchema,
  isActive: z.boolean(),
});

/** 追記：── プロフィール（本人用）: displayId は UI に出さない。role は「表示のみ」 ── */
export const profileUpdateSchema = z.object({
  name: nameSchema, //共通化したものを利用

  // UIのみ: 画像ファイルの基本チェック（拡張子・容量）
  avatarFile: z
    .instanceof(File)
    .optional()
    .refine(
      (file) =>
        !file ||
        ["image/png", "image/jpeg", "image/webp", "image/gif"].includes(file.type),
      "画像は png / jpeg / webp / gif のいずれかにしてください",
    )
    .refine(
      (file) => !file || file.size <= MAX_IMAGE_MB * 1024 * 1024,
      `画像サイズは ${MAX_IMAGE_MB}MB 以下にしてください`,
    ),
});

/** ── Zod から型を派生（z.infer を使う） ── */
export type UserCreateValues = z.infer<typeof userCreateSchema>;
export type UserUpdateValues = z.infer<typeof userUpdateSchema>;
// 追記
export type ProfileUpdateValues = z.infer<typeof profileUpdateSchema>;

💡ポイント

画像の 拡張子／容量 を Zod で同期チェック。
ピクセル（最大 1024×1024 / 推奨 512×512） は、選択直後にフロントで 非同期検証 します（createImageBitmap / Image）。
メールは 別画面 で本人確認フローを想定するため、このフォームでは 表示のみ にします。

フォームのUI構成ファイルを作成

src/components/profile/profile-form.tsxを下記内容で新規作成します。過去記事で作成済みのsrc/components/users/user-form.tsxへ追記しようかとも思いましたが、「名前」以外はすべて異なるパーツ構成になるので、新規作成した方が後から見やすいと思い新規ファイルにしました。

tsx

// src/components/profile/profile-form.tsx
"use client";

import * as React from "react";
import Image from "next/image";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import {
  profileUpdateSchema,
  type ProfileUpdateValues,
  MAX_IMAGE_MB,
  IMAGE_MAX_PX,
  IMAGE_RECOMMENDED_PX,
} from "@/lib/users/schema";
import { getRolePreset } from "@/lib/roles/preset";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardHeader,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";

/* =========================
   公開インターフェース
   ========================= */
export type ProfileInitial = {
  name: string;
  email: string; // 表示のみ
  roleCode: "ADMIN" | "EDITOR" | "VIEWER";
  currentAvatarUrl?: string; // 既存アバターのURL（public想定）
};

type Props = {
  initial: ProfileInitial;
  onSubmit: (values: ProfileUpdateValues) => void;
  onCancel?: () => void;
  onNavigateEmail: () => void;
  onNavigatePassword: () => void;
};

/* =========================
   本体（純粋なフォームに）
   ========================= */
export default function ProfileForm({
  initial,
  onSubmit,
  onCancel,
  onNavigateEmail,
  onNavigatePassword,
}: Props) {
  const form = useForm<ProfileUpdateValues>({
    resolver: zodResolver(profileUpdateSchema),
    defaultValues: { name: initial.name, avatarFile: undefined },
    mode: "onBlur",
  });

  const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);

  // ピクセル検証：NGならメッセージ文字列を返す／OKなら null
  async function validateImagePixels(file: File): Promise<string | null> {
    try {
      const bmp = await createImageBitmap(file);
      const { width, height } = bmp;
      if (width > IMAGE_MAX_PX || height > IMAGE_MAX_PX) {
        return `画像サイズは最大 ${IMAGE_MAX_PX}×${IMAGE_MAX_PX} px までです（選択: ${width}×${height}）`;
      }
      // 推奨未満はエラーにしない（任意通知は別途）
      if (width < IMAGE_RECOMMENDED_PX || height < IMAGE_RECOMMENDED_PX) {
        // 任意: 情報トーストなどは client.tsx で
      }
      return null;
    } catch {
      return "画像の読み込みに失敗しました。別のファイルをお試しください。";
    }
  }

  const handleSubmit = form.handleSubmit(onSubmit);

  const rolePreset = getRolePreset(initial.roleCode);

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit} data-testid="profile-form">
        <Card className="w-full rounded-md">
          <CardHeader className="-mt-2 -mb-4">
            <RoleBadgeRow
              label={rolePreset.label}
              badgeClass={rolePreset.badgeClass}
            />
          </CardHeader>

          <CardContent className="space-y-6 pt-1">
            {/* アバター（FormMessage をこの中で出す） */}
            <AvatarField
              currentAvatarUrl={initial.currentAvatarUrl}
              previewUrl={previewUrl}
              onPick={async (file) => {
                // いったんエラーを消す
                form.clearErrors("avatarFile");

                if (!file) {
                  form.setValue("avatarFile", undefined, { shouldDirty: true });
                  setPreviewUrl(null);
                  return;
                }

                // ピクセル検証（非同期）
                const pixelError = await validateImagePixels(file);
                if (pixelError) {
                  form.setError("avatarFile", {
                    type: "validate",
                    message: pixelError,
                  });
                  form.setValue("avatarFile", undefined, { shouldDirty: true });
                  setPreviewUrl(null);
                  return;
                }

                // OK: 値をセット＋プレビュー
                form.setValue("avatarFile", file, {
                  shouldDirty: true,
                  shouldValidate: true, // zod の容量/拡張子チェックも走る
                });
                setPreviewUrl(URL.createObjectURL(file));
                void form.trigger("avatarFile");
              }}
              onClear={() => {
                form.setValue("avatarFile", undefined, { shouldDirty: true });
                form.clearErrors("avatarFile");
                setPreviewUrl(null);
              }}
              footerMessage={<FormMessage data-testid="avatar-error" />}
            />

            <NameField />
            <EmailRow email={initial.email} onNavigate={onNavigateEmail} />
            <PasswordRow onNavigate={onNavigatePassword} />
          </CardContent>

          <CardFooter className="mt-4 flex gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel ?? (() => history.back())}
              className="cursor-pointer"
            >
              キャンセル
            </Button>
            <Button
              type="submit"
              className="cursor-pointer"
              disabled={form.formState.isSubmitting}
            >
              更新する
            </Button>
          </CardFooter>
        </Card>
      </form>
    </Form>
  );
}

/* =========================
   小さなフィールド群（同ファイル内）
   ========================= */

// アバター（内部で FormField を張る）
function AvatarField({
  currentAvatarUrl,
  previewUrl,
  onPick,
  onClear,
  footerMessage,
}: {
  currentAvatarUrl?: string;
  previewUrl: string | null;
  onPick: (file: File | null) => void;
  onClear: () => void;
  footerMessage?: React.ReactNode;
}) {
  const fileInputId = React.useId(); // ラベルとInput要素の紐づけのためID取得
  const fileRef = React.useRef<HTMLInputElement>(null);

  const onFileInput = (file: File | null) => {
    onPick(file);
    if (fileRef.current) fileRef.current.value = ""; // 同一ファイルの再選択を許可
  };

  const handleOpen = () => fileRef.current?.click();

  return (
    <FormField
      name="avatarFile"
      render={() => (
        <FormItem>
          {/* fileInputIdを利用して、ラベルとinput要素を紐づけ */}
          <FormLabel htmlFor={fileInputId} className="font-semibold">
            アバター画像
          </FormLabel>

          <div className="flex items-start gap-4">
            <div className="size-16 min-w-16 overflow-hidden rounded-full border">
              {previewUrl || currentAvatarUrl ? (
                <Image
                  src={previewUrl ?? currentAvatarUrl!}
                  alt="アバターのプレビュー"
                  width={64}
                  height={64}
                  className="h-full w-full object-cover"
                />
              ) : (
                <div className="text-muted-foreground flex h-full w-full items-center justify-center text-xs">
                  No Image
                </div>
              )}
            </div>

            <div className="flex flex-col gap-2">
              <input
                id={fileInputId} // ラベルとInput要素の紐づけ
                ref={fileRef}
                type="file"
                accept="image/png,image/jpeg,image/webp,image/gif"
                className="hidden"
                onChange={(e) => onFileInput(e.target.files?.[0] ?? null)}
                aria-label="アバター画像を選択"
                data-testid="avatar-file"
              />
              <div className="flex gap-2">
                <Button
                  type="button"
                  variant="secondary"
                  size="sm"
                  className="cursor-pointer"
                  onClick={handleOpen}
                >
                  画像を選択
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="cursor-pointer"
                  onClick={onClear}
                  data-testid="avatar-clear"
                >
                  クリア
                </Button>
              </div>

              {/* 制約の説明（情報） */}
              <p className="text-muted-foreground text-xs">
                画像は png / jpeg / webp / gif のいずれか。{MAX_IMAGE_MB}MB
                以下。 推奨サイズ：{IMAGE_RECOMMENDED_PX}px ×{" "}
                {IMAGE_RECOMMENDED_PX}px （最大：{IMAGE_MAX_PX}px ×{" "}
                {IMAGE_MAX_PX}px）
              </p>

              {/* Zod/RHF のエラー表示をここに集約 */}
              {footerMessage}
            </div>
          </div>
        </FormItem>
      )}
    />
  );
}

// 氏名
function NameField() {
  return (
    <FormField
      name="name"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">氏名&nbsp;*</FormLabel>
          <FormControl>
            <Input
              {...field}
              inputMode="text"
              placeholder="山田 太郎"
              maxLength={100}
              aria-label="氏名"
              autoComplete="off"
              data-testid="name"
            />
          </FormControl>
          <FormMessage data-testid="name-error" />
        </FormItem>
      )}
    />
  );
}

// メール（表示のみ + 変更導線）
function EmailRow({
  email,
  onNavigate,
}: {
  email: string;
  onNavigate: () => void;
}) {
  return (
    <div className="flex items-center justify-between rounded-md border p-3">
      <div className="min-w-0">
        <div className="text-sm font-semibold">メールアドレス&nbsp;*</div>
        <div className="text-muted-foreground truncate text-sm" title={email}>
          {email}
        </div>
      </div>
      <Button
        type="button"
        variant="secondary"
        onClick={onNavigate}
        className="cursor-pointer"
      >
        変更する
      </Button>
    </div>
  );
}

// パスワード（遷移のみ）
function PasswordRow({ onNavigate }: { onNavigate: () => void }) {
  return (
    <div className="flex items-center justify-between rounded-md border p-3">
      <div>
        <div className="text-sm font-semibold">パスワード&nbsp;*</div>
        <div className="text-muted-foreground text-sm">パスワードは非表示</div>
      </div>
      <Button
        type="button"
        variant="secondary"
        onClick={onNavigate}
        className="cursor-pointer"
      >
        変更する
      </Button>
    </div>
  );
}

// ロール（バッジ表示のみ）
function RoleBadgeRow({
  label,
  badgeClass,
}: {
  label: string;
  badgeClass: string;
}) {
  return (
    <div className="flex w-full justify-end">
      <Badge variant="outline" className={`w-[85px] px-2 py-1 ${badgeClass}`}>
        {label}
      </Badge>
    </div>
  );
}

💡ポイント

既存の user-form.tsx と同様に、小さなフィールド群を同ファイル内 にまとめています。
ロールはバッジ表示のみ。色は getRolePreset 由来のユーティリティクラスで付与。
メール は表示のみ＋別画面に遷移ボタン。
アバター は「既存画像 or 新規プレビュー」を表示。Zod で拡張子／容量、フロントでピクセル検証。

フォーム呼び出し用の軽量ラッパー作成

src/app/(protected)/profile/client.tsxを下記内容で新規作成します。

tsx

// src/app/(protected)/profile/client.tsx
"use client";

import { useRouter } from "next/navigation";
import { toast } from "sonner";

import ProfileForm from "@/components/profile/profile-form";
import { mockUser } from "@/lib/sidebar/mock-user";
import type { ProfileUpdateValues } from "@/lib/users/schema";

export default function ProfileClient() {
  const router = useRouter();

  // 実運用では認証セッションから本人情報を取得する想定
  const initial = {
    name: mockUser.name,
    email: mockUser.email,
    roleCode: mockUser.roleCode,
    currentAvatarUrl: mockUser.avatar,
  } as const;

  return (
    <ProfileForm
      initial={initial}
      onSubmit={(values: ProfileUpdateValues) => {
        // UIのみ：擬似成功でトースト（保存はサーバアクション回で実装）
        toast.success("プロフィールを更新しました", {
          description: `氏名: ${values.name}${values.avatarFile ? " / 画像選択あり" : ""}`,
          duration: 3500,
        });
        // 任意で戻すなら：router.push("/profile");
      }}
      onCancel={() => history.back()}
      onNavigateEmail={() => router.push("/profile/email")}
      onNavigatePassword={() => router.push("/profile/password")}
    />
  );
}

💡ポイント

クライアント側の軽量ラッパー。モックのログインユーザから初期値を組み立ててフォームへ。
ページ遷移もここでコントロール

ユーザ情報の確認・変更ページを作成

src/app/(protected)/profile/page.tsxを下記内容で新規作成します。

tsx

// src/app/(protected)/profile/page.tsx
import type { Metadata } from "next";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";

import Client from "./client";

export const metadata: Metadata = {
  title: "プロフィール | 管理画面レイアウト【DELOGs】",
  description:
    "ユーザのプロフィール（氏名・アバター）を編集し、メール／パスワード変更画面へ遷移",
};

export default async function Page() {
  // 本人限定のため、SSR側で displayId は不要（セッション前提）。
  // UI記事ではモックに任せ、ここでは何も取得しない。
  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
        <div className="flex items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mr-2 data-[orientation=vertical]:h-4"
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/profile">プロフィール</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>プロフィール編集</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>

      {/* ← コンテナは SSR 側に集約 */}
      <div className="max-w-xl p-4 pt-0">
        <Client />
      </div>
    </>
  );
}

💡ポイント

SSR の page.tsx はヘッダー/Breadcrumb を描画し、クライアントへ引き渡します。
本人のみのページなので、[displayId] は不要です（実運用はセッションから本人を解決）。

ここまでのポイントまとめ

/profile 単一路由で本人専用の UI を提供。
メール は表示のみ・別画面（/profile/email）で認証フローを想定。
パスワード は別画面（/profile/password）。
ロール は バッジ表示 のみ（カード内）。色はプリセットで表現。
アバター は Zod で 拡張子・容量、UI で ピクセル をチェック（推奨 512×512 / 最大 1024×1024）。

一旦、npm run devで/profileへアクセスすると下記のようになります。

次章では、/profile/email / /profile/password の UI も同じ要領で加えていきます。

3. メールアドレス変更（/profile/email）

この章では 本人のメールアドレス変更画面 を作ります。プロフィール画面ではメールは「表示のみ」でしたが、ここで新しいメールを入力して 認証リンクを送信するところまで を UI で表現します（バックエンドは次回以降）。

仕様（UIのみ）

項目	内容
現在のメール	読み取り専用で表示
新しいメール	テキスト入力（Zodで形式チェック／現在と同一ならエラー）
送信ボタン	「認証メールを送る」→ 成功トーストのみ（UI擬似）
バリデーション	`z.email()`、現在のメールと一致禁止
遷移	パンくず・戻る導線あり（`/profile`へ戻れる）

まずは下層（スキーマ）→コンポーネント→クライアント軽量ラッパー→SSRページの順で追加していきます。

txt

// 画面イメージ
[ /profile/email ]
 ├─ 現在のメール: yamada@example.com（表示のみ）
 ├─ 新しいメール: [ Input ]   （例: new@example.com）
 └─ [ 認証メールを送る ]  [ キャンセル ]

※ 送信後は「認証メールを送信しました」トースト（UIのみ）

Zodによるユーザ情報スキーマ定義へ追加

// src/lib/users/schema.ts への追記（末尾近くに追加）

// …（既存の定数・スキーマは省略）…

/** 追記：── プロフィール（本人用）のメール変更フォーム（本人用／確認メールを送るだけ） ── */
export const emailChangeSchema = (currentEmail: string) =>
  z.object({
    newEmail: z
      .email("メールアドレスの形式が正しくありません")
      .refine(
        (v) => v.trim().toLowerCase() !== currentEmail.trim().toLowerCase(),
        "現在のメールアドレスと同じです。別のメールアドレスを入力してください",
      ),
  });

/** 型：emailChangeSchemaが現在のメールアドレスと突合せする関数なので、ReturnType で返り値スキーマを取り出してから infer**/
export type EmailChangeValues = z.infer<ReturnType<typeof emailChangeSchema>>;

フォームのUI構成ファイルを作成

tsx

// src/components/profile/email-change-form.tsx
"use client";

import * as React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { emailChangeSchema, type EmailChangeValues } from "@/lib/users/schema";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

/* =========================
   公開インターフェース
   ========================= */
type Props = {
  currentEmail: string; // 表示のみ
  onSubmit: (values: EmailChangeValues) => void; // ← トーストは親(client.tsx)で
  onCancel?: () => void;
};

/* =========================
   本体
   ========================= */
export default function EmailChangeForm({
  currentEmail,
  onSubmit,
  onCancel,
}: Props) {
  const form = useForm<EmailChangeValues>({
    resolver: zodResolver(emailChangeSchema(currentEmail)),
    defaultValues: { newEmail: "" },
    mode: "onBlur",
  });

  const handleSubmit = form.handleSubmit(onSubmit);

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit} data-testid="email-change-form">
        <Card className="w-full rounded-md">
          <CardHeader className="pb-2">
            <CardTitle>メールアドレスの変更</CardTitle>
            <CardDescription>
              新しいメールアドレス宛に認証URLを送信します。本人確認後に切り替わります。
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-6">
            <CurrentEmailField value={currentEmail} />
            <NewEmailField />
          </CardContent>

          <CardFooter className="mt-2 flex gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel ?? (() => history.back())}
              className="cursor-pointer"
              data-testid="cancel-btn"
            >
              キャンセル
            </Button>
            <Button
              type="submit"
              disabled={form.formState.isSubmitting}
              className="cursor-pointer"
              data-testid="submit-email-change"
            >
              認証メールを送る
            </Button>
          </CardFooter>
        </Card>
      </form>
    </Form>
  );
}

/* =========================
   小さなフィールド群（同ファイル内）
   ========================= */

// 現在のメール（表示のみ）
function CurrentEmailField({ value }: { value: string }) {
  return (
    <div className="rounded-md border p-3">
      <div className="text-sm font-semibold">現在のメールアドレス</div>
      <div className="text-muted-foreground truncate text-sm" title={value}>
        {value}
      </div>
    </div>
  );
}

// 新しいメール
function NewEmailField() {
  return (
    <FormField
      name="newEmail"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">
            新しいメールアドレス&nbsp;*
          </FormLabel>
          <FormControl>
            <Input
              {...field}
              type="email"
              inputMode="email"
              placeholder="new@example.com"
              aria-label="新しいメールアドレス"
              autoComplete="off"
              data-testid="new-email"
            />
          </FormControl>
          <FormMessage data-testid="new-email-error" />
        </FormItem>
      )}
    />
  );
}

フォーム呼び出し用の軽量ラッパー作成

tsx

// src/app/(protected)/profile/email/client.tsx
"use client";
import { useRouter } from "next/navigation";

import EmailChangeForm from "@/components/profile/email-change-form";
import { mockUser } from "@/lib/sidebar/mock-user";
import { toast } from "sonner";
import type { EmailChangeValues } from "@/lib/users/schema";

export default function EmailChangeClient() {
  const router = useRouter();
  // 実運用ではセッションから本人のメールを取得
  return (
    <EmailChangeForm
      currentEmail={mockUser.email}
      onSubmit={(values: EmailChangeValues) => {
        // トースト通知
        toast.success("認証メールを送信しました", {
          description: `送信先：${values.newEmail}`,
          duration: 3500,
        });
        // 成功したら、一覧ページへ遷移（まだ遷移先が未作成なので一旦コメントアウト
        router.push("/profile");
      }}
      onCancel={() => history.back()}
    />
  );
}

ユーザ情報のメールアドレス変更ページを作成

tsx

// src/app/(protected)/profile/email/page.tsx（新規：SSR）
import type { Metadata } from "next";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import Client from "./client";

export const metadata: Metadata = {
  title: "メールアドレス変更 | 管理画面レイアウト【DELOGs】",
  description:
    "本人のメールアドレス変更（認証メール送信）UI。確認URLで本人確認後に切り替え。",
};

export default async function Page() {
  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
        <div className="flex items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mr-2 data-[orientation=vertical]:h-4"
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/profile">プロフィール</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>メールアドレス変更</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>

      <div className="max-w-xl p-4 pt-0">
        <Client />
      </div>
    </>
  );
}

補足・運用メモ（次回以降のバックエンドで実装）

送信時に 認証トークン を作成し、newEmail と紐付けて保存（期限付き）。
トークン付き URL を newEmail へ送信。クリックで本人確認 → email を確定変更。
確定までの間は 現在のメールを有効 のままにする（ログイン影響を避ける）。
UIは今回のままで差し替え可能。startEmailChange サーバアクションを後から作成して、onSubmit に置き換えればOK。

npm run devで/profile/emailへアクセスすると下記のような画面になります。

これで /profile/email の UI 一式が完成です。次章は /profile/password を同じ流れで実装していきます。

4. パスワード変更フォーム（/profile/password）

本人専用のパスワード変更画面を追加します。
/ users 系と同じ流儀で、スキーマ（Zod） → コンポーネント → client.tsx → page.tsx（SSR） の順で作成。
ご要望どおり、入力欄は 「現在のパスワード」と「新しいパスワード」だけ（確認用なし）です。
トースト通知は /profile/password/client.tsx 側で行い、フォーム本体では行いません。

仕様（UIのみ）

フィールド
- 現在のパスワード（必須・非表示/表示トグル）
- 新しいパスワード（必須・非表示/表示トグル・PASSWORD_MIN 以上、英大/小/数字を各1文字以上）
ボタン
- キャンセル（history.back()）
- 変更する（UIのみ成功トースト → /profile に戻す）
バリデーション
- src/lib/users/schema.ts に passwordChangeSchema を追記
- PasswordChangeValues 型をエクスポート
コードスタイル
- 小さなフィールド群は 同ファイル末尾にまとめ、フォーム側では <CurrentPasswordField /> のように呼び出す
- Eye/EyeOff のトグルを各フィールドに実装

txt

# 追加・変更ファイル

src/
├─ lib/
│  └─ users/
│     └─ schema.ts                         # （追記）passwordChangeSchema / PasswordChangeValues
├─ components/
│  └─ profile/
│     └─ password-change-form.tsx          # （新規）フォーム本体
└─ app/
   └─ (protected)/
      └─ profile/
         └─ password/
            ├─ client.tsx                  # （新規）軽量ラッパー（成功トースト＋/profileへ）
            └─ page.tsx                    # （新規）SSR（ヘッダ/Breadcrumb）

Zodによるユーザ情報スキーマ定義へ追加

src/lib/users/schema.tsへ下記を追記します。

// src/lib/users/schema.ts（追記部分のみ）

/** ── パスワード変更（本人） ─────────────────── */
export const passwordChangeSchema = z.object({
  currentPassword: z.string().min(1, "現在のパスワードを入力してください"),
  newPassword: passwordSchema, // 共通化したものを利用,
});

export type PasswordChangeValues = z.infer<typeof passwordChangeSchema>;

フォームのUI構成ファイルを作成

src/components/profile/password-change-form.tsxを新規作成します。

tsx

// src/components/profile/password-change-form.tsx（新規）
"use client";

import * as React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  passwordChangeSchema,
  type PasswordChangeValues,
  PASSWORD_MIN,
} from "@/lib/users/schema";

import { Eye, EyeOff } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

/* =========================
   公開インターフェース
   ========================= */
type Props = {
  onSubmit: (values: PasswordChangeValues) => void; // ← client.tsx でトースト＆遷移
  onCancel?: () => void;
};

/* =========================
   本体
   ========================= */
export default function PasswordChangeForm({ onSubmit, onCancel }: Props) {
  const form = useForm<PasswordChangeValues>({
    resolver: zodResolver(passwordChangeSchema),
    defaultValues: { currentPassword: "", newPassword: "" },
    mode: "onBlur",
  });

  const handleSubmit = form.handleSubmit((values) => {
    // ※ このコンポーネント内ではトーストしない（/profile/email と同じ方針）
    onSubmit(values);
  });

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit} data-testid="password-change-form">
        <Card className="w-full rounded-md">
          <CardContent className="space-y-6 pt-4">
            <CurrentPasswordField />
            <NewPasswordField />
          </CardContent>

          <CardFooter className="mt-2 flex gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              className="cursor-pointer"
              data-testid="cancel-btn"
            >
              キャンセル
            </Button>
            <Button
              type="submit"
              className="cursor-pointer"
              disabled={form.formState.isSubmitting}
              data-testid="submit-password"
            >
              変更する
            </Button>
          </CardFooter>
        </Card>
      </form>
    </Form>
  );
}

/* =========================
   小さなフィールド群（同ファイル内）
   ========================= */

// 現在のパスワード
function CurrentPasswordField() {
  const [visible, setVisible] = React.useState(false);

  return (
    <FormField
      name="currentPassword"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">
            現在のパスワード&nbsp;*
          </FormLabel>
          <div className="flex items-start gap-2">
            <FormControl>
              <Input
                {...field}
                type={visible ? "text" : "password"}
                autoComplete="off"
                aria-label="現在のパスワード"
                data-testid="current-password"
              />
            </FormControl>
            <Button
              type="button"
              size="icon"
              variant="outline"
              onClick={() => setVisible((v) => !v)}
              aria-label={
                visible ? "パスワードを非表示にする" : "パスワードを表示する"
              }
              className="shrink-0 cursor-pointer"
              data-testid="current-password-toggle"
            >
              {visible ? (
                <EyeOff className="size-4" />
              ) : (
                <Eye className="size-4" />
              )}
            </Button>
          </div>
          <FormMessage data-testid="current-password-error" />
        </FormItem>
      )}
    />
  );
}

// 新しいパスワード
function NewPasswordField() {
  const [visible, setVisible] = React.useState(false);

  return (
    <FormField
      name="newPassword"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">
            新しいパスワード&nbsp;*
          </FormLabel>
          <div className="flex items-start gap-2">
            <FormControl>
              <Input
                {...field}
                type={visible ? "text" : "password"}
                autoComplete="off"
                placeholder={`${PASSWORD_MIN}文字以上（英大/小/数字を含む）`}
                aria-label="新しいパスワード"
                data-testid="new-password"
              />
            </FormControl>
            <Button
              type="button"
              size="icon"
              variant="outline"
              onClick={() => setVisible((v) => !v)}
              aria-label={
                visible ? "パスワードを非表示にする" : "パスワードを表示する"
              }
              className="shrink-0 cursor-pointer"
              data-testid="new-password-toggle"
            >
              {visible ? (
                <EyeOff className="size-4" />
              ) : (
                <Eye className="size-4" />
              )}
            </Button>
          </div>
          <FormMessage data-testid="new-password-error" />
        </FormItem>
      )}
    />
  );
}

フォーム呼び出し用の軽量ラッパー作成

src/app/(protected)/profile/password/client.tsxを新規作成します。

tsx

// src/app/(protected)/profile/password/client.tsx（新規）
"use client";

import { useRouter } from "next/navigation";
import PasswordChangeForm from "@/components/profile/password-change-form";
import { toast } from "sonner";

export default function PasswordChangeClient() {
  const router = useRouter();

  return (
    <div className="max-w-xl p-4 pt-0">
      <PasswordChangeForm
        onSubmit={() => {
          // UIのみ：成功トースト → /profile へ遷移
          toast.success("パスワードを変更しました", {
            description: "次回ログインから新しいパスワードをご利用ください。",
            duration: 3500,
          });
          router.push("/profile");
        }}
        onCancel={() => history.back()}
      />
    </div>
  );
}

パスワード変更ページの作成

src/app/(protected)/profile/password/page.tsxを新規作成します。

tsx

// src/app/(protected)/profile/password/page.tsx（新規：SSR）
import type { Metadata } from "next";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import Client from "./client";

export const metadata: Metadata = {
  title: "パスワード変更 | 管理画面レイアウト【DELOGs】",
  description:
    "本人のパスワード変更UI（現在のパスワードと新しいパスワードのみ）。",
};

export default async function Page() {
  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
        <div className="flex items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mr-2 data-[orientation=vertical]:h-4"
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/profile">プロフィール</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>パスワード変更</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>
      <div className="max-w-xl p-4 pt-0">
        <Client />
      </div>
    </>
  );
}

補足

client.tsx でトースト：成功トーストや遷移は client.tsx に集約。
小さなフィールド群：既存の user-form.tsx と同じ書き方（末尾定義＋ <XxxField /> 呼び出し）を踏襲。
バリデーション：schema.ts にスキーマを集約。PasswordChangeValues を型として公開。
現在のパスワード：バックエンド開発時にチェック機能を実装想定。

npm run devで/profile/passwordへアクセスすると下記のような画面になります。

5. サイドバーパーツのユーザ情報メニューに遷移先設定

src/components/sidebar/nav-user.tsxに「ユーザー情報確認」「パスワード変更」のドロップダウンメニューがあります。これのリンク先を今回作成した画面へ設定します。

tsx

// src/components/sidebar/nav-user.tsx（該当箇所のみ抜粋）

            <DropdownMenuGroup>
              <DropdownMenuItem asChild>
                {/* 変更: /profile に差し替え */}
                <a href="/profile" className="flex items-center gap-2">
                  <UserIcon className="size-4" />
                  ユーザー情報確認
                </a>
              </DropdownMenuItem>

              <DropdownMenuItem asChild>
                {/* 変更: /profile/password に差し替え */}
                <a href="/profile/password" className="flex items-center gap-2">
                  <KeyRound className="size-4" />
                  パスワード変更
                </a>
              </DropdownMenuItem>

              <DropdownMenuItem asChild>
                {/* TODO: /notifications に差し替え予定 */}
                <a href="#" className="flex items-center gap-2">
                  <Bell className="size-4" />
                  通知
                </a>
              </DropdownMenuItem>
            </DropdownMenuGroup>

これで、サイドバーから変更画面への導線が設定できました。今回の目標は達成です。

6. まとめと次回予告

今回の記事では、ログインユーザ本人が利用する プロフィール関連のUI を実装しました。
ページ構成は /profile を起点として「氏名・アバター編集」「メールアドレス変更」「パスワード変更」へとつながり、利用者が自分自身の情報を管理できる流れを整えています。

実装上のポイントは、フォーム本体は UI に専念させ、トースト通知や画面遷移は client.tsx 側に任せたことです。これにより、/users 系と /profile 系でスタイルが統一され、見通しが良くなりました。
さらに、バリデーション仕様は schema.ts にまとめており、異なる画面でも同じルールを再利用できる構成になっています。

なお、今回のコードはあくまで UI のみですが、将来的には以下のような拡張が想定されています。

/profile/email では、入力された新しいメール宛に認証トークンを送信し、確認が取れた時点でDB更新を行う。
/profile/password では、現在のパスワードをサーバ側で照合し、正しい場合のみ新しいハッシュ値を保存する。

こうしたサーバ側の処理を組み込むことで、本番環境に耐えうる仕組みへ発展させられます。

次回は マスタ管理（管理者向け） に進みます。
対象は「ロール管理」で、以下を扱う予定です。

一覧表示（検索・ページング対応）
新規登録フォーム
既存ロールの編集
削除処理（確認ダイアログ付き）

これにより、管理画面全体で利用するロール情報を DB で柔軟に管理 できるようになります。

参考文献

この記事の執筆・編集担当

松本孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

▼ 関連記事

[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期

Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト

2025/8/19公開

[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期のイメージ

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装

管理者向けのユーザ詳細表示・新規登録・編集画面をShadcn/uiとReact Hook Form、Zodを組み合わせて実装

2025/8/16公開

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装のイメージ

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト

Shadcn/uiで簡単に管理画面UIを構築。共通ヘッダ、サイドメニューなどの基本レイアウトを作成

2025/8/8公開

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウトのイメージ

[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面

Shadcn/uiを利用してログインを画面作成。UIのほかZodによるバリデーションなどを実践

2025/7/24公開

[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面のイメージ

Next.js+shadcn/uiのインストールと基本動作のまとめ

開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認

2025/6/20公開

管理画面フォーマット制作編 #5ユーザープロフィールUI ─ 情報確認・編集・パスワード変更

0. はじめに

前提

技術スタック

1. プロフィールページの構成

UIの全体イメージ

今回のゴール

2. ユーザ情報確認フォーム

UI用のログインユーザ情報ファイルの編集

💡ポイント

UI用のロール情報ファイルの編集

💡ポイント

Zodによるユーザ情報スキーマ定義

💡ポイント

フォームのUI構成ファイルを作成

💡ポイント

フォーム呼び出し用の軽量ラッパー作成

💡ポイント

ユーザ情報の確認・変更ページを作成

💡ポイント

ここまでのポイントまとめ

3. メールアドレス変更（/profile/email）

仕様（UIのみ）

Zodによるユーザ情報スキーマ定義へ追加

フォームのUI構成ファイルを作成

フォーム呼び出し用の軽量ラッパー作成

ユーザ情報のメールアドレス変更ページを作成

補足・運用メモ（次回以降のバックエンドで実装）

4. パスワード変更フォーム（/profile/password）

仕様（UIのみ）

Zodによるユーザ情報スキーマ定義へ追加

フォームのUI構成ファイルを作成

フォーム呼び出し用の軽量ラッパー作成

パスワード変更ページの作成

補足

5. サイドバーパーツのユーザ情報メニューに遷移先設定

6. まとめと次回予告

参考文献

管理画面フォーマット制作編 #5
ユーザープロフィールUI ─ 情報確認・編集・パスワード変更