Stimulus リファレンス: 値

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

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

特別なコントローラープロパティを使用してコントローラー要素の[HTMLデータ属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)を型付きの値として読み書きできます。

```html
<div data-controller="loader"
     data-loader-url-value="/messages">
</div>
```

```javascript
// controllers/loader_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    url: String
  }

  connect() {
    fetch(this.urlValue).then(/* … */)
  }
}
```

# 定義

静的値オブジェクトを使用してコントローラーで値を定義します。各値の名前を左側に、その型を右側に配置します。

```javascript
export default class extends Controller {
  static values = {
    url: String,
    interval: Number,
    params: Object
  }

  // …
}
```

# 型

値の型は`Array`、`Boolean`、`Number`、`Object`、または`String`のいずれかです。型は値がJavaScriptとHTMLの間でどのようにトランスコードされるかを決定します。

| 型 | エンコードの型 | デコードの型 |
| :-- | :-- | :-- |
| Array | `JSON.stringify(array)` | `JSON.parse(value)` |
| Boolean | `boolean.toString()` | `!(value == "0" \|\| value == "false")` |
| Number | `number.toString()` | `Number(value)` |
| Object | `JSON.stringify(object)` | `JSON.parse(value)` |
| String | それ自身 | それ自身 |

# プロパティと属性

Stimulusはコントローラーで定義された各値のゲッター、セッター、および存在のプロパティを自動的に生成します。これらのプロパティはコントローラーの要素のデータ属性にリンクされています。

| 種類 | プロパティ | 効果 |
| :-- | :-- | :-- |
| ゲッター | `this.[name]Value` | `data-[identifier]-[name]-value`の読み込み |
| セッター | `this.[name]Value=` | `data-[identifier]-[name]-value`の書き込み |
| 存在 | `this.has[Name]Value` | `data-[identifier]-[name]-value`のテスト |

## ゲッター

値のゲッターは関連付けられたデータ属性を値の型のインスタンスにデコードします。

コントローラーの要素にデータ属性がない場合、ゲッターは値の型に応じてデフォルト値を返します。

| 型 | デフォルト値 |
| :-- | :-- | 
| Array | `[]` |
| Boolean | `false` |
| Number | `0` |
| Object | `{}` |
| String | `""` |

## セッター

値のセッターはコントローラーの要素に関連するデータ属性を設定します。

コントローラーの要素からデータ属性を削除するには値に`undefined`を割り当てます。

## 存在プロパティ

値の存在プロパティは関連付けられたデータ属性がコントローラーの要素に存在する場合は`true`に評価され、存在しない場合は`false`に評価されます。

# コールバックの変更

値変更コールバックを使用すると、値のデータ属性が変更されるたびに応答できます。

コントローラーでメソッド`[name]ValueChanged`を定義します。`[name]`は変更を監視する値の名前です。このメソッドはデコードされた値を最初の引数として受け取り、デコードされた前の値を2番目の引数として受け取ります。

Stimulusはコントローラーが初期化された後、関連するデータ属性が変更されるたびに各変更コールバックを呼び出します。これには値のセッターへの割り当ての結果としての変更が含まれます。

```javascript
export default class extends Controller {
  static values = { url: String }

  urlValueChanged() {
    fetch(this.urlValue).then(/* … */)
  }
}
```

## 以前の値

`[name]ValueChanged`コールバックの以前の値にアクセスするにはコントローラーで2つの引数を使用してコールバックメソッドを定義します。

```javascript
export default class extends Controller {
  static values = { url: String }

  urlValueChanged(value, previousValue) {
    /* … */
  }
}
```

2つの引数には好きな名前を付けることができます。`urlValueChanged(current, old)`を使用することもできます。

# デフォルト値

コントローラー要素で指定されていない値はコントローラー定義で指定されたデフォルトで設定できます。

```javascript
export default class extends Controller {
  static values = {
    url: { type: String, default: '/bill' },
    interval: { type: Number, default: 5 },
    clicked: Boolean
  }
}
```

デフォルトが使用される場合、`{ type, default }`の展開された形式が使用されます。この形式はデフォルトを使用しない通常の形式と混在させることができます。

# 命名規則

値の名前はJavaScriptでは camelCase、HTMLではkebab-caseとして記述します。たとえば`loader`コントローラーの`contentType`という名前の値には、関連付けられたデータ属性`data-loader-content-type-value`があります。