ERBとStimulusでモダンなフロントエンド開発 を実現する方法

ERBとStimulusでモダンなフロントエンド開発 を実現するためのアプローチを解説します。Railsのフロントエンド開発では、ERBテンプレートとStimulusの組み合わせが強力です。これにより、軽量でシンプルなフロントエンドを構築しながら、バックエンドとのスムーズな連携が可能になります。本記事では、ERBとStimulusを活用したモダンなフロントエンド開発の実践例をご紹介します。

ERBとStimulusの基本とメリット

まずはERBとStimulusについて簡単に解説します。

• ERB: Rails標準のテンプレートエンジンで、HTMLとRubyコードを組み合わせて動的なコンテンツを生成。
• Stimulus: モダンなJavaScriptフレームワーク。Railsと相性が良く、既存のHTMLに対して動的な挙動を簡単に追加可能。

この組み合わせのメリットには以下が挙げられます。

• Railsバックエンドとの親和性が高い
• シンプルで軽量な構成
• 既存のHTMLを活用できるため、大規模なリファクタリングが不要

実践例: モーダルウィンドウの実装

Stimulusを使用して動的なモーダルウィンドウを実装します。

2.1 ERB部分

<div data-controller="modal">
  <button data-action="click->modal#open">Open Modal</button>
  <div data-modal-target="content" class="hidden">
    <p>ここに動的なコンテンツが表示されます</p>
    <button data-action="click->modal#close">Close</button>
  </div>
</div>

2.2 Stimulusコントローラー

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["content"];

  open() {
    this.contentTarget.classList.remove("hidden");
  }

  close() {
    this.contentTarget.classList.add("hidden");
  }
}

StimulusでのAjaxデータロード

Ajaxを使用してサーバーからデータを動的に取得し、ページをリロードせずに表示する方法を紹介します。

3.1 ERB部分

<div data-controller="ajax">
  <button data-action="click->ajax#load">商品一覧を読み込む</button>
  <div data-ajax-target="output"></div>
</div>

3.2 Stimulusコントローラー

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["output"];

  load() {
    fetch("/products.json")
      .then(response => response.json())
      .then(data => {
        this.outputTarget.innerHTML = data
          .map(product => `<p>${product.name}: ${product.price}円</p>`)
          .join("");
      });
  }
}

3.3 Railsコントローラー部分

class ProductsController < ApplicationController
  def index
    @products = Product.all
    render json: @products
  end
end

ケーススタディ: フォームの動的バリデーション

Stimulusを活用し、フォーム入力値をリアルタイムにバリデーションします。

4.1 ERB部分

<div data-controller="validation">
  <input type="text" data-validation-target="input" placeholder="名前を入力">
  <p data-validation-target="message" class="hidden text-red-500"></p>
</div>

4.2 Stimulusコントローラー

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["input", "message"];

  validate() {
    const value = this.inputTarget.value;
    if (value.length < 3) {
      this.messageTarget.textContent = "名前は3文字以上入力してください。";
      this.messageTarget.classList.remove("hidden");
    } else {
      this.messageTarget.classList.add("hidden");
    }
  }
}

他フレームワークと比較したStimulusの特徴

StimulusはReactやVueと異なり、軽量で既存のHTMLをそのまま活用できる点が特徴です。以下に簡単な比較を示します。

まとめ

ERBとStimulusを組み合わせることで、シンプルかつ効率的なフロントエンド開発が可能になります。本記事の実践例を参考に、ぜひRailsプロジェクトに取り入れてみてください。