Railsチュートリアル5章 雑まとめ（超個人向け）

記憶定着のための、超個人記録です。

Rails tutorial 5章

パスの定義

routesファイルや利用できるヘルパー

config/routes.rb

root '<controller名>#<メソッド名>'
get  '/<path>', to: '<controller名>#<メソッド名>'
# asを利用した記載
get  '/<path>', to: '<controller名>#<メソッド名>', as: '<path名>'

rootに定義したものは、root_path or root_url などのヘルパーで呼び出せる。
pathは相対パス（/）、urlでは絶対パス（https://~）が組み込まれる。基本的にリダイレクトの際のみurl指定をする。
→ どのブラウザでも、基本どちらも動くが、httpの原則にし違うとそうなる、んだっけ？（→確認！）
asの指定がなければ、最初のパスからヘルパーが定義される。
asの指定をすると、それで呼び出せる。

asの例

get  '/init', to: 'sample#init' # init_path
get  '/init', to: 'sample#init', as: 'test' # test_path

ちなみに、プロジェクトのルートディレクトリでrails routesと入力するとルーティングの一覧が表示される。

erb

erbでも、root_pathのような記述が利用できる
link_toヘルパーの第二引数にそれを指定できる

サンプル

<%= link_to 'Init', init_path %>
# 以下のように変換される
<a href='/init'>Init</a>

開発者ツールで見てみる(aboutの例)

パーシャル

erbを別ファイルに切り出せる。
ファイル名は、_header.html.erbのようにアンダースコアから始める。
また、erbファイルなので<%%>のような記載でも切り出しておける。

アセットパイプライン

標準的なassetsディレクトリ

railsには基本的に、
app/assets
lib/assets
vendor/assets（デフォルトではなし）
の三つのassetsディレクトリがある。上から順に、

• プロジェクト固有のassets
• 開発チームなどで共有されるassets
• サードパーティー（他企業）向けassets
  となっている。

マニュフェストファイル

マニュフェストファイルにより、どのようにassetsを一つにまとめるかを定義できる。
※一つにまとめてくれるのはspRocketsというGem
実際に中身を見てみると、

app/assets/stylesheets/application.css

/*
 * ~略~
 *= require_tree . // このディレクトリ配下のファイルを全てapplication cssに含める
 *= require_self // このファイル自身も含む
 */

全体は以下で定義され、上記cssも含まれていることがわかる。

app/assets/config/manifest.js

//= link_tree ../images 
//= link_directory ../stylesheets .css　# assets/stylesheets はここに記載あり
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

プリプロセッサエンジン

railsは、assetsにまとめたファイルなどをブラウザに配信できるよう、拡張子を見てプリプロセスを実行してくれている。erbならerb向けのプリプロセッサ、scssならSass向けのプロセッサを利用し、ブラウザで表示できる形にしている。

本番環境での効率

人間的に読みやすいscssのファイル記述そのままだと、ブラウザやpc的には効率的でない場合が多々ある。（pc的には不要なインデントやファイル分割など。）
しかし、アセットパイプラインにそれらをまとめておくことにより、事前に読み込み・最適化（ファイルサイズの最小化など）をしてくれるため、そのトレードオフを考える必要がなくなる。

どこで事前コンパイルしているか？

本番環境等では、サーバーで動かそうとするとこのコンパイルを忘れエラーが出ること（が私の場合多い）
このことからも、スタートする前にコンパイルする必要があるとわかる。
rails newで作成されるdockerファイルでは以下のように記載があり、特にこちらで気にしなくてもやってくれている。

# Precompiling assets for production without requiring secret RAILS_MASTER_KEY
RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile

また、dev環境では自分でコマンドを打たなくても読み込んでくれている。
（rails s で env が develop だとそうしてくれているとか、、、？要確認）
その結果、本番環境で初めて「プレコンパイルして！」というエラーに出会うわけである。

scss

入れ子構造で、よりシンプルにcssを記載できる。
クラスやタグの入れ子は内部に書けばよく、アクションなどによるスタイルは&:~というように記載する。

雑サンプル

header {
    padding: 10px, 20px;
    h1 {
        color: white;
    }
    .logo {
        &:hover {
            color: black;
        } 
    }
}

他、変数定義もできる

$light-gray: #777;

header {
    color: $light-gray;
}