【Ruby on Rails】部分テンプレート・renderメソッドの使い方を丁寧に解説!!

Ruby
スポンサーリンク

みなさんこんにちは!
のむ(@nomu_engineer)です!

今回の記事では、部分テンプレート及び、renderメソッドの使い方をまとめました!
かなり細かいところまで掘り下げるので、知識を深めたい方は読むことをお勧めします!

この記事を読むメリット
・部分テンプレートの使えるようになる

・部分テンプレートの知識が深まる
・renderメソッドの文法を細かく知ることができる

この記事を読むおすすめの読者
・プログラミング初心者
・駆け出しエンジニア
・部分テンプレートの知識を深めたい方

それでは早速本題の方に入っていきたいと思います!

部分テンプレートとは??

部分テンプレートとは、複数のビューファイルの中で使われている同じ記述を一つのファイルにまとめたものになります。

部分テンプレートを用いるメリットは以下の通りです。

・コードの記述量が減る
・編集の際に一つのファイルの編集だけで済む
・ファイルをみただけでどの部分の記述なのかわかる

部分テンプレートの作成の仕方

部分テンプレートの作成は、ビューファイルとして作成します。
viewファイル として作成するときは命名規則として、ファイル名の頭にアンダースコアをつけないといけないので注意が必要です。

例として「_footer.html.erb」のようにして部分テンプレート用のファイルを作成します。

部分テンプレートの呼び出し

部分テンプレートは作成しただけではもちろん使えないので、呼び出す必要があります。

部分テンプレートの呼び出しは、renderメソッドを使います。
下記のように記述して呼び出します。

render "ファイル名"
    or
render :アクション名  

ファイル名を使って呼び出す時は、指定したテンプレートファイルを呼び出します。
アクション名を使って部分テンプレートを呼び出した時は、指定したアクションのテンプレートファイルを呼び出します。

renderメソッドには様々なオプションがあります。
明示的に部分テンプレートを呼び出したい時は、partialオプションを使います。

partialオプション

partialオプションは、renderメソッドで使用できるオプションです。
partialオプションをつけ、部分テンプレート名を指定することで、該当のテンプレートを明示的に呼び出すことができます。

render partial: "ファイル名"

partialオプションは、部分テンプレートの呼び出しの際に使うのですが、強調するためだけなので、つけなくても、部分テンプレートの呼び出しは行うことができます。

それではなぜ、partialオプションは存在するのでしょうか??

それは、partialを使って部分テンプレートを明示的に呼び出さないと、エラーが出るオプションがrenderメソッドには存在するからです。

その一つが、localsオプションです。

localsオプション

localsオプションとは。renderメソッドで使えるオプションです。
localsオプションをつけることで、部分テンプレート内で使う変数を定義することができます。

部分テンプレート内で変数を使う場合はどこかで変数を定義する必要があります。
なので、localsオプションを用いて、変数を定義します。

記述の仕方は以下の通りです。

<%= render partial: "ファイル名", locals: { "部分テンプレート内で使う変数": "変数に入れる値" } %>

<%= render partial: "message", locals: { post: "hello!" } %>

<%= render partial: "message", locals: { message: @message } %>

上記のように記述することで、変数の定義をすることができます。
3行目の「locals: { message: @message }」は、messageにインスタンス変数を代入しています。

インスタンス変数を代入することで、部分テンプレート内でもインスタンス変数の値を使用する処理を記述することができます。

変数は複数定義することも可能なので、頭の片隅に入れておきましょう!

違うフォルダの部分テンプレートを読み込む場合

renderメソッドを記述したviewファイルとは違うフォルダ内に存在する部分テンプレートを呼び出す場合は、そのフォルダ名も明記する必要があります。

「フォルダ名/ファイル名」のように記述します

render partial: "messages/message"

上記のように記述することで、呼び出す側のビューファイルとは違う、messagesフォルダに存在する、部分テンプレートのmessageファイルを呼び出すことができるのです。

実際の記述例

部分テンプレートをどのようにして使うのか、記述例を参考にしながら、確認していきましょう!

今回はindexアクションと、showアクションで使うビューを例にとって説明したいと思います。

下記のコードはコントローラー内の記述です

こちらの画像がindex.html.erbの画像になります

そして、次にこちらがshow.html.erbの画像になります。

