Railsチュートリアル5章　前半まとめ

プログラミング

いよいよフロント部分の実装へ

 

 

基本的なレイアウトを作成

ーBootstralを使ったデザイン

ーPartialを使ったリファクタリング

ーAsset Pipeline機能、Sassについて紹介

 

■ポイント

 

・記法メモ

<%= link_to"sample app", '#', id: "logo" %>

（訳）

<a id = 'logo' href = '#' >sample app</a>

<a class='' ">の場合も同じ記法になる。

 

・画像の場合

<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),

                                        "https://rb.org/" %>

画像の場所

画像がなかったらロゴを表示

幅

画像のリンク

 

・Asset　NotFoundエラーはHTML/CSSdで何かが起こっている

 

・Bootstrap導入メモ

gem 'bootstrap-sass', '3.4.1'

bundle install

SCSSファイルを作成

@import "bootstrap";

@import "bootstrap";

これをSCSSファイルへ追加

 

・サイトの評価には機能もそうだが、デザインも大きく関わってくる。

とにかくまずはタイポグラフィーを意識することを大事にしろとのこと。（フォント、見栄え）

 

・Partial

リファクタリングの一環。

用いることでよりDRYでコードになる。

Partialの場合は、アンダーバーつけよう。

（例）app/views/layouts/_shim.html.erb

 

・SassとAsset Pipeline

 

Sass ・・・CSSの拡張言語で、共通パターンがあればネストできたり、冗長なコードを短くできたり、パッケージングをして、複数利用できるので超便利。(@includeなど)

 

Asset Pipeline　・・・CSS/JavaScript/Imageなどを管理する機能

1.アセットディレクトリ

→静的ファイルを目的別に分類

 

2.マニフェストファイル

→1つのファイルにまとめる方法をRailsに指示

 

3.プリプロセッサエンジン

→指示に従ってブラウザに配信できるように結合

 

 

記述時間：18分47秒

 

■まとめ

色々と細かいところは出てきましたが、一週目なので全てをインプットしようとはしてません。

とりあえず大枠は理解してるのでどんどん進みます！

しかしどれも時期に理解できる、コードが書けないといけないものなので着実に段階を踏んで行きます。