0
0

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.

部分テンプレートを使用する(保守性の高いコードを書く)

Posted at

##前書き
ある程度ポートフォリオが完成してきたところでコードの手直しを行なっていくことにしました。
実際の業務では保守性の高いコードが求められているからです。具体的には同じコードは一つにまとめておくことによって手直しするときに複数直さなくても済むように改善していきます。
書き方を忘れないように備忘録として残しておきます。

##部分テンプレートの使用
ヘッダーは他のページでも繰り返し使用するので部分テンプレートとしてまとめていきます。
部分テンプレートとは、ビューファイルで繰り返し使用するコードを切り出し、再利用する仕組みのことをいいます。
部分テンプレートとして切り出すときに作成するファイルは命名規則として、アンダースコア_を先頭に記述します。
今回の場合、_header.html.erbとなります。
app/views/shared/_header.html.erbディレクトリに作成していきます。

###renderメソッド
renderメソッドは、部分テンプレートを呼び出す際に利用するメソッドのことです。
<%= render "ディレクトリの指定" %>と記述します。
例えばindex.html.erbやshow.html.erbでもヘッダーのコードを使いたい時にrenderメソッドで使い回すことができます。

index.html.erb
<%= render "shared/header" %>

<div id="home-index" class="contents row">
  <h2 class="page-title">Find your favorite!</h2>
  <p class="page-p">歌いたかったあの曲との出会い提供するMY KARAOKE。
  </p>
  <p class="page-p">このページではみんなが歌いたい曲の情報が満載です。
     みんなの曲を見てレパートリーを増やしましょう。
  </p>
省略
_header.html.erb
<header class='top-page-header wrapper'>
  <%= link_to 'MY KARAOKE', root_path, class: "title" %>

  <nav>
    <ul class="main-nav">
      <% if user_signed_in?%>
        <li><%= link_to current_user.nickname, new_user_session_path, class: "user-nickname" %></li>
        <li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "logout" %></li>
      <% else %>
        <li><%= link_to'ログイン', new_user_session_path, class: "login" %></li>
        <li><%= link_to '新規登録', new_user_registration_path, class: "sign-up" %></li>
        <li><%= link_to 'ゲストログイン', users_guest_sign_in_path, method: :post %></li>
      <% end %>
    </ul>
  </nav>
</header>

一行目の<%= render "shared/header" %>よって_header.html.erbのコードを使用することができます。
部分テンプレートを作成したことによってindex以外のページでも同じように使い回すことができます。

show.html.erb
<%= render "shared/header" %>

<div class="main">
  <div class="song-show">
    <table class="detail-table">
      <tbody>
        <tr>
          <th class="show-detail-value">投稿者</th>
          <td class="show-detail-song">
            <%= link_to user_path(@song.user_id) do %>
              <%= @song.user.nickname %>
            <% end %>
          </td> 
        </tr>
省略

今回はわかりやすいようにヘッダーの例を出しましたがもちろんそれ以外も部分テンプレートが使える場面があります。
例えばnewとeditは新規投稿する際にフォームなどはほぼ同じ記述になるので(少なくとも僕の場合は)使えたりします保守性の観点からまとめてあげるほうが後々楽になるのでやっておくほうがいいと思います。

##後書き
とりあえず簡単な部分テンプレートいついてまとめました。 localsオプションを使った部分テンプレートの記事を次回書いてみようかと思っています。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?