JavaScript　Windowオブジェクトの基本と使い方を徹底解説

JavaScriptでWebページを操作するために必要な、Windowオブジェクトについて詳しく解説します。

Windowオブジェクトって聞いたことあるけど、具体的にどんなものですか？

Windowオブジェクトは、JavaScriptでWebページを操作するための重要なオブジェクトの1つです。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

Windowオブジェクトとは

　Windowオブジェクトとは、Webブラウザ上で表示されているウィンドウやタブを表すJavaScriptのオブジェクトのことです。

Webページ上でJavaScriptを使う際には、このWindowオブジェクトを利用して、ウィンドウの位置やサイズ、表示されているWebページのURLなどの情報を取得したり、ウィンドウの表示内容を変更したりすることができます。

　例えば、現在表示しているWebページのURLを取得するには、以下のようにWindowオブジェクトのlocationプロパティを参照します。

console.log(window.location.href);

　また、新しいウィンドウを開く場合にもWindowオブジェクトを使います。以下のようにopen()メソッドを呼び出すことで、新しいウィンドウを開くことができます。

window.open('http://example.com/');

　WindowオブジェクトはWebページの操作に欠かせない重要なオブジェクトであり、JavaScriptを使ったWebページの開発においては必ず理解する必要があります。

Windowオブジェクトのプロパティとメソッド

　Windowオブジェクトには、様々なプロパティやメソッドが用意されています。ここでは、代表的なものをいくつか紹介します。

プロパティ

window.innerHeight / window.innerWidth

　ウィンドウの内側の高さや幅を取得することができます。例えば、以下のようにして現在のウィンドウの高さを取得することができます。

console.log(window.innerHeight);

window.location

　現在表示しているWebページのURLに関する情報を提供しています。location.hrefを使うことで、現在表示しているページのURLを取得することができます。

console.log(window.location.href);

window.document

　現在表示しているWebページのドキュメントオブジェクトを返します。このオブジェクトを利用することで、Webページの内容にアクセスしたり、変更することができます。

console.log(window.document.title);

メソッド

window.alert()

アラートダイアログを表示することができます。以下のように使います。

window.alert('Hello, World!');

window.open()

新しいウィンドウを開くことができます。以下のように使います。

window.open('http://example.com/');

window.close()

現在のウィンドウを閉じることができます。以下のように使います。

window.close();

　Windowオブジェクトのプロパティやメソッドはさまざまな機能を持っていますが、初心者の段階では代表的なものを把握しておくことが大切です。

Windowオブジェクトを使ったWebページの操作方法

Windowオブジェクトを使ったWebページの操作方法について、以下に具体的な解説をしていきます。

ページ遷移

Windowオブジェクトのlocationプロパティを使って、Webページの遷移を行うことができます。

// Yahoo! JAPAN に遷移する
window.location.href = 'https://www.yahoo.co.jp/';

また、location.assign()メソッドを使っても同じようにページ遷移を行うことができます。

// Google に遷移する
window.location.assign('https://www.google.com/');

ページのリロード

Webページをリロードする場合は、Windowオブジェクトのlocation.reload()メソッドを使います。

// ページをリロードする
window.location.reload();

　ただし、このメソッドを使った場合、キャッシュを利用しているために最新の情報が反映されないことがあります。その場合は、強制的にキャッシュを無視して最新の情報を取得するには、以下のようにreload()メソッドに引数を渡します。

// キャッシュを無視してページをリロードする
window.location.reload(true);

新しいウィンドウを開く

Windowオブジェクトのopen()メソッドを使って、新しいウィンドウを開くことができます。

// 新しいウィンドウを開く
window.open('https://www.yahoo.co.jp/');

このメソッドは、引数としてウィンドウのURLやサイズ、位置、ステータスバーの表示・非表示などを指定することができます。

ウィンドウを閉じる

Windowオブジェクトのclose()メソッドを使って、現在のウィンドウを閉じることができます。

// ウィンドウを閉じる
window.close();

　ただし、このメソッドは、スクリプトから開かれたウィンドウでしか動作しません。また、ユーザーの操作によって開かれたウィンドウを閉じることはできません。

　以上が、Windowオブジェクトを使ったWebページの操作方法の一例です。Windowオブジェクトには他にも多くのプロパティやメソッドが用意されていますので、必要に応じて調べて使い方を覚えていきましょう。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

Webページを操作するために必要な、Windowオブジェクトについて解説しました。

　Windowオブジェクトは、JavaScriptでWebページを操作するために非常に重要なオブジェクトです。Webページの情報や状態を取得・変更するために、このオブジェクトをうまく活用していくことが求められます。これらのプロパティやメソッドを使いこなして、より使いやすく魅力的なWebページを作成していきましょう。