Ruby on RailsとBootstrapを使ったWeb開発の基本をわかりやすく解説

フルスタック開発•2025/1/28

はじめに

Ruby on Railsは、Webアプリケーション開発を効率良く行うためのフレームワークです。一方でBootstrapは、レスポンシブデザインに対応したスタイルを素早く導入するためのCSSフレームワークとして知られています。

両者を組み合わせると、データベースとの連携やルーティングなどをRailsに任せながら、Bootstrapのデザインを簡単に適用できるのが特徴です。見た目を整えるCSSコーディングにかかる手間をかなり削減できるため、管理システムやプロトタイプの作成にも多く使われています。

今回は初心者の皆さんでも理解しやすいよう、できるだけ平易な言葉で、具体的なコード例を交えながら「ruby on rails bootstrap」の導入から使いどころまでを説明していきます。実務における利用シーンも触れていきますので、これからWebアプリケーション作りに挑戦してみたい方は、ぜひ参考にしてみてください。

この記事を読むとわかること

Ruby on RailsとBootstrapを組み合わせるメリット
RailsプロジェクトへのBootstrapの導入手順
実務で活躍しやすい画面作りのポイント
フォームやレイアウトを扱うときの注意点
具体的な画面例を想定した活用シーン

RailsとBootstrapを組み合わせるメリット

Ruby on RailsとBootstrapは、それぞれ開発効率を高める要素を持っています。 RailsにはMVCアーキテクチャを標準で備えており、モデルやコントローラ、ビューを分割して整理することで、保守しやすいコードを書くことができるでしょう。 Bootstrapは事前に用意されたCSSクラスを当てるだけで、ボタンやナビゲーションバーなどが整った見た目になります。

この組み合わせによって、以下のような利点が得られます。

1. 開発スピードの向上

デザイン部分のコーディング時間が短縮されるため、アイデア検証や機能開発に集中できます。

2. レスポンシブデザインの導入が容易

スマートフォンからデスクトップまで、同じCSSクラスを使って対応しやすくなります。

3. チーム開発でも共通化しやすい

Railsのジェネレータやパーシャル（部分テンプレート）を活用しながら、Bootstrapのデザインをチーム全体で統一できます。

RailsプロジェクトにBootstrapを導入する流れ

ここからは具体的に、RailsプロジェクトへBootstrapを導入する一連の流れを見ていきましょう。初心者の方でも取り組みやすいよう、コード例を交えながら順番に解説していきます。

Gemfileへの追記

まずはプロジェクトのGemfileにBootstrapに関する設定を追記します。 Bootstrapを利用するためには、CSSをコンパイルする仕組みをRails側で用意しておくのが一般的です。例えば、Gemfileには次のような記述を加えます。


gem "bootstrap"
gem "sassc-rails"

この設定を保存してから、次のようにコマンドを実行します。


bundle install

スタイルシートファイルの作成

BootstrapのCSSをRailsで扱う場合は、SCSSファイルにインポートします。以下の例は、app/assets/stylesheets/application.scss を用意した場合のイメージです。


@import "bootstrap";

これでBootstrapのスタイルがRailsのアセットパイプラインやパッケージ管理の仕組みを通じてアプリ全体に適用されます。

JavaScriptの設定

モーダルウィンドウやドロップダウンなどの動的なUI要素を使う場合、BootstrapのJavaScriptファイルや依存ライブラリを読み込む必要があります。 Railsの設定によっては、WebpackやImport Mapsなどの仕組みが導入されている場合がありますが、以下のようにJavaScriptファイルを読み込む書き方が一般的です。


import "bootstrap";

たとえば、app/javascript/packs/application.js などのファイル内に追記しておけば、基本的なBootstrapの動作が有効になります。

レイアウトとパーシャルの活用

Railsではアプリ全体のレイアウトを app/views/layouts/application.html.erb などで定義するのが通常です。そこにBootstrapのクラスを使ったナビゲーションバーやフッターなどを組み込むことで、全ページ共通のデザインを簡単に整えられます。

ナビゲーションバーの例

次のように、Bootstrapのクラスを利用してヘッダー部分を作成するイメージです。


