Stimulus.js：Railsアプリに代わるJSフレームワーク

何を考えているか分かるよ......もうひとつ。 JavaScript フレームワーク？すでにたくさんありますよ！その通りなのですが、私が注目したのはこのフレームワークです。 ベースキャンプ.この会社をご存知の方も多いだろう。 ルビー on Rails.彼らはまた、次のものを作った。 ターボリンクス スティミュラスはこれと素晴らしい相性を見せるからだ。というわけで、スティミュラスを試してみる価値はあるだろうか？

どのように機能するのか？

スティミュラスは、ページを監視し、次のページが表示されるのを待つ。 データコントローラ 属性を表示する。その データコントローラ 値は Stimulus コントローラを接続したり切断したりします。前提は単純で、クラスがHTMLとCSSの接続であるのと同じです、 データコントローラ はHTMLからJavaScriptへの橋渡しである。Stimulusはまた データアクション 属性は、ページ上のイベントがコントローラのメソッドをどのようにトリガーするかを記述します。 データターゲット 属性は、コントローラのスコープ内の要素を見つけるためのハンドルです。

簡単な取り付け

あなたのRailsアプリがwebpacker gemを使用している場合、webpacker gemがStimulusをインストールするタスクを提供しているので、簡単なコマンド1つでStimulusをインストールできます。Railsのルートディレクトリで次のコマンドを実行するだけです：

rails webpacker:install:stimulus
これが刺激となる。 package.json そして、以下の2つのファイルを作成する： app/javascript/controllers/index.js：

インポート { アプリケーション } from "stimulus"
インポート { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

webpackのrequire.contextヘルパーが呼び出されているのがわかります。そして、その結果のコンテキストをApplication#loadメソッドに渡しています。これは、アプリケーションが[識別子]_controller.js での app/javascript/controllers/ ディレクトリに置く必要があります。ここで、識別子は HTML 内のコントローラの data-controller 識別子に対応します。これはまさに Stimulus コントローラを置くべき場所です。
アプリ/javascript/controllers/hello_controller.js も生成される。これは、私たちが遊ぶことができるコントローラの例です。

基本的な使い方

よし、これで hello_controller.js ファイルを作成した。 コード:

インポート { コントローラ } from "stimulus"

エクスポートデフォルトクラス extends Controller {
静的ターゲット = ["output"］
connect() {
this.outputTarget.textContent = 'こんにちは、刺激！'
}
}

しかし、ご存知のように、HTMLとJavaScriptを接続しなければ、何の効果も見られない。HTMLビューにコードを追加してみましょう。これはいつでも好きなときに貼ることができる：

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

それでね。以上です！ページをリロードして、"Hello, Stimulus!"と表示されたら、接続がうまくいっている証拠です。簡単でしょう？
オーケー、でもこれはただのテキスト表示だ。何かアクションを起こせないか？はい、できます！前にも書いたように データアクション 属性の値を変更します。次にHTMLビューを変更してみましょう：

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">計算する</button></p>
</div>

景気刺激策 app/javascript/controllers/hello_controller.js:

インポート { コントローラ } from "stimulus"

export default クラス extends コントローラ {
静的ターゲット = ["output", "days"］
connect() {
this.outputTarget.textContent = 'いつから隔離されていますか？
}
計算() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

もし (daysLeft < 1) {なら
  alert('あなたは自由です！')
}
else {
  alert(`隔離に必要な日数: ${daysLeft}`)
}

}
}

ここでは、隔離されている期間を計算するとてもシンプルなアプリを紹介します。これは、HTMLのdata-action属性を使うことで実現しました。
JavaScriptのコードのターゲットリストに "days "が追加されているのがわかるだろう。こうすると、Stimulusは自動的に this.daysTarget プロパティは、最初にマッチしたターゲット要素を返します。

他に知っておくべきことは？

コールバック

があることにお気づきだろうか。 コネクト() メソッドで使用される。これはビルトイン・コールバックのためのものだ。すべてのコールバックとそのライフサイクルを知っておくべきです：
イニシャライズ: コントローラが最初にインスタンス化されたときに一度だけ、
コネクトコントローラーがDOMに接続されているときはいつでも、
切断コントローラがDOMから切断されるときはいつでも。

アクション記述子

について データアクション 価値 クリック->hello#calculate はアクション記述子と呼ばれる。この記述子にはこう書かれている：

• クリック はイベント名である、
• こんにちわ はコントローラ識別子である、
• 計算する はメソッド名である。

ターゲット

アクションと同じように、スティミュラスにもターゲット・ディスクリプタがある。その ハローデイズ の記述にはこうある： こんにちわ はコントローラ識別子である、
日 はターゲット名である。

前の例では、スティミュラスが this.daysTarget プロパティを作成する必要がある。また、より多くのプロパティを作成できることも知っておく必要があります。例に関連して、あなたは持つことができます：

this.daysTarget これは、コントローラのスコープ内の最初のターゲットまで評価されます。ターゲットがない場合、このプロパティはエラーフラグを立てます、
this.daysTargets は、コントローラのスコープ内のすべてのソースターゲットの配列まで評価します、
this.hasDaysTarget ターゲットがあればtrueを、なければfalseを返す。

ご覧のように、Stimulusはシンプルで、簡単にアプリケーションに追加することができます。RoRコミュニティで人気を博しているのも納得です。Ruby開発者である私自身、Stimulusでの作業をとても楽しんでいます。では、実際に使ってみてはいかがでしょうか？

続きを読む

• ウェブアプリ開発：なぜRuby on Railsは選ぶ価値のある技術なのか？
• 新しい現実の時。リモートワークの時代が始まって1カ月
• ポーランドで有能なRuby開発者が見つかる5つの理由