はじめに

【Rails】Twitterクローンを作ってみた〜ユーザー詳細ページの作成〜の続きです。こちらを前提に進めていきますので、まだご覧になっていない方はそちらからご覧ください！※こちらはdockerでの環境構築を省きます。

サービス環境

ruby 3.0.0
Rails 6.0.4
docker
mysql 8.0.2
Slim, SCSS

ツイート機能作成

条件

「つぶやく」ボタンクリックで新規ツイート作成ページに遷移
テキストを入力し投稿することでトップページにツイートが表示される。
Tweetモデルの作成をし、UserモデルとTweetモデルを関連付けさせてください。Tweetは最大140文字までとします。また、Tweetモデルのテキスト部分のカラム名はtextとしてください。

実装流れ(簡略)

① Userモデルに紐付けたTweetモデル作成(textカラムを持つ)
② db:migrate
③ userモデル編集(has_many :tweets, dependent: :destroy)
④ tweetモデル編集(バリデーションをかけてtextを最大140文字までとする)
⑤ tweetsコントローラ作成、編集
⑥ routes.rb追記
⑦ tweets/new.html.slim書く。cssも同様に。
⑧ tweets/index.html.slim書く。cssも同様に。
⑨ 上記tweets/index.html.slimをTOPページにしてしまう。(routes.rb編集、homeコントローラ削除等)

ツイートページ

TOPページ(ツイート一覧)

解説

profiles_controller.rb

class TweetsController < ApplicationController
  skip_before_action :authenticate_user!, only: [:index]

  def index
    @tweets = Tweet.all.order(created_at: "DESC")
  end

  def show
  end

  def new
    @tweet = Tweet.new
  end

  def create
    @tweet = current_user.tweets.build(tweet_params)
    if @tweet.save
      redirect_to root_path, notice: "ツイートを作成しました"
    else
      flash.now[:alert] = 'ツイートの投稿に失敗しました'
      render new_tweet_path
    end
  end

  private

  def tweet_params
    params.require(:tweet).permit(:text)
  end
end

本物のTwitter同様、ツイート順に表示されるようにしました。crateアクションでは現在ログインしているユーザーしかツイートできないようにcurrent_userメソッドを利用しました。さらにはツイートが成功した時と、失敗させた時を条件分岐させてアラート等が出るように工夫しました。

モデルの紐付け

models/user.rb

has_many :tweets, dependent: :destroy

models/tweet.rb

class Tweet < ApplicationRecord
  belongs_to :user

  validates :text, length: { maximum: 140 }, presence: true
end

ユーザーがたくさんのツイートを作成できるようなメカニズムです。presence: trueとすることで、ツイート内容が空だとツイートできない仕組みです。

実装を通して学んだこと

1. モデルへの紐づけ

前回同様。モデルとのアソシエーションがどういう関係にあるのかということ。modelを作成するときにreferencesを使い、暗黙の了解で、モデルを関連付けした時にはコントローラ内でbuildを使うことを学びました。

2. 重複したTOPページの一括化

重複したTOPページを一括化してルーティングを編集することにより、コードを集約できることを学びました。コードを書く量も減り、効率化できるなと感じました。

3. flash

redirect_toを使う際にはflashは要らず、renderを使う際にはflashが必要だということを学びました。

4. 改行を入れるということ

それぞれファイルの文末には改行を入れるということを学びました。なぜなら、行＋改行で初めて行になるそうです。業界知識としてこのことを学べてよかったです。私の使っているエディタはvscodeですが設定で保存時に文末改行を入れることができます！

感想

前回同様モデルの紐付けを行いました！紐付けに慣れきたなと感じました。重複したビューを一つだけにして、ルーティングを編集するというやり方は非常にためになりました。これからも使っていこうと思います。htmlでつまづいた部分は何もtextが入力されていない時にツイートを送信できないようにするということです。こちらはrequired: 'required'で解決できることを学びました。
次回はコメント機能の作成についてアウトプットしていこうと思います！読んでいただきありがとうございました。

参考記事