Search

検索したいワードを入力してください

2019年02月25日

BootstrapをRailsに導入してみよう!徹底解説!

WEBフレームワークのひとつであるBootstrapをRubyOnRailsに導入する方法をわかりやすく解説します。また、RailsにBootstrapを導入する際の注意点や、メリット・デメリットについても触れていきます。

Bootstrapとは

BootstrapはWEBフレームワークの一種です。

HTML、CSS、javascriptより構成されるフレームワークで、Bootstrapを導入することで簡単にWEBアプリケーションやWEBページをデザインすることができます。ボタンやフォームなど複数のパーツやおしゃれなテンプレートが用意されているので選べるデザインも豊富です。

また、レスポンシブデザインにも対応しています。スマートフォン向けのデザインを簡単に作れて非常に便利です。

今回はRuby on RailsにBootstrapを導入する方法について解説していきます。

RailsにBootstrapを導入してみよう

早速Ruby On RailsへBootstrapを導入していきましょう。

まずは以下のコマンドを実行し、Railsで新規アプリケーションを作成します。

rails new bootstrap_sample

新規アプリケーションを作成したら、簡単な入力フォームをscaffoldで作成しましょう。ここでは「post」に内容を表す文字列と名前を入力できるフォームを作成します。

rails generate scaffold post content:text name:string
rake db:migrate

アプリケーションを作成したらサーバーを起動し、動作確認を行いましょう。
以下のコマンドを実行後、localhost:3000/postsにアクセスします。

rails server

表示された入力フォームを確認し、いくつかデータを登録してみましょう。

Gemfileを編集する

Bootstrapを導入するためにGemfileを編集します。

生成されたアプリケーションの中にあるGemfileに以下の内容を記述しましょう。Railsのバージョンが5.1以降の場合は、「gem 'jquery-rails'」を併せて記述します。

gem 'bootstrap'
gem 'jquery-rails'

Gemfileの編集が完了したらbundle installを実行し、作成したアプリケーションに組み込みます。

bundle install

コマンドの実行結果を確認し、問題なければ次へ進みましょう。

application.scssの編集

Bootstrapを利用するためにはapplication.scssを編集する必要があります。

しかし、実際にapplication.scssを編集する前に、生成されたファイルの名称を変更しなければなりません。app/assets/stylesheets/application.cssのファイル名をapplication.scssに変更してください。

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

ファイル名を変更したら、application.scssの内容を編集します。まずは、以下の記述を削除しましょう。

*= require_tree
*= require_self

続いて以下の内容を追加します。

@import "bootstrap";

application.jsの編集

application.jsも編集が必要です。

app/assets/javascripts/application.jsに以下の内容を追記します。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

以上でRuby on RailsへBootstrapの導入が完了しました。
以下のコマンドを実行し、localhost:3000/postsへアクセスしてみましょう。

rails server

最初に表示した内容から若干ですが変化しているのがわかります。実際にBootstrapを使用していく場合はここから必要なパーツのソースコードを記述することでデザインを変更することができます。

RailsでBootstrapを使うときの注意点

ここまでRuby Oon RailsにBootstrapを導入する手順について説明してきましたが、注意点があります。

これまで説明した内容でもRuby on RailsにBootstrapを導入することはできますが、他にも導入する方法があります。その際に注意する内容を踏まえて説明していきます。

CSSの書き方によって使用するGemが違う

注意しなければならないのは、CSSの種類によって使用するGemが異なることです。

CSSにはSass、Scss、Lessといった種類があり、使用するGemが違います。具体的には、以下のようにSass(Scss)とLessではGemfileに記述する内容が異なります。

Sass(Scss)の場合
※Railsのバージョンが5.1以降の場合は「gem 'jquery-rails'」が必要です。
gem 'bootstrap'
gem 'jquery-rails'

Lessの場合
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

Sass、Scss、Lessの違い

Sass、Scss、Lessについて詳しく見ていきましょう。

Sass、Scss、Lessは、いずれもCSSを拡張したメタ言語であり、CSSがより使いやすくなります。それぞれでCSSの書き方が異なっていますので注意が必要です。

Sass、Scssでは変数は「$」から始まりますが、Lessでは変数は「@」から始まります。また、Sassでは「;」は使用せず、Scss、Lessではセミコロンを使用します。

Sass
$green:#008000
.sample
color:$green

Scss
$blue:#008000;
.sample{
color:green;
}

Less
@green:#008000;
.sample{
color:@green;
}

Ruby on RailsではGemfileに「gem 'sass-rails'」がデフォルトで記述されているため、Sass(Scss)が適用されています。

Bootstrapを使うメリット

Bootstrapを使うことで得られるメリットについて説明します。

Ruby On RailsにBootstrapを導入して実際に使ってみると、WEBフレームワークとしての便利な部分が見えてきます。まずはそのメリットについて見ていきます。

おしゃれなデザインが簡単に作れる

Bootstrapを使うことによっておしゃれなデザインを導入しやすくなります。

用意されているコンポーネントからソースコードを組み込めば、ボタンやフォームなどのデザインを簡単に導入することができます。これにより、開発に掛かるコストを削減することが可能となります。複数のコンポーネントを組み合わせることでおしゃれなデザインを作ることもできます。

また、Bootstrapにはテンプレートもありますので、これらを導入することでおしゃれなデザインのWEBアプリケーションやWEBページを作成することができます。

Bootstrapを使うデメリット

では反対に、Bootstrapを使うことによるデメリットは何でしょうか。

Bootstrapのメリットについて述べましたが、良いことばかりではありません。ここではそのデメリットについて説明します。

Bootstrapで作ったサイトはカスタマイズしにくい

Bootstrapはオリジナリティのあるデザインを作成することが難しいです。

用意されているパーツから好きなデザインを適用することは簡単ですが、自分好みのオリジナルなデザインを作成するにはソースコードに手を加える必要があります。

デザインにこだわろうとするとどうしてもコードを記述する内容が増えて、結果的に大きなコストが掛かってしまいます。

自分なりにカスタマイズすることが難しい点が、Bootstrapのデメリットと言えます。

便利なWEBフレームワークのBootstrapを活用しよう

今回はRuby on Rails にBootstrapを導入する方法について解説しました。

Bootstrapを導入することで、簡単におしゃれなデザインを適用することが可能になるメリットがあります。しかし、カスタマイズがしにくいため、オリジナリティのあるデザインのWEBアプリケーションやWEBページを作成することは難しいです。

また、導入する際にCSSの書き方によって使用するGemが異なる点にも注意しましょう。Bootstrapを導入して実際にパーツやテンプレートを適用し、便利なWEBフレームワークのBootstrapを活用しましょう。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related