0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-10-23

はじめに

現在、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コントローラのビュー)を作成し、見た目を整える

ログイン画面

スクリーンショット 2022-10-23 19.56.49.png
ここではgithubでのサインインの実装はしておりません。

サインアップ画面

スクリーンショット 2022-10-23 19.56.58.png
見た目は Amazonのログインページを参考にしました。

実装を通して学んだこと

1. deviseの活用方法

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

2. 様々なgemについて

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

3. コミットについて

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

感想

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

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?