Jan 4, 2020

静的型付け言語原理主義者によるRailsチュートリアル（第5章）

image

第5章 レイアウトを作成する

  • サンプリアプリケーションにレイアウトを追加する
  • HTML も CSS も体系的に学習したことはないので勉強になりそう

5.1 構造を追加する

  • レイアウトに構造と CSS を与えて最小限のスタイルを追加する
  • Bootstrap も利用する

5.1.1 ナビゲーション

  • application.html.erb に HTML 構造を追加
  • Rails はデフォルトで HTML5
    • HTML5 への対応できていない IE9 への対応が含まれている…
    • <!--[if lt IE 9]> という見慣れない構文
      • Rails の機能ではない
      • 条件付きコメント
        • 他ブラウザに影響を与えずに IE9 未満の場合にのみ適用される
  • header タグはページの上部に来るべき要素を表す
  • すべての HTML 要素にはクラスと id の両方を指定することができる
    • これらは単なるラベル
    • クラスはページ内で何度でも使える
    • id は一度しか使えない
  • div タグは一般的な表示領域を示し、要素を別々のパーツに分けるときに使用される
  • リンク生成用の Rails ヘルパーである link_to
    • 引数は順にリンクテキスト、URL、オプションハッシュ
  • nav タグは「その内側がナビゲーションリンクである」と明示的に伝えている
  • image_tag ヘルパーで Rails は該当する画像ファイルをアセットパイプラインを通して app/assets/images/ ディレクトリ配下から探す
  • カスタム CSS を使用していない Home ページが完成

image

  • image_tag の効果
    • 重複しないような画像ファイル名を Rails が付けている
    • src 属性には images というディレクトリ名が含まれていない
      • 高速化のため
      • Rails は assets ディレクトリ直下の画像を app/assets/images ディレクトリにある画像と紐付けている
        • これにより、ブラウザから見るとすべてのファイルが同じディレクトリにあるように見え、ファイルをより高速にブラウザに渡すことができる
    • alt 属性は画像がない場合に表示される文字列

5.1.2 Bootstrap とカスタム CSS

  • Bootstrap を使用してアプリケーションをレスポンシブルデザインにできる
  • bootstrap-sass gem で Rails アプリケーションに Bootstrap を導入できる
    • また gem か
  • Bootstrap は LESS CSS 言語を使用
  • Rails の Asset Pipline はデフォルトで Sass 言語を使っている
    • Sass とは？
      • SaaS ではない
      • Syntactically Awesome Stylesheets
        • スタイルシート言語
  • bootstrap-sass は LESS を Sass へ変換する
  • rails generate でコントローラごとに分けられた CSS ファイルが自動的に生成されるが、正しい順番で読み込ませるのは至難の技らしい
    • なぜ自動生成したのか 🤔
  • カスタム CSS ファイルを作成
  • app/assets/styleseets は Asset Pipeline の一部
    • このディレクトリにあるスタイルシートは application.css の一部として Web サイトのレイアウトに読み込まれる
  • Bootstrap CSS のフレームワークを導入してアプリケーションに反映
    • ボタンが表示されて色使いが変わった！
  • さらに CSS を追加して色々確認
.center {
  text-align: center;
}
  • .center の . はこのルールがクラス全体に対してスタイルを適用することを示す
  • 冒頭が # で始まる場合は、そのルールが CSS の id に対してスタイルを適用することを示す
  • タイポグラフィーでテキストの見栄えを良くする
  • ロゴも追加する
    • CSS はほとんど触ったことがないので新鮮

5.1.3 パーシャル (partial)

  • partial という機能
    • HTML shim を隠すことができる
    • HTML ヘッダーを論理的な単位として分けて一箇所にまとめられる
<%= render 'layouts/shim' %>
  • render という Rails ヘルパーで HTML shim のスタイルシート行を置換
  • app/views/layouts/_shim.html.erb というファイルを探してその内容を評価し、結果をビューに挿入
    • 先頭のアンダースコアはパーシャルで使う普遍的な命名規則
  • application.html.erb から ヘッダー、フッター、shim を render に切り出していく
    • 手動生成が一般的

5.2 Sass とアセットパイプライン

5.2.1 アセットパイプライン

  • アセットディレクトリ
    • Rails のアセットパイプラインには静的ファイルを目的別に分類する3つのディレクトリがある
      • app/assets
        • 現在のアプリケーション固有のアセット
      • lib/assets
        • 開発者によって作成されたライブラリ用のアセット
      • vendor/assets
        • サーボパーティのアセット
    • それぞれにアセットクラス用のサブディレクトリがある
  • マニフェストファイル
    • 静的ファイル（アセット）を上記の各ディレクトリに配置すれば、マニフェストファイルを使ってそれらをどのように1つのファイルにまとめるのかを Rails に指示することができる
      • 実際に処理を行うのは Sprockets という gem
    • CSS と JavaScript には適用されるが、画像ファイルには適用されない
    • Rails デフォルトのマニフェストファイルは実用的
  • プリプロセッサエンジン
    • 必要なアセットをディレクトリに配置してまとめた後、Rails は様々なプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備する
      • どのプリプロセッサを使用するかはファイル名の拡張子で判断する
        • .scss
        • .coffee
        • .erb
          • などが一般的
          • CoffeeScript！貴様死んだはずでは！
    • 繋げて実行も可能
      • foobar.js.erb.coffee
        • 右から左の順に実行
  • 本番環境での効率性
    • Asset Pipeline は本番アプリで効率的になるように最適化されたアセットを自動的に生成可能
      • 人に読みやすいアセットは本番環境にとっては非効率
        • 最小化されていない CSS や JavaScript ファイルを多数に分割すると、ページの読み込み時間が遅くなるため
      • Asset Pipeline により、開発環境では人に読みやすいまま、本番環境ではファイルを最小化させることが可能になる
        • すべてのスタイルシートを application.css
        • すべての JavaScript ファイルを javascript.js
          • にまとめてくれる
            • さらにそれらすべての不要な空白やインデントも除去し、ファイルサイズを最小化してくれる
              • やるならとことん

