Railsアプリケーションの422エラーページの文言をどうするといいのか調べてみた


`rails new`でプロジェクトを作成すると、`public`配下に`404.html`, `422.html`, `500.html`というHTMLがデフォルトで生成されます。生成される文言は英語なので日本語にしようとした際に、そのままの翻訳ではユーザがこのエラーに遭遇したときにどうもわかりにくい気がするので、「404 文言」とかでGoogle先生に聞くと非常に参考になる文言をみつけることができます。

500も同様にGoogle先生でみつけられるのですが、422はなんだかどうもピンとくるのが見つけられなかったのです。

なので、そもそもこのエラーに遭遇するタイミングと他のサイトがどうしているのかどうかを調べてみました。

## エラーに遭遇するタイミング

そもそも、422とはWikipediaによると、

> 422 Unprocessable Entity
> 処理できないエンティティ。WebDAVの拡張ステータスコード。

http://ja.wikipedia.org/wiki/HTTP%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89

ようするに、あるオブジェクトの変更などの処理がうまくできない場合に発生するエラーなのですかね。

Railsだとデフォルトで発生するのは、下記で`:unprocessable_entity`となっている箇所で、認証トークンやXSSが間違っている場合や、レコードが不正だったり、うまく保存ができなかった場合に表示される感じなのかな。

```
config.action_dispatch.rescue_responses = {
  'ActionController::RoutingError'              => :not_found,
  'AbstractController::ActionNotFound'          => :not_found,
  'ActionController::MethodNotAllowed'          => :method_not_allowed,
  'ActionController::UnknownHttpMethod'         => :method_not_allowed,
  'ActionController::NotImplemented'            => :not_implemented,
  'ActionController::UnknownFormat'             => :not_acceptable,
  'ActionController::InvalidAuthenticityToken'  => :unprocessable_entity,
  'ActionController::InvalidCrossOriginRequest' => :unprocessable_entity,
  'ActionDispatch::ParamsParser::ParseError'    => :bad_request,
  'ActionController::BadRequest'                => :bad_request,
  'ActionController::ParameterMissing'          => :bad_request,
  'ActiveRecord::RecordNotFound'                => :not_found,
  'ActiveRecord::StaleObjectError'              => :conflict,
  'ActiveRecord::RecordInvalid'                 => :unprocessable_entity,
  'ActiveRecord::RecordNotSaved'                => :unprocessable_entity
}
```

http://guides.rubyonrails.org/configuring.html


## 他のサイト

次に、他のRailsで構築しているというサイトではどうしているのか見ていきたいと思います。

### cookpadの場合

Railsで構築されているサイトと言えばcookpadさんですよね。

#### 422.html

![cookpad-422.png](https://qiita-image-store.s3.amazonaws.com/0/4116/32df67ee-9999-daf6-8675-fe5a9efdf16a.png "cookpad-422.png")

#### 500.html
![cookpad-500.png](https://qiita-image-store.s3.amazonaws.com/0/4116/1f97c190-c44c-812c-820b-d2834a13b8fd.png "cookpad-500.png")


500との違いは、「しばらく時間をおいてもご覧いただけない場合」が「繰り返し同様の操作をしても改善されない場合」になってますね。

### CrowdWorksの場合

最近上場したということで。

#### 422.html
![crowdworks-422.png](https://qiita-image-store.s3.amazonaws.com/0/4116/b51d33d4-2454-920d-c4ce-eea28feef18a.png "crowdworks-422.png")

#### 500.html
![crowdworks-500.png](https://qiita-image-store.s3.amazonaws.com/0/4116/0efe4d20-e8d3-f19b-fa8a-9b41ac9bb08c.png "crowdworks-500.png")

だいぶシンプルですね。

### Qiitaの場合

ここもバックエンドがRailsですよね。

#### 422.html

![qiita-422.png](https://qiita-image-store.s3.amazonaws.com/0/4116/a9518ba6-cdaa-26ff-ab15-448235efea1d.png "qiita-422.png")

#### 500.html

![qiita-500.png](https://qiita-image-store.s3.amazonaws.com/0/4116/65903263-d742-3699-0f6b-f2d124d876b8.png "qiita-500.png")

Qiitaの場合はフロントをJSでやっているのでいらないんでしょうね。

## 結論

cookpadさんの文言は非常にユーザ目線だと思いました。また、ExceptionNotifierとかをいれるているのであれば、crowdworksさんの500の文言は参考になりますね。あと、キャプチャにはいれていないのですが、QiitaさんのTwitterのツイートを埋め込むのはいいアイデアですね。

以上、今後エラーページをカスタマイズする際に参考にさせていただきます。