【Rails】Twitterクローンを作ってみた 〜ログイン周り編〜

はじめに

現在、railsを用いてtwitterのクローンを作成しております。今回はログインまわりについて私が書いたコードをもとに、アウトプットしていきます。※こちらはdockerでの環境構築を省きます。

サービス環境

• ruby 3.0.0
• Rails 6.0.4
• docker
• mysql 8.0.2
• Slim, SCSS

ログインとサインアップ

条件

• ログイン・サインアップ・トップページの作成
• ユーザーモデルの作成
• ログイン画面・サインアップ画面の作成
• ログイン中はトップページに自分の名前とつぶやきボタンが出る。(ボタンはまだ動作しなくて良いです。)
• ログアウトができること
• トップページはタイムライン以外の部分を作成してください。
• Deviseを使用しユーザーを作成してください。そしてログイン・ログアウト・サインアップができるようにしてください。

実装流れ(簡略)

① gem(bootstrap, slim, devise等)の追加、bundle install
② deviseをインストールし、ビューとモデル(User)を作成する
③ routes.rb編集
④ userクラスにnameカラムを追加(rails g migration)
⑤ db:migrate、userモデル編集
⑥ deviseでusersコントローラ作成
⑦ routes.rb編集
⑧ ログインとサインアップのビューを作成し、見た目を整える
⑨ homeコントローラ作成
⑩ TOPページ(homeコントローラのビュー)を作成し、見た目を整える

ログイン画面

ここではgithubでのサインインの実装はしておりません。

サインアップ画面

見た目は Amazonのログインページを参考にしました。

実装を通して学んだこと

1. deviseの活用方法

deviseコマンドを用いて、Userモデルやそのコントローラ、ログイン、サインアップのビューを自動的に作成できることを学んだ(今回は条件に合わせてhtmlを変えた)。非常に便利なものでした。

2. 様々なgemについて

bootstrap, slim, rspec-rails, devise, kaminari等色々なgemの機能を知ることができました。

3. コミットについて

機能を追加するごとにコミットを分けると後から見たときにとてもわかりやすいことに気づくことができました。

感想

今回の実装はdeviseの活用方法以外は割とすんなりできたのではないかなと感じました。どちらかというとhtmlとcssに苦労しました。慣れるまでたくさん書いていこうと思います。
次回はユーザー詳細ページの作成についてアウトプットしていこうと思います！読んでいただきありがとうございました。