ボクココ

サービス開発を成功させるまでの歩み

ActionText を使う場合の ライブラリロード

ども、@kimihom です。

f:id:cevid_cpp:20200413222001j:plain

ActionText の実装をしていて、実際の利用でハマった点をまとめておく。今まで ActionText の記事として2つ書いてあるので、興味があれば読んでみていただけたらと思う。

www.bokukoko.info

www.bokukoko.info

Webpacker の利用が前提

ActionText を利用する上で完全にハマったポイントだ。Rails 6 に上げた段階で、デフォルトとなった Webpacker については下記記事にあるように調査はした。

www.bokukoko.info

今までの AssetPipeline で作り上げてきた Rails 5 の JavaScript コードを、いきなり Webpacker の importrequire でクラスで分けるのは手間がかかる割に、挙動は何も変わらなくて無意味だなと感じてしまった。てことで Webpacker を使わない選択をした。そうすれば、Rails ディレクトリ内に無駄にファイルがたくさんできずに、平穏な Rails プロジェクトを保ち続けられると思ったからだ。Webpacker を入れたら、以下のようなファイルがバンバン追加されていくのである。

  • config/webpack/environment.js
  • config/webpacker.yml
  • app/javascript/packs/application.js
  • babel.config.js
  • postcss.config.js
  • etc...

てことで AssetPipeline で JavaScript も管理するようにして平和を取り戻したと思ったのだが、ここで表題にあるように ActionText の利用は Webpacker の利用が前提となっているということに ActionText を本格的に使うようになって初めて気づいた。

ActionText を使うときに、app/javascript/packs/application.js に以下の記述をする前提となっている。

require("trix")
require("@rails/actiontext")

この @rails/actiontext を AssetPipeline で同様に記述することが不可能だった。

// NG!
//= require @rails/actiontext
//= require_tree .

// => Uncaught SyntaxError: Cannot use import statement outside a module

ActionText のソースを見ると、"@rails/activestorage" から import する処理が書かれており、actiontext 自体で独立した JavaScript ファイルが存在せず、AssetPipeline では実現できないようだった。 rails/attachment_upload.js at master · rails/rails · GitHub

なお、ActionText さえ使わなければ、他の rails-ujsturbolinks は 独立したライブラリのため、 AssetPipeline でも問題なく利用できる。

てことで最終的には ライブラリ系のロードは Webpacker を使い、それ以外の今まで利用していた JavaScript は AssetPipeline を使うという二重の利用方法で落ち着いている。もちろん、これが最適解だとは決して思っていないが、現状はこれがベストだと考えている。つまりヘッダは以下の通りである。

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_include_tag 'application' %>

終わりに

今回は ActionText と AssetPipeline の相性の悪さについて書いた。私が調査した中ではの話なので、もし ActionText を AssetPipeline で使う方法があれば教えていただけたら有難い。とはいえ今後の Rails の風潮としては Webpack 側に寄っていくような感じもあるので、今の JavaScript コードを Webpacker の方で正しく動くようにコードを整備する方が正しい流れなのかもしれない。 もし今後 CSS や 画像なども 基本 Webpacker で入れるのが Rails のデフォルト動作になれば、そのように従っていく予定だ。

最高のユーザー体験を提供するために、ActionText の理想的な利用をこれからも追い続けよう。