はじめに
こんにちは。アメリカで独学でエンジニアを目指している者です。
現在、Ruby on Rails Tutorialを使ってRailsを勉強しており、学んだことを忘れないように振り返りの記事を書いてみました。
第5章は、これまでの章よりも内容が盛りだくさんでした。
レイアウトを作成する
これまではRailsの内部について学習してきましたが、今回はBootstrapというフレームワークやCSSを中心に扱う章となっています。
ナビゲーション
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<% link_to "sample app",'#', id: "logo" %>
<nav>
<ul class = "nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
この中でも
<% link_to "sample app",'#', id: "logo" %>
については、Railsのヘルパーを用いてHTMLのアンカータグ(a)を作成するもので、以下のような意味があります。
- 第一引数: リンクテキスト（ここをクリックすると第二引数のリンク先に飛ぶ）
- 第二引数: URL（今回はダミーで # を指定）
- 第三引数: オプションハッシュ（今回はCSSのid属性にlogoを指定）
Bootstrapをインストール
Ruby on Railsでは、CSSをより簡単に書くためのツールがあると友人から聞いていましたが、おそらくそれがBootstrapのことだろうと思って進めました。
BootstrapではLESSというCSSメタ言語が使用されているようですが、RailsのデフォルトはSass言語を使う設定になっているようです。
また、Bootstrapを利用するとレスポンシブデザインを簡単に実装できるうえ、CSSを一から書くよりも手軽に“それっぽい”見た目が作れるので、とても感動しました。
パーシャル
上記のヘッダー部分は少し長く散らかっているので、ビューにおいて再利用できる「パーシャル」という機能を使って整理していきます。
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
これで、ヘッダーがだいぶすっきりしました。あとは、app/views/layouts/_header.html.erbを新規作成し、先ほどのヘッダー内容を移します。
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<% link_to "sample app",'#', id: "logo" %>
<nav>
<ul class = "nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
同様にapp/views/layouts/_footer.html.erbも作成し、app/views/layouts/application.html.erbにフッターを読み込むようにしましたが、ここで不具合が発生しました。
なんと、CSSが更新されなくなってしまったのです。
いろいろ調べた結果、以下の記事にたどり着きました。
どうやら、publicディレクトリ下にassetsディレクトリが生成され、キャッシュとして機能していたことが原因のようでした。
RailsのURLからPath変更
今までのコードは下記のように書いていました。
Rails.application.routes.draw do
root "static_pages/home"
get "static_pages/home"
get "static_pages/help"
get "static_pages/about"
get "static_pages/contact"
end
しかし、root_path や home_path のように呼び出せるほうがコードの保守性が高いので、以下のように修正しました。
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
上記によって名前付きルーティングが使えるようになり、URLを直接指定する必要がなくなりました。テストやヘッダー、フッターも以下のように書き換えます
require "test_helper"
class StaticPagesControllerTest <ActionDispatch::IntegrationTest
test "shouldgethome" do
get root_path # ここを変更
assert_response :success
assert_select "title", "RubyonRailsTutorialSampleApp"
end
test "shouldgethelp" do
get help_path # ここを変更
assert_response :success
assert_select "title", "Help| RubyonRailsTutorialSampleApp"
end
test "shouldgetabout" do
get about_path # ここを変更
assert_response :success
assert_select "title", "About| RubyonRails TutorialSampleApp"
end
test "shouldgetcontact" do
get contact_path # ここを変更
assert_response :success
assert_select "title", "Contact| Rubyon Rails TutorialSampleApp"
end
end
まとめ
前回よりも新たに学ぶ内容が多く、CSSが更新されないトラブルが発生した際は大変でしたが、何とか解決できてよかったです。
現在6章を読んでいるのでまたでき次第記事にしようと思います。