1
1

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 3 years have passed since last update.

【Rails】プロフィールに自己紹介機能を実装するシンプルな方法

Last updated at Posted at 2020-07-12

##プロフィールに自己紹介機能を実装する
ポートフォリオ完成後、追加実装したので順序を備忘録として残します。
ユーザー名・email・パスワードなどの既存カラムに、introductionカラムを新たに追加します。
なるべくシンプルに記します!

##どうやって?
以下の順序です。

  1. git checkout -b introduction (ブランチ切る)
  2. usersテーブルにintroductionカラムを追加する
  3. データベースに反映させる
  4. usersコントローラーに必要コードの追記
  5. userモデルに必要コードの追記
  6. ユーザー詳細ページ(MYPAGE)に表示させる
  7. ユーザー編集ページ(EDIT)に表示させる
  8. 完成!

以下順番に記します!

###1. git checkout -b introduction (ブランチ切る)
新たな機能を実装するため、ブランチを切リます。
###2. usersテーブルにintroductionカラムを追加する

ターミナル
$ rails generate migration AddIntroductionToUsers introduction:text
      invoke  active_record
      create    db/migrate/20200712005652_add_introduction_to_users.rb

上記rails gコマンドでintroductionカラムを追加します。

###3. データベースに反映させる

ターミナル
$ docker-compose run  web rails db:migrate
== 2020~~~~ AddIntroductionToUsers: migrating ===========================
-- add_column(:users, :introduction, :text)
   -> 0.0518s
== 2020~~~~ AddIntroductionToUsers: migrated (0.0519s) ==================

###4. usersコントローラーに必要コードの追記
private methodに追記
introduction属性を付与する

users_controller.rb
   def user_params_update
      params.require(:user).permit(:name, :email, :image, :introduction) # introdution追加
   end

これでintroductionをupdate可能になります

###5. userモデルに必要コードの追記
バリデーションを追加します。自己紹介は50文字以内で入力させます。
文字数は自由に設定してください。
※presenseですが、falseにしないと新規登録時に作用してintroductionがnilとなって新規登録できなくなりますので注意してください。新規登録時に自己紹介も入力必要な場合とするならtrueでOKです。

user.rb
validates :introduction, presence: false, length: { maximum: 50 } # 自己紹介の最高文字数は50文字

###6. ユーザー詳細ページ(MYPAGE)に表示させる

show.html.slim
 = @user.introduction

SCSSなどで適宜修正してください

###7. ユーザー編集ページ(EDIT)に表示させる
ユーザー編集はユーザー名・emailのみでしたがそこにintroductionを追記します。

edit.html.slim
.form-group
  = f.label :introduction
  = f.text_area :introduction, class: 'form-control', id: 'user_introduction'

##完成
以上で自己紹介をusersテーブルに追加し、introduction属性を追加完了しました。
途中でintroductionをintroduceと書いていたりしたので、皆様も注意してください!

スクリーンショット 2020-07-12 13.33.19.png
1
1
0

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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?