JavaScriptで使えるWindow.innerHeightのテクニック10選

●Window.innerHeightとは？
●ウィンドウ幅の取得
●ウィンドウのリサイズイベント
●レスポンシブデザインへの応用
●高度なテクニック
まとめ

●Window.innerHeightとは？

ウェブ開発者にとって、ウィンドウサイズを操作することは非常に重要なスキルです。

特にレスポンシブデザインを実装する際には、現在のウィンドウの高さを知ることが欠かせません。

そこで活躍するのが、JavaScriptのWindow.innerHeightプロパティです。

○ウィンドウの高さを取得する

Window.innerHeightは、ブラウザウィンドウの内部の高さをピクセル単位で返します。

これには、垂直方向のスクロールバーが含まれる場合もありますが、ブックマークバーやツールバー、ステータスバーなどは含まれません。

つまり、実際にコンテンツが表示される領域の高さを取得できるのです。

○ビューポートの高さとの違い

ここで注意したいのが、Window.innerHeightとビューポートの高さの違いです。

ビューポートとは、ウェブページの表示領域のことを指しますが、これにはスクロールバーが含まれません。

一方、Window.innerHeightはスクロールバーを含んだ高さを返します。

レスポンシブデザインを考える上では、この差異を理解しておくことが重要ですね。

○サンプルコード1：現在の高さを表示

では、実際にWindow.innerHeightを使ってみましょう。

次のサンプルコードは、現在のウィンドウの高さを取得し、アラートで表示するシンプルな例です。

// 現在のウィンドウの高さを取得
var windowHeight = window.innerHeight;

// アラートで表示
alert("現在のウィンドウの高さは " + windowHeight + "px です。");

このコードを実行すると、次のようなアラートが表示されます。

現在のウィンドウの高さは 768px です。

ここで表示される数値は、実際のウィンドウの高さに応じて変化します。

ブラウザのサイズを変更して、再度実行してみると違いが分かるはずです。

●ウィンドウ幅の取得

ウィンドウの高さを取得できるWindow.innerHeightに対して、ウィンドウの幅を取得するにはWindow.innerWidthを使います。

これを組み合わせることで、より動的なレイアウト制御が可能になります。

○Window.innerWidthを使う

Window.innerWidthは、ウィンドウの内部の幅をピクセル単位で返してくれます。

垂直スクロールバーの幅も含まれますが、サイドバーやその他のインターフェース要素は除外されます。

つまり、コンテンツ領域の幅を知るのに最適なプロパティと言えるでしょう。

○サンプルコード2：幅と高さを同時に取得

Window.innerWidthとWindow.innerHeightを組み合わせて使うことで、現在のウィンドウサイズを簡単に把握できます。

次のサンプルコードでは、両方の値を取得し、コンソールに出力しています。

// ウィンドウの幅と高さを取得
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

// コンソールに出力
console.log("現在のウィンドウサイズ：");
console.log("幅 = " + windowWidth + "px");
console.log("高さ = " + windowHeight + "px");

このコードを実行すると、次のような結果がコンソールに表示されます。

現在のウィンドウサイズ：
幅 = 1024px
高さ = 768px

実際の出力は、現在のウィンドウサイズによって異なります。

ブラウザのウィンドウサイズを変更して再度実行すると、値が動的に変化するのが確認できるはずです。

これは、レスポンシブデザインを実装する上で非常に重要な情報となります。

○サンプルコード3：条件分岐で動的に変更

取得したウィンドウサイズを条件分岐に使うことで、画面の大きさに応じて動的にスタイルや表示を変更することができます。

次のサンプルコードは、ウィンドウ幅に応じて背景色を変更する例です。

// ウィンドウ幅を取得
var windowWidth = window.innerWidth;

// 条件分岐で背景色を変更
if (windowWidth < 600) {
  document.body.style.backgroundColor = "lightblue";
} else if (windowWidth < 960) {
  document.body.style.backgroundColor = "lightgreen";
} else {
  document.body.style.backgroundColor = "lightyellow";
}

