【rails】partialをサクっと実装してちょっと覚える


partialは部分テンプレートを使用して、同じパターンの塊を複数生成するのに便利なものです。
eachでもできますが、処理速度がpartialの方が早いらしいですよ。

そんなpartialですが、理解するのに苦戦した記憶があります。
partialを知らなかった頃の自分に読ませたい記事をかけたらなと思います。

使うもの
・Ruby on Rails
・mysql
・haml

$ rails sでハローワールドを表示できる環境を整えてください。

作れるもの


こんな感じのものをpartialで実装します。

[1]controllerを生成する

Tシャツの画像リンクを表示させるプチ実装をして覚えましょうという記事です。
まずはcontrollerを生成します。
$ rails g controller tshirts indexをターミナルで入力し、
tshirts controller と、indexアクションを一緒に生成します。

[2]とりあえずrootをtshirts#indexにしときましょ

# routes.rb
Rails.application.routes.draw do
  root to: 'tshits#index'
end

今回はサクッと実装なので、必要なアクションはこれだけです。

[3]フロントをコピペで実装しときましょ

下記のコードを該当ファイルに書いちゃいましょ。

app/views/tshrts/index.html.haml
%ul
  -# ~~~ ここから ~~~
  %li
    = link_to "https://www.ttrinity.jp/product/5734710", target: :_blank do
      = image_tag "http://okachanblog.com/static/20200315tshirt_list/tshirt_1.jpg", width: '100%'
      %br/
      %span Tシャツの名前
  -# ~~~ ここまで ~~~

上記の「ここから 〜 ここまで」を増やすと、パネルが並びます。
この部分が繰り返し表示されるので、なんとなく覚えておいてください。
target: :_blankは、別タブでサイトを表示させるオプションです。

app/assets/stylesheets/tshits.scss
body,ul{
  margin: 0;
  padding: 0;
}

ul{
  margin: 50px auto;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
}

li{
  list-style: none;
  width: 17%;
  border: 1px #000 solid;
  text-align: center;
  margin: 1%;
}

li a:hover{
  opacity: 0.5;
}

どうでしょうか、ここまでは表示できましたか?

[4]modelを作っちゃいましょ

ターミナルで、$ rails g model tshirtとマイグレート ファイルを生成しましょう。

20200XXXXXXXX_create_tshirts.rb
class CreateTshirts < ActiveRecord::Migration[6.0]
  def change
    create_table :tshirts do |t|
      t.string :title
      t.text :image
      t.text :url
      t.timestamps
    end
  end
end

上記のようにtitle、image、urlを追加して$ rake db:migrateします。
どうでしょう。テーブルは作成できましたか?

[5]作成したテーブルに、手動で情報を入力しちゃいましょう。

面倒だと思う方はコンソールから!コンソールがよくわからない方は、手動で入力しましょう。
下記をコピペでテーブルに情報の流し込みをしましょう。

id title image url created_at updated_at
1 獲物を狙うトラ http://okachanblog.com/static/20200315tshirt_list/tshirt_1.jpg https://www.ttrinity.jp/product/5734710 2020-01-01 00:00:00.000000 2020-01-01 00:00:00.000000
2 アデリーペンギンとスーパーカブ http://okachanblog.com/static/20200315tshirt_list/tshirt_2.jpg https://www.ttrinity.jp/product/2524167 2020-01-01 00:00:00.000000 2020-01-01 00:00:00.000000
3 トリケラトプス http://okachanblog.com/static/20200315tshirt_list/tshirt_3.jpg https://www.ttrinity.jp/product/2864627 2020-01-01 00:00:00.000000 2020-01-01 00:00:00.000000
4 ワニ浮き輪 http://okachanblog.com/static/20200315tshirt_list/tshirt_4.jpg https://www.ttrinity.jp/product/3206455 2020-01-01 00:00:00.000000 2020-01-01 00:00:00.000000
5 ツッパリライオン http://okachanblog.com/static/20200315tshirt_list/tshirt_5.jpg https://www.ttrinity.jp/product/5776816 2020-01-01 00:00:00.000000 2020-01-01 00:00:00.000000

やりやすい、方法で流し込みしてもらって構いません。
私は、このくらいの量だと、手動で流しこんじゃいます。

こんな感じです。(モタモタ...)

[6]テーブルに入れた情報が全部表示されるか見て見ましょう

まずは、controllerで、tshirtsテーブルから情報を全部持って来ちゃいましょう。
下記のようにファイルを修正してください。

app/controllers/tshits_controller.rb
class TshitsController < ApplicationController
  def index
    @tshirts = Tshirt.all
  end
end

とりあえず、タイトルだけ繰り返し表示させてみる。

app/views/tshrts/index.html.haml
- @tshirts.each do |t|
  = t.title

-# ~~~~~~~省略~~~~~~~

上記のようにファイルを修正して、ブラウザで見てみましょう。
邪魔であれば、先ほどペーストしたパネルをコメントアウトしちゃいましょう。

こんな感じに表示されましたか?

[7]部分テンプレートを作っちゃえ

app/views/layouts/_tshirt_list.html.hamlを作成しましょう。
そして、下記のように編集してください。

app/views/layouts/_tshirt_list.html.haml
%li
  = link_to "https://www.ttrinity.jp/product/5734710", target: :_blank do
    = image_tag "http://okachanblog.com/static/20200315tshirt_list/tshirt_1.jpg", width: '100%'
    %br/
    %span Tシャツの名前

部分テンプレートをpartialで表示させましょう。
さて、大詰めですね。
下記のようにファイルを編集しましょう。

app/views/tshrts/index.html.haml
%ul
  = render partial: 'layouts/tshirt_list', collection: @tshirts, as: 'tshirt'

一旦、ここまで。

このように、同じ画像が繰り返されましたか?
次に、テーブルの各カラムを反映させていきます。

[8]テーブルの情報がパネルに反映されるようにしちゃえ

app/views/layouts/_tshirt_list.html.haml
%li
  = link_to tshirt.url, target: :_blank do
    = image_tag tshirt.image, width: '100%'
    %br/
    %span
      = tshirt.title

上記のように、各所にメソッドを書き込んでいきましょう。
なぜtshirt.hogeというメソッドの書き方になのか?
それでは、partialの記述をもう一度みてみましょう。

上記のようになっているので、@tshirtsを中身をtshirtで取り出し、部分テンプレート内で使用しています。

どうですか?実装できましたでしょうか。

おわりに

partialは覚えてしまえばどうってことないですが、
最初はかなり意味不明でした。
説明を読んでもよくわからないタチなので、サクッと実装して勉強できればもっと早くわかったのにな〜と思ったので書いてみました。
省略して書く方法もありますが、ここでは解説しませんので、下記の記事をみてみてください!

railsで部分テンプレートについてまとめてみた