<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>RailsとBootstrap</title>
    <%= stylesheet_link_tag "application", media: "all" %>
    <%= javascript_pack_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">MyRailsApp</span>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <%= link_to "Home", root_path, class: "nav-link" %>
            </li>
            <li class="nav-item">
              <%= link_to "About", about_path, class: "nav-link" %>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container mt-4">
      <%= yield %>
    </div>
  </body>
</html>

これだけでサイト全体にナビゲーションバーが用意されるため、複数のページを開発しても見栄えを統一しやすくなります。チーム開発の場合、デザインに変更があるときはレイアウトファイルを編集するだけで全ページに反映できるのも便利ですね。

レイアウトをパーシャルに分割

ナビゲーションバーやフッターなど、複数ページで使い回す要素はパーシャルに切り出すことが多いです。たとえば、app/views/shared/_navbar.html.erb のようなファイルに切り出しておき、renderメソッドで呼び出します。


<%= render "shared/navbar" %>

複数のレイアウトファイルを用意して、管理画面用・ユーザー画面用など用途に応じて入れ替えるケースもあります。こうした仕組みは実務でもよく使われるため、覚えておくと効率的に開発を進められるでしょう。

実務での活用を意識した画面作り

RailsとBootstrapを組み合わせると、フォームやモーダルウィンドウなどのインタラクティブな画面を素早く作れます。ここでは簡単なフォーム例を見ながら、実務シーンで意識しておきたいポイントを確認していきましょう。

例：ユーザー登録フォーム

データを入力するフォーム画面をイメージしてみます。例えば、ユーザーの名前とメールアドレスを登録するようなページを作成した場合、次のようなHTMLが組めます。


<!-- app/views/users/new.html.erb -->
<div class="row">
  <div class="col-md-6 offset-md-3">
    <h2>ユーザー登録</h2>
    <%= form_with model: @user, local: true do |f| %>
      <div class="mb-3">
        <%= f.label :name, "名前", class: "form-label" %>
        <%= f.text_field :name, class: "form-control" %>
      </div>

      <div class="mb-3">
        <%= f.label :email, "メールアドレス", class: "form-label" %>
        <%= f.email_field :email, class: "form-control" %>
      </div>

      <%= f.submit "登録する", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

Bootstrapのクラスを付与することで、入力フォームを整った見た目で表示できます。実務では、バリデーションエラーの表示なども合わせてBootstrapのアラートクラスを活用し、わかりやすいエラーメッセージを表示することが多いです。

フォームのデザインは見た目だけでなく、ユーザーが直感的に入力しやすいかどうかが重要です。ラベルやボタンの文言、エラーメッセージの配置を明確にして、利用者の混乱を減らす工夫を心がけましょう。

Bootstrapのグリッドシステムでレスポンシブ対応

Bootstrapの特徴的な機能として、画面幅に応じてレイアウトを自動調整するグリッドシステムが挙げられます。実務でも多くのデバイスサイズに対応する必要があるため、レスポンシブデザインはほぼ必須といっていいでしょう。

グリッドシステムの基本

画面をいくつかの列（カラム）に分割し、それぞれにBootstrapのクラスを割り当てていきます。例えば、「画面が広いときは3列、狭いときは1列で表示する」といった指定が簡単にできるのがポイントです。以下の例では、3つのカードを横並びにし、画面が小さいときは縦に並ぶようにしています。


<div class="row">
  <div class="col-md-4 col-sm-12">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カード1</h5>
        <p>コンテンツの例です。</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-12">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カード2</h5>
        <p>コンテンツの例です。</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-12">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カード3</h5>
        <p>コンテンツの例です。</p>
      </div>
    </div>
  </div>
</div>

このように、レスポンシブなレイアウトを組み立てやすいのがBootstrapの強みです。

Rails + Bootstrapの活用シーン

RailsとBootstrapを組み合わせることで、実務ではどのようなシーンで役に立つのかを見ていきましょう。

社内業務システムの管理画面

請求書や顧客情報を管理する社内システムなどでは、Railsのスキャフォールド機能でCRUD画面を素早く用意できます。そこにBootstrapのフォームやテーブルデザインを組み合わせると、見た目と機能の両面で作業がしやすい画面が完成します。非エンジニアの担当者に使ってもらう機会も多いため、Bootstrapのコンポーネントを用いて直感的なUIに仕上げるのがおすすめです。