このコードでは、ウィンドウ幅が600ピクセル未満の場合は青、600以上960未満の場合は緑、960以上の場合は黄色の背景色が適用されます。

ウィンドウサイズを変更すると、背景色がリアルタイムで切り替わるのが確認できるでしょう。

●ウィンドウのリサイズイベント

ウィンドウサイズを取得できるようになったところで、今度はウィンドウのリサイズイベントについて見ていきましょう。

ユーザーがブラウザのウィンドウサイズを変更したとき、それを検知して適切な処理を実行することが、レスポンシブデザインを実現する上で欠かせません。

○リサイズを検知して処理を実行

JavaScriptでは、window.onresizeイベントを使ってウィンドウのリサイズを検知することができます。

このイベントは、ウィンドウのサイズが変更されるたびに発生します。

イベントハンドラを登録しておくことで、リサイズ時に任意の処理を実行できるようになります。

○サンプルコード4：リサイズ時に要素のサイズを変更

それでは、ウィンドウのリサイズに合わせて要素のサイズを動的に変更する例を見てみましょう。

次のサンプルコードでは、リサイズイベントを利用して、div要素の幅と高さをウィンドウサイズの半分に設定しています。

// div要素の参照を取得
var myDiv = document.getElementById("myDiv");

// リサイズイベントのハンドラを登録
window.addEventListener("resize", function() {
  // ウィンドウの幅と高さを取得
  var width = window.innerWidth;
  var height = window.innerHeight;

  // div要素のサイズを設定
  myDiv.style.width = (width / 2) + "px";
  myDiv.style.height = (height / 2) + "px";
});

このコードでは、まずgetElementById()を使ってdiv要素の参照を取得しています。

その上で、window.addEventListenerを使ってresizeイベントのハンドラを登録しています。

ハンドラ内では、window.innerWidthとwindow.innerHeightを使ってウィンドウの幅と高さを取得し、それぞれ2で割った値をdiv要素のwidthとheightに設定しています。

実際にこのコードを実行してウィンドウサイズを変更すると、div要素のサイズがリアルタイムで変化するのが確認できるはずです。

ウィンドウを大きくすれば、div要素も大きくなり、小さくすれば小さくなります。

このように、リサイズイベントを活用することで、ウィンドウサイズに応じた柔軟なレイアウト制御が可能になります。

○サンプルコード5：リサイズ終了後に処理を実行

ただし、リサイズイベントはウィンドウサイズが変更されるたびに発生するため、リサイズ中は頻繁にイベントが発生してしまいます。

そのため、リサイズの終了を検知して、終了後に一度だけ処理を実行したい場合があります。

そんなときは、次のようなコードを使うことができます。

// リサイズ終了を検知するタイマー
var resizeTimer;

// リサイズイベントのハンドラを登録
window.addEventListener("resize", function() {
  // タイマーをクリア
  clearTimeout(resizeTimer);

  // 300ミリ秒後にリサイズ終了とみなす
  resizeTimer = setTimeout(function() {
    console.log("リサイズが終了しました。");
    console.log("現在のウィンドウサイズ：");
    console.log("幅 = " + window.innerWidth + "px");
    console.log("高さ = " + window.innerHeight + "px");
  }, 300);
});

このコードでは、リサイズイベントのハンドラ内でclearTimeout()を使ってタイマーをクリアした上で、setTimeout()を使って300ミリ秒後に処理を実行するようにしています。

これにより、リサイズ中はタイマーがクリアされ続け、リサイズが終了して300ミリ秒経過した時点で初めて処理が実行されます。

コンソールに出力される結果は次のようになります。

リサイズが終了しました。
現在のウィンドウサイズ：
幅 = 1024px
高さ = 768px

リサイズ終了後に重い処理を実行したり、サーバーとの通信を行ったりする場合に、このテクニックが役立つでしょう。

