JavaScriptのwindow.closeメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのwindow.closeメソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

 

window.closeメソッドとは

window.closeメソッドとは、ブラウザのタブを閉じる処理を行う関数です。現在のタブを閉じる時や、新しく開いたタブを閉じる時に使用します。

なぜタブなのにwindow（ウィンドウ）なのか？という疑問が湧いてくるかもしれません。これは、ブラウザのタブはどれもWindowオブジェクトを持っており、このWindowオブジェクトが実質的にタブを表すからです。

なお、windowとは現在のタブ、今まさに開いているタブを指します。

window.closeメソッドの使い方

window.closeメソッドの使い方は、とても簡単でwindow.close()のように記述します。今まさに開いているタブがwindowなので、window.close()と書くと、今まさに開いているタブを閉じることができます。

closeはWindowオブジェクトのメソッドですので、後ろのカッコ()を忘れないようにしましょう。

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

それでは実際にタブを閉じるコードを書いてみましょう。TechAcademyのサイトが新しいタブで開き、3秒後にそのタブが閉じるコードを書いてみます。

let _window
_window = window.open('https://techacademy.jp/')
setTimeout(() => _window.close(), 3000)

新しいタブを閉じるにはそのタブのWindowオブジェクトが必要となりますが、そのWindowオブジェクトはどこにあるのでしょうか？

2行目でTechAcademyのサイトを新しいタブで開いています。このとき、1行目の変数_windowに対して、こちらもWindowオブジェクトのメソッドであるopenの戻り値を代入しています。この戻り値こそが、新しいタブのWindowオブジェクトになります。

これにより、_windowは新しいタブのWindowオブジェクトとなり、実質的に新しいタブを指します。したがって、3行目の_window.close()は新しいタブを閉じる処理になります。

さらに、TechAcademyのサイトが新しいタブで開くと、そのタブへ移動しますが、3秒経過する前に別のタブへ移動しても、やはりTechAcademyのサイトが開いたタブは閉じます。

つまり、今まさに開いているタブでなくとも、閉じることができることを意味します。

筆者プロフィール

メンター久保田さん Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。 最初に選ぶポケモンは炎タイプ。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。