スティミュラスコントローラーによる継承

この記事は元々 Rails Designer で公開されたものです

---

私にとって、Stimulus コントローラーを使用することで最も素晴らしいことは、小さな特定のことにコントローラーを使用できることです。 1 つのコンポーネントに対して大きなコントローラーを作成するのではなく、それぞれ独自の小さな処理を実行する複数の小さな Stimulus コントローラーを作成します。さらに結束力が必要な場合は、アウトレットを使用して「一緒に話す」ことができます。

しかし、別の Stimulus コントローラーと重複するロジックを持つ別の Stimulus コントローラーが必要な場合は、次の 2 つのことを行うことができます。

• インポートする個別の関数にロジックを抽出します。または、
• 継承を使用して、他のコントローラーからロジックを取得します。

今日私が探求したいのは継承です。最近、一括アクション コンポーネントを UI コンポーネント ライブラリに追加しました。これにより、ユーザーはリストから複数の項目を選択し、それらすべてに同じアクションを適用できます。 すべて削除。これは、チェックボックス コンポーネントとかなりの部分で重複します。どちらも、アイテムを選択するためにまったく同じロジックを必要としました。一括アクションの場合は、項目を選択することが始まりです。その後、カウンター付きの「アクション バー」が表示されます。

(動くgifは元記事をご覧ください！？)

注: この記事は、最初から最後まで一括アクションを追加することに関するものではありません。そのためには、Rails Designer をチェックすることをお勧めします (これには、Rails SaaS アプリですぐに使用できる数百のコンポーネントもあります)。

まず、checkboxes_controller.js を見てみましょう (Rails Designer に含まれているものはもう少し複雑です!)。

// app/javascript/controllers/checkboxes_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static values = { checkboxesCheckedCount: Number };

  selectAll() {
    this.setCheckboxesTo(true);
  }

  deselectAll() {
    this.setCheckboxesTo(false);
  }

  setCheckboxesTo(boolean) {
    const checkboxes = this.checkboxes
      .filter(checkbox => !checkbox.disabled)
      .forEach(checkbox => checkbox.checked = boolean);

    this.checkboxesCheckedCountValue = checkboxes.length;
  }

  // …
}

これは簡単に理解できると思いますね?次に、bulk_actions_controller.js:

// app/javascript/controllers/bulk_actions_controller.js
import CheckboxesController from "controllers/checkboxes_controller";

export default class BulkActionsController extends CheckboxesController {
  static values = { open: Boolean };

  // private

  checkboxesCheckedCountValueChanged() {
    this.openValue = this.checkboxesCheckedCountValue;
  }
}

コードの簡単な説明: checkboxesCheckedCountValue が変更されたとき (checkboxes_controller の値) openValue を設定します (0 は false、その他はすべて true)。十分簡単です！次に、openValue を使用してアクション バーの表示/非表示を切り替えます。

これは、Controller から継承しているのではなく、2 行目でインポートされている CheckboxesController から継承していることがわかります ("@hotwired/stimulus"; からの一般的な import {Controller } の代わりに)。

しかし、現時点で書かれているように、これでは十分ではありません。 checkboxes_controller は実際には正しくエクスポートされていません。まずそれをやってみましょう:

import { Controller } from "@hotwired/stimulus";

// Was: `export default class extends Controller {`
export default class CheckboxesController extends Controller {
  // …
}

それでは、これはどのように機能するのでしょうか? Ruby (および Rails) の場合、次のように別のクラスから継承できます。

class User < ApplicationRecord
class Integration::Netlify < Integration::Base
# etc.

Rails、より具体的には Zeitwerk がクラスを自動ロードするため、上記は問題なく機能します。一般的な Ruby アプリでは、クラスも自動ロードされないため、手動でロードする必要があります。

require "application_record"
require "integration/base"
# etc.

これは JavaScript の仕組みと似ています。

刺激コントローラー (デフォルト クラスをエクスポートしてコントローラーを拡張) を記述する方法は、刺激コントローラーを拡張する匿名クラスを作成することです (クラス < Integration::Base に似ています)。 checkboxes_controller は、Stimulus Controller を拡張する名前付きクラスになりました。

これで、bulk_actions_controller に問題なくインポートできるようになりました。これにより、関数とその他すべてのロジック (this.checkboxesCheckedCountValue) を checkboxes_controller から継承することができます。 Ruby クラスとは異なり、プライベート関数 (# で始まる関数) は他の JavaScript クラスでは使用できないことに注意してください。

Stimulus コントローラーの継承を使用する場合

私は相続にはあまり手を伸ばしません。多くの場合、ロジックを別のファイル内の独自の関数に抽出し、代わりにそれをインポートします (Ruby の include または extend のように)。ただし、他のコントローラーのロジックと 100% 重複していて、他のコントローラーに変更を加える必要がない場合、継承は素晴らしくクリーンなオプションです。

要約すると:

• 他のクラスをインポート可能にエクスポートし、デフォルト クラス CheckboxesController extends Controller;
• 次に、他のコントローラーにクラスをインポートします。 import CheckboxesController from "controllers/checkboxes_controller";;
• 次に、インポートされたコントローラーを使用して他のコントローラーを拡張します。export デフォルト クラス BulkActionsController extends CheckboxesController {}.

構文は Ruby にかなり似ていますが、より冗長であることがわかります (ただし、これは Ruby の非常にユニークな点です!)。

? 「JavaScript for Rails Developers」という本を出版する予定です。すでに50名以上の方にご予約いただいております。次はあなたでしょうか？ ❤️

以上がスティミュラスコントローラーによる継承の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。