質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

5308閲覧

「dataset.result 」の意味を教えてください

toll_tree

総合スコア199

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/05/06 04:12

編集2019/05/06 05:32

php

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>JavaScript Practice</title> 6 <style> 7 body{ 8 display:flex; 9 flex-wrap:wrap; 10 } 11 .box { 12 width: 100px; 13 height: 100px; 14 background: skyblue; 15 cursor: pointer; 16 transition:0.8s; 17 margin:0 8px 8px 0; 18 text-align:center; 19 line-height:100px; 20 } 21 .win{ 22 background:pink; 23 border-radius:50%; 24 transform:rotate(360deg); 25 } 26 .lose{ 27 transform:scale(0.9); 28 } 29 </style> 30</head> 31<body> 32 33 <script> 34 'use strict'; 35 const num = 5; 36 const winner = Math.floor(Math.random() * num); 37 for(let i = 0; i < num; i++){ 38 const div = document.createElement('div'); 39 div.classList.add('box'); 40 if( i === winner){ 41 div.dataset.result = 'win'; 42 }else{ 43 div.dataset.result = 'lose'; 44 } 45 46 div.addEventListener('click',function(){ 47 if(div.dataset.result === 'win'){ 48 div.textContent = 'win!'; 49 div.classList.add('win'); 50 }else{ 51 div.textContent = 'lose!'; 52 div.classList.add('lose'); 53 } 54 }); 55 56 document.body.appendChild(div); 57 58 } 59 60 </script> 61</body> 62</html>

javascriptで学習をしていたのですが、上記コードの「div.dataset.result = 'win';」の部分が、いまいち分からないです。「dataset.result 」は、なんなのでしょうか?
MDNを読んだのですが、いまいち分からなかった為、ご質問させて貰いました
追記です。
分からない部分の説明が不明確で申し訳ないです。
分からない部分についてなのですが、「dataset」が何で、「result」が何か、といった点が分からないです。
その後のif分での条件式で、使用されているということは、条件式などで、比較する為に設定する値?のようなものの、設定記法だったりするのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2019/05/06 05:26

「いまいち分からない」の部分を具体的かつ詳しく書いてください。分からない部分が不明なので、あてずっぽうで回答しています。
toll_tree

2019/05/06 05:33

ご指摘ありがとうございます。 分からない部分を追記しました。
think49

2019/05/06 06:20

質問ポイントが曖昧で答えづらい状況です。 "dataset" がプロパティ、"result" が任意の名前、で答えになっていますか。 "「data-result」とカスタム属性をセットしている部分はありません。ない場合は、自動で作られるといった仕様だったりするのでしょうか?" は、質問が具体的だったので回答に追記しました。
toll_tree

2019/05/06 06:27

いえ、ご回答頂き、理解することができました。 分かりやすく、丁寧にご回答頂きましたので、BAとさせて貰いました。
guest

回答3

0

.dataset.resultの値は、HTMLでのdata-result属性の値と連動しています。

他のライブラリでdata-resultあるいは.dataset.resultを見るという状況でなければ、result自体に特別な意味はありません。

投稿2019/05/06 04:41

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toll_tree

2019/05/06 05:25

ご回答ありがとうございます。 HTMLの「data-result」属性とはどのようなものなのでしょうか?
toll_tree

2019/05/06 05:41

リンクありがとうございます。 勉強になりました。 「data~」と、javascriptのdataset.~で対応させることができるのは、理解できたのですが、今回ご質問させて貰った内容ですと、「dataset.result」はあるのですが、「data-result」とカスタム属性をセットしている部分はありません。ない場合は、自動で作られるといった仕様だったりするのでしょうか?
guest

0

HTML要素に設定されたカスタムデータの読み書きをする方法ですね
datasetプロパティとdata-*属性は常にリンクするようです

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var hoge=document.querySelector('#hoge'); 4 console.log([hoge.dataset.result,hoge.getAttribute("data-result")]); //初期値参照 5 hoge.setAttribute("data-result",456); 6 console.log([hoge.dataset.result,hoge.getAttribute("data-result")]); //属性変更 7 hoge.dataset.result=789; 8 console.log([hoge.dataset.result,hoge.getAttribute("data-result")]); //プロパティ変更 9}); 10</script> 11<div id="hoge" data-result="123">hoge</div>

追記

初期値がない場合は参照するとundefinedとnullの違いが出てきます
その2つを同士の値を比べることは意味がないですが、
未設定かどうかチェックする場合には上記の違いを意識する必要があります

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var fuga=document.querySelector('#fuga'); 4 console.log([fuga.dataset.result,fuga.getAttribute("data-result")]); 5 fuga.setAttribute("data-result","abc"); 6 console.log([fuga.dataset.result,fuga.getAttribute("data-result")]); 7 fuga.dataset.result="def"; 8 console.log([fuga.dataset.result,fuga.getAttribute("data-result")]); 9}); 10</script> 11<div id="fuga">fuga</div>

投稿2019/05/06 05:25

編集2019/05/06 06:02
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toll_tree

2019/05/06 05:47

ご回答ありがとうございます。 貼って頂いたコードにおいて、htmlのdiv要素の「data-result="123"」と、javascriptの「hoge.dataset.result」部分が、対応していることは、分かったのですが、今回ご質問させて貰ったコードですと、html部分には、「data-result」の部分がありません。ここの部分がない点で、少し引っかかってしまっているんですよね。。
yambejp

2019/05/06 06:03

初期値がない場合は参照時に注意が必要ですが、 設定してしまえばその後の参照にはなんの問題もありません
think49

2019/05/06 06:27

未初期化時の判定なら、解決策がありますが…。 'result' in element.dataset element.hasAttribute('data-result') 下記2つのコードが等価である事に気が付いていない事に起因する疑問に読めました。 element.setAttribute('data-result', 'win'); element.dataset.result = 'win';
guest

0

ベストアンサー

if文の判定条件

上記コードの「div.dataset.result = 'win';」の部分が、いまいち分からないです。

後々、if文でwin/loseを判定する為に代入しています。

JavaScript

1if(div.dataset.result === 'win'){ 2 div.textContent = 'win!'; 3 div.classList.add('win'); 4}else{ 5 div.textContent = 'lose!'; 6 div.classList.add('lose'); 7}

data-* 属性

element.dataset.* への代入は、data-* 属性に反映する仕様です。

var div = document.createElement('div'); div.dataset.result = 'win'; console.log(div.dataset.result, div.getAttribute('data-result')); // "win" "win" console.log(div.outerHTML); // <div data-result="win"></div> div.setAttribute('data-result', 'lose'); console.log(div.dataset.result, div.getAttribute('data-result')); // "lose" "lose" console.log(div.outerHTML); // <div data-result="lose"></div>

Re: toll_tree さん

投稿2019/05/06 05:25

編集2019/05/06 05:59
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toll_tree

2019/05/06 06:24

ご回答ありがとうございます。 大変分かりやすくご説明頂き、助かります。 ご回答頂いたこちらの部分「element.dataset.* への代入は、data-* 属性に反映する仕様です。」 つまり、element.dataset.~に代入したものは、htmlの「data-属性」に自動的に反映されるといった仕組みなんですね。 少し、混乱していたのですが、謎が解けました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問