この記事はGoogle翻訳の結果を編集したものです。
Stimulusについて
Stimulusはささやかな野心を持つJavaScriptフレームワークです。他のフロントエンドフレームワークとは異なり、Stimulusは単純な注釈を使用してJavaScriptオブジェクトをページ上の要素に接続することにより、静的またはサーバーでレンダリングされたHTML（"既に持っている HTML"）を強化するように設計されています。
これらのJavaScriptオブジェクトはコントローラーと呼ばれ、Stimulusは継続的にページを監視し、HTMLdata-controller属性が表示されるのを待ちます。各属性についてStimulusは属性の値を調べて対応するコントローラークラスを見つけ、そのクラスの新しいインスタンスを作成し、それを要素に接続します。
これは次のように考えることができます: class属性がHTMLをCSSに接続するブリッジであるように、Stimulusのdata-controller属性はHTMLをJavaScriptに接続するブリッジです。
コントローラー以外の3つの主要なStimulusの概念は次のとおりです。
-
data-action属性を使用してコントローラーメソッドをDOMイベントに接続するアクション - コントローラー内の重要な要素を見つけるターゲット
- コントローラーの要素のデータ属性を読み取り、書き込み、監視する値
Stimulusのデータ属性の使用はCSSがコンテンツをプレゼンテーションから分離するのと同じようにコンテンツを動作から分離するのに役立ちます。 さらに、Stimulusの規則では関連するコードを名前でグループ化することが自然に推奨されます。
次に、Stimulusは小さくて再利用可能なコントローラーを構築するのに役立ち、コードが"JavaScriptスープ"に発展しないようにするのに十分な構造を提供します。
本書について
このハンドブックではいくつかの完全に機能するコントローラーを作成する方法を示すことにより、Stimulusのコアコンセプトについて説明します。各章はその前の章に基づいています。最初から最後までで次の方法を学びます。
- テキストフィールドの名前宛ての挨拶を印刷する
- ボタンがクリックされたときに、テキストフィールドからシステムクリップボードにテキストをコピーする
- 複数のスライドを含むスライドショーをナビゲートする
- HTMLをサーバーからページ上の要素に自動的にフェッチする
- 独自のアプリケーションでStimulusをセットアップする
ここでの演習を完了すると、Stimulus APIに関する技術的な詳細を理解するのに役立つリファレンスドキュメントが見つかる場合があります。
始めましょう！