<h1>属性から値を取得する</h1>
<button 
  id="myButton" 
  data-user-id="12345" 
  data-user-name="もつに"
  data-role="admin">
  ユーザー情報を表示
</button>
<div id="result"></div>

<script>
  const button = document.querySelector("#myButton");
  const result = document.querySelector("#result");

  button.addEventListener("click", () => {
    const userId = button.getAttribute("data-user-id");
    const userName = button.getAttribute("data-user-name");
    const role = button.getAttribute("data-role");

    result.innerHTML = `
      <div>ユーザーID: ${userId}</div>
      <div>ユーザー名: ${userName}</div>
      <div>権限: ${role}</div>
    `;
  });
</script>