Importmapを利用したJavaScriptの適切な管理とパフォーマンス向上 #Rails

はじめに

Rails 7では、JavaScriptバンドラーを使わずにJavaScriptを効率的に管理するために、Importmapが導入されました。Importmapを利用することで、必要なJavaScriptだけをページごとに読み込むことが可能となり、パフォーマンスの最適化が期待できます。この記事では、Importmapを使用してJavaScriptの読み込みをページ固有で管理し、不要なスクリプトの読み込みを減らす方法について説明します。

Importmapの基本

Importmapは、ブラウザのネイティブなJavaScriptモジュールローダーを活用して、指定されたJavaScriptファイルをWebアプリケーションに直接インクルードする仕組みです。config/importmap.rb ファイル内でJavaScriptファイルを「ピン」することで、どのファイルがどのキーワードでアクセスされるかを定義します。

Importmapの設定方法

まず、config/importmap.rb ファイルにJavaScriptファイルをピンします。例えば、特定のページでのみ使用する staff_selector.js がある場合、以下のように設定します。

# config/importmap.rb
pin "staff_selector", to: "staff_selector.js"

ビューでのImportmapの使用

特定のビューでJavaScriptファイルを読み込むには、javascript_importmap_tags ヘルパーを使います。このヘルパーによって、指定したJavaScriptファイルがページに読み込まれます。

IDを用いる場合

<%= javascript_importmap_tags "staff_selector" %>

<%# 以下は通常のビュー %>
<div class="container mt-4">
  <h2><%= "#{@start_date.strftime('%Y年 %m月')}の月間スケジュール" %></h2>

  <%= form_with(url: '#', method: :get, local: true, id: "staff-selector-form") do |form| %>
    <%= label_tag :staff_id, "スタッフを選択:" %>
    <%# 以下のstaff_idに変更があった場合にJS発火 %>
    <%= select_tag :staff_id, options_from_collection_for_select(current_company.staffs, :id, :name, prompt: "スタッフを選択"), class: "form-select" %>
  <% end %>

  <%= month_calendar do |date| %>
    <div>
      <%= date.day %>
    </div>
  <% end %>
</div>

Classを用いる場合

<%= javascript_importmap_tags "staff_selector" %>
<div class="container mt-4">
  <h2><%= "#{@start_date.strftime('%Y年 %m月')}の月間スケジュール" %></h2>

  <%= form_with(url: '#', method: :get, local: true, id: "staff-selector-form") do |form| %>
    <%= label_tag :staff_id, "スタッフを選択:" %>
    <%# 以下のstaff_idに変更があった場合にJS発火 %>
    <%= select_tag :staff_id, options_from_collection_for_select(current_company.staffs, :id, :name), prompt: "スタッフを選択", class: "form-select staff-selector" %>
  <% end %>

  <%= month_calendar do |date| %>
    <div>
      <%= date.day %>
    </div>
  <% end %>
</div>

このタグをビューファイルの適切な場所（通常は <head> セクション）に配置することで、指定したJavaScriptがページに組み込まれます。

JavaScriptの適用

ページ特有のJavaScriptを適用するために、例として staff_selector.js で以下のような処理を行います。

IDを用いる場合

// app/javascript/staff_selector.js
document.addEventListener("turbo:load", function() {
  const selectElement = document.getElementById("staff_id");
  selectElement.addEventListener("change", function() {
    const selectedStaffId = this.value;
    window.location.href = `/staffs/${selectedStaffId}/monthly_schedule`;
  });
});

Classを用いる場合

document.addEventListener("turbo:load", function() {
  document.querySelectorAll(".staff-selector").forEach(selectElement => {
    selectElement.addEventListener("change", function() {
      const selectedStaffId = this.value;
      if (selectedStaffId) {
        window.location.href = `/staffs/${selectedStaffId}/monthly_schedule`;
      }
    });
  });
});

まとめ

Importmapを利用することで、Rails 7アプリケーションのJavaScriptの管理が簡素化され、ページごとに必要なスクリプトのみをロードすることが容易になります。これにより、ページの読み込み速度の向上が期待でき、エンドユーザーにとってより快適なブラウジング体験が提供できるようになります。