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

eyecatch_template
佐野裕史
書いた人 佐野裕史

こんにちは!インストラクターの佐野( @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を導入する

shutterstock_398576578
「Sass、Scss」「Less」のどちらかによって導入方法が変わります。

Sass、Scss編

Sass、Scssを使う場合は、下記のGemをGemfileに書きます。

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

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

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

具体的な中身はこのように書きます。

なお、こちらの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や公式サイトを読んで、注意点などを把握し、比較してから導入するようにしましょう!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

学習者インタビュー

人気記事セレクション

エンジニア転職希望者必見

プログラミング学習者必見

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

佐野裕史

佐野裕史

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

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

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

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

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