【JavaScript】画面サイズをリアルタイムで取得する方法

ウェブ開発において、ユーザーの画面サイズを監視することは非常に重要です。レスポンシブデザインを実現するためにも、ウィンドウサイズの変化を検知して適切な対応を行う必要があります。本記事では、JavaScriptを使って画面サイズをリアルタイムで取得する方法を紹介します。

画面サイズを取得する基本的な方法
ウィンドウサイズの変更を監視する
コードの説明
まとめ

画面サイズを取得する基本的な方法

JavaScriptを使用すると、簡単に画面サイズを取得することができます。基本的な方法は、window.innerWidthとwindow.innerHeightを使用することです。これにより、現在のウィンドウの幅と高さを取得できます。

const width = window.innerWidth;
const height = window.innerHeight;
console.log(`幅: ${width}px, 高さ: ${height}px`);

ウィンドウサイズの変更を監視する

次に、ウィンドウサイズの変更を監視するために、resizeイベントを使用します。resizeイベントを使うことで、ウィンドウサイズが変更されるたびに特定の関数を呼び出すことができます。

以下に、画面サイズを監視し、変更があったときにサイズを表示する完全なコード例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画面サイズ監視</title>
    <style>
        #size-display {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>画面サイズ監視</h1>
    <div id="size-display">幅: 0px, 高さ: 0px</div>

    <script>
        function updateSizeDisplay() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const sizeDisplay = document.getElementById('size-display');
            sizeDisplay.textContent = `幅: ${width}px, 高さ: ${height}px`;
        }

        // 初期サイズを表示
        updateSizeDisplay();

        // リサイズイベントリスナーを追加
        window.addEventListener('resize', updateSizeDisplay);
    </script>
</body>
</html>

コードの説明

HTML構造の作成: 画面サイズを表示するためのdiv要素を含む基本的なHTMLを作成します。
CSSの適用: #size-displayに対して簡単なスタイルを適用します。
JavaScriptの追加:
- updateSizeDisplay関数を定義し、window.innerWidthとwindow.innerHeightを使用して現在の画面サイズを取得し、#size-displayのテキスト内容を更新します。
- ページが読み込まれた時点でupdateSizeDisplayを呼び出し、初期サイズを表示します。
- resizeイベントリスナーを追加し、ウィンドウサイズが変更されるたびにupdateSizeDisplayを呼び出します。

まとめ

この方法を使用することで、ウィンドウサイズの変更をリアルタイムで監視し、画面サイズに応じた動的な対応が可能になります。レスポンシブデザインを実現する際に非常に役立つテクニックですので、ぜひ活用してみてください。