ホームページ > 記事 > ウェブフロントエンド > Stimulus.js と JavaScript の統合で Rails pp を強化する
Stimulus.js は、HTML を拡張する控えめな JavaScript フレームワークです。これは、Rails の組み込み機能と完璧に連携します。この投稿では、JavaScript 機能に Stimulus.js を使用する方法、他の JavaScript ライブラリと統合する方法、Importmap を使用して JavaScript の依存関係を効果的に管理する方法について説明します。
始める前に、以下のものがあることを確認してください:
Rails 7 には、Stimulus.js のデフォルトのサポートが付属しています。開始するには、次のコマンドを実行して、Stimulus がアプリケーションに含まれていることを確認します。
rails new my_app cd my_app
Stimulus コントローラーは app/javascript/controllers にあります。
単純なクリック イベントを処理する Stimulus コントローラーを作成しましょう。次のコマンドを実行します:
rails generate stimulus hello
これにより、app/javascript/controllers に新しいコントローラー hello_controller.js が生成されます。ファイルを開いて次のコードを追加します:
// app/javascript/controllers/hello_controller.js import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["output"] connect() { this.outputTarget.textContent = 'Hello, Stimulus!' } greet() { this.outputTarget.textContent = 'Hello, World!' } }
HTML で、Stimulus コントローラーを使用します。
<div data-controller="hello"> <h1 data-hello-target="output"></h1> <button data-action="click->hello#greet">Greet</button> </div>
ボタンをクリックすると、テキストが「Hello, World!」に変わります。
Stimulus.js は、他の JavaScript ライブラリとシームレスに連携できます。たとえば、jQuery を Stimulus.js と統合してみましょう。
まず、Importmap を使用して jQuery を追加します。
jQuery を config/importmap.rb に追加します:
pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
次に、Stimulus コントローラーに jQuery をインポートします。
// app/javascript/controllers/hello_controller.js import { Controller } from "@hotwired/stimulus" import $ from "jquery" export default class extends Controller { static targets = ["output"] connect() { this.outputTarget.textContent = 'Hello, Stimulus!' } greet() { $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!') } }
Rails 7 での JavaScript の依存関係の管理は、Importmap を使用すると簡単です。ここにいくつかのヒントがあります:
カスタム JavaScript ファイルをプロジェクトに追加することもできます。これらを app/javascript フォルダーに配置し、必要な場所にインポートします。
Stimulus.js は、Rails アプリケーションに JavaScript 機能を追加する強力かつ簡単な方法を提供します。他の JavaScript ライブラリと統合することで、豊かで動的なユーザー エクスペリエンスを作成できます。 JavaScript の依存関係を適切に管理すると、アプリケーションが保守可能で最新の状態に保たれます。
コーディングを楽しんでください!
以上がStimulus.js と JavaScript の統合で Rails pp を強化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。