バッテリー API は「端末の電池残量をブラウザから覗く仕組み」だった
まずイメージからいきます。
バッテリー API（Battery Status API）は、
ブラウザから「この端末のバッテリー残量や充電状態」を取得できる仕組みでした。
何％残っているか
充電中かどうか
フル充電まであと何秒くらいか
バッテリー切れまであと何秒くらいか
こういった情報を JavaScript から読めたので、
バッテリーが少ないときは重い処理を控える
省電力モードの UI に切り替える
「電池が少ないので簡易表示にします」といった気遣いをする
みたいなことが「技術的には」できました。
ただ、今はこの API は「廃止傾向」で、
多くのブラウザで非推奨・無効化されつつあります。
どんなふうに使えていたのか（昔のコードイメージ）
navigator.getBattery() の基本形
かつては、こんなコードでバッテリー情報を取得できました。
navigator.getBattery().then((battery) => {
console.log("残量:", battery.level); // 0〜1（0.5 なら 50%）
console.log("充電中か:", battery.charging); // true / false
console.log("フル充電まで:", battery.chargingTime); // 秒（不明なら Infinity）
console.log("切れるまで:", battery.dischargingTime); // 秒（不明なら Infinity）
});
navigator.getBattery() が Promise を返し、
解決されると battery オブジェクトが渡されます。
battery.level は 0〜1 の数値で、
0.75 なら 75% という意味です。
battery.charging は充電中かどうかの真偽値、chargingTime / dischargingTime は「あと何秒くらいでフル充電／バッテリー切れか」の目安でした。
状態変化をイベントで受け取ることもできた
さらに、バッテリーの状態が変わったときに
イベントで通知を受けることもできました。
navigator.getBattery().then((battery) => {
function logStatus() {
console.log(
`残量: ${(battery.level * 100).toFixed(0)}%`,
`充電中: ${battery.charging}`
);
}
logStatus();
battery.addEventListener("levelchange", logStatus);
battery.addEventListener("chargingchange", logStatus);
});
これで、
充電ケーブルを挿した瞬間
バッテリー残量が変わったタイミング
などで自動的に処理を走らせることができました。
技術的には便利そうに見えますよね。
それなのに「廃止傾向」になった理由
一番大きいのは「プライバシー・トラッキングの問題」
バッテリー API は、一見すると無害そうに見えますが、
実は「ユーザーを追跡する手がかり」になりうる、という問題が指摘されました。
例えば、
バッテリー残量
充電中かどうか
残り時間の推定
などを組み合わせると、
「かなりユニークな状態の指紋（フィンガープリント）」として使える可能性があります。
あるサイト A で「このバッテリー状態のユーザー」を観測し、
別のサイト B でも同じ状態を観測すると、
クッキーなどを使わなくても「同じ人かもしれない」と推測できてしまう、という懸念です。
Web 全体として「トラッキングを減らそう」という流れの中で、
この API は「リスクのわりにメリットが小さい」と判断され、
多くのブラウザで無効化・非推奨になっていきました。
さらに「バッテリーを見て挙動を変える」こと自体が微妙
もう一つの問題は、
「バッテリー状態によってサイトの挙動を変える」ことが
ユーザーにとって本当に良いか？という点です。
例えば、
バッテリーが少ないときだけ広告を減らす
バッテリーが多いときだけ重い処理をする
といったことができてしまうと、
ユーザーの知らないところで「扱いが変わる」ことになります。
これもまた、透明性や公平性の観点から微妙だよね、という話になりました。
結果として、
プライバシーリスクがある
挙動が不透明になりやすい
そこまで必須の機能でもない
という理由で、「廃止の方向に行こう」という流れになったわけです。
今のブラウザでどうなっているのか
ほとんどのモダンブラウザでは使えない前提で考える
現在（2020 年代以降）のモダンブラウザでは、
そもそも navigator.getBattery が存在しない
存在してもフラグで無効化されている
仕様としても「非推奨（Deprecated）」扱い
という状況になっています。
つまり、実務的には
「バッテリー API を前提にした機能は設計しないほうがいい」
「教材として“昔こういうのがあった”と知っておく程度」
くらいの立ち位置です。
もし試しに触ってみるなら、
if ("getBattery" in navigator) { ... } で存在チェックをする
なければ「このブラウザでは利用できません」と表示する
という防御的な書き方が必須になります。
「もしまだ使える環境だったら」の練習用ミニ例
バッテリー残量を表示するだけのシンプルなコード
これはあくまで「歴史的な API の練習用」として見てください。
const info = document.querySelector("#batteryInfo");
if ("getBattery" in navigator) {
navigator.getBattery().then((battery) => {
function update() {
const level = (battery.level * 100).toFixed(0);
const charging = battery.charging ? "充電中" : "バッテリー使用中";
info.textContent = `残量: ${level}% / 状態: ${charging}`;
}
update();
battery.addEventListener("levelchange", update);
battery.addEventListener("chargingchange", update);
});
} else {
info.textContent = "このブラウザはバッテリー API に対応していません（廃止傾向のため）。";
}
HTML 側はこんな感じです。
<p id="batteryInfo">バッテリー情報を取得中…</p>
もし対応している環境なら、
残量: 73% / 状態: バッテリー使用中
のように表示が更新されます。
対応していない環境では、
「廃止傾向のため使えません」とメッセージを出すようにしています。
初心者として「バッテリー API」から本当に学んでほしいこと
正直、今から新しくバッテリー API を覚えても、
実務でそのまま使う場面はほぼありません。
でも、この API の「盛り上がって → 問題が見つかって → 廃止されていく」流れから、
めちゃくちゃ大事なことが学べます。
ブラウザは「できること」をどんどん増やしてきたが、同時に「やりすぎた」部分もある
便利そうに見える API でも、プライバシーやトラッキングの観点で NG になることがある
Web の仕様は「技術」だけでなく「人の権利・安全」とセットで考えられている
つまり、
「できるからやる」ではなく
「やっていいか」「やるべきか」を考える
という視点が、これからの Web エンジニアには必須だ、ということです。
バッテリー API 自体は忘れてもいい。
でも、「なぜ廃止されたのか」というストーリーは、
位置情報・センサー・カメラ・マイクなど、
他の“強い権限”を扱うときの考え方に直結します。
技術の表側だけじゃなくて、
その裏にある「人間側の事情」まで一緒に見ていくと、
あなたのエンジニアとしての解像度は一気に上がります。