音速開発!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歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

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


最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

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

専属講師に質問し放題、レッスンし放題、最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


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】
プログラミング講師@佐野裕史
自分でプログラミングができない人のために情報を発信しています。
お気軽にフォローください。