1. NaokiIshimura

    Posted

    NaokiIshimura
Changes in title
+Railsアプリで Bootstrap 4 を利用する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,86 @@
+![rails-bootstrap.png](https://qiita-image-store.s3.amazonaws.com/0/141934/10e5407e-276a-f1dc-dd38-c09cf3b88fa1.png)
+
+# はじめに
+Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。
+
+# 公式サイト
+<a href="http://getbootstrap.com/">Bootstrap · The most popular HTML, CSS, and JS library in the world.</a>
+
+# 注意点
+投稿時点でのBootstrapのバージョンは`v4.0.0-beta.2`です。
+
+# gem
+これまでrailsにBootstrapを導入する際には`bootstrap-sass`を利用してましたが、READMEに「Bootstrap 4では`bootstrap-rubygem`を利用してね」と案内がありました。
+
+| Bootstrap | Gem | GitHub |
+| --- | --- | --- |
+| 2~3 | bootstrap-sass | [twbs/ bootstrap-sass](https://github.com/twbs/bootstrap-sass) |
+| 4 | bootstrap | [twbs/ bootstrap\-rubygem](https://github.com/twbs/bootstrap-rubygem) |
+
+# 導入手順
+
+`bootstrap-rubygem`のREADME通りに進めていきます。
+
+## Gemfile
+
+Gemfileで`bootstrap`を指定してインストールする。
+Bootstrapは`jQuery`に依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上では`jquery-rails`もGemfileに追記する。
+
+```ruby:Gemfile
+gem 'bootstrap', '~> 4.0.0.beta2.1'
+gem 'jquery-rails'
+```
+
+```shell-session
+$ bundle install
+```
+
+**注意点**
+`sprockets-rails`が`v2.3.2.`以上である必要がある。
+
+
+```shell-session:`sprockets-rails`バージョン確認方法
+$ bundle show |fgrep sprockets-rails
+ * sprockets-rails (3.2.1)
+```
+
+## application.scss
+
+Railsアプリの作成時に生成される`application.css`を`application.scss`にリネームするなどして、`.scss`(Sass構文の場合は`.sass`)ファイルを用意する。
+
+```shell-session
+$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
+```
+
+`app/assets/stylesheets/application.scss`でbootstrapをimportさせる。
+
+```ruby:/assets/stylesheets/application.scss
+// Custom bootstrap variables must be set or imported *before* bootstrap.
+@import "bootstrap";
+````
+
+**注意点**
+- Sassファイルでは`*= require`、`*= require_tree`を削除する
+- Sassファイルではインポートに`@import`を利用する
+- Sassファイルで`*= require`を利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる
+
+## application.js
+
+Bootstrapと依存関係を`application.js`に追記する
+
+```ruby:app/assets/javascripts/application.js
+//= require jquery3
+//= require popper
+//= require bootstrap-sprockets
+```
+
+**補足**
+- Bootstrapのtooltipsやpopoverは`popper.js`に依存している
+- `bootstrap`の依存gemに`popper_js`が指定されているため新たにインストールは不要
+- コンパイルを高速化したい場合は`bootstrap-sprockets`の代わりに`bootstrap`を指定する
+
+# さいごに
+
+Bootsrap3のサイトで利用していたコードを今回構築したBootstrap4環境に適用してみました。見た目に大きな変化はありませんが、4のほうが色合いが鮮やかですね。
+
+![bootstrap3-4.png](https://qiita-image-store.s3.amazonaws.com/0/141934/ded6bd8a-843f-a0c0-487e-56a886fb4c55.png)