Stimulus リファレンス: アウトレット

:::note
この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。
:::

https://stimulus.hotwired.dev/reference/outlets

アウトレットを使用するとCSSセレクターを使用して別のStimulusコントローラー内からStimulusコントローラーインスタンスとそのコントローラー要素を参照できます。

アウトレットを使用するとコントローラー要素でカスタムイベントをディスパッチする代わりにコントローラー間の通信と調整が容易になります。

Stimulusターゲットと概念的には似ていますが、Stimulusコントローラーインスタンスとそれに関連付けられたコントローラー要素を参照するという違いがあります。

```html
<div data-controller="search" data-search-result-outlet=".result">
  ...
</div>

...

<div id="results">
  <div class="result" data-controller="result">...</div>
  <div class="result" data-controller="result">...</div>
  ...
</div>
```

**ターゲット** はそれ自体のコントローラー要素の **スコープ内** で明確にマークされた要素ですが、 **アウトレット** は **ページのどこにでも** 配置でき、必ずしもコントローラーのスコープ内にある必要はありません。

# 属性と名前

`data-search-result-outlet`属性はアウトレット属性と呼ばれ、その値はホストコントローラーでアウトレットとして使用できる他のコントローラー要素を参照するために使用できる[CSSセレクター](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)です。

```
data-[identifier]-[outlet]-outlet="[selector]"
```

```html
<div data-controller="search" data-search-result-outlet=".result"></div>
```

# 定義

静的アウトレット配列を使用してコントローラークラスでコントローラー識別子を定義します。 この配列はこのコントローラーのアウトレットとして使用できる他のコントローラー識別子を宣言します。

```javascript
// search_controller.js

export default class extends Controller {
  static outlets = [ "result" ]

  connect () {
    this.resultOutlets.forEach(result => ...)
  }
}
```

# プロパティ

静的アウトレット配列で定義されたアウトレットごとにStimulusはコントローラーに5つのプロパティを追加します。ここで`[name]`はアウトレットのコントローラー識別子に対応します。

| 種類 | プロパティ | 返値の型 | 効果 |
| :--| :-- | :-- | :-- |
| 存在 | `has[Name]Outlet` | `Boolean` | `[name]`アウトレットの存在をテストします |
| 単数 | `[name]Outlet` | `Controller` | 最初の`[name]`アウトレットの`Controller`インスタンスを返すか存在しない場合は例外をスローします |
| 複数 | `[name]Outlets` | `Array<Controller>` | すべての`[name]`アウトレットの`Controller`インスタンスを返します |
| 単数 | `[name]OutletElement` | `Element` | 最初の`[name]`アウトレットのコントローラー要素を返すか、存在しない場合は例外をスローします |
| 複数 | `[name]OutletElements` | `Array<Element>` | すべての`[name]`アウトレットのコントローラー要素を返します |

# コントローラーと要素へのアクセス

`[name]Outlet`および`[name]Outlets`プロパティからコントローラーインスタンスを取得するため、値、クラス、ターゲット、およびコントローラーインスタンスが定義する他のすべてのプロパティと関数にアクセスすることもできます。

```javascript
this.resultOutlet.idValue
this.resultOutlet.imageTarget
this.resultOutlet.activeClasses
```

また、アウトレットコントローラーが定義する可能性のある関数を呼び出すこともできます。

```javascript
// result_controller.js

export default class extends Controller {
  markAsSelected(event) {
    // ...
  }
}

// search_controller.js

export default class extends Controller {
  static outlets = [ "result" ]

  selectAll(event) {
    this.resultOutlets.forEach(result => result.markAsSelected(event))
  }
}
```

アウトレット要素と同様に[`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element)の任意の関数またはプロパティを呼び出すことができます。

```javascript
this.resultOutletElement.dataset.value
this.resultOutletElement.getAttribute("id")
this.resultOutletElements.map(result => result.hasAttribute("selected"))
```

# アウトレットコールバック

アウトレットコールバックはアウトレットがページに追加またはページから削除されるたびに応答できるよう、Stimulusによって呼び出される特別な名前の関数です。

アウトレットの変化を観察するには`[name]OutletConnected()`または`[name]OutletDisconnected()`という名前の関数を定義します。

```javascript
// search_controller.js

export default class extends Controller {
  static outlets = [ "result" ]

  resultOutletConnected(outlet, element) {
    // ...
  }

  resultOutletDisconnected(outlet, element) {
    // ...
  }
}
```

## アウトレットが存在すると仮定

コントローラーのアウトレットプロパティにアクセスすると、少なくとも1つの対応するアウトレットが存在することをアサートします。宣言がなく一致するアウトレットが見つからない場合、Stimulusは例外をスローします。

```
Missing outlet element "result" for "search" controller
```

## オプションのアウトレット

アウトレットがオプションの場合、または少なくともアウトレットが存在することをアサートしたい場合は、存在に関するプロパティを使用してアウトレットの存在を最初に確認する必要があります。

```javascript
if (this.hasResultOutlet) {
  this.resultOutlet.safelyCallSomethingOnTheOutlet()
}
```

## 非コントローラー要素の参照

対応する`data-controller`と識別子を持たない要素をアウトレットとして宣言しようとするとStimulusは例外をスローします。

```html
<div data-controller="search" data-search-result-outlet="#result"></div>

<div id="result"></div>
```

次のようになります。

```
Missing "data-controller=result" attribute on outlet element for
"search" controller`
```