音速開発!RailsでBootstrapを導入する方法〜Less、Sass、Scss〜

こんにちは!インストラクターの佐野( @HiroshiSano0711)です。

Railsは高速でWEBアプリを開発できる優れたフレームワークです。

それにさらに、「Bootstrap」を導入することでデザインや設計などの手間も省くことができます。

RailsにBootstrapを導入すれば音速で開発ができるようになるので、実践でも非常に人気があります。

しかし、RailsでBootstrapを使う場合は少し特殊なので混乱してしまいがちです。

そこで今回は、RailsでBootstrapを導入する方法や導入する際の注意点を解説します。

ぜひ参考にしてみてください。

RailsでBootstrapを使う時の注意点

shutterstock_151311518

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で作って実験してみるといいでしょう。
shutterstock_398576578
「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や公式サイトを読んで、注意点などを把握し、比較してから導入するようにしましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

佐野裕史

佐野裕史

侍エンジニア塾インストラクター。
主に技術担当をしています。

【経歴】
力仕事、接客業、営業職など様々な業界を経てIT業界に参入。
IT未経験からスタートし、1ヶ月で仕事獲得に奇跡的に成功。
1年半後にフリーランスに転身。

Web開発を主に行っており、得意とするのはRails、Ruby。
【技術スキル】
Rails、Ruby、Swift、Java(Android)、JavaScript

【趣味、趣向】
麻雀
MTG(マジックザギャザリング)
ダーツ、卓球、野球、ボウリングなどの球技

【Facebookページ】
https://www.facebook.com/hiroshi.sano.7
【Twitter】
プログラミング講師@佐野裕史
自分でプログラミングができない人のために情報を発信しています。
お気軽にフォローください。