RailsのエラーハンドリングUI入門！初心者でもわかる404・422・500カスタムページの作り方
生徒
「Railsでエラー画面ってどうやって作るんですか？よく404とか500って表示されるページのことです。」
先生
「Railsでは404・422・500といったエラーページを自由にデザインできます。ユーザーにとって分かりやすいエラーページを作ることはすごく大切なんですよ。」
生徒
「エラーって難しそうですが、初心者でもカスタムページって作れるんですか？」
先生
「大丈夫です。基本的なファイルを用意してRailsの設定を少し変更するだけで、誰でも自分だけのエラーページを作れますよ。では順番に説明していきましょう。」
1. Railsのエラーページとは？初心者でもわかる基本知識
Railsには、エラーが発生したときにユーザーへ表示される標準のエラーページがあります。代表的なものは次の3つです。
- 404 Not Found：ページが存在しないとき
- 422 Unprocessable Entity：送信データに不備があるとき
- 500 Internal Server Error：サーバー内で予期しないエラーが起きたとき
デフォルトのエラーページは非常にシンプルですが、サービスの印象を大きく左右するため、独自デザインにすることが多いです。例えば「ご迷惑をおかけしています」「トップページに戻るボタンを表示する」など、ユーザーに優しい導線を作ることができます。
2. エラーページをカスタムする準備：publicフォルダの役割
Railsでは、カスタムエラーページを作成するために「public」フォルダを使用します。publicフォルダはWebサーバーが直接アクセスできる静的ファイル置き場で、特殊な設定をしなくてもそのまま表示されます。
次のような名前でHTMLファイルを用意すると、Railsが自動的にエラー時にこのファイルを表示してくれます。
- public/404.html
- public/422.html
- public/500.html
これらは通常のHTMLファイルなので、ERBやHamlではなく生のHTMLとして作る必要があります。ここでは、初心者でも理解しやすいように中身の例も紹介します。
<!DOCTYPE html>
<html>
<body class="text-center p-5">
<h1>ページが見つかりません</h1>
<p>お探しのページは存在しないようです。</p>
<a href="/" class="btn btn-primary">トップへ戻る</a>
</body>
</html>
3. なぜエラーページを作る必要があるのか？初心者向けにやさしく解説
エラーページはただのエラー表示ではなく、ユーザーに安心感を与え、次の行動につなげるための大切な画面です。
初心者にもわかりやすく例えると「道に迷ったときに道案内の看板があるかどうか」の違いです。看板がなければ不安になりますが、案内があれば安心して次の場所へ進めます。Webアプリも同じで、エラーが起きてもユーザーが迷わないように適切な案内を表示します。
特にRailsアプリは、動的な画面が多く予期しないエラーが発生することもあります。そのため、404や500といったページを整えておくことで、ユーザー体験が大きく向上します。
4. エラーページに入れるべきUIのポイント
見た目がきれいなだけではなく、分かりやすく、迷わせない構造にすることが重要です。最低限チェックしておきたいUIのポイントをまとめます。
① 明確なエラーメッセージ
「ページが見つかりません」「サーバーエラーが発生しました」など、ユーザーが現在の状況を理解できる文章を入れます。
② 迷わない導線
トップページへのリンクや戻るボタンを配置し、次にどこへ進むべきかがわかるようにします。
③ デザインの統一感
アプリ全体のテーマカラーを使うなど、統一されたデザインにすると安心感があります。
④ 404/422/500で内容を変える
「入力に誤りがあります」「サーバーエラーです」など、エラーの種類に応じた文言を用意しておくと親切です。
5. Railsのdevelopment・productionでエラーページが違う理由
初心者が戸惑いやすいポイントとして、development（開発環境）ではRailsが詳細なエラー画面を表示する一方、production（本番環境）ではカスタムエラーページが表示されます。
これは安全性のためです。開発者向けのエラー情報には内部構造が含まれており、本番環境で表示してしまうとセキュリティリスクになります。そのため、本番ではpublicフォルダの静的な404・500ページが使われる仕組みになっています。
覚えておくべきポイントは「本番環境では必ずカスタムページが使われる」ということです。誤って真っ白なエラーページが表示されてしまわないよう、事前にデザインしておきましょう。
6. エラーハンドリングUIを整えることでRailsアプリはもっと使いやすくなる
Railsアプリでは、ページ遷移やフォーム入力、サーバー処理など多くの動作が絡むため、予期しないエラーはどうしても発生します。そこでエラーハンドリングUIを整えておくと、アプリの品質は大きく向上します。
- ユーザーが迷わない
- 信頼性の高いサービスに見える
- サポート問い合わせの減少につながる
Railsのビューやテンプレート（ERB・Haml・Slim）の理解が深まると、エラーページもより自由にデザインできるようになります。エラーハンドリングUIは初心者でもすぐに取り組める改善ポイントなので、まずは404・422・500ページを作ることから始めてみましょう。
