sugulogの日記

Rails、showアクション!投稿の詳細を表示しよう!!

f:id:sugulog:20201014032031p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、Railsのshowアクションということで

  • 投稿の詳細表示

について簡単に解説します!!

その為このブログを読むことで、showアクションについて理解できるのはもちろん、詳細表示機能の実装についての理解も深まります。

是非最後までご愛読ください。

 

今回は、

  • 詳細表示ページの実装

  • before_actionメソッド

の順で解説していきます。

また、前回のブログの内容を引き継いで記述しています。

そのため、前回のブログを必ず1度読んでからお読みください。 

sugulog.hatenadiary.jp

では早速、みていきましょう!!

詳細表示ページの実装

f:id:sugulog:20200920151157j:plain

 詳細表示にはshowアクションを使用します。

まず始めにルーティングですが、以下のように記述しました。

f:id:sugulog:20201014042457p:plain

showアクションを追加しました...と言いたいところですが、今回でresourcesに含まれる7つのアクション全てを使用することになりました。
そのためonlyオプションで限定する必要がなくなったので、tweets以降の記述を削除しています。

次に投稿一覧ページに詳細ボタンを、以下のように追加しました。

f:id:sugulog:20201014044712p:plain

10行目に注目してください。

 リンク先のURLとしては、Prefixを使用しています。

rails routesで確認しましょう。

また詳細表示する際は削除などと同じく、どのツイートかを区別する必要があります。

そのため引数でtweet.idを渡しています。

では次にコントローラーですが、以下のように記述しました。

f:id:sugulog:20201014045054p:plain

28行目〜30行目に注目してください。

destroyアクションなどと同じくlink_toから送られてきたidをparamsで受け取り、findメソッドで該当するデータを1つ取り出しています。

その際showアクションでは、ビューでインスタンス変数を使用したいため定義しています。

そして詳細表示ページのビューは、以下のように記述しました。

f:id:sugulog:20201014045731p:plain

基本的には一覧表示ページと同じ記述です。

しかし、大きく違う点が1点あります。

その大きく違う1点は、コントローラーでのデータ取得の際にallではなくfindで取得しているため、ビューに表示する際にeachする必要がなく、インスタンス変数.カラム名で表示しているところです。

@tweetには該当するidのデータが代入されるので、詳細ボタンを押されたツイートのデータが表示されるという流れです。

実際に確認してみましょう!

f:id:sugulog:20201014051000g:plain

投稿一覧ページでは投稿されている様々なツイートを見ることができましたが、詳細ページでは詳細ボタンを押されたツイートのみが表示されており、他のツイートが表示されていないことが確認できたと思います!!

・before_actionメソッド

コントローラーで定義されたアクションが実行される前に行う共通の処理を定義するメソッドのこと。before_action :メソッド名で定義する。

before_actionを使用することで、コントローラー 内の記述をまとめることができます。

今回はeditアクションとshowアクションに共通して記述されている、@tweet = Tweet.find(params[:id])をbefore_actionを使いまとめてみました。

f:id:sugulog:20201014141625p:plain

まずは3行目に注目してください。

before_actionを使い、 コントローラーで定義されたアクションが実行される前に行う共通の処理を定義しています。

またその際にonlyオプションを使い、editとshowアクションのみに実行されるよう制限をかけています。

そして今回はコントローラーで定義されたアクションが実行される前に行う共通の処理を、tweet_idというメソッド名で定義しています。

tweet_idは39行目〜41行目で定義しています。

内容はeditとshowアクションで定義されていた、@tweet = Tweet.find(params[:id])です。

private以下に記述することにより、tweetsコントローラー(対象クラス)以外では使用できないように制限をかけています。

この結果、editとshowアクションに記述してあった、@tweet = Tweet.find(params[:id])の記述を削除することができ、before_actionでまとめることができました。

before_actionはコントローラーで定義されたアクションが実行される前に実行されることをしっかり押さえましょう!

因みにafter_actionと記述するとコントローラーで定義されたアクションが実行後に実行される共通の処理を定義することができます。

では最後に、以前と同じ動きでedit、showアクションが動くかだけ確認しましょう!!

 

以上、今回のブログでした。

showアクションについて理解でき、詳細表示機能の実装についての理解も深まりましたか??

今回までのブログを通して、根幹である7つのアクション全てを学習しました。

後はこのアクションをどのように利用していくかです。

例えば、今回のアプリケーションではnewとcreateでツイートを作成しましたが、コメントやチャットなども作成できます。

日々の生活で様々なサービスに触れる中、少しその裏側も想像してみましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!