現場Rails Chapter3 Bootstrapについて

Bootstrapとは

フロントエンドのフレームワーク 自分で一から画面のタイトル、メニューバー、ボタン、リンクとなどといったものを大変だけど、手軽に見栄えの良い画面を作成することができる。

rails newを実行した直後は、Railsアプリケーション全体で一つのCSSファイル（app/assets/stylesheets/application.css）を読み込むようになっているので、他のCSSファイルもapplication.cssからさらに読み込む形になる。

bootstrapもapplication.cssから読み込むようにする。

CSSをより効率よく表現してくれるSCSSを使う

まず、app/assets/stylesheets/application.cssを削除する

 rm app/assets/stylesheets/application.css

次にapp/assets/stylsheets/application.scssを作成し、その中に下記のように記入する。

@import "bootstrap";

これでapplication.scssがアプリケーション内の各画面のHTMLから呼ばれることで、画面にBootstrapのデザインが当たった状態にすることができる。

ただし、Bootstrapのデザインの大部分はHTMLのタグに特定の部品に対応するCSクラスをつけることで初めて実現することができる。

なのでこれだけの処理だけでは大きく変わった点はわからない.....

見栄えを具体的に改善するために、Bootstrapのコンテナという部品を使ってbodyの中身を下記のように変更してみる。

●app/views/layouts/application.html.slim

doctype html
html
  head
    title
      | Taskleaf
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', 'media: all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  
  body
    .app-title.navbar.navbar-expand-md.navbar-light.bg-light
      .navbar-brand Taskleaf
    .container
      = yield

'data-turbolinks-track': 'reload'について

<link>要素や<script>要素に、<link data-turbolinks-track="reload"....>といったTurbolinksのために付与している....お...え？

(ここは少し難しそうなので仕組みも含めて後半にやっていく)

Turbolinksとは（ここでは簡単な簡単に理解）

画面遷移を高速化させるために使用するJavascriptのライブラリのことだが、Railsでは利用しやすいようにGemとしてデフォルトで組み込まれているもの。

BootstrapにはCSSだけではなく、Javascriptも含んでいる。
もしJavascriptを使用したい場合は少し設定が必要だが、ここではまだ必要ないので省略

参考

・【Rails】初心者向け！画面遷移の高速化を行うTurbolinksについて図を用いて詳しく解説｜TechTechMedia