screen.colorDepthの使い方｜色深度の取得方法【JavaScript入門】

screen.colorDepthを使うと、画面情報から色深度の値を取得できます。現在の仕様では、対応するブラウザが返す値は24です。ただし、この値だけでは、実際の画面が何色を表示できるかまでは判断できません。

screen.colorDepthとは

screen.colorDepthは、画面に関する情報を読むためのScreen APIに含まれるプロパティです。仕様では、色深度の値として24を返すことが定められています。

ここでいう24は、画面装置の実際の色数を読み取った結果とは限りません。仕様が互換性のために返す値を24に定めているため、値だけを見て「自分の画面は必ず24bitで表示されている」と判断しないでください。

色深度の値は、色を表す情報の量をビット数で示します。たとえば24bitの色データでは、赤・緑・青の3つの成分にそれぞれ8bitを使う形式があります。この形式で表せる色は、計算上は約1,677万通りです。

24bitと32bitの違い

24bitは、赤・緑・青の情報に8bitずつ使う色データの例です。一方、32bitのデータ形式では、24bit分の色の情報に加えて、残りの8bitを透明度の情報に使う場合があります。

この32bitの例は、色データの形式についての説明です。32bitなら必ず同じ内訳になる、あるいは画面が必ず約1,677万色を表示できる、という意味ではありません。また、screen.colorDepthの仕様上の返り値24と、色データ形式の32bitは別の話です。

次の図は、24bitと、透明度の情報を加えた32bitのデータ形式の一例を比べたものです。

値を取得して確認する方法

次のコードをブラウザの開発者ツールにあるコンソールへ入力すると、screen.colorDepthの値を確認できます。

console.log("screen.colorDepth:", window.screen.colorDepth);

console.logは、指定した文字や値をコンソールに表示するための書き方です。window.screen.colorDepthで画面情報を読み、その値を表示します。

実行結果の例：仕様に沿ったブラウザでは、次のように24と表示されます。これは仕様に基づく例であり、この記事で特定のブラウザや端末を実行確認した結果ではありません。

screen.colorDepth: 24

自分の環境で試す手順

1. ホームページを表示しているブラウザで、開発者ツールを開きます。
2. コンソールの欄を選び、上のコードを入力します。
3. Enterキーを押し、表示された値を確認します。

ブラウザによって開発者ツールの開き方や画面の名前は異なる場合があります。コンソールに入力できない場合は、ブラウザのヘルプで開発者ツールの開き方を確認してください。

よくある問題と確認方法

値が表示されない

コンソールではなく、ホームページ上の検索欄などにコードを入力している可能性があります。ブラウザの開発者ツールを開き、コンソールの入力欄にコードを入れているか確認してください。

また、ブラウザではないプログラム実行画面で試している場合、windowやscreenを利用できないことがあります。ブラウザでホームページを開き、そのブラウザのコンソールで実行してください。

値が想定と違う

仕様に沿った返り値の例は24です。別の値が表示された場合も、その数値だけから画面の実際の色数を決めつけないでください。ブラウザ名とバージョンを確認し、公式の説明と照らし合わせてください。

値が取得できても、画面の色数が分からない

これは必ずしも取得の失敗ではありません。screen.colorDepthは画面装置の実際の色数を調べるための値ではないため、画面の色設定を確認する目的には適しません。

利用するときの注意点

screen.colorDepthは画面情報を読む例として利用できますが、実際の色数の判定や、色の表示に関する設定の切り替えに使うのは避けてください。仕様上の値と、画面装置や色データの形式は同じものではありません。

仕様と確認環境について

この記事では、画面情報に関する公式仕様の記述を根拠に、仕様上の返り値を24として説明しています。仕様の原文は英語です。画面情報に関する公式仕様で該当箇所を確認できます。

検証環境：OS、ブラウザ名、ブラウザのバージョン、実行結果の情報は提供されていないため、記載していません。上のコードと操作手順も実行確認済みとはしていません。再現性を示すには、実際に確認した環境名・バージョン・確認日・表示された値を追記してください。