らくだ🐫にもできるRailsチュートリアル|5.1

5章でやる事

  • Bootstrap
  • Sass
  • 静的ページをレイアウトに追加
  • ログイン機能のはじめの一歩

HTML/CSSについては分かってる部分はあまり深堀しない感じで

5.1 構造を追加する

  • サイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開発していく
  • モックアップ(=ワイヤーフレーム)を参照しながらviewを整えていく
  • 作業ブランチの作成 →$ git checkout -b filling-in-layout
  • レイアウトファイルの更新(クラスの多くはBootstrap特有の物・本文5.1.2に詳細アリ)

5.1.1 ナビゲーション

サインアップページへのリンクなどを含めたhome.html.erb

link_toヘルパーとは何ぞ(2019.06.25追記)

リンクを生成するヘルパーメソッド
link_to(文字列, パス [, オプション, HTMLオプション])
→文字列の部分をimage_tagヘルパーにすることで画像のリンクを生成できる

image_tagヘルパーとは何ぞ

Imageタグを生成するヘルパーメソッド
→image_tag(画像ファイルへのパス, [, (オプション or HTMLオプション)])
ロゴの画像ファイルをapp/assets/images/に設置

演習

  1. Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう。
  2. mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください (参考: 5.2.1)。
  3. image_tagを使って、kitten.jpg画像を表示してみてください (図 5.4)。

※この演習での内容は後で使いますが、5.1.2で本文と表示が違って落ち着かないのでコメントアウトで

5.1.2 BootstrapとカスタムCSS

Bootstrapを使えるようにする
 →Gemfileを編集し、bundle install


↑これが
 こうなる↓

更にcustom.scssを編集し、すべてのページに適用される共通のスタイルを追加する

↓こうなる

以下本文通まま
CSSの解説やスタイルの追加

演習

動作確認のみなので省略ー
1は5.1.1の演習直後にコメントアウトしているので
2の方は確認後削除で

5.1.3 パーシャル (partial)

  • 同じようなコードをまとめる事が出来る
  • ファイル名はアンダースコアから始める(_shim.html.erbなど)
  • レンダーメソッドで呼びだす

renderメソッドで呼び出したいファイルを指定
「<%= render 'layouts/shim' %>」であれば
「app/views/layouts/_shim.html.erb」を探して、その内容をビューに挿入する

呼び出されるファイルはそれぞれこちら

多分説明のために「呼び出し元のファイルを編集→パーシャルのファイルを作る」になってるけど
実際の作業では「パーシャルのファイルを作る→(コードを移す→)レンダーメソッドを挿入」ですよね。

って事でfooterのパーシャルを作成
(ファイルは自動生成しない。好みの方法で手動で作る)

本文に従ってCSSも追加

演習

  1. Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください。ヒント: 単純に削除してしまうと後でパーシャルを1から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。
  2. リスト 5.18のようなパーシャルはまだ作っていないので、現時点ではテストは redになっているはずです。実際にテストを実行して確認してみましょう。
  3. layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。

まとめとか感想

やっぱり動いてるものを作るのは楽しいですね✨
パーシャルはリファクタリングをしていく上で重要なものになっていくと思うのでしっかり身に付けたい
っつーかなんでもしっかり身に付けたい訳なんですが。はい。

らくだ🐫にもできるRailsチュートリアルとは

「ド」が付く素人のらくだ🐫が勉強するRailsチュートリアルの学習記録です。
自分用に記録していますが、お役に立つことがあれば幸いです。

調べたとはいえらくだ🐫なりの解釈や説明が含まれます。間違っている部分もあるかと思います。そんな所は教えて頂けますと幸いなのですが、このブログにはコメント機能がありません💧お手数おかけしますがTwitterなどでご連絡いただければ幸いです