importmap-rails を試してみました
概要
rails7 から webpacker に代わり importmap-rails がデフォルトになるようです。
今回は rails6 で importmap-rails を試してみました。
docker で開発環境を用意
docker で開発環境を作ります。
yarn は必要ないので image は普通の ruby を指定します。
docker-compose.yml
version: "3.7"
services:
rails:
image: ruby
command: rails s -b 0
ports:
- "3000:3000"
volumes:
- .:/workspace
- gem-data:/usr/local/bundle
working_dir: /workspace
volumes:
gem-data:
rails を install します。
docker-compose run rails gem i rails
プロジェクト作成
rails new でプロジェクトを作成します。
rails6 では webpacker がデフォルトなので J オプションでスキップします。
docker-compose run rails rails new . -J
importmap-rails をインストール
importmap-rails を bundle add します。
docker-compose run rails bundle add importmap-rails
importmap-rails の設定ファイルなどを生成します。
docker-compose run rails rails importmap:install
@rails/ujs を読み込んでみる
@rails/ujs を読み込むように設定します。
docker-compose run rails ./bin/importmap pin @rails/ujs
@rails/ujs を起動します。
app/javascript/application.js
import Rails from "@rails/ujs";
Rails.start();
動作確認
動作確認をしてみます。
scaffold で todo アプリを作成します。
docker-compose run rails rails g scaffold todo name
db:migrate を実行します。
docker-compose run rails rails db:migrate
開発用サーバーを起動します。
docker-compose up
下記の url をブラウザで開きます。
todo の削除時に confirm が表示された場合は@rails/ujs が動作しています。