LoginSignup
0
0

More than 1 year has passed since last update.

【学習】Ruby on Rails チュートリアル 第7版 - 第5章 レイアウトを作成する

Last updated at Posted at 2023-05-15

5/15 22:15 開始

*Bootstrap
Twitter社によるオープンソースのWebデザインフレームワーク

*クラスとidの主な違い
クラス:ページ内で何度でも使える
id:ページ内で一度しか使えない

*レスポンシブウェブデザイン (英: responsive web design、 RWD)
デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする

*Sass
:スタイルシートを記述するための言語
5.1まで終了

5/15 23:15 終了

5/16 8:15 開始

*アセットパイプライン
:CSSや画像などの静的コンテンツの作成と管理を大幅に強化する。以下の3つの主要な機能がある。
∟アセットディレクトリ:静的ファイルを目的別に分類する、標準的な3つのディレクトリ
app/assets: 現在のアプリケーション固有のアセット
lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット(デフォルトでは存在しない)

∟マニフェストファイル:アセットディレクトリに配置した静的ファイル(アセット)をどのように1つのファイルにまとめるのかをRailsに指示する。※実際にアセットをまとめる処理を行うのはSprocketsというgem。

∟プリプロセッサエンジン:必要なアセットをディレクトリに配置してまとめた後、さまざまなプリプロセッサエンジンを実行して結合することで、ブラウザに配信できるようにする。ファイル名の拡張子で判断する。※プリプロセス(前処理)
.erbであればERB用のプリプロセスが実行されて、HTMLに変換されるイメージ....?

5.3.2まで終了

5/16 9:10 終了

5/16 18:45 開始

*統合テスト(Integration Test)
一連の作業をテスト
↓統合テストを自動で実施するファイル(site_layout_test.rb)を作成。
rails generate integration_test site_layout

以下の一連をテストする。
1.ルートURL(Homeページ)にGETリクエストを送る。
2.正しいページテンプレートが描画されているかどうか確かめる。
3.Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる。

1.get root_path
2.assert_template 'static_pages/home'
3.assert_select "a[href=?]", root_path, count: 2 など

3.の補足

"a[href=?]"
→aタグとhref属性をオプションで指定して調べる。
?
→root_pathが入る
count: 2
→埋め込んだリンクの数

↓がヒットする。
xxxx

さらに↓をオプションに加えれば...
text: "Home"

↓がヒットする。(きっと)
Home

5章 終了!

5/16 20:00

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0