かねてよりRailsをしばしば利用しており，Railsアプリの作り方を教える授業も担当，だいぶ内容が古くなってしまったが書籍も出しているくらいにはRailsを愛用している．しかし，Rails 7になってフロント周りがいろいろと変更されて，ネットの情報がのきなみ信用ならない状況になっていて，どこかで最新の状況を整理しておかねばならないなと感じていた．
なにしろ，jQuery-UIなんかを使ってちょいと気の利いたことをやろうとしても，どうにもうまくいかず，困った状況なのである．そこで，今回，BootstrapとjQuery / jQuery-UI を importmap の仕組みで導入する方法を整理した．最終的に，次図のような状況を実現するところまで解説する．
なお，動作を確認したバージョンは，次のとおりである．
ruby: 3.2.2, rails: 7.0.8, bootstrap: 5.3.2, jQuery: 3.7.1, jQuery-ui: 1.12.1
また，次の記事を参考にした．
- いぬいらぼ, 【Ruby on Rails7】Rails7にBootstrap5をNode.jsなしで導入する」
- Md Habibur Rahman Habib, How to Install jQuery and jQuery-UI in Rails 7 using importmap without node.js
前者のBootstrapの導入方法は，一箇所，そのままだとエラーになる箇所があるうえ，若干，記述が曖昧な箇所がある．一方，後者は問題なく実行できた．やはり確実な情報を入手するには英語の文献にあたれ，ということだろうか．
アプリの構築
まず，テストのためのアプリの雛形を構築する．homeコントローラだけを作っておく．
$ rails new Test; cd Test
...
$ bin/rails g controller home index
config/routes.rb は次のようにしておこう．
Rails.application.routes.draw do
root 'home#index'
end
Bootstrapの導入
Gemfile に次を追加する（bundle add bootstrap を実施でもよい）．
# Bootstrap 5
gem "bootstrap", "~> 5.3.0"
また，以下の gem "sassc-rails" と書いてある行のコメントアウトを外す．
# Use Sass to process CSS
# gem "sassc-rails"
これを，次のようにする．
# Use Sass to process CSS
gem "sassc-rails"
Gemfileを書き換えたら，gemをインストールしよう．
$ bundle install
Rails 7.0.8 だとimportmapがインストールされているはずなので，config/importmap.rb には次の2行を追記する（bin/importmap pin bootstrapコマンドでも必要な情報が記入されるが，実行時に大量のエラーが出るという問題がある）．
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"
app/javascript/application.js に下記を追記する．
import "./bootstrap"
スタイルシートをscssに変更する．
$ mv app/assets/stylesheets/application.{c,sc}ss
app/assets/styleseets/application.scss には次のように記述する．デフォルトではコメントが記載されているだけなので，コメントの後に次のように追記すればよい．
@import "bootstrap";
確認のために app/views/layouts/application.html.erb の<body>〜</body>を次のように修正する．localhost:3000にアクセスしたときに，少しインデントされて表示されていれば，Bootstrapが有効になっているはずである．
...
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Stimulus JSのセットアップ
さて，次はjQueryとjQuery-UIである．が，その前に，stimulus.js を設定しておく．まず，次のコマンドでstimulus.jsコントローラを作成する．
$ bin/rails g stimulus home
stimulus.jsを利用するために，app/views/home/index.html.erb を次のように記述する．
<div data-controller="home">
<h1> This is home page</h1>
</div>
さらに，app/javascript/controllers/home_controller.js を次のように記述する．
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="home"
export default class extends Controller {
connect() {
console.log("home controller has been connected");
}
}
こうしておくと，data-controller="home" が記載されたページが表示されたときにこのJavaScriptが有効になるらしい．localhost:3000にアクセスしてブラウザの開発コンソールをチェックすると，このメッセージが記録されていることを確認できるだろう，
jQueryおよびjQuery-UIの導入
いよいよjQueryとjQuery-UIを導入する．まず，Gemfileに次の記述を追記する．
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Use jquery-ui for pretty UI
gem 'jquery-ui-rails'
忘れずにgemをインストールしておこう．
$ bundle install
app/assets/styleseets/application.scss には次の行を追記する．
@import "jquery-ui.css";
次に，app/javascript/jquery_ui.js というファイルを作り，次を記載する．
//= require jquery-ui
さらに，app/javascript/application.js に次を追記する．
import "jquery"
import "jquery_ujs"
import "./jquery_ui"
あと，もう少し．config/initializers/assets.rb に次の行を追加する．
Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js )
さらに，config/importmap.rb には次の2行を追記する．
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
これで準備OKである．
動作確認
うまく設定できたかどうか，動作確認しよう．
app/views/home/index.html.erb は，次のように書き換える．
<div data-controller="home">
<h1 class="mt-3"> This is home page</h1>
<h6> Pick date using jQuery Datepicker </h6>
<p>Date: <input type="text" id="datepicker"></p>
<br>
<hr>
<h6> JQuery Draggable Element </h6>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<br>
<hr>
<h6> Click Event using JQuery </h6>
<button id="btn-click" class="btn btn-primary"> Click Me </button>
</div>
これらの要素をコントロールするための app/javascript/controllers/home_controller.js も，次のように記述しておこう．
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="home"
export default class extends Controller {
connect() {
console.log("home controller has been connected");
$("#datepicker").datepicker();
var initial_val = 0;
$("#btn-click").click(function (e) {
e.preventDefault();
var date_value = $("#datepicker").val();
alert(`button has been clicked ${initial_val} and date ${date_value} `);
initial_val+= 1;
});
$(function() {
$("#draggable").draggable();
});
}
}
サーバをいったん止め，再起動する．
$ bin/rails s
ブラウザでアクセスして，冒頭に示したような画面が現れれば，OKである．それぞれのアイテムが適切に動作している状況を確認されたい．
以上が，Bootstrap，jQueryおよびjQuery-UIを，Rails 7にNode.jsを使わないで導入する方法である．
おまけ
jQuery-UIに拘っている理由は，とあるプロジェクトでスライダー要素を使いたいからである．スライダーも使えることを，確認しておこう．app/views/home/index.html.erb に次の記述を追記する．どこでもよいが，とりあえずは，ボタンの下くらいに配置しておくことにする．
<hr>
<h6> JQuery Slidar Element </h6>
<div id="slider" class="col-6 ui-widget"></div>
app/javascript/controllers/home_controller.js の修正は次のようにする．9ステップのスライダーを作り，スライダーが弄られたら値をコンソールに，都度，吐き出すというコードである．
...
$(function() {
$("#draggable").draggable();
$("#slider").slider({ min: -4, max: 4, step: 1, value: 0,
slide: function(event, ui) { console.log(ui.value); } });
});
}
}
動かして，試してみよう．うまくスライダーを使えるようになっただろうか．
実際には，コンソールに吐くのではなく，jQueryのattr()メソッドなどを使ってフォームのhidden_fieldにでも値をセットするようにすれば，スライダーの値をサーバに送り返すようなインタフェースを作るのは容易であろう．
0 件のコメント:
コメントを投稿