カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-3

Bootstrapの導入

今回のパートではBootstrapを導入していきます。

Bootstrapは有名なWebフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発できます。

本パートのゴール

今回の目標は、Bootstrapを導入して下記の画像のように青色のボタンを表示するところまで実装していきます。

image

ゴールまでの流れ

  1. Webpackerとは
  2. BootstrapをWebpackerで導入
  3. Bootstrapが導入されたか確認

それでは、実際にjQueryとBootstrapの導入を行いましょう。

1. Webpackerとは

今回Bootstrapを導入するにあたって、Webpackerを使って導入していきます。

Webpackerとは、複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。

Rails5.1から標準でサポートされるようになりました。

webpackとはモジュールバンドラツールのことで、昨今のモダンなJavaScript開発で必須となりつつある仕組みです。

以下の画像はwebpackの公式サイトのイメージ図になります。

image

参考)webpack

※ 本教材では、webpackについては詳しく解説していません。詳しく解説しようとすると、webpackだけで1つの教材ができるくらいボリュームがあるためです。そのため詳しく学びたい方はご自身で調べていただければと思います

2. BootstrapをWebpackerで導入

Webpakcerをインストールするには、まずGemfileに以下のコードを追加します。ただ先ほど説明した通り、Rails5.1以降標準でサポートされているため、デフォルトでGemが追加されています。

一応Gemfileを確認してみましょう。

Copied!
kanban └── Gemfile
Copied!
gem 'webpacker', '~> 4.0'

なのでGemは追加する必要はありません。

Gemfileにwebpackerというgemがあることを確認できたらjQueryとBootstrapを導入します。

yarn を使っている場合、パッケージをインストールするには、yarn add というコマンドを実行します。

【例】

console
Copied!
yarn add project-name

参考:yarn add

それでは、以下のコマンドを実行してください。

console
Copied!
yarn add jquery bootstrap popper.js

Bootstrapでは、いくつかのコンポーネントで jQuery, Popper.js といった JavaScript のプラグインが必要なため一緒にインストールします。

コマンドを実行すると、次のような結果が表示されます。

