window.openとは？初心者にもわかる使い方と注意点共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

window.openとは？

このページでは window.open について、初心者にもわかるように解説します。window.open は JavaScript の機能のひとつで、ユーザーが何かしらの操作をしたときに新しいウィンドウや新しいタブを開くために使われます。使い方を覚えると、外部サイトへのリンクを別窓で表示したり、説明用のポップアップを出したりと、サイトの導線を工夫することができます。

基本の使い方

window.open の基本の形は次の通りです。3つの情報を順番に渡して新しい窓を作ります。最初の情報は開く URL、次は開く窓の名前、三つ目は表示の設定です。最後の引数は省略できます。

実用的な書き方の例としては、外部サイトを新しいタブで開くときに以下のように書きます。ここではコードの部分をそのまま書きますが、実際にはボタンのクリックなど、ユーザーの操作とともに実行するのが基本です。window.open は新しいウィンドウやタブを開く機能を提供します。

引数の意味

URL は開く先のウェブページの住所です。空文字にすると現在のページを新しい窓で表示する場合があります。

windowName は開く窓の名前です。<span>特別な名前として _blank を指定すると新しい窓や新しいタブで開かれます。その他にも _self、_parent、_top などの指定が使えます。

windowFeatures は窓の表示設定を列挙します。幅や高さ、左端・上端の位置、ツールバーの有無などを設定します。例として width、height、left、top、resizable などを組み合わせます。

replace は履歴の置換を指定します。true を渡すと現在の履歴エントリを新しいURLで置き換え、戻るボタンの挙動が変わることがあります。通常は false か省略します。

実用的な例と注意点

ボタンをクリックしたときに外部サイトを新しい窓で開く、という基本的な使い方がよくあります。ポップアップブロックの影響を受けにくくするためには、必ずユーザーの操作をきっかけに実行することが大切です。何もしないでページが読み込まれたときに window.open を呼ぶと、多くのブラウザでブロックされることが多いです。

セキュリティ面の注意点としては、開いた窓から元のページを操作されるのを防ぐための工夫があります。noopener や noreferrer を指定して window.opener の参照を切るのが一般的です。これにより、外部サイトが元のページを通じて操作されにくくなります。具体的には features に noopener,noreferrer を入れて開くとよいとされています。

表で見る window.open のポイント

<th>URL

開く先のURLを指定します。空文字の場合は現在のページを開くことがあります。
windowName	開く窓の名前。_blank は新しい窓やタブ、他の名前は同じ窓を参照します。
windowFeatures	幅や高さ、位置、ツールバーの有無、スクロールの有無などをカンマ区切りで列挙します。例として width と height を設定します。
replace	true を指定すると履歴を置換します。通常は不要です。

まとめ

このように window.open は新しいウィンドウやタブを開くための基本的な機能です。使い方を覚えると、ユーザーの導線を工夫したり、外部リンクの表示方法を柔軟に変えたりできます。ただし、ポップアップブロックの対象になりやすい点と、セキュリティの観点を忘れずに覚えておくことが大切です。実際に使うときは、ユーザーの操作をきっかけにすること、そして必要に応じて noopener や noreferrer の指定を検討することをおすすめします。

window.openの同意語

新しいウィンドウを開く: 現在のブラウザウィンドウとは別に、新規のウィンドウを立ち上げて表示する操作のこと。window.open の直訳的表現として用いられる。
新しいタブを開く: 現在のブラウザに新規のタブを作成してページを表示する操作のこと。実行結果がタブになる場合の表現。
ウィンドウを開く: 新しいウィンドウを表示することを指す一般的な表現。状況によってはタブになることもある点に注意。
新規ウィンドウを開く: 新しく独立したウィンドウを作成して表示する意味。開く対象が“新規”である点を強調する言い方。
新規タブを開く: 新しいタブを作成して表示する操作のこと。ウィンドウ開くと意味が近いが、タブを想定する表現。
ポップアップウィンドウを開く: 小さな別ウィンドウ（ポップアップ）を開く操作を指す専門用語寄りの表現。
ポップアップを表示する: ポップアップとしてウィンドウを表示する、という意味で使われる表現。
ブラウザウィンドウを開く: ブラウザ内の新規ウィンドウを開くことを表す、やや正式な表現。
新規ポップアップを表示する: 新しく表示されるポップアップウィンドウを指す表現。

window.openの対義語・反対語

ウィンドウを閉じる: window.openで開いた新規ウィンドウやタブを閉じる操作。開くという行為の対になる、実質的な反対アクションです。
同じタブ／同じウィンドウで開く: 新規ウィンドウや新規タブを作らず、現在のタブまたはウィンドウ内で表示を行うこと。ターゲットを _self に近い挙動にする考え方です。
ポップアップをブロックする: ブラウザの設定や拡張機能で、新規ウィンドウの表示自体を抑制すること。openの発生を回避する反対の動きです。
新規ウィンドウの作成を禁止する設定: ポップアップの作成自体を禁止・制限する設定。openを実質的に使えなくする対策・考え方です。
既存ウィンドウを再利用する: 新しいウィンドウを開かず、現在のウィンドウを使って表示を切り替える方針。openの対極となる挙動の一つです。

window.openの共起語

