14
チャプター14
アクセシビリティの向上
前のチャプターでは、エラー（404エラーを含む）を捕捉し、ユーザーにフォールバックを表示する方法について学びました。しかし、パズルの別のピースであるフォームの検証についてまだ議論する必要があります。Server Actions を使用してサーバー側の検証を実装する方法と、アクセシビリティを考慮しながら React の useActionState フックを使用してフォームエラーを表示する方法を見ていきましょう！
このチャプターでは...
以下のトピックを扱います
Next.js で eslint-plugin-jsx-a11y を使用してアクセシビリティのベストプラクティスを実装する方法。
サーバー側のフォーム検証を実装する方法。
React の useActionState フックを使用してフォームエラーを処理し、ユーザーに表示する方法。
アクセシビリティとは？
アクセシビリティとは、障がいを持つ人を含むすべての人が利用できるウェブアプリケーションを設計・実装することを指します。これは、キーボードナビゲーション、セマンティックHTML、画像、色、ビデオなど、多くの領域をカバーする広範なトピックです。
このコースではアクセシビリティについて深く掘り下げませんが、Next.js で利用できるアクセシビリティ機能と、アプリケーションをよりアクセシブルにするための一般的な実践方法について説明します。
アクセシビリティについてもっと深く学びたい場合は、web.dev の Learn Accessibility コースをおすすめします。
Next.js で ESLint アクセシビリティプラグインを使用する
Next.js は、アクセシビリティの問題を早期に検出するのに役立つように、ESLint 設定に eslint-plugin-jsx-a11y プラグインを含んでいます。たとえば、このプラグインは、alt テキストのない画像、aria-* および role 属性の誤った使用などに対して警告を発します。
オプションとして、これを試したい場合は、package.json ファイルにスクリプトとして next lint を追加してください
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"lint": "next lint"
},次に、ターミナルで pnpm lint を実行します
pnpm lintこれにより、プロジェクトに ESLint をインストールおよび設定する手順がガイドされます。今すぐ pnpm lint を実行すると、以下の出力が表示されるはずです
✔ No ESLint warnings or errorsしかし、alt テキストのない画像があった場合はどうなるでしょうか？見てみましょう！
/app/ui/invoices/table.tsx に移動し、画像から alt プロップを削除してください。エディターの検索機能を使用して、<Image> をすばやく見つけることができます
<Image
src={invoice.image_url}
className="rounded-full"
width={28}
height={28}
alt={`${invoice.name}'s profile picture`} // Delete this line
/>もう一度 pnpm lint を実行すると、以下の警告が表示されるはずです
./app/ui/invoices/table.tsx
45:25 Warning: Image elements must have an alt prop,
either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-textリンターの追加と設定は必須ではありませんが、開発プロセスでアクセシビリティの問題を検出するのに役立ちます。
フォームのアクセシビリティを向上させる
フォームのアクセシビリティを向上させるために、すでに3つのことを行っています
- セマンティックHTML:
<div>の代わりにセマンティック要素（<input>、<option>など）を使用すること。これにより、支援技術（AT）が入力要素に焦点を当て、ユーザーに適切な文脈情報を提供できるようになり、フォームのナビゲートと理解が容易になります。 - ラベリング:
<label>とhtmlFor属性を含めることで、各フォームフィールドに記述的なテキストラベルが確実に設定されます。これにより、コンテキストを提供することでATサポートが向上し、ユーザーがラベルをクリックして対応する入力フィールドに焦点を合わせられるようにすることでユーザビリティも向上します。 - フォーカスアウトライン: フィールドは、フォーカス時にアウトラインが表示されるように適切にスタイル設定されています。これは、ページ上のアクティブな要素を視覚的に示すため、アクセシビリティにとって重要であり、キーボードユーザーとスクリーンリーダーユーザーの両方がフォーム上のどこにいるかを理解するのに役立ちます。これは
tabを押して確認できます。
これらの実践は、多くのユーザーにとってフォームをよりアクセスしやすいものにするための良い基盤となります。しかし、フォームの検証とエラーには対応していません。
フォームの検証
https://:3000/dashboard/invoices/create にアクセスし、空のフォームを送信してください。何が起こりますか？
エラーが発生します！これは、空のフォーム値をServer Actionに送信しているためです。これは、クライアントまたはサーバーでフォームを検証することで防ぐことができます。
クライアントサイド検証
クライアントでフォームを検証する方法はいくつかあります。最も簡単な方法は、フォームの <input> および <select> 要素に required 属性を追加することで、ブラウザが提供するフォーム検証に依存することです。例：
<input
id="amount"
name="amount"
type="number"
placeholder="Enter USD amount"
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
required
/>フォームを再度送信してください。空の値を送信しようとすると、ブラウザが警告を表示します。
このアプローチは、一部のATがブラウザの検証をサポートしているため、一般的に問題ありません。
クライアントサイド検証の代替手段はサーバーサイド検証です。次のセクションでその実装方法を見ていきましょう。とりあえず、追加した required 属性は削除してください。
サーバーサイド検証
サーバーでフォームを検証することで、次のことが可能になります
- データベースに送信する前に、データが正しい形式であることを確認する。
- 悪意のあるユーザーがクライアントサイドの検証をバイパスするリスクを軽減する。
- 有効なデータと見なされるものの単一の信頼できる情報源を持つ。
create-form.tsx コンポーネントで、react から useActionState フックをインポートします。useActionState はフックであるため、"use client" ディレクティブを使用してフォームをクライアントコンポーネントにする必要があります
'use client';
// ...
import { useActionState } from 'react';フォームコンポーネント内で、useActionState フックは
- 2つの引数を取ります:
(action, initialState)。 - 2つの値を返します:
[state, formAction]- フォームの状態と、フォームが送信されたときに呼び出される関数。
createInvoice アクションを useActionState の引数として渡し、<form action={}> 属性内で formAction を呼び出します。
// ...
import { useActionState } from 'react';
export default function Form({ customers }: { customers: CustomerField[] }) {
const [state, formAction] = useActionState(createInvoice, initialState);
return <form action={formAction}>...</form>;
}initialState は自由に定義できます。この場合、2つの空のキーを持つオブジェクト（message と errors）を作成し、actions.ts ファイルから State 型をインポートします。State はまだ存在しませんが、次に作成します
// ...
import { createInvoice, State } from '@/app/lib/actions';
import { useActionState } from 'react';
export default function Form({ customers }: { customers: CustomerField[] }) {
const initialState: State = { message: null, errors: {} };
const [state, formAction] = useActionState(createInvoice, initialState);
return <form action={formAction}>...</form>;
}最初は混乱するかもしれませんが、サーバーアクションを更新するとより理解できます。今すぐやってみましょう。
action.ts ファイルで、Zod を使用してフォームデータを検証できます。FormSchema を次のように更新します
const FormSchema = z.object({
id: z.string(),
customerId: z.string({
invalid_type_error: 'Please select a customer.',
}),
amount: z.coerce
.number()
.gt(0, { message: 'Please enter an amount greater than $0.' }),
status: z.enum(['pending', 'paid'], {
invalid_type_error: 'Please select an invoice status.',
}),
date: z.string(),
});customerId- Zod は、顧客フィールドが空の場合に型stringを期待するため、すでにエラーをスローします。しかし、ユーザーが顧客を選択しなかった場合にわかりやすいメッセージを追加しましょう。amount- 金額の型をstringからnumberに強制変換しているため、文字列が空の場合はデフォルトでゼロになります。Zod に.gt()関数で常に0より大きい金額を要求するように伝えましょう。status- Zod は、ステータスフィールドが空の場合に「pending」または「paid」を期待するため、すでにエラーをスローします。ユーザーがステータスを選択しなかった場合にもわかりやすいメッセージを追加しましょう。
次に、createInvoice アクションを更新して、prevState と formData の2つのパラメーターを受け入れるようにします
export type State = {
errors?: {
customerId?: string[];
amount?: string[];
status?: string[];
};
message?: string | null;
};
export async function createInvoice(prevState: State, formData: FormData) {
// ...
}formData- 以前と同じです。prevState-useActionStateフックから渡された状態が含まれます。この例ではアクション内で使用しませんが、必須のプロップです。
次に、Zod の parse() 関数を safeParse() に変更します
export async function createInvoice(prevState: State, formData: FormData) {
// Validate form fields using Zod
const validatedFields = CreateInvoice.safeParse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
});
// ...
}safeParse() は、success または error フィールドのいずれかを含むオブジェクトを返します。これにより、このロジックを try/catch ブロック内に入れることなく、検証をより適切に処理できます。
情報をデータベースに送信する前に、条件式でフォームフィールドが正しく検証されたかどうかを確認します
export async function createInvoice(prevState: State, formData: FormData) {
// Validate form fields using Zod
const validatedFields = CreateInvoice.safeParse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
});
// If form validation fails, return errors early. Otherwise, continue.
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
message: 'Missing Fields. Failed to Create Invoice.',
};
}
// ...
}validatedFields が成功しなかった場合、Zod からのエラーメッセージと共に早めに関数を返します。
ヒント:
validatedFieldsを `console.log` し、空のフォームを送信してその形式を確認してください。
最後に、フォームの検証を `try/catch` ブロックの外で個別に処理しているため、データベースエラーに対して特定のメッセージを返すことができます。最終的なコードは次のようになります
export async function createInvoice(prevState: State, formData: FormData) {
// Validate form using Zod
const validatedFields = CreateInvoice.safeParse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
});
// If form validation fails, return errors early. Otherwise, continue.
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
message: 'Missing Fields. Failed to Create Invoice.',
};
}
// Prepare data for insertion into the database
const { customerId, amount, status } = validatedFields.data;
const amountInCents = amount * 100;
const date = new Date().toISOString().split('T')[0];
// Insert data into the database
try {
await sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
`;
} catch (error) {
// If a database error occurs, return a more specific error.
return {
message: 'Database Error: Failed to Create Invoice.',
};
}
// Revalidate the cache for the invoices page and redirect the user.
revalidatePath('/dashboard/invoices');
redirect('/dashboard/invoices');
}さて、フォームコンポーネントでエラーを表示しましょう。create-form.tsx コンポーネントに戻り、フォームの state を使用してエラーにアクセスできます。
それぞれの特定のエラーをチェックする三項演算子を追加します。例えば、顧客フィールドの後に次のように追加できます
<form action={formAction}>
<div className="rounded-md bg-gray-50 p-4 md:p-6">
{/* Customer Name */}
<div className="mb-4">
<label htmlFor="customer" className="mb-2 block text-sm font-medium">
Choose customer
</label>
<div className="relative">
<select
id="customer"
name="customerId"
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
defaultValue=""
aria-describedby="customer-error"
>
<option value="" disabled>
Select a customer
</option>
{customers.map((name) => (
<option key={name.id} value={name.id}>
{name.name}
</option>
))}
</select>
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
</div>
<div id="customer-error" aria-live="polite" aria-atomic="true">
{state.errors?.customerId &&
state.errors.customerId.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
</div>
// ...
</div>
</form>ヒント: コンポーネント内で
stateを `console.log` し、すべてが正しく接続されているか確認できます。フォームは現在クライアントコンポーネントであるため、開発者ツールのコンソールを確認してください。
上記のコードでは、次のariaラベルも追加しています
aria-describedby="customer-error": これは、select要素とエラーメッセージコンテナ間の関係を確立します。id="customer-error"を持つコンテナがselect要素を記述していることを示します。スクリーンリーダーは、ユーザーがselectボックスを操作したときにこの記述を読み上げ、エラーを通知します。id="customer-error": このid属性は、select入力のエラーメッセージを保持するHTML要素を一意に識別します。これはaria-describedbyが関係を確立するために必要です。aria-live="polite": スクリーンリーダーは、div内のエラーが更新されたときに、ユーザーに丁寧に通知する必要があります。コンテンツが変更された場合（例えば、ユーザーがエラーを修正した場合）、スクリーンリーダーはこれらの変更をアナウンスしますが、ユーザーを中断しないように、ユーザーがアイドル状態のときに限ります。
実践: ariaラベルの追加
上記の例を使用して、残りのフォームフィールドにエラーを追加します。また、不足しているフィールドがある場合は、フォームの下部にメッセージを表示する必要があります。UIは次のようになります
準備ができたら、pnpm lint を実行して、ariaラベルが正しく使用されているかを確認してください。
自分に挑戦したい場合は、このチャプターで学んだ知識を活かして、edit-form.tsx コンポーネントにフォーム検証を追加してみてください。
次のことを行う必要があります
edit-form.tsxコンポーネントにuseActionStateを追加する。- Zod からの検証エラーを処理するように
updateInvoiceアクションを編集する。 - コンポーネントにエラーを表示し、アクセシビリティを向上させるためにariaラベルを追加する。
準備ができたら、以下のコードスニペットを展開して解決策を確認してください
チャプター完了14
素晴らしい！React Form Status とサーバーサイド検証を使用して、フォームのアクセシビリティを向上させる方法を学びました。
これは役立ちましたか？