草野球の出欠確認Webアプリを作ろう！ part.11

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

<<前回の記事

##今回やったこと

###Bootstrapの導入

導入を通して以下のWeb記事を参考にした。
Rails6でBootstrapを導入する方法

まずYarnでBootstrapの導入に必要なものの準備をする。
（以下コンソールの最初の一行のみ手動で入力している、あとはログ表示）

$ yarn add jquery bootstrap popper.js
yarn add v1.22.5
[1/4] Resolving packages...
warning popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > bootstrap@5.0.1" has unmet peer dependency "@popperjs/core@^2.9.2".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ bootstrap@5.0.1
├─ jquery@3.6.0
└─ popper.js@1.16.1
info All dependencies
├─ bootstrap@5.0.1
├─ jquery@3.6.0
└─ popper.js@1.16.1
Done in 7.25s.

正常にインストールできたかpackage.jsonを確認する。

package.json

{
  "name": "sample_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "bootstrap": "^5.0.1",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

Bootstrapのためにスタイルシートをjavascriptフォルダの下に作成する。
※この手順を無視したせいで本記事のupが１週間遅れたくらい大事です。
　（Rails３～５くらいを使って分かった気になっているユーザーは私の二の舞にならないようご注意ください。。）

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss

application.jsにBootstrapやapplication.scssを読み込むように書く。

app/javascript/application.js

（略）
import 'bootstrap'
import '../stylesheets/application'
（略）

そしたら次はapplication.scssにBootstrapを読み込むように書く。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

Bootstrap利用のためにPopper.jsが利用できないといけないそうなので、それも以下のように反映する。

app/config/webpack/environment.js

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

（↑Popper:から始まる一行を追加した）
最後に以下のレイアウトのstylesheet_link_tagをstylesheet_pack_tagに変更。

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

動作確認の前に\public\packsフォルダを削除する。
このあとRailsサーバーを再起動して、見た目が反映されているか確認する。

...あれ？？？

今回は時間がないのでここまで。

次回の記事>>