Vue（またはVanillaJS）で新ウィンドウを使用したい

新しいウィンドウで開くことについてのメモ。
Vue.jsはシングルページアプリケーション（SPA）の開発に適したフレームワークですが、時には従来通りの方法で新しいブラウザウィンドウやタブを開く必要もあります。
この記事はVueやVanilla JavaScriptで新しいウィンドウを開く方法と、その際の注意点のメモです。

どんなときに必要？　使えるシーン

• 印刷用ページ: 新しいウィンドウに専用のレイアウトを持つページを開いて、印刷を簡単に行うとき。
• 外部リンク: セキュリティ上の理由から、外部サイトへのリンクは新しいタブやウィンドウで開かないといけないとき。
• マルチタスク操作: ユーザーが複数のセクションを同時に操作したいとき。

実装方法

Vue.js メソッド内で window.open() を使用

<template>
  <button @click="openNewWindow">新しいウィンドウを開く</button>
</template>

<script>
export default {
  methods: {
    openNewWindow() {
      window.open('https://example.com', 'newwindow', 'width=800,height=600,toolbar=no,menubar=no');
    }
  }
}
</script>

Vanilla JSでの実装方法

こちらでもwindow.open()

<button id="openWindowButton">新しいウィンドウを開く</button>
<script>
document.getElementById('openWindowButton').addEventListener('click', function() {
  window.open('https://example.com', 'newwindow', 'width=800,height=600,toolbar=no,menubar=no');
});
</script>

新タブ表示をしたい場合は、どちらの実装方法でもwindow.open()の部分を以下のようにすればOK

window.open('https://example.com', '_blank');

Window: open() メソッドの詳細はこちらdeveloper.mozilla.org

注意点

target指定は慎重に決めた方が良いです。
特に新ウィンドウ表示での注意ですが、自動でポップアップを開いてしまうと場合によってはユーザーにとって不快感があったり、利便性が損なわれます。

通常のリンクであれば右クリックメニューから「新しいタブで開く」も「新しいウィンドウで開く」も選択できますが、上記のようにJSで別タブやウィンドウ指定になっているとユーザー側ではコントロールができません。

ブラウザの設定によってはポップアップ表示を阻止する場合もあります。

親画面を残して情報を表示したいとき

一般的な対処としてはモーダル表示が良いとは思いますが、フロントエンドフレームワークを使用しない場合はCSSもJSも自作する必要があります。
もしVueを使用しているのであればVuetify等を導入してある程度は対応できます。