音速開発!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に書きます。

を行って、Railsサーバーを再起動します。

続いてapplication.cssファイルの拡張子を「.css」から「.scss」に変えて、中身を書き換えます。

Sassを使いたい人は、「.sass」に書き換えましょう。

具体的な中身はこのように書きます。
app/assets/stylesheets/application.scss

なお、こちらのGemを使う場合は

といったコードは全て削除します。

読み込みしたいファイルは全て

の形式で記述していきます。

次に、BoostrapのJavaScriptを読み込みます。

に下記の行を追加します。
BoostrapはjQueryが必須なので、必ずjQuery読み込みの後に記述しましょう。

これでSass、ScssでのBootstrap導入は完了です。

使い方は一般的なBootstrapと変わりませんので、公式サイトを見ながら使うといいでしょう。

Less編

Lessを使う場合は、下記の3つのGemを導入します。

Gemをインストールします。

こちらのGemではBootstrap導入の専用コマンドが用意されているので、それを使います。

これでLessによるBoosttrapの導入は完了です。

こちらも使い方は一般的なBootstrapと変わりません。

どちらの導入方法がおすすめ?

僕は、「Sass、Scss」の導入方法をおすすめします。

どちらも書きやすくて便利ですが、大規模なWEBアプリを考えると「Scss」が使えるこちらの方がよりコードを短く書けますし、CSS3も問題なく使うことができます。

使いこなすなら「Scss」ですね!

最後に

いかがでしたでしょうか?

Railsで外部のライブラリやフレームワークを使う場合は注意が必要です。

GitHubや公式サイトを読んで、注意点などを把握し、比較してから導入するようにしましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

佐野裕史

佐野裕史

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

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

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

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

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説