RailsアプリにBootstrapを導入してフロントエンド実装をする(Ruby on Rails)
今回は以下のようなシンプルなRailsアプリケーションにBootstrapを用いて簡単に見た目の部分の装飾を行います。BootstrapをRuby on Railsに用いて開発するためにはどのような手順があるのか、またどのようにコーディングするのか入門にあたる部分を解説していきます。
※OSはMacを想定して記事を書いています。
Bootstrapとは
Bootstrapとは、HTML/CSSとJavaScriptで構成されているフレームワークです。フレームワークと言えばRuby on RailsやLaravel、Vue.jsなどWebアプリケーションを効率よく開発するためのツールとなるものがありますが、Bootstrapもその一つです。レスポンシブWebデザインにも対応しておりコーディングが苦手な方やサーバーサイドのプログラムを重点的に書きたい人には重宝するのではないかと思います。以下からRuby on Railsを用いたBootstrapの使用方法について紹介します。
Bootstrapの導入
今回はBootstrapをWebpackerを用いて導入します。Webpackerについての説明は省きますが、Railsでのフロントエンド開発を手助けするものだと捉えて頂ければ良いかと思います。
参考) https://qiita.com/Furuta03/items/0957e69c0927be5c1a8b
WebpackerはRails5.1以降で標準装備されてあるためこのまま進めます。BootstrapはいくつかのJavaScriptのプラグインが必要となるため、まず始めにターミナルのアプリケーションのディレクトリにて以下のコマンドを入力してください。
yarn add jquery bootstrap popper.js
コマンド実行後、上記画像のような表示がターミナルに出力されていれば成功です。以下からは設定のため各ファイルにコードを入力します。
config/webpack/environment.jsファイルにて以下のコードを入力してください。
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
module.exports = environment
// 追加するコード
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)次に、app/javascript/stylesheets/application.scssにBootstrapのCSSを読み込む記述を追記します。上記のパスにstylesheetsのフォルダとapplication.scssのファイルが存在していないためご自身で作成します。ターミナルにて以下のコマンドをそれぞれ入力しても良いですし、エディタを用いて手動で追加しても良いです。
mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss作成後、application.scssにて以下のコードを追加します。
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';インストールしたBootstrapを使用するためにapplication.jsにコードを追加します。
app/javascript/packs/application.js
// 以下の2行を追加
import 'bootstrap';
import '../stylesheets/application';
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)そして最後にapp/views/layouts/application.html.erbにて、コードを追加します。以下の記述を追加することでWebpackで.cssや.scssファイルのスタイルシートにも対応します。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>アプリの名前</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
# 以下のコードを追加
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>以上でRailsにBootstrapを導入することが出来ました。早速コーディングしていきます。
Bootstrapを用いたフロントエンド実装
ここまででBootstrapを導入することが出来ました。使い方は至ってシンプルです。まずはhttps://getbootstrap.jp/にアクセスして、はじめるをクリックしましょう。上記のアプリの新規投稿のリンクにボタンの装飾をしたいとします。検索窓にて「btn」と検索するか、サイドバーの「Components」の欄から「Buttons」を探してクリックしてください。そして以下のようにサンプルが表示されます。
今回は緑色のsuccessのボタンを使用します。Railsヘルパーであるlink_toメソッドに適用したいので以下のように記述します。
app/views/posts/index.html.erb
<h1>Top Page</h1>
<%= link_to "新規投稿", "#", class: "btn btn-outline-success" %>classを指定しただけで以下のように新規投稿のリンクの部分がボタン仕様になりました。
それでは最後に上部にナビゲーションバーを設置してみましょう。「Navbar」を検索するかクリックしましょう。
画像に表示されてあるナビゲーションバーのサンプルをそのままアプリに設置したいので以下に記載があるHTMLをコピーし、そのまま貼り付けてみましょう。ナビゲーションバーは全てのページに表示させたいのでapp/views/layouts/application.html.erbにて貼り付けましょう。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>アプリの名前</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
# 以下にコードを貼り付ける
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
# 以上
<%= yield %>
</body>
</html>その結果、以下の画像の通りにナビゲーションバーを設置することが出来ました。
このようにして、簡単にフロントエンドの実装を進めることが出来ます。1からHTML/CSSを書く必要がないため効率よく開発することが出来ます。例えばサインアップページやログインページはBootstrapで作り上げるなど部分部分で効果的に使用するのも良いですね。
この記事が気に入ったらサポートをしてみませんか？