Stimulus.jsの紹介

Webは非常に高速に移動し、1年以内に賢明であると感じるフロントエンドのアプローチを選択するのは難しいです。 開発者としての私の最大の恐怖は、しばらく触れられていないプロジェクトを取り上げ、彼らが使用したアプローチのドキュメントを見つけることは、存在しないか、オンラインで簡単に見つけられないことです。

約1年前、私はStimulusを使い始め、出荷したコードに本当に満足しました。 これは約30kbのライブラリであり、アプリ内で再利用可能なJavaScriptを少し振りかけることを奨励し、接続先のJavaScriptの場所に関するヒントをアクセス可能なHTMLにほとんど残さないように編成されています。 これにより、JavaScriptの一部が擬似コードを読み取るようにページとどのように相互作用するかを理解できます。

Stimulusは、Basecampのチームによって作成されました（最近HEYメールサービスをリリースしました）。これは、Webアプリケーション用に作成したJavaScriptの維持を支援するためです。 歴史的に、Basecampはオープンソースプロジェクトの維持に非常に優れているため、Stimulusは徹底的にテストされており、今後数年間は維持されると確信しています。

Stimulusを使用すると、再利用可能で親しみやすい方法でアプリケーションを構築できます。 StimulusがReactやVueのようにWebを引き継ぐとは思いませんが、学ぶ価値のあるツールだと思います。

用語

すべてのフレームワークと同様に、Stimulusには特定のことを説明するための優先用語があります。 幸いなことに（そして私が刺激を好きになった主な理由の1つ）、知っておく必要があるのは2つだけです。

• コントローラ
  これは、アプリケーションの構成要素であるJavaScriptクラスのインスタンスを指します。 Stimulus Controllersについて話すときは、JavaScriptクラスについて話していると言っても過言ではありません。
• 識別子
  これは、Stimulusコードベースに共通のデータ属性を使用してHTMLでコントローラーを参照するために使用する名前です。
  

刺激に飛び込もう！

次のいくつかの例では、ブラウザにドロップして、unpkg.comから配布されているライブラリを介してすぐに開始できるコードを使用します。 後で、コードの編成を改善できるため、非常に推奨されるwebpackアプローチについて説明します。これは、Stimulusハンドブックで使用されているアプローチです。

ボイラープレート

上記のスニペットの要点を理解すると、Stimulusを使用するプロジェクトを快適に選択できるようになります。

かなりすごいですよね？ すべてが何をしているかに飛び込みましょう！

application.start

この行は、Stimulusにリスナーをページに追加するように指示します。 Stimulusコードを追加する前に、ページの上部で1回だけ呼び出すと、接続するクラスについてStimulusに通知するために使用されるメソッドregisterを含むメインのStimulusコントローラーのインスタンスが返されます。それに。

コントローラー

data-controller属性は、HTML要素をJavaScriptクラスのインスタンスに接続します。 この場合、識別子「counter」を使用して、 CounterControllerクラスのインスタンスをdiv要素に接続しました。 この識別子とコントローラーの間の接続について、 application.registerメソッドを介してStimulusに通知しました。

Stimulusは、この属性を持つ要素が追加および削除されたときにページを継続的に監視します。 data-controller属性を使用して新しいHTMLがページに追加されると、関連するコントローラークラスの新しいインスタンスが初期化され、HTML要素が接続されます。 その要素をページから削除すると、コントローラークラスのdisconnectメソッドが呼び出されます。

行動

Stimulusは、データ属性data-actionを使用して、コントローラーのどの機能を実行するかを明確に定義します。 構文event->controller#functionを使用すると、HTMLを読んでいる人は誰でもそれが何をするかを見ることができます。 これは、他のファイルからの予期しないコードのリスクを減らし、コードベースをナビゲートしやすくするため、特に便利です。 Stimulusが推奨するアプローチを最初に見たとき、それはほとんど擬似コードを読んでいるように感じました。

上記の例では、ボタンが「クリック」イベントを発生させると、「カウンター」コントローラー内のaddOne関数に渡されます。

ターゲット

ターゲットは、コントローラーで使用できる要素を明示的に定義する方法です。 これまで、ID、CSSクラス名、およびデータ属性を組み合わせてこれを実現してきました。そのため、明示的な単一の「これがその方法です」を使用すると、コードの一貫性が大幅に向上します。

これには、 targets関数を介してコントローラークラス内でターゲット名を定義し、 data-targetを介して要素に名前を追加する必要があります。

これらの2つの部分を設定すると、要素がコントローラーで使用できるようになります。 この場合、「output」という名前のターゲットを設定しました。これは、コントローラーの関数内でthis.outputTargetからアクセスできます。

