Railsで部分テンプレートの使い方

部分テンプレートを使う目的


同じHTML構造の部分を共通化し、コードの無駄をなくしていくことと、どのファイルでどんな処理や表示をさせているのかわかりやすくする為に使用する。


メリット


  • HTML構造を他のビューで使い回すことができるので修正がしやすくなる
  • 繰り返し書かないといけないコードを少なくできる

使い方


①部分テンプレートファイルを作成する

フォルダ:app/views/tweets/_tweet.html.erb

ファイル名の最初にはアンダーバー(_)をつけること!

赤字以降の部分は自身で名前を決定できます。


②作成したテンプレートファイルに繰り返し使うコードを書いていく

多分ここは、別ファイルで作成したコードを切り取って貼り付けすることが多いと思います。


③部分テンプレートを呼び出す記述を別ファイルに記述する

例えば、app/views/tweets/index.html.erbと言うファイルに部分テンプレートを記載したい場合はこう記述します。

<%= render partial: "tweet", local:{tweet: tweet} %>

上のように<%= %>で囲って記述することで部分テンプレートをよびだすことができます。

では、メソッドについて説明します。


renderメソッド:部分テンプレートを呼び出すメソッドです。


partialオプション:これはどの部分テンプレートを呼び出すのかを指定しています。上のコードで呼び出されるのは「_tweet.html.erb」となります。


localsオプション:部分テンプレート内でインスタンスを代入した変数を使用できます。


コロン(:)の左が変数名で、右が値を意味します。

以下に例を示します。

<% @tweets.each do |tweet| %>
 <%= render partial: "tweet", locals:{tweet: tweet, st: "ひまだ"} %>
<% end %>
#部分テンプレート側のコード
<p class="text"> 
 <%= tweet.text %> #ここでlocalsオプションの変数tweetを呼び出す
</p>
   <%= st %> #ここでlocalsオプションの変数stを呼び出す

すると下図のような表示が現れます。

それぞれのツイートにデータベースに入っていた値と、文字列”ひまだ”が表示されました。

「index.html.erb」でlocalsオプションで指定した変数の値が、部分テンプレート「_tweet.html.erb」に記述した<%= tweet.text %>と<%= st %>に入ってきているからです。


まとめ


  • 部分テンプレートを使うと、修正や繰り返し使うコードを少なくできる

toyohiro

製造業で働く29歳。2019年6月からドットインストールでプログラミング学習開始。webアプリケーション製作をしてみたいと思い、2020年2月からrubyとrailsを学習中。今、目指していることはテレワークができるようになること。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です