5.2.2 素晴らしい構文を備えたスタイルシート

  • Sass の2つの重要な機能
    • ネストと変数
  • Sass は SCSS というフォーマットに対応
    • SCSS は CSS に新しい機能を追加しただけで、新しい構文を定義しているわけではない
  • Rails のアセットパイプラインは .scss という拡張子を持つファイルを Sass を使って自動的に処理している
  • ネストの例1
.center {
  text-align: center;
}

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

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}
  • ネストの例2
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

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

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}
  • 変数
h2 {
  .
  .
  .
  color: #777;
}
.
.
.
footer {
  .
  .
  .
  color: #777;
}

$light-gray: #777;
.
.
.
h2 {
  .
  .
  .
  color: $light-gray;
}
.
.
.
footer {
  .
  .
  .
  color: $light-gray;
}
  • Bootstrap では多くの色に対して変数を定義している
    • boostrap-sass という gem を使えば、 さらに以下のようにできる
h2 {
 .
 .
 .
 color: $gray-light;
}
.
.
.
footer {
 .
 .
 .
 color: $gray-light;
}

5.3 レイアウトのリンク

<a href="/static_pages/about">About</a>
  • 上記のように HTML に直接リンクを記述することは可能だが
<%= link_to "About", about_path %>
  • Railsであれば上記のように名前付きルートを使うのが慣例

5.3.1 Contactページ

  • 新しいページをTDDで追加
    • 第3章の演習で実装済みだった

5.3.2 RailsのルートURL

  • 名前付きルートを静的ページで使うためにルーティングを変更する
  • ルートURL のルーティング定義の効果はブラウザからアクセスしやすくすることだけではなく、生の URL ではなく名前付きルートを使って URL を参照できることも含まれる
    • 例えば root_path や root_url といったメソッドを通して URL を参照できる
  • 既存の静的ページのルーティングを名前付きルートに変更していく
get 'static_pages/help'

get  '/help', to: 'static_pages#help'

5.3.3 名前付きルート

  • link_to メソッドの2番目の引数を名前付きルートに変更していく

5.3.4 リンクのテスト

  • リンクをクリックして動作しているかの確認は可能だが、変更のたびにこの作業を繰り返すのは大変なので、統合テストで自動化する
    • Rails チュートリアルは E2E テストまでやるのか…
  • site_layout というテストテンプレート作成から
    • rails generate integration_test site_layout
    • test/integration/site_layout_test.rb が作成される
      • ここまでサポートしている Rails の底が見えない
  • assert_template メソッドで Home ページが正しいビューを描画しているか確認する
  • assert_select "a[href=?]", about_path と記述すると、 <a href="/about">...</a> のような HTML が存在するかをチェックできる
  • assert_select "a[href=?]", root_path, count: 2 と記述すると、ルート URL へのリンクが2つあることをチェックできる
  • assert_select は柔軟でパワフルなため、多様なオプションがある
    • しかしこのメソッドで複雑なテストはしない方が懸命
  • 統合テストが通るかどうかは、Rake タスクの実行で確認可能
    • rails test とは別物

5.4 ユーザー登録: 最初のステップ

  • ユーザー登録ページへのルーティング作成
    • 2番目のコントローラを作る

5.4.1 Usersコントローラ

  • rails generate controller Users new
    • テストも自動作成されており、この時点では通る

5.4.2 ユーザー登録用URL

  • /users/new から /singup に変更するためルーティングを修正
    • rails generate したときに自動的に先頭に新しいルーティングが追加されている模様
    • get '/signup' と追記したので signup_path という名前付きルートが使えるようになった

5.5 最後に

  • 以後サンプルアプリケーションを肉付けすることに専念する
  • heroku にデプロイしてこの章は終了

5.5.1 本章のまとめ

  • HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義しました
  • Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます
  • CSSは、CSSクラスとidを使ってレイアウトやデザインを調整します
  • Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
  • SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
  • Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
  • 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする

所感

Rails チュートリアルの本筋からは逸れるかもしれないが、HTML と CSS についてはほとんど学習したことがなかったのでよい導入になった。Sass も単語は知っていたが中身は全く知らなかったので、触れることができて有意義な章だった。本章での一番の驚きは Rails が E2E テストまでサポートしていたことだ。実践での実用度は低いように感じたが、徹底的にテストをサポートしようとする Rails の姿勢が垣間見え、やるやら徹底的にやるというフレームワークの思想をひしひしと感じた。

3738 Words

2020-01-04 13:23 +0000