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

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

ただいまの
回答率

89.21%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,685

toll_tree

score 35

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript Practice</title>
  <style>
    body{
      display:flex;
      flex-wrap:wrap;
    }
    .box {
      width: 100px;
      height: 100px;
      background: skyblue;
      cursor: pointer;
      transition:0.8s;
      margin:0 8px 8px 0;
      text-align:center;
      line-height:100px;
    }
    .win{
      background:pink;
      border-radius:50%;
      transform:rotate(360deg);
    }
    .lose{
      transform:scale(0.9);
    }
  </style>
</head>
<body>

  <script>
    'use strict';
    const num = 5;
    const winner = Math.floor(Math.random() * num);
    for(let i = 0; i < num; i++){
      const div = document.createElement('div');
      div.classList.add('box');
      if( i === winner){
        div.dataset.result = 'win';
      }else{
        div.dataset.result = 'lose';
      }

      div.addEventListener('click',function(){
        if(div.dataset.result === 'win'){
          div.textContent = 'win!';
          div.classList.add('win');
        }else{
          div.textContent = 'lose!';
          div.classList.add('lose');
        }
      });

      document.body.appendChild(div);

    }

  </script>
</body>
</html>

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2019/05/06 14:26

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

    キャンセル

  • toll_tree

    2019/05/06 14:33

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

    キャンセル

  • think49

    2019/05/06 15:20

    質問ポイントが曖昧で答えづらい状況です。
    "dataset" がプロパティ、"result" が任意の名前、で答えになっていますか。

    "「data-result」とカスタム属性をセットしている部分はありません。ない場合は、自動で作られるといった仕様だったりするのでしょうか?" は、質問が具体的だったので回答に追記しました。

    キャンセル

  • toll_tree

    2019/05/06 15:27

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

    キャンセル

回答 3

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/06 14:25

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

    キャンセル

  • キャンセル

  • 2019/05/06 14:41

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

    キャンセル

checkベストアンサー

+1

if文の判定条件

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

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

if(div.dataset.result === 'win'){
    div.textContent = 'win!';
    div.classList.add('win');
}else{
    div.textContent = 'lose!';
    div.classList.add('lose');
}

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 15:24

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

    キャンセル

+1

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

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

追記

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

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var fuga=document.querySelector('#fuga');
  console.log([fuga.dataset.result,fuga.getAttribute("data-result")]);
  fuga.setAttribute("data-result","abc");
  console.log([fuga.dataset.result,fuga.getAttribute("data-result")]);
  fuga.dataset.result="def";
  console.log([fuga.dataset.result,fuga.getAttribute("data-result")]);
});
</script>
<div id="fuga">fuga</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/06 14:47

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

    キャンセル

  • 2019/05/06 15:03

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

    キャンセル

  • 2019/05/06 15:27

    未初期化時の判定なら、解決策がありますが…。
    'result' in element.dataset
    element.hasAttribute('data-result')

    下記2つのコードが等価である事に気が付いていない事に起因する疑問に読めました。
    element.setAttribute('data-result', 'win');
    element.dataset.result = 'win';

    キャンセル

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

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる