プログラミング

Rails初心者のはじめてのWebアプリ制作日記 Vol.4 -ログイン機能編-

前回、投稿機能が出来たので、次はログイン機能を実装します。
ログイン機能がつくと、SNSっぽくなりますね!

ユーザー登録機能の実装

ログイン機能をつけるためには、ログインするユーザー登録が必要になりますので、まずはそこから作って行きます。

progateのレッスンⅥに同じ内容がありますので、これをそのまま真似してuserモデルとコントローラーを作成しました。
レッスンⅥではuserテーブルのカラムはnameとemailのみなので、必要なものを足して以下のようにしました。

  • account : アカウント名
  • name : 表示名
  • email : メールアドレス
  • image : アイコン画像
  • password_digest : パスワード(暗号化対応)

ちなみにアカウントはtwitterなどで見かける「@xxxxx」を意識して入れましたが、カラム名は最初は”account”ではなく”user_id”と設定していました。

ユーザーIDが分かりやすいのかな〜っていう結構安易な理由です。

でも、講師に指摘されました。
「user_idはrailsではuserテーブルのidという意味になってしまうので、ここでこの名前は不適切。アカウントとかにした方がいい」だそうです。
別のテーブルからuserテーブルのidを使用する時に使うようです。

はい、失敗から一つ学びました。

そんなわけでprogateのレッスンⅥのユーザー登録、編集。レッスンⅦのプロフィール画像登録と編集。レッスンⅪのパスワード暗号化を真似して一通りのユーザー登録機能が完成しました!!

ユーザー登録画面

progateにはなかった機能として、ユーザー登録でよく見かけるパスワードの確認欄を入れています。1回目と2回目が一致しないと登録できないアレですね。
パスワード暗号化で入れたgem「bcrypt」にこのパスワードの確認をやってくれる機能も備わっているので、それを使用しました。

確認部分をpassword_confirmationという項目をフォームで送ると、いい感じにやってくれます。

以下のように書きました。

app/controllers/users_controller.rb

def user_params
   params.require(:user).permit(:account, :name, :email, :password, :image,:password_confirmation)
end
app/views/users/new.html.erb
<%= f.password_field :password %>
<% if @user.present? && @user.errors[:password].any? %>
  <% @user.errors[:password].each do |message| %>
    <%= message %>
  <% end %>
<% end %>

<%= f.password_field :password_confirmation %>
<% if @user.present? && @user.errors[:password_confirmation].any? %>
  <% @user.errors[:password_confirmation].each do |message| %>
     <%= message %>
  <% end %>
<% end %>

パスワードが一致しないと<%= message %>にエラーメッセージが表示されます。

アイコン、ユーザ名(表示名)、アカウント名、編集リンクを表示させるようにしました。
ユーザー削除機能はこの時点ではまだ入れていません。

ユーザー詳細画面

編集リンクを開くとこんな感じです。
編集して登録ボタンを押すとDBがアップデートされます。

ユーザー情報編集画面

これで基本的なユーザー登録機能ができましたので、続いてログイン機能を作ります!!

ログイン機能の実装

ログイン機能の作り方もprogateのレッスンⅦにありますので、そのまま全て真似して作りました。もちろんログアウトも入れてあります。

ログイン前は右上のメニューにはユーザー登録とログインリンクが表示されます。

ログイン画面

ログイン後は右上にログインユーザーのアイコンと名前が表示され、新規投稿ができるようになります。ログイン中はログアウトリンクも表示されます。

ログイン後の一覧画面

ログインユーザーと異なるユーザーの編集が出来ては困りますので、ユーザー編集リンクは他ユーザーでは表示されません。

他のユーザーの画面

さて、ここまできたらあとはユーザーと投稿の紐付けを行います!

ユーザーと投稿の紐付け

これもprogateのレッスンⅨにありますので、また真似して作りました。
Progateさまさまです!

私は投稿一覧ではなく、投稿詳細画面のみで投稿ユーザーを表示させるようにしました。

投稿詳細画面

ちなみに投稿機能編で入れ忘れていた投稿内容の編集と削除機能もprogateを参考にしてこのタイミングで追加しました。
もちろんログインしているユーザーの投稿にのみ、編集と削除ボタンを表示してあります。

他ユーザーから見ると、編集や削除ボタンはありません。

他ユーザーの投稿詳細画面

あとはユーザー詳細画面から投稿を表示させます。
画像はリンクになっているので、クリックすると投稿詳細へ遷移します。

他ユーザーのユーザー詳細画面

これでログインによる基本的な機能を実装出来ました
だいぶSNSっぽくなったと思います!

実はprogateでRailsの勉強をやるまでWebアプリのログイン機能ってどういう仕組みなのか全然わからなかったのですけど・・・遂に自分でも作れるようになりましたよ!成長しましたね。
ほぼほぼProgateおかげです。

投稿機能、ログイン機能ときたので、次はいいねボタンをつけたいと思います!
これもprogateにありますので、また参考にします。

レッスンを受けたスクールはこちら

侍エンジニア塾に3ヶ月通ってみた感想。メリット・デメリットとは?侍エンジニア塾に3ヶ月通ってプログラミングを学んだ実体験。実際に通ってみて分かった良かったところ、悪かったところをまとめてます。...
ABOUT ME
アヤカ
時間と場所に縛られない生き方をしたくて、OLからエンジニア、Webディレクターを経てフリーランスになった人。仕事はwebサイト制作。デザイン、コーディング、WordPressカスタマイズをやってます。
この記事を読んだ方におすすめ