こんにちは！インストラクターの佐野（ @HiroshiSano0711）です。
Railsは高速でWEBアプリを開発できる優れたフレームワークです。
それにさらに、「Bootstrap」を導入することでデザインや設計などの手間も省くことができます。
RailsにBootstrapを導入すれば音速で開発ができるようになるので、実践でも非常に人気があります。
しかし、RailsでBootstrapを使う場合は少し特殊なので混乱してしまいがちです。
そこで今回は、RailsでBootstrapを導入する方法や導入する際の注意点を解説します。
ぜひ参考にしてみてください。
RailsでBootstrapを使う時の注意点
Railsに最適化されたものを使う
Bootstrapをはじめとする外部のライブラリやフレームワークをRailsに導入する場合は、注意が必要です。
外部ライブラリはダウンロードしてそのまま使う方法と、Rails用に最適化されたGemを使う方法があります。
おすすめは、Railsに最適化されたGemを使う方法です。
Rails用に改良されて統合されており、依存関係や互換性、他のライブラリとの影響などが解消されているのでトラブルが少なく使いやすいためです。
外部のライブラリを導入したい場合は、まずGemがないかどうかを調べるといいでしょう。
CSSの書き方によって使うGemが変わる
RubyのGemとして提供されており「twitter-bootstrap-rails」と「bootstrap-sass」の2種類があります。
ここで注意すべき点は、どちらも導入方法が変わってくるという部分です。
主な違いはCSSの書き方で、それぞれ「Sass」「Scss」「Less」の違いとなります。
Sass、Scss、Lessの違い
CSSの書き方の種類や特徴をおさらいします。
Sassとは
Sassとは「Syntactically Awesome Style Sheets（構文的に素晴らしいスタイルシート）」の略です。
CSSを簡単に書けるように拡張されたものです。
CSSのすべてのバージョンと完全に互換性があって、任意のCSSライブラリも使うことができます。
CSSの中では、コーディングを一番簡略化できるので、世界中で人気があります。
Scssとは
Scssとは「Sassy CSS」の略です。
Sassの機能を最新のCSS3と互換性がある形で再実装されたものなので、Sassの上位版といえます。
CSSと書き方も似ているため、WEBページをコーディングするマークアップエンジニアにとって扱いやすいでしょう。
Lessとは
Lessとは「The dynamic stylesheet language（ダイナミックなスタイルシート言語）」の略です。
ダイナミック（動的）な処理をCSSに追加拡張できます。
node.js、RhinoなどのJavaScriptライブラリを利用してサーバーサイドでも動作可能です。
書き方も一番CSSに近いので誰でも導入しやすいでしょう。
RailsにBootstrapを導入する
以下で実際にRailsにBootstrapを導入していきます。特にインストール場所に影響を受けるものでもないので、適当なアプリをrails newで作って実験してみるといいでしょう。
「Sass、Scss」と「Less」のどちらかによって導入方法が変わります。
Sass、Scss編
Sass、Scssを使う場合は、下記のGemをGemfileに書きます。
gem 'bootstrap-sass', '~> 3.3.6' gem 'sass-rails', '>= 3.2'
bundle install
を行って、Railsサーバーを再起動します。
続いてapplication.cssファイルの拡張子を「.css」から「.scss」に変えて、中身を書き換えます。
Sassを使いたい人は、「.sass」に書き換えましょう。
具体的な中身はこのように書きます。
app/assets/stylesheets/application.scss
@import "bootstrap-sprockets"; @import "bootstrap";
なお、こちらのGemを使う場合は
*= require_self *= require_tree .
といったコードは全て削除します。
読み込みしたいファイルは全て
@import ファイル名;
の形式で記述していきます。
次に、BoostrapのJavaScriptを読み込みます。
app/assets/javascripts/application.js
に下記の行を追加します。
//= require jquery //= require bootstrap-sprockets
BoostrapはjQueryが必須なので、必ずjQuery読み込みの後に記述しましょう。
これでSass、ScssでのBootstrap導入は完了です。
使い方は一般的なBootstrapと変わりませんので、公式サイトを見ながら使うといいでしょう。
Less編
Lessを使う場合は、下記の3つのGemを導入します。
gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails'
Gemをインストールします。
bundle insatll
こちらのGemではBootstrap導入の専用コマンドが用意されているので、それを使います。
$ rails g bootstrap:install insert app/assets/javascripts/application.js create app/assets/javascripts/bootstrap.js.coffee create app/assets/stylesheets/bootstrap_and_overrides.css.less create config/locales/en.bootstrap.yml gsub app/assets/stylesheets/application.css gsub app/assets/stylesheets/application.css
これでLessによるBoosttrapの導入は完了です。
こちらも使い方は一般的なBootstrapと変わりません。
どちらの導入方法がおすすめ？
僕は、「Sass、Scss」の導入方法をおすすめします。
どちらも書きやすくて便利ですが、大規模なWEBアプリを考えると「Scss」が使えるこちらの方がよりコードを短く書けますし、CSS3も問題なく使うことができます。
使いこなすなら「Scss」ですね！
最後に
いかがでしたでしょうか？
Railsで外部のライブラリやフレームワークを使う場合は注意が必要です。
GitHubや公式サイトを読んで、注意点などを把握し、比較してから導入するようにしましょう！
