Techpit:テックピット
  前のパートに戻る 完了して次のパートへ  

  2-5 Bootstrapの導入

Bootstrapの導入


今回のパートではBootstrapを導入していきたいと思います。

Bootstrapは最も有名なCSSのフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブルにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発することができます。

(今回のBootstrap4のgemの公式ドキュメントのこちらを https://github.com/twbs/bootstrap-rubygem 参考にしてます)

Bootstrapについて詳しく勉強したい方は以下動画をご覧ください。

Bootstrap 4入門

学習キーワード


- Bootstrap
- scss

gemをインストール


Deviseの設定をした時もまずはgemをインストールしたようにBootstrapに関してもまずはgemをインストールします。

下記のコードをGemfileに追加します。バージョンは4.1.3に指定しています。

gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'

Gemfileを編集した時は、gemfile.lockを更新するために、bundle install をすることによって追加したgemを反映させます。Gemfileは必要なgemリストでGemfile.lockには実際にインストールしたgemリストが入っております。

$ bundle install

これでgemを追加できました。

app/assets/stylesheets/内にapplication.scss を作成する


次に、app/assets/stylesheets/内にapplication.scssというファイルを作成します。

(app/assets/stylesheets/内にあるapplication.cssというファイルは削除します)

作成したら、そのファイル内で下記のコードを追加します。下記のコードはbootstrapをimportする(使えるようにする)という指示です。 application.scssファイルを以下のように編集してください。

app
└── assets
    └── stylesheets
        └── application.scss

app/assets/javascripts/application.jsにコードを追加する


app/assets/javascripts/application.jsに以下のコードを追加します。下記はjquery3とpopperとbootstrap-sprocketsを使えるようにするという指示です。それぞれBootstrapを使うために必要なライブラリになります。読み込みの順番も関係があるので下記の順で読み込みましょう。cssの場合はimportで読み込みましたが、jsの場合はrequireを使って読み込みます。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

の3つを追加します。

このときの注意点として、すでにかかれている

//= require require_tree .

が一番下になるように、追記してください。

理由としては、require_tree . で読み込むものはjquery3などのコードが読み込まれてからでないとエラーが起きるものがあるからですapp/assets/javascripts/application.jsに以下のコードを追加してください。

app
└── assets
    └── javascripts
        └── application.js

以上でBootstrapの導入は終了です。

Bootstrapが導入されたかの確認


実際にBootstrapが機能するか確認したいと思います。

Bootstrapの公式ドキュメントを参考にフラッシュメッセージにBootstrapのクラスを当てたいと思います。

app/views/layouts/application.html.erbを以下のように編集してください。

app
└── views
    └── layouts
        └── application.html.erb

コードを追加したら、まずローカルサーバーを再起動してください。先ほどBootstrapのGemを追加しましたが、サーバーを一度再起動したないと追加したGemが反映されないからです。再起動したら、実際にhttp://localhost:3000/users/sign_inにアクセスしてフォームに何も入力せずにログインしようとすると、下記の画像のように赤いスタイルが表示されていたらうまく動作しています。

以上で今回のパートは終了です。

議論
2 質問