挫折しないRailsチュートリアルまとめ【第5章】

Railsチュートリアル5章を走破しました！

#Railsチュートリアル の第5章を走破しました！ https://t.co/qluZpzQdFu @RailsTutorialJP#プログラミング学習 #駆け出しエンジニアと繋がりたい

— じゅに💻脱サラに命かける人 (@Jyu210) December 9, 2019

Railsチュートリアル第5章の内容

• Bootstarpの組み込み
• 各レイアウトへのリンクの追加
• パーシャル
• Railsのルーティング
• Asset Pipeline
• Sass

5.1 構造を理解する

5.1.1 ナビゲーション

• 「<!–[if lt IE 9]>」はIEのための条件付きコメント（Railsの機能ではない）
• HTMLでクラスはページ内で何度も使用できるが、idは一度しか使えない
• クラスとidを使用するとCSSの指定で便利
• divタグは一般的な表示領域を表す
• 「navbar」や「container」はBootstarpで定義されているクラスで、Bootstarpを導入すると自動的にスタイルが適用される
• リンク（aタグ）を生成するには「link_toヘルパー」を使用する
  
  Ruby

  link_to "表示文字列", "URL", HTMLの属性をハッシュで渡す

  1	link_to "表示文字列", "URL", HTMLの属性をハッシュで渡す

• 画像（imgタグ）を生成するには「image_tagヘルパー」を使用する
  
  Ruby

  image_tag "画像ファイルのパス", HTMLの属性をハッシュで渡す

  1	image_tag "画像ファイルのパス", HTMLの属性をハッシュで渡す

• 「image_tagタグ」を使用するとRailsが画像ファイルにシステムごとに文字列を付加して、キャッシュへの意図的なアクセスを防ぐような仕組みがある
• Railsは「assetsディレクトリ」直下の画像を「app/assets/images」ディレクトリにあるように見えるなる仕組みで高速化をはかっている

5.1.2 BootstrapとカスタムCSS

• Bootstrapはgemからインストールする（以下をGemfileに追記し、「bundle install」を実行）
  
  Ruby

  gem 'bootstrap-sass', '3.3.7'

  1	gem 'bootstrap-sass', '3.3.7'

• Bootstarpは動的にCSSを作成するためにLESSを使用しているが、RailsはSassをサポートしている。
• CSS（*.scss)に@import文を記入してBootstarpをインポートする
  
  Ruby

  @import "bootstrap-sprockets"; @import "bootstrap";

  1 2	@import "bootstrap-sprockets"; @import "bootstrap";

5.1.3 パーシャル (partial)

• パーシャルはHTMLを1箇所にまとめることができる機能
• パーシャルは「renderヘルパー」を使って該当のHTMLを痴漢する
  
  Ruby

  <%= render 'layouts/パーシャル名' %> # 上記の場合は以下のフォルダから対象のHTMLを探す app/views/layouts/_パーシャル名.html.erb

  1 2 3 4

  <%= render 'layouts/パーシャル名' %>   # 上記の場合は以下のフォルダから対象のHTMLを探す app/views/layouts/_パーシャル名.html.erb

• パーシャルのファイル名は先頭に「_」をつける
• 「renderヘルパー」では「_」をつけずにパーシャル名を指定する

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

アセットパイプライン（Asset Pipeline）の概要とSassの使用方法を学習する。

5.2.1 アセットパイプライン

• 「アセット」とはシステムシステムを構成するソフトウェアなどの要素という意味。
• 静的ファイルを目的別に分類する3つのディレクトリをアセットディレクトリという
  ・app/asset：現在のアプリケーション固有のアセット
  ・lib/assets：ライブラリ用のアセット
  ・vendor/assets：サードパーティのアセット
• アセットディレクトリをどのように1つのファイルにまとめるのかをRailsに指示をするためのファイルをマニフェストファイルという
• 実際にアセットをまとめる処理を行うのは「Sprokets」というgem
• マニフェストファイルはCSSとJavaScriptには適用されるが、画像ファイルには適用されない
• Railsではデフォルトのマニフェストファイルが付属しているので、Railsチュートリアルレベルでは変更を加える必要はない
• アセットディレクトリにファイルをまとめた後、マニュフェストファイルを元に結合してブラウザに配信できるにするのが、プリプロセッサエンジンである
• Railsがプリプロセッサエンジンを使うかはファイルの拡張子によって判断される
• プリプロセッサエンジンをつなげて実行することができる
  例：foobar.js.coffee
  foobar.js.erv.coffee
  コードは右から左に実行される
