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

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

[<<前回の記事](https://qiita.com/tomodachi_uec/items/4d9633635c9964053efd)

##今回やったこと

###Bootstrapの導入

導入を通して以下のWeb記事を参考にした。
[Rails6でBootstrapを導入する方法](https://medium-company.com/rails-bootstrap/)

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

```bash
$ 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`を確認する。

```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３～５くらいを使って分かった気になっているユーザーは私の二の舞にならないようご注意ください。。）

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

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

```js:app/javascript/application.js
（略）
import 'bootstrap'
import '../stylesheets/application'
（略）
```

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

```scss:app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
```

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

```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`に変更。

```erb:app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
```

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

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/e926cf9f-a3f1-7da6-4fe1-61a862186150.png)

...あれ？？？


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


[次回の記事>>](https://qiita.com/tomodachi_uec/items/cb877de04924d974c4bb)