From fa918be3a99e10026f2ce7f1d463391f97fd62bb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 15 Feb 2022 03:00:20 +0900 Subject: 2022/02/02 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlelement/dataset/index.md | 180 +++++++++++--------------- 1 file changed, 76 insertions(+), 104 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/htmlelement/dataset/index.md b/files/ja/web/api/htmlelement/dataset/index.md index bfdcffc940..fa97cce7ed 100644 --- a/files/ja/web/api/htmlelement/dataset/index.md +++ b/files/ja/web/api/htmlelement/dataset/index.md @@ -5,85 +5,82 @@ tags: - API - HTML DOM - HTMLElement - - HTMLElement - - Property - - Read-only - - Reference - - SVG - - SVG Custom Attributes - - SVG2 - - SVGElement - - dataset - プロパティ - - 読取専用 + - 読み取り専用 + - リファレンス + - dataset +browser-compat: api.HTMLElement.dataset translation_of: Web/API/HTMLElement/dataset --- -
{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}} + +**`dataset`** は {{DOMxRef("HTMLElement")}} インターフェイスの読み取り専用プロパティで、要素に設定されたすべての[カスタムデータ属性](/ja/docs/Web/HTML/Global_attributes/data-*) (`data-*`) への読み取り/書き込みアクセスを提供します。これは文字列のマップである ({{domxref("DOMStringMap")}}) で、それぞれの `data-*` 属性の項目です。 + +> **Note:** `dataset` プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは `dataset` 内の個々のプロパティに対して行う必要があり、それは data 属性を表します。 + +また、 HTML の `data-*` 属性とそれに対応する DOM `dataset.プロパティ` は同じ名前にはなりませんが、次のように常に近いものになります。 + +- HTML では + - : 属性の名前は、 `data-` で始まります。文字、数字、ダッシュ (`-`)、ドット (`.`)、コロン (`:`)、アンダースコア (`_`) のみを入れることができます。 ASCII 大文字の `A` から `Z` は小文字に変換されます。 +- JavaScript では + - : カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から `data-` の接頭辞を除いたものですが、そのプロパティのキャメルケース (camelCase) の名前であり、単一のダッシュ (`-`) を除いたものです。 -

dataset は {{DOMxRef("HTMLElement")}} インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。 このアクセスは、 HTML と DOM の両方の中で利用できます。これは {{domxref("DOMString")}} のマップ ({{domxref("DOMStringMap")}}) で、1つのカスタムデータ属性が1つのエントリに対応します。なお、 dataset プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは dataset 内の個々のプロパティに対して行われる必要があり、それはデータ属性を表します。また、 HTML の data-属性とそれに対応する DOM dataset.プロパティ　は同じ名前を共有しませんが、次のように常に近いものになります。

+以下の情報に加えて、[データ属性の使用](/ja/docs/Learn/HTML/Howto/Use_data_attributes)の記事に、HTML データ属性の使用方法に関するガイドがあります。 - +### 名前の変換 -

以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。

+- ダッシュスタイルからキャメルケースへの変換 -

名前変換

+ - : カスタムデータ属性名は、次のルールに従って {{ domxref("DOMStringMap") }} 項目のキーに変換されます。 -

ダッシュスタイルからキャメルケースへ: カスタムデータ属性名は、次のルールに従って {{ domxref("DOMStringMap") }} エントリのキーに変換されます。

+ 1. すべての ASCII の大文字 (`A` から `Z` まで) を小文字にします。 + 2. 接頭辞の `data-` を（ダッシュを含め）削除します。 + 3. ダッシュ (`U+002D`) に ASCII 小文字の `a` から `z` が続く場合、ダッシュを削除し、その文字を対応する大文字に変換します。 + 4. 他の文字 (他のダッシュを含む) は変更しません。 - +- キャメルケースからダッシュスタイルへの変換 -

キャメルケースからダッシュスタイルへ: キーを属性名にマッピングする逆の変換では、次のルールが使用されます。

+ - : キーを属性名にマッピングする逆の変換では、以下のように次のルールが使用されます。 - + 1. **制約事項:** 変換前に置いて、ダッシュの直後に ASCII 小文字 `a` から `z` を続けてはなりません。 + 2. 接頭辞として `data-` が追加されます。 + 3. ASCII 大文字の `A` から `Z` は、ダッシュと、その後に対応する小文字が続くものに変換されます。 + 4. 他の文字は変更しません。 -

上記の規則の制約事項により、2つの変換が互いに逆変換になります。

+例えば、`data-abc-def` という名前の属性は、キー `abcDef` に対応します。 -

例えば、data-abc-def という名前の属性は、キー abcDef に対応します。

+### 値へのアクセス - +- 属性は dataset のオブジェクトプロパティのようにキャメルケース名 (キー) を使用して、 `element.dataset.keyname` のように設定したり読み取ったりすることができます。 +- 属性はブラケット構文を使用して、 `element.dataset['keyname']` のように設定したり読み取ったりすることもできます。 +- [`in` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/in)を使用して、特定の属性が存在するかどうかを確認できます。 -

値へのアクセス

+### 値の設定 - +- 属性が設定されると、その値は常に文字列に変換されます。 -

値の設定

+ 例えば、 `element.dataset.example = null` は `data-example="null"` に変換されます。 - +- 属性を削除する場合は、[`delete` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/delete)を使用できます。 -

構文

+## 構文 -
const dataAttrMap = element.dataset
-
+```js +const dataAttrMap = element.dataset +``` -

値

+### 値 -

{{domxref("DOMStringMap")}} です。

+{{domxref("DOMStringMap")}} です。 -

例

+## 例 -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+```html +
John Doe
+``` -
const el = document.querySelector('#user');
+```js
+const el = document.querySelector('#user');
 
 // el.id === 'user'
 // el.dataset.id === '1234567890'
@@ -92,55 +89,30 @@ translation_of: Web/API/HTMLElement/dataset
 
 // データ属性の設定
 el.dataset.dateOfBirth = '1960-10-03';
-// 結果: el.dataset.dateOfBirth === 1960-10-03
+// JS での結果: el.dataset.dateOfBirth === '1960-10-03'
+// HTML での結果: 
John Doe

 
 delete el.dataset.dateOfBirth;
-// 結果: el.dataset.dateOfBirth === undefined
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// 結果: 'someDataAttr' in el.dataset === true
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} からの変更なし
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.HTMLElement.dataset")}}

- - - -

関連情報

- - +// JS での結果: el.dataset.dateOfBirth === undefined +// HTML での結果:
John Doe
+ +if ('someDataAttr' in el.dataset === false) { + el.dataset.someDataAttr = 'mydata'; + // JS での結果: 'someDataAttr' in el.dataset === true + // HTML での結果:
John Doe
+} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- HTML の [`data-*`](/ja/docs/Web/HTML/Global_attributes/data-*) クラスのグローバル属性 +- [データ属性の使用](/ja/docs/Learn/HTML/Howto/Use_data_attributes) +- {{DOMxRef("Element.getAttribute()")}} および {{DOMxRef("Element.setAttribute()")}} -- cgit v1.2.3-54-g00ecf