Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

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.

@ak-matsu

1周目　railsチュートリアル第5章

Last updated at Posted at 2021-08-21

#目次
1.はじめに
2.大まかな流れ
3.用語のまとめ
4.感想
5.おわりに

#1. はじめに
第5章　レイアウトを作成する
参照元が有料のため、かい摘んだ記述となる。

#2. 大まかな流れ

  1. 構造を追加する
    1. ナビゲーション
    2. BootstrapとカスタムCSS
    3. partial
  2. Sassとアセットパイプライン
    1. アセットパイプライン
    2. スタイルシート
  3. Sassとアセットパイプライン
    1. Contactページ
    2. RailsのルートURL
    3. 名前付きルート
  4. リンクのテスト
    1. Contactページ
    2. RailsのルートURL
    3. 名前付きルート
    4. リンクのテスト
  5. ユーザー登録：最初のステップ
    1. Usersコントローラ
    2. ユーザー登録用URL

#3. 用語のまとめ

レイアウトを作成する

この章ではアプリケーションにBootstrapフレームワークを組み込み、カスタムスタイルを追加。
これまで作成したページ（Home,About）へのリンクをレイアウト追加。
partial、Railsのルーティング、Asset Pipeline、Sass、結合テスト(Integration Test)

構造を追加する

Bootstrap：CSSに最小限のフレームワーク、
　　　　　　レスポンシブデザインに対応したフロントエンドフレームワーク

ナビゲーション

HTML5shim：HTML5サポート外のブラウザでも読み込ませるJavaScriptのコード

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

埋め込みRubyコード：<%=や<%で囲まれているもの。
Railsヘルパー：link_to
link_toより
第1引数：リンクテキスト
第2引数：名前付きルート or 「’＃’」ダミーであるスタブを置く。
第3引数：オプションハッシュ　上記ではcssidのlogoを指定。必ずしもオプションハッシュは必要ではない。
ハッシュとは第4章の記事に記載。

BootstrapとカスタムCSS

Bootstrap：洗練されたWebデザインとユーザーインターフェイス要素を簡単に導入できる
CSSフレームワークをHTML5アプリケーションに追加できる。
Bootstrapを使うとレスポンシブデザイン（Responsive Design） にできる
マウスオーバーするとクリックできるような画面変化が見られたり、フォントなど見た目が大きく変わる。

パーシャル（partial）

partial：レイアウトのコードを別ファイルとして紐付けさせてシンプルにさせること
各共通するファイル名の頭文字に_herader.html.erb　など、アンダーバー「_」をつける

Sassとアセットパイプライン

アセットパイプライン

アセットパイプライン：CSS,JavaScript,画像などの静的コンテンツの生産性と管理を強化すること、Sass
アセットディレクトリ：アセットパイプラインは標準的な3つのディレクトリがある。
　app/assets:現在のアプリケーション固有のアセット
　lib/assets:開発チームによって作成されたライブラリ用のアセット
　vender/assets:サードパーティのアセット（デフォルトでは存在しない）

マニフェストファイル

静的ファイルをapp/assets/stylesheetsなどへそれぞれ配置させ、
どのように1つのファイルにまとめるかを指示することができる。まとめる処理を行うのはSprocketsというgem。

プリプロセッサエンジン

ファイルにあるそれぞれの拡張子を判断して繋げて実行する役割。
foobar.js.coffee：CoffeeScriptプロセッサ経由で実行される
foobar.js.erb.coffee：CoffeeScriptとERbの両方でCoffeeScriptから先に実行される。
Sass：スタイルシートを記述するための言語、CSSをより便利に効率的にするための言語である。

レイアウトのリンク

railsではリンクの修正は名前付きルートを使うのが慣例となる。

<%= link_to "About",about_path %>

この記述方法であればabout_pathの定義を変更すればabout_pathで使われている全てのURLを変更できる。

サイトリンクのルーティングとURLのマッピング

ページ名 URL 名前付きルート
Home / root_path
About /about about_path
Help /help help_path
Contact /contact contact_path
Sign up /signup signup_path
Log in /login login_path

Contactページ

test/controllers/static_pages_controller_test.rb こちらへcontactのテストコードを記載しても
config/routes.rbやcontroller.rbやコードを記載していない、contact.html.erbを作成していないのでエラーになる。

...
  test "should get contact" do
    get static_pages_contact_url
    assert_response :success
    assert_select "title", "Contact | Ruby on Rails Tutorial Sample App"
  end

RailsのルートURL

今まではroot 'application#hello'などと「root」メソッドを使ってルートURL"/"をコントローラーアクションに紐づけていた。

この効果として

  • ブラウザからアクセスしやすくする
  • 生のURLではなく、名前付きルートを使ってURLを参照することができる。

ルートURLを定義すると、root_pathやroot_urlのメソッドを通してURLを参照できる。
前者：ルートURL以下の文字列
後者：完全なURLの文字列（ドメインも含む）

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

使い分け
_path：基本的な記述
_url：リダイレクトの場合のみ
→HTTPの標準としては、リダイレクトのときに完全なURLが要求されるため。
しかし殆どのブラウザではどちらの方法でも動作する。
下記のような記述方法となる。

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

ルーティングの記述を変更したため
static_pages_controller_test.rbも以下の記述方法へ変更する
get root_path
get help_path
get about_path
get contact_path

演習
  • as:オプションを使ってhelpからhelfへ変更
Rails.application.routes.draw do
  root 'static_pages#home'
  get  '/help',    to: 'static_pages#help', as: 'helf'
  get  '/about',   to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'
end
  • rails tを実行　RED（エラーになることを確認）
  • Undo機能でもとに戻す。

名前付きルート

名前付きルートが使えるようになったため、
以下のlink_toメソッドの2番目の引数で、適切な名前付きルートを使う。
<%= link_to "About", '#' %>
↓

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",    root_path %></li>
        <li><%= link_to "Help",    help_path %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>
演習

5.3と同じ

リンクのテスト

link_toの第2引数にあるリンクを修正後、都度リンク先があっているか確認するのは手間がかかる。
結合テスト（Integration Test）を使って一連の作業を自動化する。

$ rails generate integration_test site_layout
      invoke  test_unit
      create    test/integration/site_layout_test.rb

結合テストのステップ

  1. ルートURL（Homeページ）にGETリクエストを送る.
  2. 正しいページテンプレートが描画されているかどうか確かめる.
  3. Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる.
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メソッド：Homeページが正しいビューを描画しているか確かめる。
a[href=?]：リンク先が正しいかのオプション　aタグとhref属性をオプションで指定。

演習

test/test_helper.rb

ENV['RAILS_ENV'] ||= 'test'
.
.
.
class ActiveSupport::TestCase
  fixtures :all
  include ApplicationHelper
  .
  .
  .
end

test/integration/site_layout_test.rb

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
    get contact_path
    assert_select "title", full_title("Contact")
  end
end



test/helpers/application_helper_test.rb

require 'test_helper'

class ApplicationHelperTest < ActionView::TestCase
  test "full title helper" do
    assert_equal full_title,  "Ruby on Rails Tutorial Sample App"
    assert_equal full_title("Help"), "Help | Ruby on Rails Tutorial Sample App"
  end
end

ユーザー登録:最初のステップ

レイアウトとルーティングの取り組みにおける頂点として、ユーザー登録ページへのルーティングを作成。
2つ目のコントローラを作成。

Usersコントローラ

Usersコントローラー作成時に、自動的にnewアクションも作成。

$ rails generate controller Users new
演習

1　getメソッドの後にsignup_pathを記述
2　rails tでテストしてRED（エラーになることを確認）

ユーザー登録用URL

routes.rbへusersページへのルーティングを記述

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'
  get  '/signup',  to: 'users#new'
end

それぞれusersとsignupと関連したファイルを変更する。

演習

1　すでに実施済み。
2　rails tでテスト
3　

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: 3
    assert_select "a[href=?]", help_path
    assert_select "a[href=?]", about_path
    assert_select "a[href=?]", contact_path
    get contact_path
    assert_select "title", full_title("Contact")
    get signup_path
    assert_select "title", full_title("Sign up")
  end
end

まとめ

  • HTML5を使いheader,footer,logo,bodyといったコンテンツのレイアウトを定義
  • Railsのpartialは効率化のために使われ、別ファイルにマークアップとして切り出すことができる。
  • CSSはCSSクラスとidを使いレイアウトやデザインを調整します
  • Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
  • SassとAsset Pipelineは、（開発効率のために切り分けられた）CSSの冗長な部分を圧縮、本番環境に最適化した結果を出力する
  • Railsのルーティングでは自由にルールを定義することができ、名前付きルートも使えるようになる。
  • 結合テストは、ブラウザによるページ感の繊維を効率的にシュミレートする

#4. 感想

5.1　セクションごとにかい摘んでまとめていく
5.2　アセットパイプラインは複数のファイルを一つにまとめて処理を早くする。
　　　ネストを使って短縮することもできる。
5.3　レイアウトのリンクやルーティングを名前付きルートに変えたことよりクリック後、画面遷移が可能となった。そして結合テストのassert_selectを使うことでより対象となるリンクのテストが行えるようになった。
5.4　2つ目のコントローラ作成、Usersコントローラーの作成と各種ファイルの変更。

#5. おわりに

5章はView側について学習

0
0
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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?