4
2

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.

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

Last updated at Posted at 2020-11-18

本投稿の目的

・Rails学習の議事録です。

学習に使った教材

Udemyの ["はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう"](https://www.udemy.com/course/the-ultimate-ruby-on-rails-bootcamp/) を教材として使用しました。

①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名

4
2
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
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?