教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
今回のパートではBootstrapを導入していきます。
Bootstrapは有名なWebフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発できます。
今回の目標は、Bootstrapを導入して下記の画像のように青色のボタンを表示するところまで実装していきます。
それでは、実際にjQueryとBootstrapの導入を行いましょう。
今回Bootstrapを導入するにあたって、Webpackerを使って導入していきます。
Webpackerとは、複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。
Rails5.1から標準でサポートされるようになりました。
webpackとはモジュールバンドラツールのことで、昨今のモダンなJavaScript開発で必須となりつつある仕組みです。
以下の画像はwebpackの公式サイトのイメージ図になります。
参考)webpack
※ 本教材では、webpackについては詳しく解説していません。詳しく解説しようとすると、webpackだけで1つの教材ができるくらいボリュームがあるためです。そのため詳しく学びたい方はご自身で調べていただければと思います
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.json123456789101112131415161718 +++ 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.js12345678910111213 +++++++++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']
})
)
上記のコードでimport
やrequire
なしで$
やBootstrapのJavaScriptが使えるようになります。
次に、app/javascript/stylesheets/application.scss
にBootstrapのstyleをimportする記述を追記します。
この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.scss1 Copied!@import '~bootstrap/scss/bootstrap';
yarn でインストールしたBootstrapのパッケージを利用できるようにimport
します。
次にapp/javascript/packs/application.js
に以下のコードを追加してください。
app/javascript/packs/application.js1234567891011121314151617181920++ 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
を使うことでWebpackで.css
や.scss
ファイルのスタイルシートにも対応します。
app/views/layouts/application.html.erb
に以下のコードを追加してください。
app/views/layouts/application.html.erb12345678910111213141516171819 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の導入は終了です。
実際にBootstrapが機能するか確認します。
仮のボタンにBootstrapのクラスを当てます。
app/views/top/index.html.erb
を以下のコードを追加してください。
Copied!app
└── views
└── top
└── index.html.erb
app/views/top/index.html.erb1234 Copied!<p>このページは仮のトップページです。</p>
<%# ここに追加する %>
<%= link_to "仮のボタンです", "#", class: "btn btn-primary" %>
コードを追加したら、http://localhost:3000 にアクセスしてください。青色のボタンが表示されていればうまく動作しています。
以上で今回のパートは終了です。
お疲れ様でした。
テキストに記載の
yarn add jquery bootstrap popper.js
の記述だとbootstrap5で導入されてしまいます。
yarn add [パッケージ名]@[バージョン指定]
上記のようにyarnはバージョンを指定して導入することが出来るので
yarn add bootstrap@4.5.3
と記述すれば講義通りのbootstrap4で導入することが出来ます。
Bootstrapが反映されず、飛ばして先を進めていました。私のBootstrapのバージョンが5で、教材と導入方法が違う点に気付きました。公式ドキュメントを見ながら設定したのですがよく理解できず反映されません。Bootstrap5のバージョンの導入方法を教えていただきたいです。
青色のボタンが表示されない。
https://gyazo.com/d1d13db3fb23f7995b33a0f574a65146
https://gyazo.com/36140ce43edeef0f2d1bb391112cff5d
https://gyazo.com/3255d1e6121315b86735c0827571a110
https://gyazo.com/dae563ba22d7f4db6554ebc0033749a4
https://gyazo.com/79203004f8aa7eaea510c79ba9b73b5a
https://gyazo.com/8c201cdee3f612bdcf8b50e76bb9616a
https://gyazo.com/76ae889bf8c90dbf9232c7842488495c
'rails', '~> 6.0.0'・Mac OS Big Sur ver.11.3
コンソールでtouch app/javascript/stylesheets/application.scssを入力すると
エラーがでます。
初心者の為お願いします。
Rails 6・