本投稿の目的

・Rails学習の議事録です。

学習に使った教材

Udemyの "はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう" を教材として使用しました。

①viewの共通化

・全てのviewの共通箇所を1箇所に集約する方法
・集約ファイル (app/views/layouts/application.html.erb)

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

【解説】
・html.erbファイル共通フォーマットがここに記載
・大抵は,htmlのheadのcss,js読み込みテンプレ文を記載する
・<%= yield %>の部分には,他のhtml.erbが読み込まれる

②partialについて

・共通部分を記載したファイルをpartialファイルという
・例えば,new と edit など共通のviewなどが該当する

【やり方①】
・パーシャルファイルを partial名.html.erb として保存
・(*　" _ " から始めるのに注意)
・viewファイルの共通部分を削除

・下記を記載
・(*名前に" _ "を外すことに注意)

partialを呼び出す側のファイル名.html.erb

<% render partial '名前' %>

【やり方②】
・①のやり方はメンテナンス性が悪い
・(controllerのインスタンス変数に気付き辛い)

記載を下記に修正

partialを呼び出す側のファイル名.html.erb

<% render '名前', locals: {ローカル変数: インスタンス変数} %>

・これによりパーシャルのhtmlにはインスタンス変数ではなくローカル変数が渡される

_partialファイル名.html.erb

<%= form_for ローカル変数 do |f| %>
  共通の内容をここに記載
<% end %>

【やり方③】
・記載を下記に修正

partial導入側のファイル名.html.erb

<% render '名前', locals: {object: インスタンス変数} %>

・objectとすることで,パーシャル名と同様のローカル変数を作成
・これにインスタンス変数を渡す

【やり方④】
・記載を下記に修正

partial導入側のファイル名.html.erb

<% render インスタンス変数 %>

・これは partial名 = ローカル変数時に使用可能
・インスタンス変数の@を除去した変数=ローカル変数=partial名

【Rails】Viewの共通化について

本投稿の目的

学習に使った教材

①viewの共通化

②partialについて