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

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


自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

学習者インタビュー

32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
ダメ営業マンがわずか3ヶ月でエンジニアデビューできた理由

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

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