記事を書いた経緯
自分自身がお仕事でbootstrap5の導入とesbuildを使ったwebアプリ開発に携わった中で最短で環境構する方法が知りたかったから。
本記事のゴール
bootstrap+esbuildで環境構築して、簡単なrailsのtodoアプリを作成する。アプリ自体はgenerateorでscaffoldを作成した際にできたデフォルトのもの。
esbuildってそもそも何？
esbuild(イーエスビルド)は、javascriptのいわゆるバンドラーと呼ばれる役割のもので、同じような役割をするものにimportmapやrollupがあります。筆者はimportmapとesbuildのみ使ったことがあります。ちなみに、javascriptのバンドラーはrails newの時に指定することができるので現在すでに動いているアプリの環境を移行したいとかでなければnew時に指定することをおすすめします。ちなみに、バンドラーはcss用とjavascript用の２種類あるので両方サポートしているimportmapやwebpackなどを使わない場合にはcssbundling-railsというgemでcssのバンドラーも指定してあげる必要があります。
動作環境の前提
環境構築時には、homebrewをはじめとしたmacOSでのrailsの環境構築がされている前提とします。最低限、anyenv>rbenv>npm>yarn はインストールしておいてください（>の順で環境構築するとうまく行くと思います→念の為パッケージ管理ツールのドキュメントは読んでおくことをおすすめします）。
実際にやってみる
- rails newして新規プロジェクトを立ち上げる（cssをbootstrapで指定する）
rails new Myapp --css bootstrap
create
create README.md
create Rakefile
create .ruby-version
create config.ru
create .gitignore
create .gitattributes
create Gemfile
run git init from "."
Initialized empty Git repository in /Users/kumagaikouhei/Documents/rails_practice/Myapp/.git/
create app
create app/assets/config/manifest.js
create app/assets/stylesheets/application.css
create app/channels/application_cable/channel.rb
create app/channels/application_cable/connection.rb
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
create app/jobs/application_job.rb
create app/mailers/application_mailer.rb
create app/models/application_record.rb
create app/views/layouts/application.html.erb
create app/views/layouts/mailer.html.erb
create app/views/layouts/mailer.text.erb
create app/assets/images
create app/assets/images/.keep
create app/controllers/concerns/.keep
create app/models/concerns/.keep
create bin
create bin/rails
create bin/rake
create bin/setup
create config
create config/routes.rb
create config/application.rb
create config/environment.rb
create config/cable.yml
create config/puma.rb
create config/storage.yml
create config/environments
create config/environments/development.rb
create config/environments/production.rb
create config/environments/test.rb
create config/initializers
create config/initializers/assets.rb
create config/initializers/content_security_policy.rb
create config/initializers/cors.rb
create config/initializers/filter_parameter_logging.rb
create config/initializers/inflections.rb
create config/initializers/new_framework_defaults_7_0.rb
create config/initializers/permissions_policy.rb
create config/locales
create config/locales/en.yml
create config/master.key
append .gitignore
create config/boot.rb
create config/database.yml
create db
create db/seeds.rb
create lib
create lib/tasks
create lib/tasks/.keep
create lib/assets
create lib/assets/.keep
create log
create log/.keep
create public
create public/404.html
create public/422.html
create public/500.html
create public/apple-touch-icon-precomposed.png
create public/apple-touch-icon.png
create public/favicon.ico
create public/robots.txt
create tmp
create tmp/.keep
create tmp/pids
create tmp/pids/.keep
create tmp/cache
create tmp/cache/assets
create vendor
create vendor/.keep
create test/fixtures/files
create test/fixtures/files/.keep
create test/controllers
create test/controllers/.keep
create test/mailers
create test/mailers/.keep
create test/models
create test/models/.keep
create test/helpers
create test/helpers/.keep
create test/integration
create test/integration/.keep
create test/channels/application_cable/connection_test.rb
create test/test_helper.rb
create test/system
create test/system/.keep
create test/application_system_test_case.rb
create storage
create storage/.keep
create tmp/storage
create tmp/storage/.keep
remove config/initializers/cors.rb
remove config/initializers/new_framework_defaults_7_0.rb
run bundle install
Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
Using rake 13.0.6
Fetching concurrent-ruby 1.2.2
Fetching minitest 5.18.0
Using builder 3.2.4
Using erubi 1.12.0
Using websocket-extensions 0.1.5
Fetching rack 2.2.7
Using marcel 1.0.2
Using crass 1.0.6
Fetching nio4r 2.5.9
Fetching timeout 0.3.2
Using mini_mime 1.1.2
Using date 3.3.3
Using racc 1.6.2
Using public_suffix 5.0.1
Using bindex 0.8.1
Using bundler 2.3.14
Fetching regexp_parser 2.8.0
Fetching msgpack 1.7.0
Using matrix 0.4.2
Using method_source 1.0.0
Using thor 1.2.1
Fetching zeitwerk 2.6.7
Installing minitest 5.18.0
Installing concurrent-ruby 1.2.2
Installing nio4r 2.5.9 with native extensions
Installing zeitwerk 2.6.7
Installing msgpack 1.7.0 with native extensions
Installing regexp_parser 2.8.0
Installing rack 2.2.7
Installing timeout 0.3.2
Using io-console 0.6.0
Using rexml 3.2.5
Using rubyzip 2.3.2
Using websocket 1.2.9
Fetching sqlite3 1.6.2 (arm64-darwin)
Using websocket-driver 0.7.5
Fetching nokogiri 1.14.3 (arm64-darwin)
Fetching addressable 2.8.4
Fetching reline 0.3.3
Fetching selenium-webdriver 4.9.0
Installing addressable 2.8.4
Using net-protocol 0.2.1
Fetching rack-test 2.1.0
Using i18n 1.12.0
Using tzinfo 2.0.6
Using sprockets 4.2.0
Using net-imap 0.3.4
Using net-pop 0.1.2
Using net-smtp 0.3.3
Fetching activesupport 7.0.4.3
Installing reline 0.3.3
Fetching mail 2.8.1
Installing rack-test 2.1.0
Fetching irb 1.6.4
Installing sqlite3 1.6.2 (arm64-darwin)
Installing activesupport 7.0.4.3
Installing irb 1.6.4
Fetching debug 1.7.2
Installing nokogiri 1.14.3 (arm64-darwin)
Using globalid 1.1.0
Fetching activemodel 7.0.4.3
Installing debug 1.7.2 with native extensions
Installing activemodel 7.0.4.3
Installing selenium-webdriver 4.9.0
Fetching activejob 7.0.4.3
Installing activejob 7.0.4.3
Installing mail 2.8.1
Fetching activerecord 7.0.4.3
Installing activerecord 7.0.4.3
Using rails-dom-testing 2.0.3
Using xpath 3.2.0
Fetching loofah 2.20.0
Fetching capybara 3.39.0
Fetching webdrivers 5.2.0
Installing loofah 2.20.0
Using rails-html-sanitizer 1.5.0
Fetching actionview 7.0.4.3
Installing webdrivers 5.2.0
Installing capybara 3.39.0
Installing actionview 7.0.4.3
Fetching actionpack 7.0.4.3
Using jbuilder 2.11.5
Fetching puma 5.6.5
Installing actionpack 7.0.4.3
Installing puma 5.6.5 with native extensions
Using sprockets-rails 3.4.2
Fetching actionmailer 7.0.4.3
Fetching actioncable 7.0.4.3
Fetching activestorage 7.0.4.3
Fetching railties 7.0.4.3
Installing actionmailer 7.0.4.3
Installing activestorage 7.0.4.3
Installing actioncable 7.0.4.3
Installing railties 7.0.4.3
Fetching actionmailbox 7.0.4.3
Fetching actiontext 7.0.4.3
Fetching bootsnap 1.16.0
Installing actionmailbox 7.0.4.3
Installing bootsnap 1.16.0 with native extensions
Fetching cssbundling-rails 1.1.2
Fetching stimulus-rails 1.2.1
Fetching turbo-rails 1.4.0
Using web-console 4.2.0
Fetching jsbundling-rails 1.1.1
Installing actiontext 7.0.4.3
Fetching rails 7.0.4.3
Installing cssbundling-rails 1.1.2
Installing stimulus-rails 1.2.1
Installing jsbundling-rails 1.1.1
Installing turbo-rails 1.4.0
Installing rails 7.0.4.3
Bundle complete! 16 Gemfile dependencies, 73 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
run bundle binstubs bundler
rails javascript:install:esbuild
Compile into app/assets/builds
create app/assets/builds
create app/assets/builds/.keep
append app/assets/config/manifest.js
append .gitignore
append .gitignore
Add JavaScript include tag in application layout
insert app/views/layouts/application.html.erb
Create default entrypoint in app/javascript/application.js
create app/javascript
create app/javascript/application.js
Add default package.json
create package.json
Add default Procfile.dev
create Procfile.dev
Ensure foreman is installed
run gem install foreman from "."
Fetching foreman-0.87.2.gem
Successfully installed foreman-0.87.2
1 gem installed
Add bin/dev to start foreman
create bin/dev
Install esbuild
run yarn add esbuild from "."
yarn add v1.22.19
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ esbuild@0.17.18
info All dependencies
├─ @esbuild/darwin-arm64@0.17.18
└─ esbuild@0.17.18
✨ Done in 6.57s.
Add build script
run npm pkg set scripts.build="esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" from "."
run yarn build from "."
yarn run v1.22.19
$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets
app/assets/builds/application.js 62b
app/assets/builds/application.js.map 93b
✨ Done in 0.42s.
rails turbo:install stimulus:install
Import Turbo
append app/javascript/application.js
Install Turbo
run yarn add @hotwired/turbo-rails from "."
yarn add v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ @hotwired/turbo-rails@7.3.0
info All dependencies
├─ @hotwired/turbo-rails@7.3.0
├─ @hotwired/turbo@7.3.0
└─ @rails/actioncable@7.0.4
✨ Done in 3.93s.
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
Create controllers directory
create app/javascript/controllers
create app/javascript/controllers/index.js
create app/javascript/controllers/application.js
create app/javascript/controllers/hello_controller.js
Import Stimulus controllers
append app/javascript/application.js
Install Stimulus
run yarn add @hotwired/stimulus from "."
yarn add v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @hotwired/stimulus@3.2.1
info All dependencies
└─ @hotwired/stimulus@3.2.1
✨ Done in 1.67s.
rails css:install:bootstrap
Build into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
File unchanged! The supplied flag value not found! app/assets/config/manifest.js
Stop linking stylesheets automatically
gsub app/assets/config/manifest.js
File unchanged! The supplied flag value not found! .gitignore
File unchanged! The supplied flag value not found! .gitignore
Remove app/assets/stylesheets/application.css so build output can take over
remove app/assets/stylesheets/application.css
Add stylesheet link tag in application layout
File unchanged! The supplied flag value not found! app/views/layouts/application.html.erb
append Procfile.dev
Add bin/dev to start foreman
identical bin/dev
Install Bootstrap with Bootstrap Icons and Popperjs/core
create app/assets/stylesheets/application.bootstrap.scss
run yarn add sass bootstrap bootstrap-icons @popperjs/core from "."
yarn add v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 21 new dependencies.
info Direct dependencies
├─ @popperjs/core@2.11.7
├─ bootstrap-icons@1.10.4
├─ bootstrap@5.2.3
└─ sass@1.62.0
info All dependencies
├─ @popperjs/core@2.11.7
├─ anymatch@3.1.3
├─ binary-extensions@2.2.0
├─ bootstrap-icons@1.10.4
├─ bootstrap@5.2.3
├─ braces@3.0.2
├─ chokidar@3.5.3
├─ fill-range@7.0.1
├─ fsevents@2.3.2
├─ glob-parent@5.1.2
├─ immutable@4.3.0
├─ is-binary-path@2.1.0
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
├─ is-number@7.0.0
├─ normalize-path@3.0.0
├─ picomatch@2.3.1
├─ readdirp@3.6.0
├─ sass@1.62.0
├─ source-map-js@1.0.2
└─ to-regex-range@5.0.1
✨ Done in 2.92s.
insert config/initializers/assets.rb
Appending Bootstrap JavaScript import to default entry point
append app/javascript/application.js
Add build:css script
run npm pkg set scripts.build:css="sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
run yarn build:css from "."
yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
✨ Done in 0.94s.
ちなみに、—css bootstrapと指定すると-jオプションで他に指定しない限り、javascriptのバンドラーがesbuildで設定されてrails newされます。
記事の本旨とはずれますが、—css tailwindを指定するとimportmapがjavascriptバンドラーに設定されるのでそこは注意が必要です。
- rails g scaffoldしてみる
rails generate scaffold todo
invoke active_record
create db/migrate/20230425145754_create_todos.rb
create app/models/todo.rb
invoke test_unit
create test/models/todo_test.rb
create test/fixtures/todos.yml
invoke resource_route
route resources :todos
invoke scaffold_controller
create app/controllers/todos_controller.rb
invoke erb
create app/views/todos
create app/views/todos/index.html.erb
create app/views/todos/edit.html.erb
create app/views/todos/show.html.erb
create app/views/todos/new.html.erb
create app/views/todos/_form.html.erb
create app/views/todos/_todo.html.erb
invoke resource_route
invoke test_unit
create test/controllers/todos_controller_test.rb
create test/system/todos_test.rb
invoke helper
create app/helpers/todos_helper.rb
invoke test_unit
invoke jbuilder
create app/views/todos/index.json.jbuilder
create app/views/todos/show.json.jbuilder
create app/views/todos/_todo.json.jbuilder
-
bootstrap公式ページのsample componentを使ってjsとcssの動作確認をする。
- まずはヘッダーのパーシャルを作成する。
touch app/views/layouts/_header.html.erb# 以下のコードを追加 https://getbootstrap.jp/docs/5.0/components/navbar/ <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <span class="navbar-text"> Navbar text with an inline element </span> </div> </div> </nav>- application.html.erbにヘッダーを表示するためのrenderメソッドを追加する。
<!DOCTYPE html> <html> <head> <title>Myapp</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_include_tag "application", "data-turbo-track": "reload", defer: true %> </head> <body> <%= render 'layouts/header'%> # これを追加 <%= yield %> </body> </html>- jsとcssをバンドルして（yarnがインストールされている必要があります）ビルドする。
bin/dev # rails serverと同じようなコマンド -
localhost:3000にアクセスしてヘッダーがうまく表示されているか確認する
ヘッダーにカーソルを当てたりして色が変わればCSSがうまく動いている。
デベロッパーツールでレスポンシブモードを使ってトグルが動くか確認する。
最後に
筆者はあくまで初学者のため、他のもっと初学者の方向けに記事を書いています。間違え等あると思いますので生暖かい目で見ていただけると幸いです。ちなみに間違いがあればお気軽にコメントしてくださると助かります。
参考にした記事
https://qiita.com/jnchito/items/5c41a7031404c313da1f
https://railsguides.jp/working_with_javascript_in_rails.html