BLogみんなのウェディングのエンジニア。聴いたお話をまとめておく倉庫的な。くふうカンパニーアドベントカレンダー、7日目担当の@KotaSakurawiです。フロント寄りの内容になります。Stimulusについて触る機会がありましたので、こんな感じに書いていくよ、という説明をします!そもそもstimulusとは?まずstimulusって何かということから書いて行きます。javascriptのフレームワークということくらいしか僕も知りませんでした。公式サイトをみてみましょう。HTMLのための最もモダンなJavaScriptのフレームワーク。モダンに書けるってことか!stimulusはbasecampのメンバーによって開発されたJavaScriptのフレームワークで、特徴としてHTMLの変化をさせることに特化している印象が強いです。Railsとの親和性が高く、とっつきやすいと聞いたこともあります。実際、自分も記述の形式にはあまり抵抗がなく使い始めることができました。Software早速使ってみようということで触るのが一番!やってみましょう。最初にstimulusを学習するには、、公式サイトにあるhandbookを一通りやってみて感触を掴んでいくのがいいと思います。Introduction今回はディレクトリの構成や環境の用意部分は割愛させていただきます。構成RailsはMVCモデルの考え方で開発されています。stimulusも同様の考え方に近いと思っています。DOM(オブジェクト)の取得をcontrollerで行なって、DOMのややこしい操作、ajaxなどの通信を行なったりするロジックをmodelに書くといった責務の切り分けができるようになります。切り分けができると、jsに対するテストも記述がしやすくなりますよね。ユニットテストが書けるようになるのは保守性が高まって良いのでは!前提として、これを踏まえておきましょう。handbookをやっていくよ!handbookの内容を引用しながら説明をしていこうと思います。コードは基本的にhandbookからの引用とさせていただきます。}}これが基本的な書き方をしているjsのコントローラのファイルです。connect()はcontrollerが読み込まれた時に処理が走るようになります。initializeみたいな感じですね。このcontrollerが読み込まれるようにするにはどうするのか、みて行きましょう。簡単なhtmlの構成はこんな感じになります。data-action="click->hello#greet">Greet</button></div>使いたいコンポーネントがある部分を囲えるように、一番外側にdata-controllerの属性を付与したタグを置きます。これでどのcontrollerを使用するを指定します。今回でいうと、hello_controllerが対象になるということですね。stimulusは、data属性を使って紐づけていく、というのが基本です。メソッドを呼び出していくぞ!さて、ではメソッドを呼び出して処理させて行きましょう。ボタンを押したら文字が切り替わる、その切り替えるメソッドをどう呼ぶのかという感じです。先ほどのHTMLファイルのdata-targetや、data-actionが怪しいですよね。いうことで、jsファイルを少し拡張するとこんな感じに。this.nameTargetの記述に注目していきます。targetでコンポーネントを指定するhtmlのファイルでdata-targetの属性がついているコンポーネントは、操作対象のコンポーネントの指定になります。type="text">たとえば、こちら。inputタグが使われているので、ユーザが入力したものを取得できそうです。この入力したデータを、jsの方で扱うためにstimulusの記法にしたがってコードを追記します。]とthis.nameTargetです。ちなみに、複数のコンポーネントを操作する場合は、以下のようにします。]このように定義しておくと、そのコンポーネントを呼び出す時にthis.xxxTargetと呼び出せるようになるのです!jQueryでいうところの、$(".class_name")みたいなものです。this.nameTarget.dataset.xxxといった呼び出し方も可能です。複数のターゲットを取得したりもできます。この時は、this.nameTargetsのように書けます。Targetsactionでメソッドを呼び出す次に、data-actionで指定したものについて説明します。data-action="click->hello#greet">Greet</button>のように、data-actionでcontrollerとメソッドを指定します。greet()が呼ばれます。modelにjsファイルを追加する以上の内容はcontrollerの中で完結する処理ですが、modelを作って責務を切り分けていくケースもあると思います。その時は、それぞれのアプリのディレクトリ構成によりますが、packs/controllerの中にcontroller関連のファイルを置き、packs/models配下にmodelファイルを追加していきます。その際、各コントローラーから使用する時は、controllerの上部にこのような記述で読み込みを行いましょう。終わりに以上!ざっくりとしたstimulusの使い方でした。htmlにdata属性を指定して、それをjsの方から扱うというのが基本です。jQueryでは指定するclass名が必要になったりidを使用するケースが多く、マークアップのためのclassなのかjsによる指定のためのclassなのか混在しがちだと思います。それがdata属性での指定になるので、切り分けがされるかなーと思います。あとはそれぞれの処理ごとのテストもmodelに書いていくことでやりやすくなると思いますし、この辺はRailsに近しいので肌感としてもわかりやすいのではないかなと!以上、stimulus触ってみたよガイドでした。Railsを使ってtwitterに画像付きtweetをするぞwip記事ですが、追記していきます。(1)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。