Rails Tutorial を改めてしっかりやり直してのメモ第 5 章編

https://railstutorial.jp/chapters/filling_in_the_layout?version=7.0https://railstutorial.jp/chapters/filling_in_the_layout?version=7.0

知識

Asset Pipeline と Sass

Rails の Asset Pipeline という機能はデフォルトで Sass 言語をサポートしている。
Rails7 からはこのサポートがsassc-railsという gem に切り出された。

Rails で Bootstrap を利用する場合、bootstrap は LESS CSS が利用されているのでbootstrap-sass gem で Sass へ変換してから利用する。

パーシャル

view の共通部品となりうるものや、論理的に分けた方がいいものはパーシャルという機能で分けて定義できる。

パーシャルのファイルは_始まりの命名とし、次のように呼び出す。

<%= render 'layouts/header' %>

このように書くと、app/views/layouts/_header.html.erbがここに描画される。

Asset Pipeline

Web 開発には必須の CSS や画像などの静的アセットを管理するための機能。

アセットディレクトリ

標準的な 3 つのディレクトリが使われる。

• app/assets
  • 現在のアプリケーション用の固有アセット
• lib/assets
  • サードパーティでないライブラリ用のアセット
• vendor/assets
  • サードパーティのアセット
  • デフォルトでは存在しない

app/assets内はさらにconfig, images, stylesheetsに分けられている。
アプリケーションで用いる画像や CSS はここに適切に入れていく。

マニフェストファイル

アセットディレクトリ内のファイルをどのように一つのファイルにまとめるかを指示する設定ファイル。
実際に処理を行うのはSprocketsという gem。

画像ファイルは対象外で、CSS, JS についての設定を行う。

例えばデフォルトのenvironments/sample_app/app/assets/stylesheets/application.cssはコメントの最下部に

 *
 *= require_tree .
 *= require_self
 */

と記述がある。これがマニュフェストファイルで重要な記述である。
ひとつめがこのディレクトリ内のすべてのファイルを含めるという記述。ふたつめは自身も含めるという記述。

プリプロセッサエンジン

erbやscssなどは前処理をしてブラウザが処理できる HTML ファイルや CSS ファイルに変換する必要がある。
Rails はファイルの拡張子で使用するプリプロセッサエンジンを決定する。

名前付きルーティング

名前付きルーティングに関するメソッドはそれぞれ以下のような値を返す。

• xxx_path = /xxx
• xxx_url = https::/www.example.com/xxx

一般的な規約で、基本的には_pathを利用し、リダイレクトの場合のみ_urlを利用することが多い。

config/routes.rbで

get "/about", to: "controller_name#about"

のように書くことで名前付きルーティング（about_pathなど）が使えるようになる。

感想

Sass

要素のネスト（.center h1 {}のようなスタイルを.center { h1 {}}のように書く方式）は、React の styled component などでも当然のように使っていたが、Sass で拡張された仕様だというのは初めて知った。

まとめ

Rails は Asset Pipeline という仕組みで特定のディレクトリに置いた CSS, JS, 画像のような静的アセットを適切に最適化して配信用ファイルを生成してくれる。

また、routes 定義をget "/xxx", to: controller#actionのように書くことで名前付きルーティングが使えるようになる。