重複するターゲット

同じ名前のターゲットが複数ある場合は、複数形のtargetメソッドを使用してそれらにアクセスできます。この場合、 this.outputTargetsを呼び出すと、属性data-target="hello.output"を持つ両方のdivを含む配列が返されます。 data-target="hello.output" 。

イベントタイプ

JavaScriptメソッドaddEventListenerを介して一般的に添付できるイベントをリッスンします。 たとえば、ボタンがクリックされたとき、フォームが送信されたとき、または入力が変更されたときをリッスンできます。

windowまたはdocumentのイベント（サイズ変更やユーザーのオフライン化など）をリッスンするには、 eventタイプに「@window」または「@document」を追加する必要があります（例： resize@window->console#logEventはウィンドウのサイズが変更されたときのconsoleコントローラの関数logEvent ）。

一般的なイベントを添付する簡単な方法があります。イベントタイプを省略でき、要素タイプのデフォルトのアクションがあります。 ただし、Stimulusにあまり詳しくない人がコードについて行う必要のある仮定の量が増えるため、イベントの省略形を使用することは強くお勧めしません。

同じ要素で複数のコントローラーを使用する

多くの場合、2つのロジックを別々のクラスに分割したいが、HTML内でそれらを互いに近くに表示させたい場合があります。 Stimulusを使用すると、HTML内に両方への参照を配置することにより、要素を複数のクラスに接続できます。

上記の例では、バスケット内のアイテムの総数をカウントすることだけに関係するbasketオブジェクトを設定しましたが、アイテムごとのバッグの数をchildオブジェクトも追加しました。

オブジェクトへのデータの受け渡し

Stimulusは、コントローラークラス内のメソッドthis.data.getおよびthis.data.setを提供します。これにより、識別子と同じ名前空間内にあるデータ属性を変更できます。 つまり、HTMLからスティミュラスコントローラーにデータを渡したい場合は、 data-[identifier]-a-variableなどの属性をHTML要素に追加するだけです。

this.data.setを呼び出すと、HTMLの値が更新されるため、ブラウザー開発ツールを使用して要素を検査するときに値の変化を確認できます。

名前空間化されたデータ属性を使用することは、どのデータ属性がどのコードに対応するかを明確にするのに役立つ非常に優れた方法です。

初期化、接続、切断

アプリケーションが大きくなるにつれて、デフォルトを設定したり、データをフェッチしたり、リアルタイム通信を処理したりするために、おそらく「ライフサイクルイベント」にフックする必要があります。 Stimulusには、Stimulusクラスのライフサイクル全体で呼び出される3つの組み込みメソッドがあります。

Stimulusは、一致するdata-controller属性を持つ要素を検出すると、コントローラーの新しいバージョンを作成し、 initialize関数を呼び出します。 これは、ページを最初にロードしたときに実行されることがよくありますが、コントローラーへの参照を含む新しいHTMLをページに追加する場合（AJAX経由など）にも実行されます。 要素をDOM内の新しい位置に移動すると、実行されません。

クラスが初期化された後、StimulusはそれをHTML要素に接続し、 connect関数を呼び出します。 DOM内で要素を移動する場合は、 connectも呼び出します。 したがって、要素を取得し、1つの要素から削除してから別の場所に追加すると、 connectのみが呼び出されることに気付くでしょう。

ページから要素を削除するとdisconnect機能が実行されるため、たとえば、HTMLの本文を置き換える場合、要素が含まれていない場合に再実行が必要になる可能性のあるコードを破棄できます。同じ位置。 たとえば、要素に多くの余分なHTMLを追加する派手なWYSIWYGエディターがある場合、 disconnectが呼び出されたときに元の状態に戻すことができます。

機能の継承

場合によっては、Stimulusコントローラー間で少し共通の機能を共有したいことがあります。 Stimulusの優れた点は、（内部では）ややバニラなJavaScriptクラスをHTML要素に接続しているため、共有機能に慣れているはずです。

この例では、 ParentControllerという名前の親クラスを設定します。このクラスは、 ChildControllerという名前の子クラスによって拡張されます。 これにより、 ParentControllerからメソッドを継承できるため、 ChildController内でコードを複製する必要がなくなりました。

本番環境での使用

上記のStimulusの使用方法のかなり独立した例をいくつか示しました。これにより、達成できることを味わうことができます。 また、本番環境でどのように使用し、どのように機能しているかについても触れておく必要があると思いました。

Webpack

