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

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

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


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

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

#作れるもの
![d6941f061beebf513046f5abd5ff8a48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/488a166e-b3f5-3b35-1f29-aba0b7fdf869.gif)
こんな感じのものをpartialで実装します。

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

# [2]とりあえずrootをtshirts＃indexにしときましょ
``` ruby
# 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;
}
```

![b4c25ce9b91bb1bd328a7813bf8ddb26.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/3ac473e7-2b9b-a1f3-457e-834354dcdbda.gif)


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

# [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|

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

![3a03835fa8541d90bdef4ef4552d7f7e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/f1902029-7b26-23e5-715e-bd8e703e38f5.gif)

こんな感じです。（モタモタ...）

# [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

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

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

<img width="793" alt="eb89eb7882d77c647d3b6b390fa9899d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/78fc88a4-a2bd-a476-fc94-d75f15662149.png">

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

# [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'
```

一旦、ここまで。
<img width="1439" alt="1f2823385e322ed2cc5a8d1a8d6e1e14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/ce446477-0b43-82ff-43ec-561ebcba2c79.png">

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

# [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の記述をもう一度みてみましょう。

![4676e9b805cf42003b474ebca4d8c983.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/3c2f7a31-69f5-c9ba-4ad9-17fba27d1f05.png)


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

![d6941f061beebf513046f5abd5ff8a48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480700/22666ff2-4f15-73fb-32cb-d87c2928976d.gif)


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

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

[railsで部分テンプレートについてまとめてみた](https://qiita.com/taca10/items/dd4a0eae6864e2bdbf3a)