はじめに (対象読者・この記事でわかること)

この記事は、Rails 6とWebpackerを使用したWeb開発をしている方、特にJavaScriptでDOM操作を行いたい初心者から中級者を対象としています。Rails 6から標準搭載されたWebpacker環境で、外部JavaScriptファイルからHTML要素を取得する方法について悩んでいる方々に向けています。

この記事を読むことで、Rails 6とWebpacker環境で外部JSファイルからHTML要素を取得する具体的な方法がわかります。jQueryに依存しない純粋なJavaScriptでのDOM操作の基本から、Webpackerの設定方法までを理解し、実際のプロジェクトに応用できるようになります。また、よくあるエラーとその解決策も学べるため、開発の効率化に繋がります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML/CSSの基本的な知識
  • JavaScriptの基本的な知識
  • Railsの基本的な知識
  • Webpackerの基本的な理解

なぜ外部JSファイルからHTML要素を取得する必要があるのか

RailsアプリケーションでJavaScriptを使用する際、従来はapp/assets/javascriptsディレクトリに配置されたファイルが自動的に読み込まれていました。しかし、Rails 6からはWebpackerが標準搭載され、JavaScriptの管理方法が大きく変わりました。

Webpacker環境では、JavaScriptファイルをモジュールとして管理し、必要に応じて読み込むことが推奨されています。このアプローチにより、パフォーマンスの向上やコードの保守性が高まりますが、外部JSファイルからHTML要素を取得する方法について理解しておく必要があります。

外部JSファイルからHTML要素を取得することで、動的なコンテンツの更新、イベントハンドリングの設定、フォームの動作制御など、多くのインタラクティブな機能を実装できます。特に、SPA(シングルページアプリケーション)的な動作を実現する際には不可欠な技術です。

具体的な実装方法：外部JSファイルからHTML要素を取得するステップバイステップガイド

ステップ1：HTML要素にIDやクラスを付与する

まず、JavaScriptから操作したいHTML要素にIDやクラスを付与します。IDは一意の識別子として、クラスは複数の要素に共通のスタイルや機能を適用するために使用します。

Html

<!-- 例：IDを付与する場合 -->
<div id="target-element">操作対象の要素</div>

<!-- 例：クラスを付与する場合 -->
<div class="target-elements">操作対象の要素1</div>
<div class="target-elements">操作対象の要素2</div>

ステップ2：WebpackerでJavaScriptファイルを読み込む設定

Rails 6では、Webpackerを使用してJavaScriptファイルを管理します。まず、JavaScriptファイルを作成し、Webpackerのエントリーポイントとして設定します。

Bash

# app/javascript/packs配下にJavaScriptファイルを作成
$ touch app/javascript/packs/application.js
$ touch app/javascript/packs/custom.js

次に、app/javascript/packs/application.jsでカスタムファイルを読み込みます。

Javascript

// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// カスタムJavaScriptファイルの読み込み
require("./custom")

ステップ3：JavaScriptファイル内でHTML要素を取得する

app/javascript/packs/custom.jsファイル内で、HTML要素を取得します。主に以下の方法が使用できます。

Javascript

// IDで要素を取得
const elementById = document.getElementById('target-element');

// クラスで要素を取得（NodeListが返る）
const elementsByClass = document.getElementsByClassName('target-elements');

// CSSセレクタで要素を取得（最初に一致する要素）
const elementBySelector = document.querySelector('#target-element');
const elementsBySelectorAll = document.querySelectorAll('.target-elements');

// タグ名で要素を取得（NodeListが返る）
const elementsByTag = document.getElementsByTagName('div');

// name属性で要素を取得（NodeListが返る）
const elementsByName = document.getElementsByName('username');

ステップ4：取得した要素を操作する

取得した要素に対して、スタイルの変更、コンテンツの更新、イベントリスナーの設定などを行います。

Javascript

// 要素のテキストを変更
elementById.textContent = '新しいテキスト';

// 要素のHTMLを変更
elementById.innerHTML = '<span>新しいHTMLコンテンツ</span>';

// スタイルを変更
elementById.style.color = 'red';
elementById.style.backgroundColor = '#f0f0f0';

// クラスを追加/削除
elementById.classList.add('new-class');
elementById.classList.remove('old-class');

// 属性を変更
elementById.setAttribute('data-custom', 'value');

// イベントリスナーを設定
elementById.addEventListener('click', function() {
  alert('要素がクリックされました');
});

ステップ5：複数の要素をまとめて操作する

クラスセレクタやquerySelectorAllで取得した複数の要素に対しては、forEachメソッドを使ってまとめて操作できます。

Javascript