ウィンドウのリサイズイベントを検知し、適切なタイミングで処理を実行することで、パフォーマンスと使い勝手を両立することができます。

●レスポンシブデザインへの応用

ウィンドウサイズの取得とリサイズイベントの活用方法がわかったところで、それではいよいよレスポンシブデザインへの応用について見ていきましょう。

レスポンシブデザインは、あらゆるデバイスやウィンドウサイズに適応するウェブデザインの手法です。

JavaScriptを使えば、レスポンシブデザインの実装をより柔軟かつ動的に行うことができます。

○サンプルコード6：ブレイクポイントの判定

レスポンシブデザインでは、特定のウィンドウサイズを境にレイアウトを切り替えるブレイクポイントを設定します。

JavaScriptを使えば、ブレイクポイントの判定を動的に行うことができます。

次のサンプルコードでは、ウィンドウ幅に応じてボディ要素にクラスを付け替えています。

function checkBreakpoint() {
  // ウィンドウ幅を取得
  var width = window.innerWidth;

  // ボディ要素の参照を取得
  var body = document.body;

  // ブレイクポイントの判定とクラスの付け替え
  if (width < 600) {
    body.classList.remove("medium", "large");
    body.classList.add("small");
  } else if (width < 960) {
    body.classList.remove("small", "large");
    body.classList.add("medium");
  } else {
    body.classList.remove("small", "medium");
    body.classList.add("large");
  }
}

// 初回チェック
checkBreakpoint();

// リサイズイベントのハンドラを登録
window.addEventListener("resize", checkBreakpoint);

このコードでは、ウィンドウ幅が600ピクセル未満の場合は”small”クラス、600以上960未満の場合は”medium”クラス、960以上の場合は”large”クラスをボディ要素に付与しています。

このクラスに対応したCSSを用意しておけば、ウィンドウサイズに応じて自動的にレイアウトが切り替わるようになります。

初回のチェックとリサイズイベントの監視を行うことで、ページ読み込み時とウィンドウサイズ変更時の両方でブレイクポイントの判定が行われます。

これにより、どんなウィンドウサイズでも適切なレイアウトが適用されるようになるのです。

○サンプルコード7：要素の表示/非表示の切り替え

レスポンシブデザインでは、ウィンドウサイズに応じて要素の表示/非表示を切り替えることも重要です。

JavaScriptを使えば、要素の表示状態を動的に制御できます。

次のサンプルコードは、特定の幅以下になったら要素を非表示にする例です。

function checkVisibility() {
  // ウィンドウ幅を取得
  var width = window.innerWidth;

  // 非表示にする要素の参照を取得
  var myElement = document.getElementById("myElement");

  // 表示/非表示の切り替え
  if (width < 600) {
    myElement.style.display = "none";
  } else {
    myElement.style.display = "block";
  }
}

// 初回チェック
checkVisibility();

// リサイズイベントのハンドラを登録
window.addEventListener("resize", checkVisibility);

このコードでは、ウィンドウ幅が600ピクセル未満になったら、id属性が”myElement”の要素を非表示にしています。

非表示にするには要素のdisplayプロパティを”none”に設定し、再度表示するには”block”に設定しています。

初回のチェックとリサイズイベントの監視によって、ページ読み込み時とウィンドウサイズ変更時の両方で表示状態の切り替えが行われます。

これを応用すれば、狭い画面では不要な要素を非表示にして、コンテンツを見やすくすることができるでしょう。

○サンプルコード8：フォントサイズの動的変更

レスポンシブデザインでは、ウィンドウサイズに合わせてフォントサイズを調整することも大切です。

JavaScriptを使えば、フォントサイズを動的に変更できます。

次のサンプルコードは、ウィンドウ幅に応じてフォントサイズを変更する例です。

