カスタム属性とは、HTMLで「開発者が自由に作れる独自の属性」のことです。

HTML5で追加された仕組み

HTMLには class / id / style などの標準属性がありますが、それ以外に「自分が欲しいデータ」を要素に持たせたいときに使います。

<!-- 標準属性（ブラウザが決めたもの） -->
<div id="app" class="container"></div>

<!-- カスタム属性（開発者が作る） -->
<div id="app" data-user-id="123" data-role="admin"></div>

`data-*` がカスタム属性

data- で始まる属性はすべてカスタム属性です。

<!-- これらはすべてカスタム属性 -->
<div
	data-user-id="123"
	data-week="2025-W15"
	data-props='{"name": "project"}'
	data-anything="自由"
></div>

data- の後ろは自由に命名できる
JavaScript では dataset 経由で参照できる（例：data-user-id → element.dataset.userId）
ブラウザが勝手に削除しない（HTML5で標準化されている）

`data-*` を使う理由（HTML仕様とReact側の扱い）

「DOMに値を埋め込んで、JS/React 側で拾う」用途では data-* が定番です。

HTML5の仕様

id="example" のような通常の属性は仕様上の意味がある（予約されている）
data-* はカスタムデータ用として HTML5 で標準化されている

<!-- NG: カスタムデータ用に独自属性を使う（ブラウザやツール側の扱いが不安定になりやすい） -->
<div id="react-root" props='{"message": "hello"}'></div>

<!-- OK: data-属性ならカスタムデータとして安全に保持できる -->
<div id="react-root" data-props='{"message": "hello"}'></div>

React（JavaScript）側の取得方法

const container = document.getElementById("react-root")
const propsData = container.getAttribute("data-props")
const props = JSON.parse(propsData)

Laravel + Blade + React の典型パターン

Blade側で @json() を使って data 属性に埋め込み、React 側でパースして props として渡します。

Blade

<div id="week-chart" data-props='@json($weekData)'>
	-- Reactがマウントされる --
</div>

React

const container = document.getElementById("week-chart")
const props = JSON.parse(container.getAttribute("data-props"))

root.render(<WeekChart {...props} />)

なぜ `data-props` でないとダメか

<!-- ❌ 独自属性だと環境によっては期待通りに取得できない/扱われないことがある -->
<div id="week-chart" props='@json($weekData)'></div>

<!-- ✅ data-なら「カスタム属性」として仕様上サポートされる -->
<div id="week-chart" data-props='@json($weekData)'></div>

要点：カスタムデータをHTMLに持たせるなら data-* が標準のやり方。

実務での命名例

<div id="user-list" data-user-list='@json($users)'></div>
<div id="week-chart" data-week-data='@json($weekProjects)'></div>
<div id="project-form" data-project='@json($project)'></div>

まとめ：data-* は HTML5 標準のカスタム属性で、Blade → React にデータを安全に渡すためのデファクトスタンダードです。