data属性のfalseが真になる？datasetの文字列を数値・真偽値として扱う前の確認

HTMLにdata-enabled="false"と書いたのに、JavaScriptでは有効な扱いになった。data属性から読む値は文字列なので、使い方に合わせて条件を決める必要があるよ。

この記事では、架空の件数と有効・無効のフラグだけを使う。作例はページ内で動き、外部への送信や設定の保存は行わない。数値や真偽値を扱う前に、元の型を確認してみよう。

datasetから読む値は文字列

<div id="sample" data-count="10" data-enabled="false"></div>

const sample = document.querySelector('#sample');
console.log(typeof sample.dataset.count); // string
console.log(sample.dataset.count + 1);    // 101

10という数値へ1を足したつもりでも、文字列との足し算では連結になる。画面に数字だけが見えていることと、プログラムの中で数値になっていることは別だよ。

falseという文字列は、空ではない

Boolean(sample.dataset.enabled)のように変換しても、空ではない文字列"false"はtrueになる。文字がfalseと読めることを、JavaScriptがそのまま偽の値として解釈するわけではない。

"true"と"false"だけを使うルールなら、まず許可する文字列を確認し、その上でsample.dataset.enabled === 'true'のように比較する方法がある。

const raw = sample.dataset.enabled;
if (raw !== 'true' && raw !== 'false') {
  throw new Error('Unexpected flag');
}
const enabled = raw === 'true';

属性がない場合や、別の値が入った場合をどう扱うかも決めよう。真偽値が欲しいからといって、何でもBooleanへ通せばよいとは限らないんだ。

件数は、変換後の条件も見る

const count = Number(sample.dataset.count);
if (!Number.isFinite(count)) {
  throw new Error('Invalid count');
}

この例は、有限の数値へ変換できるかの確認まで。負数や小数を件数として受け付けるか、上限をどうするかは別の条件になる。空文字が0へ変わる場合などもあるため、入力の形そのものを制限したいなら、変換前も確認しよう。

作例で三つの表示を比べる

1. 件数10・フラグfalseの状態で、元の文字列を見る。
2. 文字列のまま+1した101と、数値へ直した11を比べる。
3. Booleanで扱った結果と、'true'との比較結果を見る。
4. 件数を文字の例へ変え、数値へ変換できない表示を確認する。
5. リセットで最初の状態へ戻す。

編集部では、10・0・数値でない文字の三つと、フラグtrue・falseの切り替えをブラウザで確認した。作例の値は固定の練習用で、利用者の設定を変更するものではないよ。

属性名の書き方にも規則がある

data-user-idは、datasetではuserIdのような名前で扱う。値の型だけでなく、名前の変換を間違えてundefinedになっていないかも確認しよう。

入力の型はAIのJSONを確認する手順、文字を表示する方法はtextContentへ。

参照した公式資料

• MDN：HTMLElement.dataset

確認日：2026年10月26日。