RailsとHTMXを使ってアプリケーションを迅速に開発する方法

ウェブアプリケーションの開発は、時に時間がかかり、複雑になることがあります。しかし、Ruby on RailsとHTMXを組み合わせることで、開発プロセスを大幅にスピードアップすることが可能です。本記事では、RailsとHTMXを使ってアプリケーションを迅速に開発する方法について詳しく解説します。

Railsとは？

Ruby on Rails（通称Rails）は、Rubyプログラミング言語で書かれたオープンソースのウェブアプリケーションフレームワークです。Railsは、開発者が迅速にアプリケーションを構築できるように設計されており、以下のような特徴があります。

コーディングの効率を高めるための「規約に従った設定」
データベースとのやり取りを簡素化するActive Record
豊富なライブラリとプラグインのエコシステム

HTMXとは？

HTMXは、HTMLを拡張するためのライブラリで、AJAX、CSSトランジション、WebSocketなどの機能を簡単に実装できるようにします。HTMXを使用することで、クライアントサイドのJavaScriptを最小限に抑えつつ、インタラクティブなユーザーインターフェースを構築できます。

HTMXの主な機能

HTML属性を使用してAJAXリクエストを簡単に作成
サーバーからのレスポンスを直接DOMに挿入
ページ全体をリロードせずに部分的な更新が可能

RailsとHTMXの組み合わせの利点

RailsとHTMXを組み合わせることで、以下のような利点があります。

迅速なプロトタイピング：HTMXを使うことで、サーバーサイドで生成されたHTMLを直接操作できるため、迅速にプロトタイプを作成できます。
シンプルなコード：HTMXはHTML属性を使用して機能を追加するため、JavaScriptのコードが少なくて済み、メンテナンスが容易です。
ユーザーエクスペリエンスの向上：ページ全体をリロードせずに部分的な更新ができるため、ユーザーにとって快適な体験を提供できます。

RailsとHTMXを使ったアプリケーションの開発手順

それでは、RailsとHTMXを使って簡単なアプリケーションを開発する手順を見ていきましょう。

1. Railsアプリケーションのセットアップ

まず、Railsアプリケーションを新規作成します。以下のコマンドをターミナルで実行してください。

$ rails new htmx_example
$ cd htmx_example

2. HTMXのインストール

次に、HTMXをアプリケーションに追加します。Gemfileに以下の行を追加し、bundle installを実行します。

gem 'htmx-rails'

$ bundle install

3. HTMXをアセットに追加

次に、HTMXをアセットパイプラインに追加します。app/assets/javascripts/application.jsに以下の行を追加します。

import "htmx"

4. モデルの作成

次に、簡単なタスク管理アプリケーションを作成します。タスクモデルを生成します。

$ rails generate model Task title:string completed:boolean
$ rails db:migrate

5. コントローラーの作成

次に、タスクを管理するためのコントローラーを作成します。

$ rails generate controller Tasks

TasksControllerに以下のアクションを追加します。

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def create
    @task = Task.new(task_params)
    if @task.save
      render partial: 'task', locals: { task: @task }
    else
      render json: { error: @task.errors.full_messages }, status: :unprocessable_entity
    end
  end

  private

  def task_params
    params.require(:task).permit(:title, :completed)
  end
end

6. ビューの作成

次に、タスクの一覧を表示するためのビューを作成します。app/views/tasks/index.html.erbに以下のコードを追加します。

タスク一覧

  <%= render @tasks %>


新しいタスクを追加
<%= form_with(model: Task.new, local: false, html: { id: 'new_task_form' }) do |form| %>
  <%= form.text_field :title %>
  <%= form.submit '追加' %>
<% end %>

次に、タスクの部分ビューを作成します。app/views/tasks/_task.html.erbに以下のコードを追加します。


  <%= task.title %>
  <%= task.completed ? '完了' : '未完了' %>

7. JavaScriptの設定

最後に、タスクを追加するためのJavaScriptを設定します。app/javascript/packs/application.jsに以下のコードを追加します。

document.addEventListener('htmx:afterSwap', function(evt) {
  if (evt.detail.target.id === 'tasks') {
    document.getElementById('new_task_form').reset();
  }
});

アプリケーションの実行

すべての設定が完了したら、Railsサーバーを起動してアプリケーションを実行します。

$ rails server

ブラウザでhttp://localhost:3000/tasksにアクセスすると、タスク管理アプリケーションが表示されます。新しいタスクを追加すると、ページをリロードせずにタスクが追加されることを確認できます。

まとめ

RailsとHTMXを組み合わせることで、迅速かつ効率的にウェブアプリケーションを開発することができます。HTMXのシンプルな構文を利用することで、クライアントサイドのコードを最小限に抑えつつ、インタラクティブなユーザーエクスペリエンスを提供できます。ぜひ、次回のプロジェクトでRailsとHTMXを試してみてください！