function adjustFontSize() {
  // ウィンドウ幅を取得
  var width = window.innerWidth;

  // ボディ要素の参照を取得
  var body = document.body;

  // フォントサイズの設定
  if (width < 600) {
    body.style.fontSize = "14px";
  } else if (width < 960) {
    body.style.fontSize = "16px";
  } else {
    body.style.fontSize = "18px";
  }
}

// 初回設定
adjustFontSize();

// リサイズイベントのハンドラを登録
window.addEventListener("resize", adjustFontSize);

このコードでは、ウィンドウ幅に応じてボディ要素のfontSizeプロパティを変更しています。

ウィンドウ幅が600ピクセル未満の場合は14ピクセル、600以上960未満の場合は16ピクセル、960以上の場合は18ピクセルのフォントサイズが設定されます。

初回の設定とリサイズイベントの監視によって、ページ読み込み時とウィンドウサイズ変更時の両方でフォントサイズの調整が行われます。

これにより、どんなウィンドウサイズでも読みやすいテキストを表示することができるのです。

●高度なテクニック

ここまでの基本的な使い方を理解したら、さらに高度なテクニックにも挑戦してみましょう。

JavaScriptを使えば、iframeのサイズ調整や、新しいウィンドウを指定サイズで開くことも可能です。

また、ライブラリやフレームワークを活用すれば、より効率的にウィンドウサイズの操作を行うことができます。

○サンプルコード9：iframeのサイズ取得と調整

ウェブページにiframeを埋め込む場合、そのサイズを動的に調整したいことがあります。

JavaScriptを使えば、iframeの内容に合わせてサイズを自動調整することができます。

次のサンプルコードは、iframeの高さを内容に合わせて調整する例です。

function adjustIframeHeight(iframe) {
  // iframeの内容の高さを取得
  var contentHeight = iframe.contentWindow.document.body.scrollHeight;

  // iframeの高さを設定
  iframe.style.height = contentHeight + "px";
}

// iframeの参照を取得
var myIframe = document.getElementById("myIframe");

// iframeの読み込み完了時にサイズを調整
myIframe.addEventListener("load", function() {
  adjustIframeHeight(myIframe);
});

このコードでは、iframeの内容の高さを取得するためにcontentWindow.document.body.scrollHeightを使用しています。

これは、iframeの内部ドキュメントのボディ要素のスクロール高さを返します。

取得した高さをiframeのheightプロパティに設定することで、サイズが調整されます。

iframeの読み込み完了時にaddEventListenerを使ってloadイベントを監視し、サイズの調整を行っています。

これにより、iframeの内容が変更された場合でも、自動的にサイズが適切に調整されるようになります。

○サンプルコード10：ウィンドウを指定サイズで開く/閉じる

JavaScriptを使えば、新しいウィンドウを指定したサイズで開いたり、開いたウィンドウを閉じたりすることもできます。

次のサンプルコードは、ボタンクリックでウィンドウを開閉する例です。

// 新しいウィンドウを開く関数
function openWindow() {
  var width = 600;
  var height = 400;
  var left = (screen.width - width) / 2;
  var top = (screen.height - height) / 2;

  var options = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top;
  var newWindow = window.open("", "newWindow", options);
  newWindow.document.write("<h1>新しいウィンドウ</h1>");
}

// ウィンドウを閉じる関数
function closeWindow() {
  window.close();
}

openWindow関数では、window.openメソッドを使って新しいウィンドウを開いています。

第1引数はURLですが、ここでは空文字列を指定しています。

第2引数はウィンドウ名、第3引数はオプションです。オプションで、ウィンドウのサイズと位置を指定しています。

新しいウィンドウが開かれたら、document.writeを使ってウィンドウ内にコンテンツを書き込んでいます。

ここでは簡単なHTMLを記述していますが、必要に応じてより複雑なコンテンツを表示することもできます。

closeWindow関数では、window.closeメソッドを使って現在のウィンドウを閉じています。

これをボタンのクリックイベントなどに紐付けておけば、ウィンドウを閉じるためのUIを提供できます。