プロトタイプの迅速な作成

新しいWebサービスのアイデアを形にするとき、Railsでバックエンドのロジックを素早く実装し、Bootstrapで画面を整えられると、短期間で試作品が完成します。投資家や上司に見せるデモ用アプリケーションを作る場面でも、デザインに時間をかけずにベースを仕上げられるでしょう。

小規模なECサイト

会員登録やカート機能など、Railsの標準機能を活用して作り込みやすいのが特徴です。商品一覧や購入画面をBootstrapのグリッドシステムを使って見せることで、ユーザーが使いやすい画面レイアウトを素早く実現できます。

RailsとBootstrapを使いこなすためのポイント

RailsやBootstrapは「導入→使い始め」で完結するわけではありません。開発を進めながら、様々な壁にぶつかることもありますので、いくつかのポイントを押さえておきましょう。

RailsとBootstrapを一緒に使うメリットを最大化するには、不要なクラスをむやみに増やさず、コンポーネント化やパーシャル化でコードを整理することが大切です。

過剰なカスタマイズに注意

Bootstrapはある程度既成のデザインが整っているため、初心者の皆さんでも手軽にキレイなUIを実装できます。しかし、細かい部分までデザインを変更しようとしすぎると、却って時間がかかることもあります。まずはBootstrap標準のスタイルを活用し、使い回せる共通クラスをパーシャルやSass変数で管理すると良いでしょう。

同僚やチームとの連携

Railsのエコシステムを使うと、フロントエンドとバックエンドが同じリポジトリでまとまるケースが多いです。デザイン面の変更があっても、コンポーネントを編集するだけで全体に反映できますし、デザイナーや他のエンジニアと連携しやすい点が利点でしょう。

モバイル対応の検証

Bootstrapのグリッドシステムを使えば、基本的にスマートフォンからPCまで広く対応できます。ただし、実際のデバイス上でのテストを怠ると、余白の取り方や文字の折り返しなどで思わぬ問題が起きることがあります。レスポンシブ対応は何度も見直しながら徐々に仕上げていくのが良いでしょう。

RailsとBootstrapの機能比較表

以下のような表にまとめると、RailsとBootstrapそれぞれの強みによってどの部分が開発しやすくなるのかが一目瞭然です。

機能例	Railsでの主な担当	Bootstrapでの主な担当
ルーティング	ルート設定 (`config/routes.rb`)	-
コントローラ	ビジネスロジック (`app/controllers/`)	-
データベース連携	モデル (`app/models/`) でのデータ操作	-
HTMLのベース作成	ERBやHamlでの構造定義	CSSクラス適用時のHTML構造サンプル
デザイン・スタイリング	-	事前に定義された様々なクラス
レスポンシブ対応	-	グリッドシステム、ブレークポイント
フォームのUI	`form_with` などによるフォーム生成	`.form-control` などのクラス

このように、バックエンドをRailsが担当し、デザインまわりをBootstrapが補完してくれる形で分業しやすくなります。

まとめ

Ruby on RailsとBootstrapを組み合わせると、アプリケーションの機能開発とUIデザインを同時並行で進めやすい点がとても魅力的です。実務でも社内システムや各種プロトタイプ開発に多用されており、多くの方が導入しやすい組み合わせといえるでしょう。

フォームやグリッドシステムなど、はじめは触ることが多い機能から慣れていくのがおすすめです。わかりやすい見た目で開発チーム内外の人にアプリを使ってもらう経験を積むと、モチベーションも高まるのではないでしょうか。

Railsでコーディングを進めるうちに分からない箇所が出てきたら、Bootstrapのドキュメントを参考にしながらクラスやコンポーネントを活用してみてください。最小限のコードで整ったUIを実現しやすいため、早い段階で完成形をイメージしやすくなるはずです。

これから「ruby on rails bootstrap」でWeb開発を始める皆さんが、効率的にアプリケーションを作れるよう願っています。開発現場でも実際に役立つ知識ですので、今のうちに慣れておくと後々とても便利に感じられるでしょう。