1. 導入：なぜWindow.innerWidthが重要なのか
Webサイトを制作する際、「PCとスマホでレイアウトを切り替えたい」「画面サイズに応じて特定の処理を実行したい」という場面は非常に多くあります。CSSのメディアクエリだけでは制御しきれない、JavaScript側での動的な画面幅の取得に欠かせないのが Window.innerWidth です。これを使うことで、ユーザーがブラウザの幅を変更した瞬間にレイアウトを調整するような、柔軟なWeb体験を実現できます。
2. 基礎知識：Window.innerWidthとは何か
Window.innerWidth は、ブラウザの表示領域（ビューポート）の幅をピクセル単位で取得できるJavaScriptのプロパティです。重要なポイントは、この値には「スクロールバーの幅」が含まれているという点です。また、これと対になる「ウィンドウ全体の幅（スクロールバーを含まない）」を知りたい場合は「document.documentElement.clientWidth」を使用するなど、状況に応じた使い分けが求められます。
3. 実装・解決策
画面サイズをリアルタイムに監視するには、window.addEventListener を使用して、「resizeイベント」を検知します。ブラウザの幅が変更されるたびに、現在の幅を取得して条件分岐を行うのが基本的な流れです。
4. サンプルプログラム
以下のコードをコピーして、HTMLファイルのスクリプトタグ内に貼り付けてみてください。ブラウザの幅を広げたり狭めたりすると、コンソールに現在の状態が表示されます。
// 画面幅が変更された時に実行される関数
function checkWindowSize() {
// Window.innerWidthで現在の幅を取得
const width = window.innerWidth;
if (width < 768) {
console.log("現在はスマホサイズです: " + width + "px");
} else if (width < 1024) {
console.log("現在はタブレットサイズです: " + width + "px");
} else {
console.log("現在はPCサイズです: " + width + "px");
}
}
// ブラウザのリサイズイベントを監視する
window.addEventListener('resize', checkWindowSize);
// 初回読み込み時にも実行しておく
checkWindowSize();
5. 応用・注意点：現場で役立つTips
現場での開発で最も注意すべきは「パフォーマンス」です。ユーザーがブラウザの端をドラッグしてリサイズしている間、このイベントは1秒間に数十回も発火します。そのため、重い計算処理を直接記述するとブラウザが非常に重くなります。
これを防ぐために、「デバウンス（Debounce）」という手法を使います。これは「リサイズが終わってから一定時間経過した後に処理を実行する」というテクニックです。また、スマホ端末では画面の回転時にもリサイズイベントが発生するため、意図しない挙動を防ぐためのチェックを入れることも大切です。初心者の方は、まずはシンプルに現在の幅を取得することから始め、慣れてきたらリサイズ時の負荷軽減策を学んでいきましょう。