デザイナー・フロントエンジニア向け。初心者がRuby on RailsにBootstrapを導入してデザインを始める方法

ずっとPHP、Dreamweaver、Wordpress、Bootstrapをいじっていたフロントエンジニア、デザイナーのあなたに
RailsでもBootstrapを簡単に導入する方法を自分のメモ代わりにご紹介。

デザイナーで急にRuby on railsを使いたくなった！使わなければいけなくなった！
そんな時に役立つかと思います。

環境は
ruby 2.5.1
rails 5.0.7
gem 2.7.6

まずはrails new でアプリ作成

rails new myblog
cd myblog

まずは、いつものファイルを用意します。

さっそくBootstrapを導入の前に

ここで私は何回も失敗しました。

原因の一つに
・アプリ名をbootstrap にしていた
・テスト用でさんざん弄ったアプリに入れようとした

こんなところでした。
海外のサイトで調べたとき、「名前にbootstrapを使うなんてとんでもない！すぐにアプリを閉じて」なんてものを見つけたので
早速作り直してファイル名変更。
これでうまくいきました。

さっそくBootstrapを導入

gemfile を開きます。

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

この２つを追加します。

次にbundle installします。

次にコマンド画面で

bundle install

をします。

次にcssをscssへ変更

コマンドから

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

application.css → application.scss にファイル名を変更します。
今までCSSしか使って来なかった場合はここでつまずくかも知れません。

application.scss　に追加

app/assets/stylesheets/application.scss
application.scssの中身を全部消して良いです。

@import "bootstrap";

上記を追加してください。

次にapplication.jsへ追記

app/assets/javascripts/application.jsに追記します。

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

これでBootstrapの導入は完了になります。

最後に動作確認

テストで動作確認する為にコマンドから

rails g controllor tweets index show new

このコマンドでview,controller内にファイルが作成されますので
view/index.html.erb のファイル内にBootstrapのclassを使ってください。

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      本文的な
    </div>
    <div class="col-sm-4">
      サイドバー的な
    </div>
  </div>
</div>

うまく表示できましたか？
とにかく動作確認までしたい時は役に立つかと思います。
Dreamweaver 使ってるなら有料ですが RubyMine 良いですよ。