Stimulus Componentsでのドロップダウン実装

環境

• docker
• rails8.1.1

Dockerfile

FROM ruby:3.3.6

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

RUN apt-get update -qq \
&& apt-get install -y ca-certificates curl gnupg \
&& mkdir -p /etc/apt/keyrings \
&& curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
&& NODE_MAJOR=20 \
&& echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
&& wget --quiet -O - /tmp/pubkey.gpg https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn vim

RUN mkdir /myapp
WORKDIR /myapp
RUN gem install bundler

COPY . /myapp

compose.yml（webサービスの部分）

  web:
    build:
      context: .
      dockerfile: Dockerfile
    command: bash -c "bundle install && bundle exec rails db:prepare && rm -f tmp/pids/server.pid && ./bin/dev"
    tty: true
    stdin_open: true
    volumes:
      - .:/myapp
      - bundle_data:/usr/local/bundle:cached
      - node_modules:/myapp/node_modules
    environment:
      TZ: Asia/Tokyo
    ports:
      - "3000:3000"
    depends_on:
      db:
        condition: service_healthy

経緯

rails8系の環境で、素早く基本的なドロップダウンが実装できる方法は何かを考えた結果、「stimulusのドロップダウンのパッケージをインストールする方法」に決まりました。
なお、私の場合、ヘッダ部分にドロップダウンを設定しました。

目次

• ドロップダウンのパッケージをインストール
• javascriptのコントローラの作成
• ビューファイルの作成

実装

ドロップダウンのパッケージをインストール

下記コマンドを実行

docker compose exec web yarn add @stimulus-components/dropdown

javascriptのコントローラの作成

[1]

# app/javascript/application.js

import "@hotwired/turbo-rails"
import "./controllers"    // controllersフォルダ内のindex.jsを読込

[2]

# app/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()   // stimulusを起動
export { application }    // 他のファイルで使えるようにする

[3]

# app/javascript/controllers/index.js

import { application } from "./application"    // [2]で作ったapplicationを取得

// ドロップダウン
import Dropdown from '@stimulus-components/dropdown'    // パッケージのインポート
application.register('dropdown', Dropdown)    // applicationに登録

ビューファイルの作成

例として下記のような感じになります。

<div data-controller="dropdown">   # コントローラを紐づけ
          <button 
            type="button" 
            data-action="dropdown#toggle click@window->dropdown#hide"    # アクションの設定
          >
            <span><%= current_user.name %></span>
          </button>
          <div
            data-dropdown-target="menu"                # ターゲット（操作対象）の指定
            data-transition-enter-from="opacity-0 scale-95"
            data-transition-enter-to="opacity-100 scale-100"
            data-transition-leave-from="opacity-100 scale-100"
            data-transition-leave-to="opacity-0 scale-95"
          >
            <div>
              <%= link_to edit_user_registration_path, 
                  data: { action: "dropdown#toggle" } do %>        # メニュー内のボタンのクリック時のアクションも設定
                アカウント設定
              <% end %>
              <%= button_to destroy_user_session_path, 
                  method: :delete,
                  data: { action: "dropdown#toggle" } do %>
                ログアウト
              <% end %>
            </div>
          </div>
        </div>

動作確認

ドロップダウンが正常に動作するか確認しましょう。

参考資料

Stimulus Componentsのドキュメント：https://www.stimulus-components.com/docs/stimulus-dropdown/