• アセットパイプラインは分割されたCSSやJavaScriptを1つのファイルにまとめ、不要な空白やインデントを除去し、ファイルサイズを最小化してくれるので、開発、本番環境の双方に利点がある

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

• SassはCSSを記述するための言語で、ネストと変数を使用して記述できる
• ネストした時にhoverなどで親属性を参照する場合は「&」を使用して記述する
  例：&:hover
  「&」はSCSSをCSSに変換するときに「&」を親属性に変換する
• 変数は「$変数名」として定義できる。使用例は以下のとおり
  
  Ruby

  $変数名: 値; 属性 { スタイル: 変数名; } 例） $light-gray: #777; h1 { color: light-gray; }

  1 2 3 4 5 6 7 8 9 10 11 12

  $変数名: 値;   属性 {   スタイル: 変数名; }   例） $light-gray: #777;   h1 {   color: light-gray; }

• Bootstrapでは多くの色に対して変数名が定義されていて、「bootstrap-sass」というgemをインストールすることで、使用できることができる
  （Bootstrapでは LESSを使用しているので、変数名は「@」で始まるが、「$」から始めるように記述すれば良い
• 5.3 レイアウトのリンク

リンクのURLは名前付きルートを使うのがRailsでは一般的であり、柔軟性が高いため、名前付きルートやその他ルートについて学習します。

5.3.1 Contactページ

• 特になし

5.3.2 RailsのルートURL

• 「rootメソッド」を使用してルーティングの設定を行うと、名前付きルートを使ってURLを参照することができるようになる
• 「root_path」はURL以下の文字列を返し、「root_url」は完全なURLの文字列を返す。
  例：root_path：’/’
  root_ur：’http://www.example.com/”
• 以下ののにgetルールを使用してルーティングを記述すると「XXXX_path」「XXXX_url」メソッドが使用できるようになる
  
  Ruby

  get '/パス', to: 'コントロラーメ#アクション名' as 名前付きルート名

  1	get  '/パス', to: 'コントロラーメ#アクション名' as 名前付きルート名

  
  名前付きルート名は省略可能で、省略した場合はパスの部分が名前付きルートとなる

5.3.3 名前付きルート

• 特になし

5.3.4 リンクのテスト

• 統合テスト（Integration Test）を使用してリンクが正しいかのテストが行える
• 統合テストを行うには以下のコマンドで「site_layout」というテスト用のテンプレートを作成する必要がある
  
  Ruby

  $ rails generate integration_test site_layout # 実行結果：指定したテスト名に「_test」が付加される invoke test_unit create test/integration/site_layout_test.rb

  1 2 3 4 5

  $ rails generate integration_test site_layout   # 実行結果：指定したテスト名に「_test」が付加される invoke  test_unit create    test/integration/site_layout_test.rb

• テストで使用する「assert_selectメソッド」は様々な指定ができる。
  詳細はRailsチュートリアルを参照
• 「rails test:integration」コマンドで統合テストのみを実行する

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

ユーザー登録ページを作成し、レイアウトとルーティングを引き続き行う。

5.4.1 Userコントローラ

• 特になし

5.4.2 ユーザー登録用URL

• 特任なし

感想

5章だけに限った話しじゃないけど、やってる事自体は問題ないんだけども文章の理解が難しい。

説明もとびとびになってるイメージは拭えないし、悶々としながら進めています。

おそらく悶々としている理由は「分からない用語も含めて、今完全に理解しよう」と思っているからだと思います。

Railsチュートリアルを2週も3週もする気はないけど、今は「こんなことができるんだな」ぐらにの気持ちで進めて、実際に自分でアプリを作りつつ理解を深めるという風に割り切らないとしんどいですね。

というわけで、なんとなくは理解しているので先に進みます。