TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-5（バリデーションメッセージ表示）

この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の5回目です。

4回目ではメモ登録機能を実装し、このハンズオンで扱うメイン機能の実装が完了しました。

あわせて読みたい

TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-4（メモ登録機能） この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の4回目です。 3回目はメモ一覧表示機能を説明しました。 4回目の本記事ではメモ登録機…

この記事ではLaravel APIから返却されたバリデーションメッセージをフロントエンド（Next.js）で表示していきます。

また、バリデーションエラーのレスポンスのステータスコードは422、システムエラーのステータスコードは500なのでそれぞれのエラーをハンドリングできるような実装にしていきます。

修正するのはバリデーションメッセージを表示するフロントエンド側のコードのみです。

なお、バリデーションメッセージの表示が必要な画面はログイン画面とメモ登録画面なのでどちらも実装していきます。（方法は全く同じです）

はじめに

本ハンズオンの全回分の買い切りはこちらに準備しております↓

TypeScript+Next.js+Laravelで超簡…

TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン（全回分） の記事一覧 「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の全回分をまとめて購入いただけるプランです。

ログイン画面

現状、ログイン画面でメールアドレス、パスワードともに空の状態でログインしようとすると、Laravelからバリデーションエラーが返ってきますが画面には何も表示されません。

{
    "message": "The given data was invalid.",
    "errors": {
        "email": [
            "必須入力です。"
        ],
        "password": [
            "必須入力です。"
        ]
    }
}

画面にバリデーションメッセージが表示されるように実装していきます。