Rails基礎⑥　ビューの作成

ビューの作成

例えば、postsコントローラーのindexアクションに対応するviewはapp/view/posts/index.html.erbというファイルを作成する。

ERBとは？

Railsが用意しているテンプレートエンジンのこと。

これを使用することで、 <% %>でRubyのソースコードとして実行することができたり、<%= %>とすることで、実行結果(コントローラーで定義したインスタンス変数等)が使用できるようになります。

記述ルール

www.code-magagine.com

viewの記述

controllerに

def index
  @posts = Post.all.order(created_at: 'desc')
end

とあった場合、@postsに取得したデータが入っている。

Post.allは内部で

SELECT "posts".* FROM "posts"

というSQLが発行されているし、上記のPost.all.order(created_at: 'desc')では、

SELECT "posts".* FROM "posts" ORDER BY "posts"."created_at" DESC

というSQLをActiveRecordが代わりに発行してくれている。

そして、app/view/posts/index.html.erbに

<h2>My Posts</h2>
<ul>
    <% @posts.each do |post| %>
    <li>
        <%= post.title %>
    </li>
    <% end %>
</ul>

とすると、以下のようなページが出来上がる。

f:id:hpsuzucat:20201020142939p:plain

rootパスの設定

先程のページはURLの最後に/postsをつけなければいけないが、

そのページがメインになる場合はrootパスに設定してあげることで、その必要がなくなる。

routes.rbにrootを設定する。

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :posts
  
  root 'posts#index'　#追加
end

基本レイアウトの設定

特に指定がない場合、アプリケーション全体でapp/views/layouts/application.html.erbというファイルが読み込まれる。

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

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

  <body>
    <%= yield %>
  </body>
</html>

viewで書いたコードは上記の<%= yield %>の部分で読み込まれる。

また、CSSはapp/assets/stylesheets/application.cssが読み込まれる。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myblog</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>

application.css

 .container {
     width:400px;
     margin: 20px auto;
 }
 
 body{
     font-family: Verdana, sans-serif;
     font-size: 14px;
 }
 
 h2{
     font-size: 16px;
     padding-bottom: 10px;
     margin-bottom: 15px;
     border-bottom: 1px solid #ddd;
 }
 
 ul > li {
     margin-bottom: 5px;
 }

とすると、以下のように表示されるようになる

f:id:hpsuzucat:20201020152515p:plain

SuzuBlog

webのお勉強はじめたばかりの初心者。備忘録