本記事については簡易的なタスク管理アプリを作成することを前提に、
下記流れのもと、Railsの開発について言及して行きたいと思います。
Rails開発の流れについて
・Railsプロジェクトの作成とDockerの設定
【Ruby on Rails】初学者向け－開発の流れについて① プロジェクトの作成編
・Gem・DB設定とルーティング
【Ruby on Rails】初学者向け－開発の流れについて② Gem・DB設定とルーティング編
・Bootstrapの導入（今回学習するのはこちら）
・一覧、新規作成、参照、更新、削除画面機能の追加
・検索機能の追加
・DBやモデル周りの整備
・バリデーション機能追加
・ユーザー認証機能追加
（※ 他追加機能があれば随時記事にしていく予定です）
前提
・Docker
・Ruby on Rails 7
・Mysql
・BootStrap
・VSCode
【前回】
【Ruby on Rails】初学者向け－開発の流れについて① プロジェクトの作成編
前回のおさらいとBootStrapの導入
現在localhostは下記のような状態です。
まずこの味気ない状態をどうにかするために
BootStrapというGemを使用します。
Gemfileに下記を追記してください。
gem 'bootstrap', '5.3.1'
gem 'sassc-rails','2.1.2'
gem 'mini_racer','0.8.0'
追記できたらターミナルでビルドを行ってください。
docker compose build
ビルドでGemがインストールできたら
下記配置のcssファイルの拡張子を**「scss」**に変更し、ファイル内にbootsrtapをインポートする記述を記載します。
app\assets\stylesheets\application.css
↓
app\assets\stylesheets\application.scss
@import "bootstrap";
このファイルにデフォルトで記載されているrequire_treeとrequire_selfは削除するようにします。
次にimportmapというものをインストールします。
importmap
…JavaScriptモジュールのインポートをブラウザで管理するための仕組み
docker compose run web rails importmap:install
config/配下に作成されたimportmap.rbを開き、下記のように記載します。
# モジュールを指定して、事前に読み込み（preload）するように記述
pin "application", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
次にconfig/initializers/配下にあるassets.rbを開き、以下内容を追記します。
assets.rbファイルはJavaScript、CSS、画像を管理・設定を行うファイルです。
# ここではプリコンパイルするものを指定することによって効率化につなげ、
# アプリのパフォーマンスを向上させることを目的とした記述を追記しています。
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )
次にapp/javascripts/配下のapplication.jsに下記を記述します。
以下のコードはページが読み込まれた後にBootstrapのポップオーバーとツールチップを初期化するためです。
Bootstrapを正しく動かすために必要な記載です。
import "popper"
import "bootstrap"
window.onload = function () {
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(d => new bootstrap.Popover(d))
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(d => new bootstrap.Tooltip(d))
}
ターミナルでコンテナを起動しBootstrapが適用されているか確認するために
こちらのサンプルをindex.html.erb、application.html.erbにそれぞれ記述します。
application.html.erbにはアプリ全体に適用する画面の内容を記述します。
<div class="d-flex align-items-center">
<h1>タスク一覧</h1>
<div class="ms-auto">
<a class="btn btn-outline-dark">新規作成</a>
</div>
</div>
<h6>期限が過ぎていいないタスク</h6>
<table class="table table-hover tasks__table">
<thead class="table-primary">
<tr>
<th>ID</th>
<th>タイトル</th>
<th>内容</th>
<th>作成日</th>
<th>期限日</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>課題１</td>
<td>課題１の内容</td>
<td>2018年4月1日</td>
<td>2018年4月15日</td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<!--追記箇所-->
<!--yieldの記載は、各コントローラーのアクションを呼び出したとき、
呼び出した画面にdiv内の内容が適用されるようにするため-->
<div class="container">
<%= yield %>
<!--index.html.erbの内容がyieldに挿入される-->
</body>
</html>
localhost:3000で問題なくタスク一覧が表示されたでしょうか。
テーブルの帯が青色になっていて左右に余白があれば問題ありません。
次はこの一覧画面が、存在しているデータを表示するように設定したり、データの新規作成・編集・削除が行えるところまでまとめていきます。