Stimulus.js と JavaScript の統合で Rails pp を強化する

Stimulus.js と JavaScript の統合で Rails 7 アプリを強化

Stimulus.js は、HTML を拡張する控えめな JavaScript フレームワークです。これは、Rails の組み込み機能と完璧に連携します。この投稿では、JavaScript 機能に Stimulus.js を使用する方法、他の JavaScript ライブラリと統合する方法、Importmap を使用して JavaScript の依存関係を効果的に管理する方法について説明します。

前提条件

始める前に、以下のものがあることを確認してください:

• Rails 7 アプリケーションのセットアップ
• JavaScript と Rails の基礎知識

Rails 7 での Stimulus.js のセットアップ

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!」に変わります。

他の JavaScript ライブラリとの統合

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!')
  }
}

JavaScript の依存関係の管理

Rails 7 での JavaScript の依存関係の管理は、Importmap を使用すると簡単です。ここにいくつかのヒントがあります:

• ライブラリを追加します: 新しいライブラリを追加するには、config/importmap.rb の「library_url」にピン「library_name」を使用します。
• ライブラリの削除: 既存のライブラリを削除するには、config/importmap.rb から対応する行を削除します。
• ライブラリの更新: config/importmap.rb 内の URL を最新バージョンに更新します。
• 古いライブラリを確認してください: config/importmap.rb の URL にアクセスして、新しいバージョンが利用可能かどうかを確認してください。

カスタム JavaScript ファイルをプロジェクトに追加することもできます。これらを app/javascript フォルダーに配置し、必要な場所にインポートします。

結論

Stimulus.js は、Rails アプリケーションに JavaScript 機能を追加する強力かつ簡単な方法を提供します。他の JavaScript ライブラリと統合することで、豊かで動的なユーザー エクスペリエンスを作成できます。 JavaScript の依存関係を適切に管理すると、アプリケーションが保守可能で最新の状態に保たれます。

コーディングを楽しんでください!

以上がStimulus.js と JavaScript の統合で Rails pp を強化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。