RailsとTurboでAlpine.jsを使う方法

Alpine.jsは私のお気に入りのJavaScriptライブラリの一つです。シンプルで高速、そして多くのJavaScriptコードを書かずに簡単に統合できます。

サーバーサイドでのレンダリングをTurboを通じて行い、ReactやVue.js（Stimulusさえも）を使いたくないRuby on Railsアプリケーションにおいて、Alpine.jsは適切な量のJavaScriptを提供します。

このチュートリアルでは、RailsアプリでAlpine.jsを使用する方法と、以下のUI要素の追加方法を説明します：

• フラッシュメッセージ（自動消去）
• モーダル

このチュートリアルのデモコードはhttps://github.com/Code-With-Rails/alpinejs-demoにあります。

RailsでのAlpine.jsのインストール

ベースアプリケーションには、import mapsをサポートするRails 7を使用します。

bin/rails new rails-alpinejs-demo
cd rails-alpinejs-demo

bin/rails importmap:install
bin/importmap pin alpinejs
bin/importmap pin alpine-turbo-drive-adapter

application.jsに追加します：

import '@hotwired/turbo-rails'
import 'alpine-turbo-drive-adapter'
import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

簡単な例

<div x-data="{ open: false }">
  <button x-on:click="open = ! open">切り替え</button>
  <span x-show="open">ここにいるよ！</span>
</div>

Alpine.jsの素晴らしさは、他の場所に追加のJavaScriptコードを書く必要がないことです。ユーザーが開始したイベントに要素がどのように応答するかを宣言し、それに応じてデータの状態を変更できます。

フラッシュメッセージの構築

Alpine.jsのフラッシュメッセージはx-initとsetTimeoutを使用して自動的に消えるようにできます：

<%# app/views/layouts/_flash_message.html.erb %>
<%= turbo_frame_tag 'flash' do %>
  <% unless flash[:notice].blank? %>
    <div x-init="() => { flashShown = true; setTimeout(() => { flashShown = false }, 4000) };">
      <%= flash[:notice] %>
    </div>
  <% end %>
<% end %>

モーダルの構築

モーダルには、Turbo StreamsとAlpine.jsのトランジションを組み合わせます：

<div x-init="$nextTick(() => { isModalOpen = true })"
     x-show="isModalOpen"
     x-transition:enter="ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100">
  <!-- モーダルのコンテンツ -->
</div>

結論

Alpine.jsを使うことで、サーバーサイドレンダリングに集中し、必要なJavaScriptコードの量を最小限に抑えることができます。Alpine.jsを使用し、それが設計された目的（JSを必要とする軽量な小さなインタラクション）の範囲内で作業すると、アプリとそのコードベースがより軽く感じられます。

デモアプリのリポジトリhttps://github.com/Code-With-Rails/alpinejs-demoをぜひチェックして、ご自身で確認してください。