部分テンプレートを使って記述を楽にしよう

WEBアプリケーション作成をしようとプログラミングを学んでいるとファイルは違うけど中身の記述は同じ記述をするファイルを作成することが多々あります。

毎回同じコードを入力するのがめんどくさいので部分テンプレートを使ってコードを使い回しする方法を紹介します。
今回はRubyonRailsのフレームワークを使用してWEBアプリを作成する際に使用するrenderメソッドについて解説していこうと思います。

今回はWEBアプリでユーザーが画像やテキストを投稿するWEBアプリ作成する際に新規投稿フォームと編集フォームの中の形が同じ場合を想定して記述していきます。

部分テンプレートなしver.

new.html.erb　　＃新規投稿ページ

<div class="contents">
  <div class="content">
    <h3>投稿する</h3>
    <%= form_with(model: post, local: true) do |form| %>
    <%= form.text_field :image, placeholder:"Image" %>
    <%= form.text_area :text, placeholder:"text" , rows: "10" %>
    <%= form.submit "SEND" %>
    <% end %>
  </div>
</div>

edit.html.erb　　＃編集ページ

<div class="contents">
  <div class="content">
    <h3>編集する</h3>
    <%= form_with(model: post, local: true) do |form| %>
    <%= form.text_field :image, placeholder:"Image" %>
    <%= form.text_area :text, placeholder:"text" , rows: "10" %>
    <%= form.submit "SEND" %>
    <% end %>
  </div>
</div>

form部分が同じなのでをrenderを使って楽するコードに変える
renderメソッドにparticalオプションで読み出す部分テンプレートディレクトリ、ファイルを指定する。
locals: { 変数名: 値 }のオプションをつけて部分テンプレート内で使う引数を渡すことができる。

先頭に_(アンダーバー)を付けたテンプレート用ファイル名に
共通の処理を記述する。

_form.html.erb　　　　＃form部分を記述するテンプレートファイル

    <%= form_with(model: post, local: true) do |form| %>
    <%= form.text_field :image, placeholder:"Image" %>
    <%= form.text_area :text, placeholder:"text" , rows: "10" %>
    <%= form.submit "SEND" %>
    <% end %>

new.html.erb　　＃新規投稿ページ

<div class="contents">
  <div class="content">
    <h3>投稿する</h3>
    <%= render partial: "form", locals: { post: @post} %>
  </div>
</div>

edit.html.erb　　＃編集ページ

<div class="contents">
  <div class="content">
    <h3>編集する</h3>
    <%= render partial: "form", locals: { post: @post} %>
  </div>
</div>

それぞれのファイルの記述がシンプルになり可読性や保守性が向上するのでぜひ覚えておきたいメソッドです。
rails以外のフレームワークなどにもこういった記述はあるようなので今後は他の言語を学習する際にまた記事にしていきたいと思います。