【Ruby on Rails】簡単なメモアプリの作成｜部分テンプレートの実装

動画で解説を見る

1 開発環境
2 Ruby on Railsで部分テンプレートの実装手順
3 キーワード

開発環境

Ruby:version 3.1.2
Ruby on Rails:version 7.0.4
Visual Studio Code:version 1.73.0
OS:Windows10

Ruby on Railsで部分テンプレートの実装手順

Ruby on Railsの部分テンプレートは重複するフォーマットはもちろん、javascriptによる非同期通信(ajax)にも使用されています。

今回はメモアプリの作成で使用したコードを用いて解説していきます。

部分テンプレートにする前のインデックスビュー

今回、修正していく前のインデックスビューが下記になります。

<div class="wrapper">
    <div class="container flex-start">
        <div class="col-box-1">
            <h2>メモ一覧</h2>
        </div>

        <% if @memo_new.errors.any? %>
            <div class="col-box-1">
                <h3><%= @memo_new.errors.count %>件のエラーが発生しました。</h3>
                <ul>
                    <% @memo_new.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                    <% end %>
                </ul>
            </div>
        <% end %>

        <div class="col-box-3">
            <%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>
                <div class="memo-header">
                    <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
                </div>
                <div class="memo-center">
                    <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
                </div>
                <div class="memo-footer">
                    <%= f.submit "作成", class: "btn" %>
                </div>
            <% end %>
        </div>
        <% @memos.reverse.each do |memo| %>
            <div class="col-box-3">
                <%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>
                    <div class="memo-header">
                        <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
                    </div>
                    <div class="memo-center">
                        <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
                    </div>
                    <div class="memo-footer">
                        <%= f.submit "更新", class: "btn" %>
                    </div>
                <% end %>
                <div class="memo-other">
                    <%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>
                </div>
            </div>
        <% end %>
    </div>
</div>

</div>

<% if @memo_new.errors.any? %>

<h3><%= @memo_new.errors.count %>件のエラーが発生しました。</h3>

<ul>

<% @memo_new.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "作成", class: "btn" %>

</div>

<% end %>

</div>

<% @memos.reverse.each do |memo| %>

<%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "更新", class: "btn" %>

</div>

<% end %>

<%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>

</div>

<% end %>

</div>

それでは、上記を整理していきながら部分テンプレートを作成していきます。

エラー表示の部分テンプレート

まずはエラー表示はアプリケーションで共通のテンプレートになりますため、「memo_app\app\views\layouts」フォルダ内に部分テンプレートを作成します。

<% if obj.errors.any? %>
    <h3><%= obj.errors.count %>件のエラーが発生しました。</h3>
    <ul>
        <% obj.errors.full_messages.each do |message| %>
        <li><%= message %></li>
        <% end %>
    </ul>
<% end %>

<% if obj.errors.any? %>

<h3><%= obj.errors.count %>件のエラーが発生しました。</h3>

<ul>

<% obj.errors.full_messages.each do |message| %>

<% end %>

</ul>

<% end %>

「@memo_new」というインスタンス変数は「obj」というローカル変数に変更しておきます。

メモの新規投稿フォームの部分テンプレート

次に、メモの新規投稿フォームはメモコントローラー内の機能であるため、「memo_app\app\views\memos」フォルダ内に作成していきます。

<%= form_with model: memo_new, url: ajax_memos_create_path, local: false, method: :post do |f| %>
    <div class="memo-header">
        <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
    </div>
    <div class="memo-center">
        <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
    </div>
    <div class="memo-footer">
        <%= f.submit "作成", class: "btn" %>
    </div>
<% end %>

<%= form_with model: memo_new, url: ajax_memos_create_path, local: false, method: :post do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "作成", class: "btn" %>

</div>

<% end %>

先ほどと同様に「@memo_new」というインスタンス変数を「memo_new」に変更しておきます。

メモの一覧表示の部分テンプレート

次に、メモの一覧表示はメモコントローラー内の機能であるため、「memo_app\app\views\memos」フォルダ内に作成していきます。

<% memos.reverse.each do |memo| %>
    <div class="col-box-3">
        <%= render "memos/show", memo: memo %>
    </div>
<% end %>

<% memos.reverse.each do |memo| %>

<%= render "memos/show", memo: memo %>

</div>

<% end %>

先ほどと同様に「@memos」というインスタンス変数を「memos」に変更しておきます。

<%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>
    <div class="memo-header">
        <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
    </div>
    <div class="memo-center">
        <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
    </div>
    <div class="memo-footer">
        <%= f.submit "更新", class: "btn" %>
    </div>
<% end %>
<div class="memo-other">
    <%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>
</div>

<%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "更新", class: "btn" %>

</div>

<% end %>

<%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>

</div>

「memo」はすでにローカル変数になっているため、その部分は修正せずにおいておきます。

ここのポイントとしては、一覧表示の「list」の中に詳細表示の「show」は部分テンプレートの中に部分テンプレートが入っている状態になっています。

上記のようにすることにより、テンプレートを効率よく構造化することもできます。

インデックス表示で部分テンプレートを呼び出す

最後にインデックスのビューファイルから部分テンプレートを呼び出していきます。

<div class="wrapper">
    <div class="container flex-start">
        <div class="col-box-1">
            <h2>メモ一覧</h2>
        </div>

        <div class="col-box-1">
            <%= render "layouts/errors", obj: @memo_new %>
        </div>

        <div class="col-box-3">
            <%= render "memos/form", memo_new: @memo_new %>
        </div>

        <%= render "memos/list", memos: @memos %>
    </div>
</div>

</div>

<%= render "layouts/errors", obj: @memo_new %>

</div>

<%= render "memos/form", memo_new: @memo_new %>

</div>

<%= render "memos/list", memos: @memos %>

</div>

8行目を参考に解説していきます。

renderメソッドで部分テンプレートを呼び出していきますが、「"layouts/errors"」viewsというフォルダからみたファイル構成で呼び出すファイルを指定しています。

また、「obj: @memo_new」は「obj」というローカル変数に「@memo_new」という情報を代入しているという流れになります。

キーワード

Ruby on Railsで部分テンプレートについて解説してきましたが、いかがだったでしょうか。

アプリケーションの機能が充実するほど重複するテンプレートは多くなってくるため、どのように部分テンプレートを構築するかはとても重要になってきます。

是非、アプリケーションを管理しやすくするために、部分テンプレートを活用してください。