作って学ぶRuby on Rails Vol.19 パーシャルを活用しよう!


作って学ぶRuby on Rails Vol.19 パーシャルを活用しよう!
目次
  1. パーシャル

パーシャル

までにModelを利用したCRUDのC,R,Uを実装してきましたが、DであるDelete(データ削除)の前にパーシャルという機能について学習していきます。前項

本来であればCRUDのDまで一気に学習を進められれば良いのですが、RubyonRailsで用意された、パーシャルという機能を用いる場面が出てきたのでここで解説しておきます。

本カリキュラムを学習し始めたあたりで、RubyonRailsにおける3つの重要事項というのを学習しましたが、その内の1つであるDRY(Don’t repeat Yourself

これは、「同じ記述を繰り返さない」という意味なのですが、実は前項で同じ記述を繰り返してしまっています。前項で、app/views/users/edit.html.erbの内容がapp/views/users/new.html.erbのコピーだというところです。

そこで利用するのが、パーシャルという機能です。

パーシャルを利用することで、Viewでの似たようなコードを一つにまとめることができます。

まず、app/views/users/edit.html.erbとapp/views/users/new.html.erbを開き、内容が同じであることを確認して下さい。

続いて、app/views/users/ディレクトリ配下に_form.html.erbというファイルを作成して下さい。

※パーシャルのファイル名の頭にはアンダースコア(アンダーバー)を付加します。

Ruby_on_Rails_パーシャル1

_form.html.erbの内容として、app/views/users/edit.html.erbまたはapp/views/users/new.html.erbの内容をコピーして貼り付けてください。

※3つのファイルの内容が同じになるように。


<%= form_for @user do |f| %>
  <div>
  <%= f.text_field :name %>
  </div>
  <div>
  <%= f.select :gender, User.genders.keys.to_a %>
  </div>
  <div>
  <%= f.date_select :birthday, start_year: 1980, end_year: Date.today.year %>
  </div>
  <div>
  <%= f.text_field :hometown %>
  </div>
  <div>
  <%= f.text_area :remarks %>
  </div>
  <div>
  <%= f.submit "送信" %>
  </div>
<% end %>

次に、下記のコードをapp/views/users/edit.html.erbと、app/views/users/new.html.erbに記述して下さい。

app/views/users/edit.html.erb

app/views/users/new.html.erb

上記コードの意味としては、renderというメソッドを使用し、引数にViewの名前を指定することでその内容を表示します。引数のView名には拡張子と名前の先頭のアンダースコア(アンダーバー)を除いた状態で指定して下さい。また、パーシャル対象のファイルが呼び出し側と異なるディレクトリに配置されている場合は、下記のようにapp/views以下のパスで記述します。

※今回は呼び出し側と同じディレクトリにパーシャルを作成しているので記述はformだけで問題ありません。

ブラウザで確認し、ユーザー情報登録画面とユーザー情報更新画面が表示できれば成功です。もし、表示されない場合やエラーがある場合は記述が間違っている可能性があるので、再度確認して下さい。

パーシャルの説明としては以上になりますが、今後もDRYの原則に従い、Viewでの同じような記述はパーシャルを利用して1つにまとめることを意識しましょう。

NEXTLESSON削除機能を実装しよう!削除機能を実装しよう!

PREVLESSONユーザー登録画面を作り込もう!ユーザー登録画面を作り込もう!

目次-Ruby&RubyonRailsテキスト目次目次-Ruby&RubyonRailsテキスト目次


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp