Help us understand the problem. What is going on with this article?

Railsチュートリアル 第5章

ヘルパーメソッド

link_to

リンクを生成するためのヘルパーメソッド

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

第1引数:リンクテキスト
第2引数:URL
第3引数:オプションハッシュ(必須ではない)

image_tag

画像を表示するためのimgタグを作成するヘルパーメソッド。

image_tag("rails.png", alt: "Rails logo")

第1引数:画像ファイル名
    ファイルの置き場所は「app/assets/images」フォルダと「public」フォルダの2つが用意されている。
上記の様に指定すると、「app/assets/images」が参照される。
    「public」フォルダを参照したい場合は、ファイル名の前に「/」を入れる。
第2引数:オプション
   alt:画像がない場合に代わりに表示される文字列
   size:'100×200' 幅と高さを指定

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

上記の様に組み合わせて使うことができ、画像リンクが作れる
第1引数:image_tag("rails.png", alt: "Rails logo") ⇨画像
第2引数:'http://rubyonrails.org/'          ⇨URL

Bootstrap

Bootstrapとは

Twitter社が開発したCSSのフレームワークです。(HTML/CSS/JavaScriptから構成される)
よく使うスタイルなどがあらかじめ定義されている。
また、レスポンシブWebデザインに対応しているので、スマートフォンやタブレットなど個別に対応するスタイルを作らなくても柔軟に調整してくれる。

BootstrapではLESS CSS言語を使っているが、RailsのAsset PipelineはデフォルではSass言語をサポートしているので、bootstrap-sassは、LESSをSassへ変換し、Bootstrapファイルを現在のアプリケーションで全て利用できるようにする。

Sass

CSSを拡張した言語、元々のCSSに次の機能を追加

・ネスト
  スタイルシート内に共通のパターンがある場合、要素をネストさせることができる
・変数
冗長なコードを削除し、より自由な表現を可能に
・ミックスイン
 CSSルールのパッケージ化して、複数の箇所で再利用することができる (例:@include

Bootstrap導入

Gemfile.rb
source 'https://rubygems.org'

gem 'rails',          '5.1.6'
gem 'bootstrap-sass', '3.3.7' ⇦追加
.
.

Bootstrapをインストール

$ bundle install

カスタムCSSを作成

$ touch app/assets/stylesheets/custom.scss
custome.scss
@import "bootstrap-sprockets";
@import "bootstrap";

パーシャル

一箇所にまとめた方が良いHTMLや重複しているHTMLをパーシャルという機能を使って1つにまとめることができる。
パーシャルのファイル名の先頭にはアンダースコアをつける。
またrenderメソッドで使用する。

アセットパイプライン

CSS/JavaScript/Imageなどを管理する機能

アセットディレクトリ

静的ファイルを目的別に分類

  • app/assets:現在のアプリケーション固有のアセット
  • lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
  • vendor/assets: サードパーティのアセット

マニフェストファイル

1つのファイルにまとめる方法をRailsに指示

app/assets/stylesheets/application.css
/*
 * This is a manifest file that'll be compiled into application.css, which
 * will include all the files listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets,
 * vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any,
 * can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear
 * at the bottom of the compiled file so the styles you add here take
 * precedence over styles defined in any styles defined in the other CSS/SCSS
 * files in this directory. It is generally better to create a new file per
 * style scope.
 *
 *= require_tree .
 *= require_self
 */

require_tree:app/assets/stylesheetsディレクトリ内の全てのCSSファイルがアプリケーションCSSに含まれるようにしている。
require_self:CSSの読み込みシーケンスの中で、application.css自身もその対象に含めている。

プリプロセッサエンジン

指示に従ってブラウザに配信できるように結合

なぜアセットパイプライン?

開発する側としては複数のファイルに分割して効率的に開発できる
ただ、コンピューターに取っては1つにまとまっていた方が高速になるので、それをしてくれるのがアセットパイプライン

名前付きルート

このようなルートは

get 'static_pages/help'

このように変更する

get  '/help', to: 'static_pages#help'

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

asオプション

:asオプションを使うと、ルーティングの名前を指定できる。

get '/help', to: 'static_pages#help', as: :helf

helf_pathとして使用できる

リンクのテスト

require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    get root_path                     ⇨ルートURL(Homeページ)にGETリクエストを送る
    assert_template 'static_pages/home'        ⇨正しいテンプレートが表示されている事を確認
    assert_select "a[href=?]", root_path, count: 2 ⇨Homeページへのリンクが2つ存在する事を確認
    assert_select "a[href=?]", help_path       ⇨Helpページへのリンクが存在する事を確認
    assert_select "a[href=?]", about_path       ⇨Aboutページへのリンクが存在する事を確認
    assert_select "a[href=?]", contact_path     ⇨Contactページへのリンクが存在する事を確認
  end
end

assert_selectにはいくつもの指定の方法があるが、今回はリンクのテストをする。

コード マッチするHTML
assert_select "div" <div>foobar</div>
assert_select "div", "foobar" <div>foobar</div>
assert_select "div.nav" <div class="nav">foobar</div>
assert_select "div#profile" <div id="profile">foobar</div>
assert_select "div[name=yo]" <div name="yo">hey</div>
assert_select "a[href=?]", ’/’, count: 1 <a href="/">foo</a>
assert_select "a[href=?]", ’/’, text: "foo" <a href="/">foo</a>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした