More than 1 year has passed since last update.

railsチュートリアル5章まとめ

Posted at 2023-08-05

目的

サンプルアプリケーションに
Bootstrapフレームワークを組み込み、カスタムスタイルを追加、修正する

5.1　構造を追加する

・BootStrapとは
HTML/CSSフレームワークの一種。
Web制作に必要なパーツを汎用化し、ひとつにまとめたパッケージのようなもの

5.1.1　ナビゲーション

サンプルアプリケーションにリンクとスタイルを追加するために、サイトのレイアウトファイルapplication.html.erb（リスト 4.3）にHTML構造を追加し、レイアウトファイルを更新する

・実際のコード
headタグに続くセクションには、サイトのロゴを表示するheader、divタグによるいくつかの領域、ナビゲーションリンクのリストがある

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

・headerタグ
ページの上部に来るべき要素を表す

<header class="navbar navbar-fixed-top navbar-inverse">

navbar、navbar-fixed-top、navbar-inverseという3つのCSSクラスがスペース区切りで与えられている

・リンクを生成
ERBコード

<%= 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>

RailsがERBを評価し、レイアウトを描画すると、上のリストは次のように置き換わる

<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Log in</a></li>
  </ul>
</nav>

・リンクを生成するために、Railsヘルパーのlink_toを使う

<%= link_to "sample app", '#', id: "logo" %>

第1引数はリンクテキスト、第2引数はURL、第3引数はオプションハッシュ

・レイアウトの最後の部分は、メインコンテンツ用のdiv

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

・image_tagヘルパー

<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200"),
                      "https://rubyonrails.org/" %>

シンボルを使ってalt属性やwidth属性などを設定できる。
画像を表示するためには、rails.svgというRailsのロゴ画像ファイルを加える必要がある

・Rubyのオプション引数とは
Rubyにおけるハッシュのように自由にキーワードと値のペアで引数を記述し、それを引き渡せる機能
そして引き渡した引数はメソッドの内部でハッシュのように扱える

5.1.3 パーシャル（partial）

パーシャルとは
ビュー画面を共通化するための部品

<!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" %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

renderと呼ばれるRailsヘルパー呼び出しだけを使って、ヘッダーの情報を置き換えている
app/views/layouts/_header.html.erbというファイルを探してその内容を評価し、結果をビューに挿入

<%= render 'layouts/header' %>

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

・命名規則
_header.html.erbの先頭にあるこのアンダースコアは、パーシャルで使う普遍的な命名規約であり、一目見ただけでディレクトリ中のすべてのパーシャルを識別することが可能になる

5.2 アセットパイプライン

・アセットパイプラインとは
開発作業がしやすいようにファイルを分割して、
コーディングができるようにしつつ、最終的に1つのファイルに連結・圧縮する仕組み。

・メリット
本番のアプリケーションで効率的になるように最適化されたアセットを自動的に生成できる
アセットパイプラインがすべてのスタイルシートを結合して1つのCSSファイルapplication.cssにまとめます。さらに、それらのファイルすべてに対して不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化します。これにより、開発環境と本番環境のどちらにもベストな環境を提供します。

・3つのディレクトリ
Railsのアセットパイプラインでは、静的ファイルを目的別に分類する、
標準的な3つのディレクトリが使われている

app/assets: 現在のアプリケーション固有のアセット
lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット（デフォルトでは存在しない）

・マニフェストファイル
アセットディレクトリに配置された静的ファイルを
どのように1つのファイルにまとめるのかをRailsに指示することができる

・プリプロセッサエンジンとは
.erbファイルをHTMLに変換してくれるもの

・Sass
スタイルシートを記述するための言語
SCSSというフォーマットに対応

・SCSSはCSSに新しい機能を追加したもの
・ネスト
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: #fff;
text-decoration: none;
}
}

変数
$light-gray: #777;
.
.
.
h2 {
.
.
.
color: $light-gray;
}
.
.
.
footer {
.
.
.
color: $light-gray;
}

5.3レイアウトのリンク

・名前付きルーティング

<a href="/static_pages/about">About</a>
↓
<%= link_to "About", about_path %>

5.3.2 RailsのルートURL

・ルートURLとは
ルートディレクトリを起点として、位置を表す記述形式

今までは

root "application#hello"

rootメソッドを使ってルートURL "/" をコントローラーのアクションに紐付けていた。

・メリット
ブラウザからアクセスしやすくするだけでなく
生のURLではなく、名前付きルーティングを使ってURLを参照することができるようになる。
例えばルートURLを定義すると、root_pathやroot_urlといったメソッドを通してURLを参照することができる

root_path -> '/'
root_url  -> 'https://www.example.com/'

基本的には_path書式を使い、リダイレクトの場合のみ_url書式を使うようにする。
これはHTTPの標準としては、リダイレクトのときに完全なURLが要求されるため

・getルール

get "static_pages/help"
↓
get  "/help", to: "static_pages#help"

getルールを使って変更すると、GETリクエストが/helpに送信されたときにStaticPagesコントローラーのhelpアクションを呼び出してくれるようになる。
また、ルートURLのときと同様に、help_pathやhelp_urlといった名前付きルーティングも使えるようになる

help_path -> '/help'
help_url  -> 'https://www.example.com/help'

5.3.3 名前付きルーティング

今まで下記のように記述していたが

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

↓


<%= link_to "About", about_path %>

と指定できるようになった

5.3.4　リンクのテスト

require "test_helper"

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    get root_path
    assert_template 'static_pages/home'
    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=?]", about_path
上のコードでは、Railsは自動的にはてなマーク "?" をabout_pathに置換しており、 "about_path" 内に特殊記号があればエスケープ処理される。
これにより、次のようなHTMLがあるかどうかをチェックすることができる。

assert_select "a[href=?]", root_path, count: 2
とすることでリンクの個数も調べることができる

感想

５章の学習では、パーシャルや名前付きルーティング等について学習しました。
今までルーティングなどの実装を行ったことがないので
名前付きルーティングについては別途復習を行おうと思います
ヘルパーメソッドでリンクや、画像の情報を簡単に実装できるのはとても便利だと思いました
これからどんどん活用していこうと思います

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up