Rails チュートリアル メモ 第5章

暗記事項

link_to

# link_to("リンクテキスト", "URL", {html の属性に対応したハッシュ})

link_to "Home", "#", id: logo

image_tag

# image_tag("画像ファイル名", {html の属性に対応したハッシュ})

image_tag "foo.png", alt: "foo"

• 画像は app/assets/images/ 配下から探される。
• ブラウザで実際の html を見てみると、画像のパスが /assets/rails-mojamoja.png のようになっている。これはアセットパイプラインによる変換で、画像に限らず js や css などいわゆる静的コンテンツがすべて assets 配下に置かれるようになる。
  • 「このようなフラットなディレクトリ構成を採っていると、ファイルをより高速にブラウザに渡すことができるように」なるらしいが、原理は不明。

partial

# render "パス"

render "layouts/foo"

• erb をインクルードする方法、と捉えてよさそう
• app/views 配下に置く
  • ファイル名の先頭をアンダースコア (_) にするのがルール
  • ロードするときはアンダースコアも拡張子も要らない。パスは app/views を起点に書く。
  • 今回の例では、全てのページで使うパーシャルを作ったので、layouts に置いた。

アセットパイプライン

構成要素

• 置き場所
  • 3箇所
    • app/assets: 現在のアプリ固有のアセット
    • lib/assets: 現在のアプリ固有ではないが自作したアセット
    • vendor/assets: サードパーティのアセット
• 拡張子
  • どのプリプロセッサで処理するかを拡張子で指定
  • 右から順に解決される
• マニフェスト
  • どのファイルを読み込むかなどのルールを書くファイル
  • 大事なことがコメントとして書かれている

意義

• 決められたパスにアセットを投げ込んでおくだけで結合から minify までしてくれる
  • 実際にしてくれるのは sprockets という gem
    • マニフェストを読んでいるのもそれ

名前付きルート

• root メソッドでルートを定義すると、root_path root_url が使えるようになる
• そんな感じで、ルートを定義すると xxx_path xxx_url が使えるようになる
• よくわからなくなったら rails routes すると状況がわかる
• 慣習として、基本的には xxx_path を使い、リダイレクトだけは xxx_url を使う

統合テストの生成

# rails generate integration_test テスト名

rails generate integration_test site_layout

• 統合テストだからといって、できあがるコードはふつうのコントローラーなどのテストとあまり変わらず、ActionDispatch::IntegrationTest を継承したクラスが1つ作られるだけだった。

メモ

header タグ、nav タグ、...

古い人間なので div で時代が止まっていたが、その派生ともいうべき header タグや nav タグが生まれていた。Rails 自体のノウハウではないけど、知らなかったのでメモ。より構造化された html を書くことができそうだ。

bootstrap-sass という gem

今回、bootstrap を導入するために gem のインストールを行った。本来 bootstrap は単なる大きな CSS の塊なわけで、ruby も rails も関係ないはずだ。にもかかわらず gem をインストールしないといけないのは何故なんだろう？

ただでさえ bootstrap 自体への依存が発生するのに、その間にさらに gem への依存を挟むのはよくなさそうに思える。実際、twbs/bootstrap-sass は bootstrap 4 には対応していない。こういうことがあるからできれば依存を増やしたくない。

一応、gem 無しで bootstrap を導入する方法も無くはないようだ。

• https://stackoverflow.com/questions/36290390/bootstrap-with-rails-without-less-sass
• https://gist.github.com/iamatypeofwalrus/6400118

Sass と SCSS

概念

• Sass は CSS のプリプロセッサのひとつ
• SCSS は Sass が対応するフォーマットのひとつ
  • ふつうの CSS と互換性がある（ふつうの CSS は、有効な SCSS でもある）

Sass によってできるようになったこと

• ネスト
• 変数化
  • bootstrap も色などを変数として定義している
    • 厳密には bootstrap は LESS の変数を定義している
    • bootstrap-sass gem が同変数を SASS でも使えるようにしてくれている
• ミックスイン
  • 後日