Viewをリファクタリングする方法(パーシャル、カスタムヘルパー )

はじめに

今回はviewをリファクタリングする方法について学習したので、まとめていこうと思います。
具体的にはパーシャルテンプレート（共通化）についてとカスタムヘルパー についてです。
少しでも参考になれば幸いです。

本記事で知れること

☑️viewのリファクタリング方法
☑️パーシャルテンプレートとは&方法
☑️カスタムヘルパーとは&作成方法
※初心者向けな内容になっておりますので、既に意味・作成方法を知っている方であればあまり有益な記事ではないかもしれません。
ご了承ください。

Viewをリファクタリングするには

主に以下二つの方法があります。
①パーシャルテンプレートを作成し、共通化する
②カスタムヘルパーを作成する
他にも方法はあると思いますが、今回はこの二つの方法について、解説していきます。

①パーシャルテンプレート

パーシャルテンプレートとは？

パーシャルを使用すると、レスポンスで表示するページの特定部分をレンダリングするためのコードを別ファイルに保存しておくことができます。
railsガイド

表示するページの特定部分を別ファイルに保存し、呼び出すことができるものになります。

メリット

・ファイルを分割することでコードの可読性が上がる。
・重複しているコードを共通ファイルとして作成し、利用することができる

使い方

手順はテンプレートファイルの作成し、呼び出すだけなのでそこまで難しくはないと思います。

①テンプレートファイルの作成

ファイル名の冒頭は[ _ ]アンダースコアから作成する必要がある。
(例)_user.html.erb
作成したら、そのファイルに共通化したい記述を移動させます。
今回はユーザーのプロフィールを移動させました。
[_user_prof.html.erb]

<%if  @user.image_icon? %>
    <img src="<%= @user.image_icon.url %>" class="img-icon" alt="ユーザーアイコン">
    <% else %>
    <%= image_tag '/assets/default.jpeg' ,class:"img-icon", :alt => 'ユーザーアイコン' %>
<% end %>
<div class="user-text">
    <h5 class="user-name"><%= @user.name %></h5>
    <% if @current_user== @user%>
        <%= link_to("編集", edit_user_path(@user),class:"user-edit-btn btn btn-primary") %>
    <% end %>
</div>

②テンプレートファイルを呼び出す

 <%= render 'user_prof'%>

これで呼び出すことができます。
render 'ファイル名'とすることで、パーシャルしたファイルの内容をレンダリングして表示することができます。
呼び出すときは_不要。
[補足]

ファイル名を指定する

※render 'ファイル名'と挙動は一緒？
render partial:'ファイル名'

render partial: 'ファイル名'

レンダリングする内容のファイルを指定する

layout: 'ファイル名'

render partial: 'ファイル名', layout: 'ファイル名'

ローカル変数を渡す

locals: {変数名: 値}

render partial:'ファイル名',layout:  'ファイル名',locals: {変数名: 値}

注意点

作成するディレクトリの場所が異なる場合

今回はuserディレクトリの中でファイルを作成したが、異なるディレクトリにファイルを作成した場合、render 'ディレクトリ名/user_prof'のようにディレクトリ も指定する必要がある。

②カスタムヘルパー

カスタムヘルパー とは？

複数のビューで共通化したい処理をメソッドとして、作成することのできるもの。
言葉では少しわかりづらいので、早速使い方の説明に移ります。

メリット

・処理をひとまとめにできる
・コードの可読性が上がる
・本来はビューで使用するものだが、コントローラやモデルでも使用することができる

使い方

使い方としては、「カスタムヘルパーを定義」して「ビューで呼び出す」ような手順になります。
カスタムヘルパーはapp/helperディレクトリに作成します。rails g controllerで既に自動で作成されています。
(例)
このような記述があったとして、これをカスタムヘルパーを使用してリファクタリング してみます。

<% if @user.goal.blank? %>
    <h3 class="g-text">目標はまだ決めていません！</h3>
<% else %>
    <h2 class="g-text"><%= @user.goal %></h2>
<% end %>

①カスタムヘルパーを作成

今回は、ユーザーに関するカスタムヘルパーなのでapp/helpers/user_helper.rbに作成します。

module UserHelper
    def goal_text(user)
        if @user.goal.blank?
            "目標はまだ決めていません！"
        else
            @user.goal
        end
    end
end

②カスタムヘルパーを呼び出す

<h3 class="g-text"><%= goal_text(@user.goal) %></h3>

このように、ビューでは一行で表示することができ、リファクタリングすることができました。

注意点

・引数にはインスタンス変数ではなく、ローカル変数を使用する
・helperで定義したメソッドはどのビューでも使用できてしまうため、思わぬ挙動になる可能性がある。
・命名するときは、具体的な名前を使用し、バッティングを避ける。
・一つのカスタムヘルパーが行う処理は、細かく設定すること。
・複数の処理をまとめてしまうと、複雑なコードになってしまうため、いくつかのヘルパーを組み合わせて使用することがベスト。

まとめ

簡単ではありましたが、ビューのリファクタリング方法についてまとめてみました。
パーシャルやカスタムヘルパーを使用することでかなりリファクタリングできるのではないかと思います！
内容に誤りがありましたら、ご指摘お願いいたします。
最後まで読んでいただきありがとうございました！

参考記事

参考になりました。ありがとうございます！
Railsガイド
ヘルパーメソッドを作ろう
カスタムヘルパーってなんぞ？