このコードはツイートの一覧の表示と、各ユーザーごとの専用ページのツイート一覧の表示のための記述になります。

ご覧の通り、「index.html.erb」と「show.html.erb」のファイルで同じ記述をしています。

なので、この記述を部分テンプレートに置き換えることができそうですね!

「_tweet.html.erb」という部分テンプレートファイルを作成し、共通する部分を記述します。

上記のコードを「_tweet.html.erb」の部分テンプレートに記述し直しました。

こうすることで、「index.html.erb」及び、「new.html.erb」の記述は以下の通りになります

たったの3行です。笑
とてもシンプルになりましたね。

このようにして部分テンプレートを用いることで、記述をシンプルにし、さらに、編集する時も部分テンプレートファイルの1ファイルの編集のみで済みます。

上記のコード内のlocalsオプション内に「tweet」というワードが二つ並んでいますが、これについて戸惑った方もいるかもしれないので、少し解説します。

まず、左側の「tweet」は部分テンプレート内で使用する、変数になります。
変数の中身は、右側の「tweet」です。

右側の「tweet」はコントローラーで定義した「@tweets」をeach文を用いて取り出した「tweet」になります。
したがって、右側の「tweet」は一つのツイートの情報が入っている状態です。

それを、部分テンプレート内で使用する「tweet」という変数に代入しています。

collectionオプション

上記の3行にまとめた記述はさらに省略して、1行で記述することが可能です。
驚いた方もいるかと思いますが、可能なんです!笑

そのためにはcollectionオプションを使用します。

collectionオプションとは、collectionオプションに指定した変数の要素の文だけ部分テンプレートを繰り返し表示することができるオプションです。

よく使われるのが、コントローラーで定義した、インスタンス変数です。
もっと言うならば、「@tweets = Tweet.all」のようにレコードを取得して、インスタンス変数に代入したものをcollectionオプションに適用することができます。

実際に上記のコードを1行にしてみたいと思います!

上記のようにして置き換えることができます。
「@tweets」で変数を指定した場合は、部分テンプレート内のファイルでは、その単数形である、「tweet」を変数として扱うことになります。

collectionオプションを使う場合は、partialは必要になってくるので気をつけましょう!

asオプション

asオプションとは、部分テンプレート内で使用する変数の名前を変更することができるオプションです。

実際にコードを見てみましょう!

このように記述することで、「@tweets」に入っている要素を「hoge」に代入して、部分テンプレート内では「hoge.name」「hoge.content」のようにして使うことができるようになります。

更に省略しよう

collectionオプションは更に省略することができるんです!

この記述をさらに省略すると、以下の記述になります。

だいぶさっぱりしましたね。
最初のコードと比べてもだいぶ記述の量は減って、スマートさの極に達した気分です。笑

この最終形態でも、最初の記述と同じように要素の数だけ繰り返し、部分テンプレートを表示することが可能です。

each文と collectionオプションどっちを使うべき??

each文と collectionオプションは変数の数だけ繰り返し表示すると言う点では、同じです。
では実際にどちらを使うのが好ましいの??と思った方ももしかしたらいるかもしれません。

僕の答えは、collectionオプションを使うことをお勧めします。

理由は、部分テンプレートの呼び出し方の違いです。

要素が1000個あったとします。

each文だと1000回部分テンプレートの呼び出しが必要なのですが、collectionオプションの場合は、1回の呼び出しで、部分テンプレートを呼び出すことができます。

つまり、collectionオプションの方が処理スピードが早くなります。

このように、処理スピードが速いことをパフォーマンスが良いと言って、 collectionオプションの方がパフォーマンスが良い、と言うことになります。

なので、繰り返し部分テンプレートを呼び出す場合は、できるだけ collectionオプションを使用しましょう!

最後に

以上が部分テンプレートについての解説です!

最後にまとめて終わりたいと思います。

・部分テンプレートとは、複数のファイルで重複する記述を、一つのviewファイルにまとめたもの

・ファイルの頭にはアンダースコアをつける

・記述量の減、編集、可読性の向上などのメリットがある

・renderメソッドを用いて呼び出す

・繰り返し、部分テンプレートを呼び出す時は、なるべく collectionオプションを用いる

部分テンプレート、及びrenderメソッドはかなりよく使うので、抑えておきましょう!!

ありがとうございました!

大いに参考にした記事
こちら

コメント

タイトルとURLをコピーしました