Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響

Transcript

1. Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響 2024/10/26 Kaigi on Rails 2024 swamp09
2. 沼田 周 @swamp09 株式会社 永和システムマネジメント 現在はECサイトの開発プロジェクトに所属
3. • import mapsの概要 • importmap-railsを使う経緯 • 実際に使ってみて起こった問題
4. 私のプロジェクトでのRailsアップデート業 Rails 6 -> Rails 7
5. Rails 7
6. Rails 7 Hotwire登場！
7. Webpackerの終わり
8. https://github.com/rails/webpacker
9. 移行先
10. 移行先 js-bundling-rails or importmap-rails
11. js-bundling-rails Webpackやesbuildを使うもの
12. Rails 7 でデフォルトになった importmap-rails ってなに？
13. // HTTPパス import dayjs from 'https://cdn.skypack.dev/dayjs@1.11.3' // 相対パス import dayjs from './node_modules/dayjs' Import maps
14. <script type="importmap"> { "imports": { "dayjs": "https://cdn.skypack.dev/dayjs@1.11.3", } } </script> <script type="module"> import dayjs from 'dayjs'; // ↓と同じになる // import dayjs from 'https://cdn.skypack.dev/dayjs@1.11.3' </script> Import maps
15. import dayjs from 'dayjs' JSモジュールをCDNから node_modulesへダウンロード node_modulesにあるものを importする Webpackやesbuildのようなビルドツールで application.jsなどにビルドする いままでは
16. node_modulesを使わず ブラウザ上でモジュールを読み込める ビルドしなくていい
17. https://caniuse.com/import-maps モダンブラウザでは安心して使える
18. importmap-rails # config/importmap.rb pin "dayjs", to: "https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"
19. importmap-rails # config/importmap.rb pin "dayjs", to: "https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js" # application.html.erb <%= javascript_importmap_tags %>
20. importmap-rails # config/importmap.rb pin "dayjs", to: "https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js" # application.html.erb <%= javascript_importmap_tags %> <script type="importmap" data-turbo-track="reload">{ "imports": { "dayjs": "https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js" } }</script> <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js">
21. これがなんでRails 7から デフォルトになったのか
22. https://world.hey.com/dhh/modern-web-apps-without-javascrip t-bundling-or-transpiling-a20f2755
23. Babelでのトランスパイル 不要になった
24. HTTP2が当たり前に使われるようになった 一つのJSファイルにまとめなくていい
25. 私のプロジェクト Webpackerからの移行
26. Webpackのままjs-bundling-rails使うか？
27. https://bun.sh/docs/bundler/vs-esbuild
28. importmap-rails使う？
29. Q. ビルドツールいらないの？
30. A. いらない TypeScript: 使ってなかった Vue.js: ちょっと使ってた、けどStimulusに移行する方針で決まった
31. https://twitter.com/robbyrussell/status/1712134715434819872
32. https://www.youtube.com/watch?v=-cEn_83zRFw
33. JSをno buildにして importmap-railsでやっていく
34. しばらくして
35. サーバーサイドに奇妙なエラー
36. ログを調査していると
37. Processing by PostsController#update as TURBO_STREAM のようなリクエストのはずが、 Processing by PostsController#update as HTML となっている
38. 直接リクエストしている疑い？
39. 直接リクエストしている疑い？ ログを見た限りそんなことはない
40. Turbo が動いていないかも
41. Honeybadgerという エラートラッキングサービスを 使っているが通知はなし https://www.honeybadger.io/
42. ユーザーの環境の問題？
43. ユーザーの環境の問題？ エラーユーザーは最新バージョンのブラウザを使っている ChromeやFirefoxユーザーがいる
44. 同じブラウザでも再現しない
45. 同じブラウザでも再現しない Addonか？
46. よく使われるAddonってなに？
47. Adblockをいれるとエラーになる
48. // application.js import "@hotwired/turbo-rails" import { Application } from "@hotwired/stimulus" import Honeybadger from "@honeybadger-io/js" Honeybadger.configure({ apiKey: ’aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa’ , }) const application = Application.start()
49. Adblockはいろいろある
50. Adblockが使うフィルターリスト
51. https://github.com/easylist/easylist
52. EasyPrivacyの中に関係あるものを発見
53. なるほど？
54. # config/importmap.rb pin "@honeybadger-io/js", to: "https://ga.jspm.io/npm:@honeybadger-io/js@6.8.3/dist/browser/honeybadger.js" <script type="importmap" data-turbo-track="reload">{ "imports": { "@honeybadger-io/js": "https://ga.jspm.io/npm:@honeybadger-io/js@6.8.3/dist/browser/honeybadger.js", ... } }</script>
55. importmap-railsに移行して起きた問題
56. importmap-railsで使用するモジュールを ダウンロードする
57. この問題が起きた時使用していたのは importmap-rails v1.2 bin/importmap pin xxx --download のようにdownloadオプションを使用して vendorディレクトリに保存する
58. # config/importmap.rb pin "@honeybadger-io/js" , to: "@honeybadger-io--js.js" <script type="importmap" data-turbo-track="reload">{ "imports": { "@honeybadger-io/js": "/assets/@honeybadger-io--js-98f68298ce509dfd7b221dfbdde2cf6c4fe60e97359d baed12ddaa7ad7c8c403.js", ... } }</script> SprocketsかPropshaftでフィンガープリントがつく
59. importmap-rails v2では vendorへのダウンロードが デフォルトの挙動になった
60. 引き続き外部CDNの使用もしている importmap-railsのダウンロードで うまく使えないものもある
61. JSのライブラリの中には １つのエントリポイントに 機能がまとまっていない場合がある
62. importmap-railsでは 一つのエントリファイルしか ダウンロードしない
63. さっくりダウンロードできるもの以外は 外部CDNをそのまま使っている
64. 外部CDNを使う場合は Adblockにブロックされるかも
65. 似たような問題が起きたときに 気づけるようにしたい 主要な機能でのTurbo Streamリクエストに リクエスト形式チェックを入れている
66. まとめ
67. • importmap-railsはjsのビルドの手間が改善できてよかった • importしたいJSモジュールがAdblockによってブロックされる ケースがある • 最新のimportmap-railsはデフォルトでvendorへJSモジュール をダウンロードする • JSモジュールがAdblockにブロックされることは今後もあるかも しれないので、そうなったときに気づけるようにしたい まとめ
68. おわり • Turboを使っている場合はリクエストの形式で違和感に気づく ことができるが、他にいい方法あるんだろうか？ • importmap使っていて困ったことがあったらぜひ共有してほし いです
69. おまけ
70. nodelessにできていない ESLintはいらないの？ Playwrightを使いたい おまけ