Railsチュートリアル

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 を導入する方法も無くはないようだ。

Sass と SCSS

概念

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

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

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