ruby チュートリアル５章　メモ

Bootstrap

twitter社製作とのこと。webデザインとユーザインターフェースの面で恩恵を受けられる。特に、レスポンシブデザインであるのが強み。スタイルシートはapp/assets/stylesheets/に置くことで、application.cssの一部としてwebのレイアウトに読み込まれる。 Bootstrapのフレームワークを読み込むためには、スタイルファイルの先頭に以下のコードを挿入する。

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

scss

ほぼcssかもしれないけれど、.から始まるものはクラスに対してのもの。#から始まるのもはid属性を表す。ノーマルなやつはおそらくhtmlタグの類。

body {
  padding-top: 60px;
}

.center {
  text-align: center;
}

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;

ネスト

スタイルシート中の共通パターンをくくって表現可能。id中の属性については&で表現が可能。

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

変数

値を変数に代入して利用できる。色は同じ色をわかりにくい16進数で何度も書かれるよりわかりやすくなる。

$light-gray: #777;

h2 {
  color: $light-gray;
}
footer {

  color: $light-gray;
}

bootstrapではすでにいくつか変数として用意しているものもあるのでそれを利用するのもあり。一覧はこちら

パーシャル

必要なコード群を一つのファイルにまとめたり、隠したりできる機能。コードを別のファイルに記述しておき、パスで読み込んでそのコードを挿入できるみたいな機能。以下のように記述する。

<%= render 'layouts/header' %>

これで次のファイルを参照する。app/views/layouts/_header.html.erbファイル名のアンダースコアは、パーシャルの命名規則。

アセットパイプライン

アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという、3つの主要な機能をもつ。いろんなアセットを扱えたり、アセットをまとめて扱えたりできているのはこれのおかげ？最大のメリットは、本番アプリケーションで使用するためにアセットを自動で最適化してくれること。(プログラマ的にはアセットはそれぞれ小分けされていた方が扱いやすいが、アプリケーションは読み込み展開に時間がかかってしまう。のでまとめてくれる)不要なインデント、空白等も取り除いてくれるらいし。

アセットディレクトリ

railsでは静的ファイルを目的別に分類する３つのディレクトリが使われる。それぞれのアセットクラス用のサブディレクトリがある。app/assetsの場合、画像用、JavaScript用、CSS用のサブディレクトリがある。 - app/assets: 現在のアプリケーション固有のアセット - lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット - vendor/assets: サードパーティのアセット

$ ls app/assets/
images/  javascripts/  stylesheets/

チュートリアルで作成したcustom.scssはサンプルアプリケーション固有のアセットなのでapp/assets/stylesheetsにある。

マニフェストファイル

静的ファイル (アセット) を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができる。例えばapp/assets/stylesheets/application.cssはアプリケーションのcss用マニフェストファイル。でコメントアウト内の以下の2行が大事。

 *= require_tree .
 *= require_self

1行目はapp/assets/stylesheetsディレクトリ (サブディレクトリを含む) 中のすべてのCSSファイルが、アプリケーションCSSに含まれるようにする。
2行目はCSSの読み込みシーケンスの中で、application.css自身もその対象に含める指示。

注意としてマニフェストファイルはCSSとJavaScriptには適用されるが、画像ファイルには適用されない。

プリプロセッサエンジン

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備する。どのプリプロセッサを使うのかは、ファイル名の拡張子を使って判断。.scssや.coffee,,erb等

foobar.js.erb.coffee

上の拡張子の場合は、CoffeeScriptとERbの両方で実行されるが、 コードは右から左へと実行されるので、この例ではCoffeeScriptが最初に実行

ルーティングとメソッド

config/route.rbでrootに指定したものは以下のメソッドでパスを取得できる。

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

config/route.rbに以下のように記述していくとそれぞれに対して以下のようなメソッドでパスを取得できるようになる。

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

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

ペルパーのテスト(RSpec)

includeを用いるれば、そこで定義したヘルパーを利用できる。

require 'rails_helper'

describe 'ApplicationHelper' do
  include ApplicationHelper
  describe 'full_title' do
    it 'full title helper' do
      base_title = "Ruby on Rails Tutorial Sample App"
      page_title = "Help"
      expect(full_title).to eq(base_title)
      expect(full_title(page_title)).to eq("#{page_title} | #{base_title}")
    end
  end
end