Webpackを使用している場合は、ご馳走になります。 Stimulusは完全にWebpackで使用できるように作られました。 彼らのドキュメントには、Webpack用の素敵なスターターキットもあります。 これにより、コントローラーを個別のファイルに分割でき、Stimulusが識別子として使用する正しい名前を決定します。

Stimulusを使用する場合は、webpackを使用する必要はありませんが、エクスペリエンスをクリーンアップします。 個人的には、Stimulusは、Webpackを紹介し、Webpackが提供する価値を実感するのに役立ったライブラリでした。

ファイル名の規則

この記事の冒頭で、Stimulusは整理されていると感じたので楽しんだと述べました。 これは、コントローラーの自動ロードと登録を可能にするWebpackと組み合わせると明らかになります。

WebpackでStimulusを設定したら、 [identifier]_controller.jsのようにファイルに名前を付けることをお勧めします。ここで、識別子はHTML data-controller属性に渡すものです。

プロジェクトが成長するにつれて、Stimulusコントローラーをサブフォルダーに移動することもできます。 魔法のように、Stimulusはアンダースコアをダッシュ​​に変換し、フォルダーのスラッシュを2つのダッシュに変換します。これが、識別子になります。 したがって、たとえば、ファイル名chat/conversation_item_controller.jsの識別子はchat--conversation-itemなります。

JavaScriptの維持を減らす

私のお気に入りの引用の1つは、「最高のコードはコードがまったくない」です。このアプローチをすべてのプロジェクトに適用しようとしています。

Webブラウザーは大きく進化しており、今日JavaScriptを作成するために必要なもののほとんどは、今後5年以内に標準化され、ブラウザーに組み込まれると確信しています。 この良い例はdetails要素です。私が最初に開発を始めたとき、jQueryを使用してその機能を手動でコーディングする必要があるのは非常に一般的でした。

その結果、「今日はこれでいいのですが、5年後には簡単に交換したい」という考え方で、JavaScriptを散りばめたアクセシブルなHTMLを書けたら嬉しいです。デベロッパー。 これは、Stimulusが役立つ最初のコードを少なくすることで、はるかに達成可能になります。

最初にHTML、次にJavaScript

Stimulusが推奨するアプローチについて私が本当に気に入っている点の1つは、HTMLをユーザーに送信することに集中できることです。これは、JavaScriptで少しジャズアップされます。

私は常に、ユーザーの注意を引く最初の数ミリ秒を使用して、ユーザーの前で共有しなければならないものを取得するのが好きです。 次に、ユーザーが表示しているものの処理を開始できる間に、インタラクションレイヤーを設定することを心配します。

さらに、何らかの理由でJavaScriptが失敗した場合でも、ユーザーはJavaScriptなしでコンテンツを表示し、操作することができます。 たとえば、フォームがAJAXを介して送信される代わりに、ページをリロードする従来のフォームリクエストを介して送信されます。

結論

私は、ユーザーエクスペリエンスを向上させるために、保守可能なJavaScriptを少しだけ振りかける必要があるサイトを構築するのが大好きです。時には、よりシンプルに感じるものを構築するだけでよい場合もあります。 軽量なものがあることは素晴らしいことです。あまり認知的な負荷がなくても、ファイルを整理する方法が非常に明確であり、JavaScriptがHTMLでどのように実行されるかを示唆する小さなパンくずリストを設定することが本当に大好きです。

Stimulusでの作業は本当に楽しかったです。 それほど多くはないので、学習曲線はかなり穏やかです。 私が自分のコードを他の誰かに渡すとしたら、彼らは幸せな開発者になるだろうと私はかなり確信しています。 純粋な好奇心がない場合でも、試してみることを強くお勧めします。

部屋の中の象は、ReactやVueのようなものと比べてどのように積み重なっているかですが、私の考えでは、それらは異なる要件のための異なるツールです。 私の場合、サーバーからHTMLをレンダリングすることが多く、エクスペリエンスを向上させるためにJavaScriptを少し追加しています。 もっと複雑なことをしている場合は、別のアプローチを検討します（または、コードをシンプルに保つために要件をプッシュバックします）。

参考文献

• 刺激のホームページ
  彼らは、私が上で概説した概念をより深く掘り下げた素晴らしいハンドブックを持っています。
• StimulusGitHubリポジトリ
  Stimulusのコードを調べることで、Stimulusがどのように機能するかについて多くのことを学びました。
• 刺激に関するチートシート
  ハンドブックは1ページにまとめられています。
• 刺激フォーラム
  他の人がStimulusを使用しているのを見ると、実際に使用されているように感じました。