RailsとBootstrapで簡単にきれいなWebアプリを作る方法

Web開発•2025/2/14

はじめに

RailsとBootstrapは、Webアプリケーション開発において人気のある組み合わせです。Railsはサーバーサイドの強力なフレームワークであり、Bootstrapはフロントエンドのデザインを簡単に美しく整えてくれるツールです。

初心者でも理解しやすいように、今回はRailsとBootstrapを使って簡単なWebアプリケーションを作成する方法を解説します。どちらも初心者に優しいツールなので、手順を追って学んでいきましょう。

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

RailsとBootstrapをインストールする方法
Bootstrapの基本的な使い方
RailsでBootstrapを利用する設定方法
実際のコード例を通して、RailsとBootstrapの連携方法を理解する

RailsとBootstrapの基本

Railsは、Rubyというプログラミング言語を使ってWebアプリケーションを作成するためのフレームワークです。一方、Bootstrapは、HTML、CSS、JavaScriptを使って、レスポンシブで美しいデザインを簡単に作るためのフロントエンドフレームワークです。

Railsのセットアップ

Railsを使用するためには、まずRubyとRailsをインストールする必要があります。以下のコマンドでインストールできます。


gem install rails

次に、Railsプロジェクトを作成します。


rails new myapp
cd myapp

これで基本的なRailsアプリケーションがセットアップされます。

Bootstrapの導入

BootstrapをRailsアプリに導入するには、まずはbootstrapとjqueryのライブラリをインストールします。Gemfileに以下のコードを追加してください。


gem 'bootstrap', '~> 5.0.0'
gem 'jquery-rails'

その後、bundle installコマンドを実行して依存関係をインストールします。


bundle install

インストールが完了したら、app/assets/stylesheets/application.cssに以下の行を追加して、BootstrapのCSSを読み込みます。


@import "bootstrap";

次に、JavaScriptファイルでBootstrapの機能を利用するために、app/assets/javascripts/application.jsに以下を追加します。


//= require jquery
//= require bootstrap

これで、RailsアプリケーションにBootstrapを組み込む準備が整いました。

実際にWebページを作成

ここでは、RailsとBootstrapを使って簡単な「ユーザーリスト」ページを作成してみましょう。

コントローラーの作成

まず、ユーザー情報を表示するコントローラーを作成します。


rails generate controller Users index

これで、app/controllers/users_controller.rbが作成され、indexアクションが追加されます。


class UsersController < ApplicationController
  def index
    @users = User.all
  end
end

ビューの作成

次に、app/views/users/index.html.erbに以下のように記述して、Bootstrapのスタイルを適用します。


<h1 class="text-center my-4">ユーザーリスト</h1>

<div class="container">
  <div class="row">
    <% @users.each do |user| %>
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <div class="card-body">
            <h5 class="card-title"><%= user.name %></h5>
            <p class="card-text">Email: <%= user.email %></p>
            <a href="#" class="btn btn-primary">詳細を見る</a>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

このコードでは、ユーザーの情報をカード形式で表示し、Bootstrapのcardクラスを使用しています。

ルーティングの設定

最後に、config/routes.rbを編集して、indexアクションが呼ばれるように設定します。


Rails.application.routes.draw do
  root 'users#index'
  resources :users, only: [:index]
end

これで、アプリケーションを実行すると、ユーザーリストがBootstrapでスタイリングされたWebページとして表示されます。

まとめ

RailsとBootstrapを使うことで、初心者でも簡単に美しいWebアプリケーションを作成することができます。今回紹介した方法を参考に、さらに複雑なアプリケーションを作成してみましょう。RailsとBootstrapを組み合わせることで、サーバーサイドとフロントエンドの両方を効率よく開発できます。

このように、Railsのバックエンドの力とBootstrapのフロントエンドの美しいデザインを組み合わせることで、シンプルでありながら洗練されたWebアプリケーションを素早く開発できるようになります。今後は、さらに多くの機能を追加していくことができますので、ぜひチャレンジしてみてください。