ポップアップ: 新しい小さなウィンドウを開くこと。ユーザーの画面に追加の窓を表示する一般的な用途です。
新規ウィンドウ: window.open で開かれる、現れる新しいウィンドウ（タブになることもあります）を指します。
ポップアップブロック: 多くのブラウザが自動的に開くポップアップを制限する機能。ユーザー体験とセキュリティの観点で重要です。
ターゲット_blank: 新しいタブ/ウィンドウを開く指示として使われる特別な名前。window.open の第2引数や a タグの target="_blank" に対応します。
ウィンドウ名: window.open の第2引数として指定する名前。既存の名前付きウィンドウがあれば再利用されます。
機能パラメータ: window.open の第3引数として渡す、幅・高さ・位置・表示要素などを指定する文字列。
幅: 新規ウィンドウの横幅をピクセル単位で指定します。
高さ: 新規ウィンドウの縦の長さをピクセル単位で指定します。
左位置: 画面左端からの水平位置（left=）。
上部位置: 画面上端からの垂直位置（top=）。
リサイズ可: ユーザーがウィンドウのサイズを変更できるかどうかを設定します（yes/no）。
スクロールバー: ウィンドウ内にスクロールバーを表示するかどうかを指定します（yes/no）。
ツールバー: ツールバーの表示有無を指定します。
メニューバー: メニューバーの表示有無を指定します。
ステータスバー: ステータスバーの表示有無を指定します。
アドレスバー: URLを表示するアドレス欄の表示有無を指定します。
window.opener: 新規ウィンドウから元のウィンドウを参照できる JavaScript の参照。後述のセキュリティにも関係します。
noopener: 新規ウィンドウが opener（元のウィンドウ）を参照できないようにする設定。セキュリティ対策として使われます。
noreferrer: 新規ウィンドウに遷移元情報を渡さず、参照情報を隠す設定。
同一オリジン: 同じオリジンかどうかの制約。クロスオリジンだと制限が厳しくなります。
セキュリティ: ポップアップは悪用されることがあるため、適切な設定と配慮が必要です。
返り値: window.open が返す、新規ウィンドウの参照（Windowオブジェクト）です。
URL: 第一引数として渡す遷移先のURL。
onclick: ポップアップを開くきっかけとなるクリックイベント。イベントリスナーで使われます。
focus: 新しく開いたウィンドウを前面に表示する focus() メソッド。
window.close: 開いたウィンドウを閉じるためのメソッド。

window.openの関連用語

window.open: JavaScriptで新しいウィンドウまたはタブを開く組み込み関数。URL、ターゲット、機能列を指定して別ウィンドウを生成する。
ポップアップ: ブラウザで自動的に開く小さなウィンドウのこと。window.openで作成されることが多いが、ポップアップブロック機能で制限される場合がある。
ポップアップブロック: ブラウザが自動的に新しいウィンドウを表示する動作を抑制する機能。設定次第で許可されるケースもある。
新しいウィンドウ/タブ: window.openが作成する対象。実際はブラウザの設定次第で新規ウィンドウ or 新規タブになる。
ターゲットパラメータ: window.openの2番目の引数。新しいウィンドウの名前や表示先を決める。
_blank: 新しいウィンドウ/タブで開く特殊値。元のウィンドウと独立して表示される。
_self: 同じウィンドウ/タブで開く。現在のウィンドウを置き換える。
_parent: 親フレームのウィンドウで開く。
_top: 最も上位のウィンドウで開く。
名前付きウィンドウ: 2番目の引数に名前を与えると、同じ名前のウィンドウを再利用する。
機能列: 3番目の引数。width, height, left, topなどウィンドウの表示設定を列挙する。
width: 開くウィンドウの幅（ピクセル）。
height: 開くウィンドウの高さ（ピクセル）。
left: 画面左端からの横位置（ピクセル）。
top: 画面上部からの縦位置（ピクセル）。
resizable: ウィンドウのサイズ変更を許可するか。
scrollbars: スクロールバーの有無を指定する。
toolbar: ツールバーの表示/非表示を設定する。
menubar: メニューバーの表示/非表示を設定する。
status: ステータスバーの表示/非表示を設定する。
fullscreen: 全画面表示を許可する設定。現在は一部のブラウザで非推奨またはサポートが限定的。
replace: 4番目の引数。historyの現在エントリを置換するかどうか。
noopener: 新しく開いたウィンドウが opener（元のウィンドウ）へアクセスできないようにするセキュリティ対策。
noreferrer: 新ウィンドウにRefererヘッダーを送らないようにする設定。セキュリティ・プライバシー対策として使われる。
Windowオブジェクト: 新しく開いたウィンドウはWindowオブジェクトとして操作可能になる。拡張機能の基盤。
window.opener: 新しく開いたウィンドウから元のウィンドウを参照するプロパティ。セキュリティ上のリスクになり得る。
同一オリジンポリシー: 別オリジンのウィンドウ間でのスクリプトアクセスを制限するセキュリティルール。
安全な使い方のコツ: ユーザーの操作（クリック）からのみ開く、過度なポップアップを避ける、rel属性やnoopenerを活用する。
代替手段: リンクを新規タブで開く方法。aタグに target='_blank' を使い、rel='noopener noreferrer' を加える。