console
Copied!
yarn add jquery bootstrap popper.js yarn add v1.16.0 [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... [3/4] 🔗 Linking dependencies... warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0". [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 3 new dependencies. info Direct dependencies ├─ bootstrap@4.5.3 ├─ jquery@3.5.1 └─ popper.js@1.16.1 info All dependencies ├─ bootstrap@4.5.3 ├─ jquery@3.5.1 └─ popper.js@1.16.1 ✨ Done in 5.21s.

インストールがうまくいっていたら、package.json というファイルに以下のようなコードが追加されます。追加されたコードには導入したパッケージとそのパッケージのバージョンが記載されています。

package.json
123456789101112131415161718
+++
Copied!
{ "name": "kanban", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.3.0", "bootstrap": "^4.5.3", "jquery": "^3.5.1", "popper.js": "^1.16.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" } }

最後に導入したパッケージの設定のコードを追加します。config/webpack/environment.js に以下のコードを追加してください。

config/webpack/environment.js
12345678910111213
+++++++++
Copied!
const { environment } = require('@rails/webpacker') module.exports = environment const webpack = require('webpack') environment.plugins.append( 'Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] }) )

上記のコードでimportrequireなしで$やBootstrapのJavaScriptが使えるようになります。

Bootstrapのstyleをimport

次に、app/javascript/stylesheets/application.scssにBootstrapのstyleをimportする記述を追記します。

デフォルトでは app/javascript 以下が Webpacker で管理するアセットを置く場所になります。cssファイルも app/javascript ディレクトリ内に作成していきます。

このapp/javascript/stylesheetsディレクトリ及び、app/javascript/stylesheets/application.scssファイルは存在しないので以下のコマンドで作成します。

console
Copied!
mkdir app/javascript/stylesheets touch app/javascript/stylesheets/application.scss

作成したら、application.scssファイルに以下のコードを追加してください。

app/javascript/stylesheets/application.scss
1
Copied!
@import '~bootstrap/scss/bootstrap';

application.jsにコードを追加

yarn でインストールしたBootstrapのパッケージを利用できるようにimportします。

次にapp/javascript/packs/application.js に以下のコードを追加してください。

app/javascript/packs/application.js
1234567891011121314151617181920
++
Copied!
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)

レイアウトに stylesheet_pack_tag を追加

最後にレイアウトに stylesheet_pack_tag を追加します。stylesheet_pack_tag を使うことでWebpackで.css.scssファイルのスタイルシートにも対応します。

app/views/layouts/application.html.erb に以下のコードを追加してください。

app/views/layouts/application.html.erb
12345678910111213141516171819
Copied!
<!DOCTYPE html> <html> <head> <title>Kanban</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>

以上でBootstrapの導入は終了です。

3. Bootstrapが導入されたか確認

実際にBootstrapが機能するか確認します。

仮のボタンにBootstrapのクラスを当てます。

app/views/top/index.html.erbを以下のコードを追加してください。

Copied!
app └── views └── top └── index.html.erb
app/views/top/index.html.erb
1234
Copied!
<p>このページは仮のトップページです。</p> <%# ここに追加する %> <%= link_to "仮のボタンです", "#", class: "btn btn-primary" %>

コードを追加したら、http://localhost:3000 にアクセスしてください。青色のボタンが表示されていればうまく動作しています。

image

以上で今回のパートは終了です。

お疲れ様でした。

現在のパート (11)
全パート (121)
みんなで助け合おう!
現在のパートのディスカッション 全11件
2-3
あまぎん 2021-12-18
bootstrap5が導入されてお困りの方へ

テキストに記載の
yarn add jquery bootstrap popper.js
の記述だとbootstrap5で導入されてしまいます。

yarn add [パッケージ名]@[バージョン指定]
上記のようにyarnはバージョンを指定して導入することが出来るので

yarn add bootstrap@4.5.3
と記述すれば講義通りのbootstrap4で導入することが出来ます。

2-3
べおか 2021-05-19
Bootstrap5の導入方法について

Bootstrapが反映されず、飛ばして先を進めていました。私のBootstrapのバージョンが5で、教材と導入方法が違う点に気付きました。公式ドキュメントを見ながら設定したのですがよく理解できず反映されません。Bootstrap5のバージョンの導入方法を教えていただきたいです。

2-3
kyohhh 2021-05-16
青色のボタンが表示されない。

発生している問題

青色のボタンが表示されない。

エラー画面をスクショで添付

topページ

https://gyazo.com/d1d13db3fb23f7995b33a0f574a65146

package.json

https://gyazo.com/36140ce43edeef0f2d1bb391112cff5d

config/webpack/environment.js

https://gyazo.com/3255d1e6121315b86735c0827571a110

app/javascript/stylesheets/application.scss

https://gyazo.com/dae563ba22d7f4db6554ebc0033749a4

app/javascript/packs/application.js

https://gyazo.com/79203004f8aa7eaea510c79ba9b73b5a

app/views/layouts/application.html.erb

https://gyazo.com/8c201cdee3f612bdcf8b50e76bb9616a

app/views/top/index.html.erb

https://gyazo.com/76ae889bf8c90dbf9232c7842488495c

試したこと

  • ローカルサーバーの再起動、topページのリロード
  • app/javascript/packs/application.jsのturbolinksの無効化
    上記2点を行いましたが状況は変わりませんでした。

補足情報(フレームワークのバージョン・OS)

'rails', '~> 6.0.0'・Mac OS Big Sur ver.11.3

2-3
アキアキ 2021-01-28
Bootstrapのstyleをimport  でエラーが出ています。

発生している問題

コンソールでtouch app/javascript/stylesheets/application.scssを入力すると
エラーがでます。

environment.js - keijiban - Visual Studio Code 2021_01_28 20_15_01.png

初心者の為お願いします。

Rails 6・

2-3
鈴木勇弥 2020-10-14
質問です

発生している問題

Bootstrapのgemをインストールした後、青いボタンが反映されずとなっています。

エラー画面をスクショで添付してください

d32b49bf05963a419a743f182db353b8.png

試したこと

ローカルサーバーを再起動を行いましたが解決ならずでした。
考えられる原因についてご教示いただけますと幸いです。

補足情報(フレームワークのバージョン・OS)

Rails 5.2.4.4・Mac OS