RailsTutorial

【Ruby on Rails 独学】Railsチュートリアル 第5章2.レイアウトを作成する Bootstrap導入

【RubyonRails独学記】Railsチュートリアル第5章

【目的別おすすめプログラミングスクール】
  • WebCampPRO
    |転職成功率98%!エンジニアとして転職したい人におすすめ
  • ポテパンキャンプ
    |Railsエンジニアとして自社開発企業に転職したい人におすすめ
  • テックアカデミー
    |オンラインでプログラミングを学びたい方におすすめ
  • Aidemy
    |AI(人工知能)分野特化のスクール。AIを学びたいならここ

今日は機能の続き、5章2のSassとアセットパイプラインから。

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

アセットパイプライン = Css、JavaScript、画像など静的コンテンツの生産性と管理を大幅に強化する機能

Sass = CSS生成ツール

5.2.1 アセットパイプライン

・アセットディレクトリ
・マニフェストファイル
・プリプロセッサエンジン

アセットディレクトリ

Railsのアセットパイプラインでは性的ファイルを目的別に分類する標準的なディレクトリは3つ。

app/assets: 現在のアプリケーション固有のアセット
lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット

この中にJavaScript用やCSS用のサブディレクトリがある。

生成したcustom.scssはサンプルアプリ固有のものだから、app/assets/stylesheet内に配置。

マニフェストファイル

マニフェストファイル = 静的ファイルをどのようにまとめるのかをRailsに指示する(画像ファイルには非適用)
*実際にまとめて処理を行うのはSprocketsというgem

マニフェストファイル内の

*= require_tree .
*= require_self

という記述が、Sprocketsが適切なファイルを読み込むために使われる。

[ *= require_tree .] = stylesheetsディレクトリ中のすべてのCSSファイルがアプリケーションCSSに含まれるようにする

[ *= require_self] = CSS読み込みの中でapplication.css自身もその対象にしている

プリプロセッサエンジン

プリプロセッサエンジン = 必要なアセットを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備する。Railsではどのプリプロセッサを使うのかをファイルの拡張子を使って判断する(例:.scss .coffee .erb)

本番環境での効率性

Asset Pipelineの最大のメリットの1つ:本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成される

Asset Pipelineを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいのです。

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

[box class=”box26″ title=”Sassが提供する2つの重要な機能”]
1.ネスト
2.変数
[/box]

・SCSS = CSS本体を抽象化したフォーマットであり、CSSに新しい機能を追加しただけ
→有効なCSSファイルは全てSCCファイルとしても扱うことができる。

ネスト

ネスト=プログラムで構成要素の一部として同じ構成要素が現れること。入
れ子構造。

.center {
text-align: center;
}

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

が、

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

にできる。

こうしたネスト機能はフッターのCSSでも利用可。

変数

・冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できる

$light-gray: #777;
.
.
.
h2 {
.
.
.
color: $light-gray;
}
.
.
.
footer {
.
.
.
color: $light-gray;
}

[$light-gray: #777]としておくことで、何度も色のコードを書き込まなくても良い。

レイアウトのリンク

HTML上のリンクを正しいものに書き換え。

通常では

だが、Railsでは

<%= link_to "About", about_path %>

5.3.1 Contactページ

Contactページのテストを追加し、ルート及びコントローラへアクション、ビューを追加。

RailsのルートURL

getルールを使ってルーティングの定義しなおし。

get ‘/help’, to: ‘static_pages#help’

このような変更をしても、ルートURLの時と同様にhelp_pathやhelp_urlといった名前付きルートも使える。

ルーティングを全て書き換え、テストもそれに合わせて変更。

5.3.3 名前付きルート

これまで’#’のままにしていたlink_toの引数などに名前付きルートをheaderパーシャルなどに入れていく。

5.3.4 リンクのテスト

埋め込んだリンクが正しく機能しているかのテスト。

統合テスト(Integration Test)を使って自動化する。

統合テストを使うと、アプリケーションの動作を端から端まで (end-to-end) シミュレートしてテストすることができます。

まずはsite_layoutというテストのテンプレートを作成

$ rails generate integration_test site_layout

assert_templateメソッドを使って、Homeページが正しいビューを描画しているかどうか確かめる

assert_select “a[href=?]”, root_path, count: 2

Railsでは “a[href=?]”の?マークを自動的にabout_pathに置換し、count:2でページ内の同じURLが2つあることを調べている。

統合テストが通るかどうかは以下のコードを実行

$ rails test:integration

統合テストが出たら全てのテストを流して確認

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

ユーザー登録ページへのルーティングを作成

5.4.1 Userコントローラ

Userコントローラを作成する

generateを実行して作成
引数newをつけることで自動的にアクションも作成

$ rails generate controller Users new

5.4.2 ユーザー登録用URL

ルーティングを変更し、テストのURLも変更。

Homeページビューのリンクも変更。

最後にsignupページ用のカスタムスタブのビューを追加

コミット、チェックアウト、マージ、テスト、リモートリポジトリへのpush、Herokuへのデプロイをして終了。

第4章:【Ruby on Rails 独学】Railsチュートリアル 第4章Rails風味のRuby Rubyに関する知識を学ぶ
第5章1:【Ruby on Rails 独学】Railsチュートリアル 第5章1レイアウトを作成する Bootstrap導入

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!