「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Stimulus.js と JavaScript の統合で Rails pp を強化する

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

2024 年 7 月 31 日に公開
ブラウズ:124

Enhance Your Rails pp with Stimulus.js and JavaScript Integration

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 コントローラーを使用します:

ボタンをクリックすると、テキストが「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 の依存関係を適切に管理すると、アプリケーションが保守可能で最新の状態に保たれます。

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

リリースステートメント この記事は次の場所に転載されています: https://dev.to/shahzaib/enhance-your-rails-7-app-with-stimulusjs-and-javascript-integration-5clf?1 侵害がある場合は、study_golang@163 までご連絡ください。 .comを削除してください
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3