More than 3 years have passed since last update.

BootstrapをRailsアプリで導入した話

Last updated at 2021-02-03Posted at 2021-02-03

本記事の内容と目的

内容は、BootstrapをRailsアプリで導入する所から、基本的な使い方となります。
Bootstrapをこれから初めて導入するっていう人にオススメです。
Railsアプリは導入済みという前提で話を進めます。
Railsアプリの立ち上げ方法を知りたい方は下記記事を参考にしてください。
https://qiita.com/shibax55/items/00a21b4d0ea99cdbc057

では早速本題に入りましょう！

Bootstrapの導入

Gemfile導入、インストール

今回はGemでBootstrapを導入していきます。
まずは、BootstrapとjQueryをGemfileの末尾に記述します。
jQueryを導入する事でコードの記述量が減り、見やすくなるそうです。

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

次にターミナルからbundle installコマンドでインストールを実行します。
インストール前にアプリのディレクトリに移動しましょう。

% cd ~/projects/"アプリ名"

% bundle install

scss記法への変更

次にapplication.cssのファイル名をapplication.scssに変更します。
Bootstrapがscss記法を採用している為、Railsアプリも合わせます。
scssはcssに比べて記述を削減でき、効率よくコーディングが行えます。

変更前
app/assets/stylesheets/application.css　
変更後
→app/assets/stylesheets/application.scss

次にapplication.scssの記述を追記・変更します。
= require_tree .と= require_selfを削除し、@import "bootstrap";を追記します。
追記するコードはBootstrapを読み込むためのコードになります。

app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .    #＜（削除）
 *= require_self      #＜（削除）
 */
@import "bootstrap";  #＜（追加）

JSファイルへの記述追加

次にBootstrapで使われる、JavaScriptファイルとjQueryファイルを読み込む設定をJSファイルに記述していきます。
下記ファイルの元々あったコードの上に記述を追記します。

app/javascripts/packs/application.js

# 下記の３つを追記
//= require jquery3
//= require popper
//= require bootstrap

# 元々あったコード
//= require rails-ujs
//= require activestorage
//= require turbolinks

次にBootstrapでJavaScriptの動的な挙動を反映させる為に、下記ファイルに追記しましょう。
Bootstrapでは、画面上に折り畳むCollapse等の動きを非同期で簡単な記述で実装できます。
直接URLをRailsアプリのViewファイルに直接scriptタグで記述してBootstrapのJSプラグインを読み込むように設定する。

app/views/layouts/application.html.erb

  <body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <%= yield %>
  </body>
#body要素内にscriptタグで直接URLを記述してJSプラグインを直接読み込ませる

ここでBootstrapの導入は一通り完了となります。お疲れ様でした。
サーバーを再起動して、Railsアプリにブラワザからアクセスしてみましょう！
特にエラーが発生していなければ成功です！
エラーが発生している場合はnode.jsのバージョンが古い可能性があります。

% rails s

Bootstrapの基本的な使い方

Bootstrapの使い方は大きく分けて下記２つの方法があると理解しています。

１．HTMLの各要素内のclass属性にBootstrap特有の記述をして表示を変更する。

CSSのコードを直接class属性に書き込むようなイメージです。
後ほどCSSのコードと比較しながら事例を紹介します。

2.HTMLの各要素・属性の組み合わせをBootstrap特有の組み合わせで記述して非同期の動きをつける。

CollapseやAccordionなどの動きを簡単に非同期で実装できます。
こちらも後ほど事例紹介します。
Bootstrapの記述の調べ方としては公式を見て、実装したい表示方法を探すのが近道だと思います！
公式URL　：　https://getbootstrap.com/
イメージが沸かないと難しいと思うので先ほど紹介した２つの方法を早速紹介します！

HTMLの各要素内のclass属性にBootstrap特有の記述する方法

下記記述のように、class属性内にBootstrap特有の記述で表示を変更していきます。
class内のd-flexはCSSコードのdisplay: flex;と同じ効果があります。
他にも同じような記述が多くあります。

<div class="d-flex flex-column justify　text-left">
  <div class="h2">タイトル</div>
  <ul class="d-flex flex-column">
     <li>Bootstrap事例</li>
     <li>Bootstrap事例</li>
  </ul>
</div>

背景や文字に色をつける際に先ほどのapplication.scssファイルに登録すると、効率よくコーディングができます。
事例を下記に紹介します。

app/assets/stylesheets/application.scss

/* Bootstrapの色を登録して、class属性に記述して使えるようにしている */
$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);
/* alpha、betaという名前で背景色と文字色を登録している */
/* class属性に記述すれば使えるようになる */
.alpha {
  color: $white;
  background-color: $gray-600;
};

.beta {
  color: $white;
  background-color: $cyan;
};

登録した色は下記のように使用します。

<div class=" beta d-flex flex-column justify　text-left">
  <div class="alpha h2">タイトル</div>
  <ul class="d-flex flex-column">
     <li>Bootstrap事例</li>
     <li>Bootstrap事例</li>
  </ul>
</div>

Bootstrapの機能で動きをつける

Bootstrapの機能を使えば動きをつけることができます。
下記にCollapseの事例を示します。ボタンをクリックして折り畳みができる機能です。

<div class="container">
  <button class="btn beta collapsed" type="button" data-toggle="collapse" data-target="#example-1" aria-controls="example-1" aria-expand="false">
        <span>Collapse見出し</span>
  </button>
  <div class="collapse" id="example-1" style="">
    <div class="container">
      <div class="row">
        Collapseの事例
      </div>
    </div>
  </div>
</div>

Collapseは下記サイトのヘッダーに挙動があります。参考にご覧ください。
https://getbootstrap.com/docs/4.6/examples/album/
それでは一つ一つ説明していきます！
まずclass属性内のcontainerという記述ですがBootstrapの特有の記述で、比較的上階層で使う記述です、箱のようなイメージです。
次に一番長い下記記述を説明します。

  <button class="btn beta collapsed" type="button" data-toggle="collapse" data-target="#example-1" aria-controls="example-1" aria-expand="false">
        <span>Collapse見出し</span>
  </button>

button要素内の記述は、Collapseを起動するボタンを構成しています。
class属性のcplloapsedとtoggle="collapse" でまず宣言をします。
次に折り畳んだ状態から開く中身をdata-target="#example-1" aria-controls="example-1"で指定します。
aria-expand="false"は初期状態が閉じている事を表しています。
次に折り畳みの中身である下記記述を説明していきます！

<div class="collapse" id="example-1" style="">
    <div class="container">
      <div class="row">
        Collapseの事例
      </div>
    </div>
  </div>

class="collapse"でcollapseの中身である事を定義しています。
id="example-1"id属性と先ほどのdata-target属性を同一の記述をする事で中身である事を定義してます。
これでcollapse機能の説明を終わります。
他にも色々な機能が備わっているので、是非Bootstrapの公式ページ内で検証ツールを使って調査してみましょう！
公式URL：https://getbootstrap.com/docs/4.6/examples/

最後に

Bootstrapをこの前初めて使った時に、簡単に綺麗なWebサイトを使えたことに素直に感動しました！
もう既に知ってるよという人が大半だと思いますが、まだ使ったことがないよって人は是非導入してみてください！！
最後までご覧いただきありがとうございました！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up