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 コントローラーを使用します:
ボタンをクリックすると、テキストが「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 の依存関係を適切に管理すると、アプリケーションが保守可能で最新の状態に保たれます。
コーディングを楽しんでください!
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3