前のパートに戻る 完了して次のパートへ  

  2-3 Bootstrapの導入

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

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

(今回のパートはBootstrap4の公式ドキュメントを参考にしてます)

Bootstrapについて詳しく勉強したい方は以下の教材が非常に分かりやすく解説しているのでおすすめです。

Bootstrapを使ってレイアウトできるようになろう!

本パートの目標物


本パートでは、下記の画像のように青色のボタンを表示するところまで実装していきます。

目標物を作成するまでの流れ


  1. 公式ドキュメントに沿ってBootstrapを導入
  2. Bootstrapが導入されたか確認

公式ドキュメントを見ながら、Bootstrapを導入していきます。ドキュメントを見ながらやるので、導入方法を覚える必要はありません。

(エンジニアは公式ドキュメントを見ながら実装することが多々あるので、ここでドキュメントを見るという行為に少しでも慣れていただければと思います。)

では、実際に進めてみましょう。

1. 公式ドキュメントに沿ってBootstrapを導入


まず今回導入するBootstrapの公式ドキュメントにアクセスしてください。

公式ドキュメント)bootstrap-rubygem

アクセスしたら公式ドキュメントの「a. Ruby on Rails」のところを見てください。

「Add bootstrap to your Gemfile」、直訳すると「Gemfileにbootstrapを追加」とあるので、Gemfileに以下のコードを追加します。

kanban
└── Gemfile

またドキュメントのちょっと下にいったところを見てください。

「If you're using Rails 5.1+, add the jquery-rails gem to your Gemfile」

つまり、Rails 5.1以降を使用している場合はjquery-railsをGemfileに追加する必要があります。(本カリキュラムはRails5.1以降を使用しています。)

kanban
└── Gemfile

今回のgemはGemfileの末尾に追加していだければ大丈夫です。

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

では、bundle installをターミナル上で実行してください。

$ bundle install

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

Bootstrapのstyleをimportする


またドキュメントを見てみましょう。

「Import Bootstrap styles in app/assets/stylesheets/application.scss」とあるので、app/assets/stylesheets/application.scssにBootstrapのstyleをimportする記述を追記します。

ただ、app/assets/stylesheets/application.scssという拡張子がscssのファイルは存在しないです。(拡張子がcssのファイルは存在します。)なのでファイルの拡張子を変更する必要があります。

直接、お使いのテキストエディタからファイル名を変更してもいいですが、ドキュメントにもあるようにコマンドを実行してファイル名を変更できます。

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

ファイル名を変更したら、application.scssファイルを以下のように1行のコードに編集してください。(コメントアウトは削除されて構いません。)

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

application.jsにコードを追加


またドキュメントを見てみましょう。

「Add Bootstrap dependencies and Bootstrap to your application.js」とあるので、application.jsに以下の3行のコードを追加します。

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

このときの注意点として、すでにかかれている以下のコードが一番下になるように、追記してください。

//= require require_tree .

理由としては、require_tree .は現在のディレクトリにある全てのJavaScriptファイルを読み込むからです。jquery3などのコードが先に読み込まれてからでないと、エラーが起きる可能性があります。

参考) フェストファイルとディレクティブ

app/assets/javascripts/application.jsが以下のようになっていれば大丈夫です。

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

2. Bootstrapが導入されたか確認


実際にBootstrapが機能するか確認します。

BootstrapのComponentsの公式ドキュメントを参考に仮のボタンにBootstrapのクラスを当てます。

app/views/top/index.html.erbを以下のコードを追加してください。

app
└── views
    └── top
        └── index.html.erb

コードを追加したら、まずローカルサーバーを再起動してください。(サーバーが既に立ち上がっている場合は、control + Cでサーバーを終了させることができます。そのあと「rails server」コマンドでサーバーを立ち上げてください。)

先ほどBootstrapのGemを追加しましたが、サーバーを一度再起動しないと追加したGemが反映されないからです。

再起動したら、http://localhost:3000 にアクセスしてください。青色のボタンが表示されていればうまく動作しています。

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

お疲れ様でした。

議論
0 質問
このコースの評価は?