2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[rails]部分テンプレートの作成方法

Last updated at Posted at 2020-08-03

#部分テンプレートとは
「部分テンプレート」は、複数のページで共通して利用できるViewファイルのことです。
複数のファイルで重複しているコードを一つのファイルにまとまることで、修正時に一箇所だけの修正で済んだり、コードの記述が少なくなり可読性が高くなります。

手順はざっくりこんな感じです。
1.共通化できる部分を探し出す
2.部分テンプレートファイルを作成
3.部分テンプレートファイルに共通化部分を記述
4.部分テンプレートファイルを呼び出す

##1.共通化できる部分を探し出す
そのままですが、重複している箇所を探す作業です。

##2.部分テンプレートファイルを作成
ファイル名の先頭にアンダースコア( _ )付きのerbファイルが、部分テンプレートファイルとして認識されます。今回は投稿機能を部分テンプレート化で見ていきます。
app/views/books/_newform.html.erb

##3.部分テンプレートファイルに共通化部分を記述
共通部分を切り出し、ファイルに貼り付けます。
基本的に部分テンプレートファイルではローカル変数(@がないやつ)を使います。
部分テンプレートファイル内でインスタンス変数(@がついてるやつ)を利用すると、controller側でインスタンス変数の名前や挙動を変更したとき、部分テンプレート側も変更しなければいけなくなるからです。

app/views/books/_newform.html.erb
<%= form_for(book) do |f| %>
	<div class="field row">
		<%= f.label :title %><br>
		<%= f.text_field :title, class: "col-xs-3 book_title" %>
	</div>
	<p></p>

	<div class="field row">
		<%= f.label :body %><br>
		<%= f.text_area :body, class: "col-xs-3 book_body" %>
	</div>

	<div class="actions row">
		<%= f.submit class: "btn btn-primary col-xs-3" %>
	</div>
<% end %>
</div>

##4.部分テンプレートファイルを呼び出す
呼び出す時の書き方は以下の通りです。
なお、呼び出すときは部分テンプレートのアンダースコアは省略します。

<%= render [部分テンプレートファイルの指定], [ローカル変数]:[渡す値] %>
app/views/books/index.html.erb
<%= render 'books/newform', book: @book %>
2
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?