Rails

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

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

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

5.1.2 BootstrapとカスタムCSS

  • Bootstrapはgemからインストールする(以下をGemfileに追記し、「bundle install」を実行)
  • Bootstarpは動的にCSSを作成するためにLESSを使用しているが、RailsはSassをサポートしている。
  • CSS(*.scss)に@import文を記入してBootstarpをインポートする

5.1.3 パーシャル (partial)

  • パーシャルはHTMLを1箇所にまとめることができる機能
  • パーシャルは「renderヘルパー」を使って該当のHTMLを痴漢する
  • パーシャルのファイル名は先頭に「_」をつける
  • 「renderヘルパー」では「_」をつけずにパーシャル名を指定する

footerのパーシャルは以下のようにしないと、footer追加後の図のようなレイアウトにはなりません。

 

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に変換するときに「&」を親属性に変換する
  • 変数は「$変数名」として定義できる。使用例は以下のとおり
  • 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」メソッドが使用できるようになる

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

5.3.3 名前付きルート

  • 特になし

5.3.4 リンクのテスト

  • 統合テスト(Integration Test)を使用してリンクが正しいかのテストが行える
  • 統合テストを行うには以下のコマンドで「site_layout」というテスト用のテンプレートを作成する必要がある
  • テストで使用する「assert_selectメソッド」は様々な指定ができる。
    詳細はRailsチュートリアルを参照
  • 「rails test:integration」コマンドで統合テストのみを実行する

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

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

5.4.1 Userコントローラ

  • 特になし

5.4.2 ユーザー登録用URL

  • 特任なし

感想

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

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

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

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

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

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す