ユーザー関連のビューをカスタマイズしよう

学習の目標

本章では、以下の内容を学習します。

今回は、ユーザー登録画面とログイン画面をカスタマイズしていきます。以前見た通り、Deviseでは最低限のUI（User Interface、つまりユーザーのための画面）は用意してくれています。しかし、デフォルトの見た目はシンプルすぎるため、ポートフォリオとして提出するには不十分です。

そこで今回は、Tailwind CSSを使って見た目を整えていきます。まずはユーザー登録画面から手をつけていきましょう。

Deviseの特徴として、ビュー（画面）に関するファイルはGem内部に組み込まれており、そのままでは編集することができません。これは、Gemを更新したときに自分の変更が上書きされないようにするための仕組みです。

Deviseのビューをカスタマイズするためには、まずbin/rails g devise:viewsコマンドでビューファイルを自分のアプリケーションに取り出す必要があります。これにより、Gem内部のファイルではなく、自分のアプリケーション内のファイルが優先して使用されるようになります。

以下のコマンドを実行してみましょう。

$ bin/rails g devise:views

コマンドを実行すると、多くのファイルが生成されます。これらはDeviseが提供する様々な機能（ユーザー登録、ログイン、パスワードリセットなど）に対応するビューファイルです。

生成されたファイルは多岐にわたりますが、TechLogで特に使用するのは以下の3つのファイルです。

ユーザー登録ページのビューファイルです。新規ユーザーが登録するためのフォームが含まれています。

ログインページのビューファイルです。既存ユーザーがログインするためのフォームが含まれています。

エラーメッセージを表示するためのパーシャル（部分テンプレート）です。ユーザー登録やログイン時のエラーを表示するために使用されます。

その他にも多くのファイルが生成されていますが、これらはパスワードの再設定やメール確認など、TechLogではひとまず使用しない機能に関するものです。必要に応じて後から編集することもできます。

ビューファイルの生成は大きな変更なので、ここで一度コミットしておきましょう。bin/devを起動していない別なターミナルで以下のコマンドを実行します。

$ git add .
$ git commit -m "deviseのviewファイル(編集用)を生成"
$ git push

変更をコミットすることで、作業の区切りを明確にし、何か問題が発生した場合にこの時点まで戻ることができます。定期的にコミットする習慣をつけることで、開発をより安全に進めることができます。

今回はDeviseのビューファイルを生成し、見た目をカスタマイズできるようにしました。同様に、コントローラーについても必要に応じてカスタマイズすることができます。その場合も、まずファイルを生成する必要があります。

Deviseが提供するビューファイルには、それぞれ重要な役割があります。TechLogでは使用しないファイルもありますが、実際のプロジェクトでは以下のような機能に対応するビューが含まれています：

これらのファイルの役割を理解し、全体像を把握しておくとDeviseの理解が深まります。興味のある方は、以下の記事も参考にしてみてください。