// クラスで取得した要素をまとめて操作
Array.from(elementsByClass).forEach(element => {
  element.style.color = 'blue';
});

// セレクタで取得した要素をまとめて操作
elementsBySelectorAll.forEach(element => {
  element.addEventListener('mouseover', function() {
    this.style.backgroundColor = '#ffffcc';
  });
});

ステップ6：DOMが完全に読み込まれた後に実行する処理

JavaScriptがHTML要素を取得する前に実行されると、要素が見つからないエラーが発生します。この問題を解決するために、DOMの読み込みが完了してから処理を実行するようにします。

Javascript

// 方法1：DOMContentLoadedイベントを使用
document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById('target-element');
  // 要素を操作する処理
});

// 方法2：DOMContentLoadedイベントを簡略化した記述
$(document).ready(function() {
  const element = $('#target-element');
  // 要素を操作する処理
});

// 方法3：HTMLファイルの最後にスクリプトを配置（非推奨）
// <script src="custom.js"></script>をbodyの閉じタグの直前に配置

ステップ7：RailsのビューでJavaScriptを利用する

RailsのビューでJavaScriptを利用する場合、データ属性を使ってRailsからJavaScriptに情報を渡すと便利です。

Html

<!-- ビュー側 -->
<div id="user-profile" data-user-id="<%= @user.id %>" data-user-name="<%= @user.name %>">
  ユーザープロフィール
</div>

<!-- JavaScript側 -->
document.addEventListener('DOMContentLoaded', function() {
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId;
  const userName = userProfile.dataset.userName;

  console.log(`ユーザーID: ${userId}, ユーザー名: ${userName}`);
});

ハマった点やエラー解決

エラー1：要素が見つからない（Cannot read property 'addEventListener' of null）

症状：

Javascript

const element = document.getElementById('target-element');
element.addEventListener('click', function() {
  console.log('クリックされました');
});
// Uncaught TypeError: Cannot read property 'addEventListener' of null

原因： JavaScriptがHTML要素を取得する前に実行されている可能性があります。

解決策： DOMの読み込みが完了してから処理を実行するようにします。

Javascript

document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById('target-element');
  element.addEventListener('click', function() {
    console.log('クリックされました');
  });
});

エラー2：Webpackerでビルドエラーが発生する

症状：

Bash

$ bin/webpack
ERROR in ./app/javascript/packs/custom.js
Module build failed: Error: Cannot find module 'jquery'

原因： 依存関係が正しく設定されていない可能性があります。

解決策： package.jsonに必要な依存関係を追加します。

Bash

$ yarn add jquery

または、jQueryを使用しない場合は、依存関係をインストールせずに純粋なJavaScriptを使用します。

エラー3：複数の要素に対して処理を実行できない

症状：

Javascript

const elements = document.getElementsByClassName('target-elements');
elements.forEach(function(element) {
  element.style.color = 'red';
});
// Uncaught TypeError: elements.forEach is not a function

原因： getElementsByClassNameで取得したのはHTMLCollectionオブジェクトで、forEachメソッドが直接使用できません。

解決策： Array.fromで配列に変換してからforEachを使用します。

Javascript

const elements = document.getElementsByClassName('target-elements');
Array.from(elements).forEach(function(element) {
  element.style.color = 'red';
});

エラー4：Railsのデータ属性にアクセスできない

症状：

Javascript

const userId = document.getElementById('user-profile').dataset.userId;
console.log(userId); // undefined

原因： data属性名にハイフンが含まれている場合、JavaScriptではキャメルケースに変換する必要があります。

解決策： data-user-id → dataset.userId のように変換してアクセスします。

Javascript

const userId = document.getElementById('user-profile').dataset.userId;
const userName = document.getElementById('user-profile').dataset.userName;

まとめ

本記事では、Rails 6とWebpacker環境で外部JSファイルからHTML要素を取得する方法について解説しました。

  • HTML要素にIDやクラスを付与することが、JavaScriptから要素を操作する第一歩
  • Webpackerを使ってJavaScriptファイルを適切に読み込む設定が重要
  • getElementById、querySelectorなどのメソッドを使って要素を取得
  • DOMContentLoadedイベントを使って、DOM読み込み完了後に処理を実行
  • データ属性を使ってRailsからJavaScriptに情報を渡すことが可能

この記事を通して、Rails 6とWebpacker環境でのJavaScript開発における基本的なDOM操作の方法を学びました。これにより、よりインタラクティブなWebアプリケーションを開発できるようになったはずです。

今後は、学んだ知識を基に、より複雑なインタラクションを実装したり、非同期処理を組み合わせたりすることで、さらに高度なWebアプリケーション開発に挑戦してみてください。

参考資料