railsチュートリアル　第五章 #Ruby

はじめに

railsチュートリアルで理解しにくいところや、詰まったところを書いていく記事になります。
なので、手順を示す記事とはなっていません。

link_to image_tag

link_toのリンクを画像にしたい場合は、link_to image_tagメソッドを使う。
image_tagヘルパーを使っているので、Railsは該当する画像ファイルを、アセットパイプラインを通してapp/assets/images/ディレクトリの中から探す。
alt属性も表示することができる。
例：

app/views/static_pages/home.html.erb

<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>

Bootstrapを適応させる

bootstrapを使用するにはまず、Gemfileに記載する。

gem 'bootstrap-sass'

またいつもとおり、gemをインストールする。

$ bundle install

ちなみに、rails generateコマンドを実行することでコントローラーごとに分けられたCSSファイルが自動的に生成されるが、これらのファイルを正しい順序で読み込ませるのは至難の技なので、すべてのCSSを1つにまとめる方針を採る。
なのでまず、カスタムCSSファイルを作る。

カスタムCSSファイルの作成

$ touch app/assets/stylesheets/custom.scss

app/assets/stylesheets/ディレクトリに置かれたスタイルシートはapplication.cssの一部としてWebサイトのレイアウトに読み込まれる。
さらに、ファイル名のcustom.scssには.scssという拡張子も含まれている。

app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

上のように@importをすることで、bootstrapを読み込むことができる。

あとはビューファイルの方で、bootstrapデザインにすれば反映されるようになる。

パーシャル

パーシャルを定義すると散らかっているソースをスッキリさせることができる。
例：footer

app/views/layouts/_footer.html.erb

<footer class="footer">
  <small>
    The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

ファイルの先頭にある「_」はパーシャルを使う上での命名ルールとなる。
このパーシャルファイルはrenderを使うことによって、呼び出すことができる。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      #footerを追加
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

名前付きルート

routes.rb

Rails.application.routes.draw do
  root 'static_pages#home'
  get  '/help',    to: 'static_pages#help'
  get  '/about',   to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'
end

上のように、ルートを定義することにより、レイアウトの中で名前付きルートが使えるようになる。
例：

<%= link_to "About", '#' %>

↓

<%= link_to "About", about_path %>

リンクのテスト

ブラウザを立ち上げてルートURLにアクセスし、それぞれのリンクをクリックして確かめることが面倒なので、リンクのテストを作っておく。

下記のコマンドで、テストファイルを作る。

$ rails generate integration_test site_layout

統合テストを書いていく。

test/integration/site_layout_test.rb

require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    #ルートURL (Homeページ) にGETリクエストを送る.
    get root_path
    #正しいページテンプレートが描画されているかどうか確かめる.
    assert_template 'static_pages/home'
    #Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる.
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", help_path
    assert_select "a[href=?]", about_path
    assert_select "a[href=?]", contact_path
  end
end

assert_select "a[href=?]", root_path, count: 2
上のソースの
count: 2
というのは、1つはロゴに、もう1つはナビゲーションバーにあるから。
このようにリンクの個数を調べることもできる。
統合テストは以下のコマンドで実行する。

$ rails test:integration

終わり

パーシャルと統合テスト、SassとAsset Pipelineは初めてだが、必須の知識になるだろうと思う。

次↓
https://qiita.com/jonnyjonnyj1397/items/10cce807bde3183b2608

railsチュートリアル 第五章