VSCodeで別ウィンドウを開く方法完全ガイド！複数画面で効率アップ

プログラミング・IT

「VSCodeで2つのファイルを別々のウィンドウで開きたい」
「同じプロジェクトを2つのモニターで表示したい」
「タブを別ウィンドウにドラッグできないの？」

VSCodeを使っていると、こんな風に思うことありますよね。

実は、VSCodeには複数の方法で別ウィンドウを開く機能があります。でも、初めての方には少しわかりにくいかもしれません。

この記事では、VSCodeで別ウィンドウを開く方法を、初心者の方にもわかりやすく、パターン別に解説します。

デュアルモニターや大画面での作業が、格段に快適になりますよ！

スポンサーリンク
  1. VSCodeで別ウィンドウを開く5つの方法
  2. 方法1：新規空白ウィンドウを開く
    1. ショートカットキーで開く
    2. メニューから開く
  3. 方法2：今開いているファイルを別ウィンドウで開く
    1. ショートカットキーで開く（2段階操作）
    2. コマンドパレットから開く
  4. 方法3：同じプロジェクト（ワークスペース）を別ウィンドウで開く
    1. コマンドパレットから開く
    2. よく使う場合はショートカットキーを設定しよう
  5. 方法4：タブをドラッグして別ウィンドウにする（最新機能）
    1. 使い方
    2. 代替方法：タブを右クリック
  6. 方法5：ファイルを常に新規ウィンドウで開く設定
    1. 設定方法
    2. settings.jsonで直接編集する方法
  7. 最近開いたファイルやワークスペースを別ウィンドウで開く
    1. 操作方法
  8. ターミナルを擬似的に別ウィンドウにする方法
    1. 方法
  9. よくある質問と解決方法
    1. Q1. 同じフォルダを2つのウィンドウで開けない
    2. Q2. タブをドラッグしても別ウィンドウにならない
    3. Q3. 別ウィンドウで開いたファイルの変更が反映されない
    4. Q4. ショートカットキー Ctrl + K → O が動かない
    5. Q5. ブラウザみたいにタブをドラッグしたい
    6. Q6. デュアルモニターで使うときのおすすめ設定は？
  10. デュアルモニターでの効率的な使い方
    1. パターン1：コード＋ドキュメント
    2. パターン2：フロントエンド開発
    3. パターン3：バックエンド開発
    4. パターン4：同じファイルの異なる箇所
  11. まとめ：別ウィンドウを使いこなそう！

VSCodeで別ウィンドウを開く5つの方法

まず、VSCodeで別ウィンドウを開く主な方法を一覧で見てみましょう。

  1. 新規空白ウィンドウを開く – まっさらな新しいウィンドウ
  2. 今開いているファイルを別ウィンドウで開く – 現在のファイルだけ別画面に
  3. 同じプロジェクトを別ウィンドウで開く – ワークスペース全体を複製
  4. タブをドラッグして別ウィンドウにする – 直感的な操作
  5. ファイルを常に新規ウィンドウで開く設定 – 毎回別ウィンドウで開く

それでは、それぞれの方法を詳しく見ていきましょう。

方法1：新規空白ウィンドウを開く

最もシンプルな方法です。空っぽの新しいウィンドウを開きます。

ショートカットキーで開く

Windows/Linux:

Ctrl + Shift + N

Mac:

Cmd + Shift + N

このショートカットキーを押すだけで、新しいVSCodeウィンドウが開きます。

メニューから開く

ショートカットキーが覚えられない方は、メニューからも開けます。

  1. 画面上部の「ファイル」をクリック
  2. 「新しいウィンドウ」を選択

これで、新しいウィンドウが開きます。

使いどころ：

  • 全く別のプロジェクトを開きたいとき
  • 一時的にメモを取りたいとき
  • 別の作業を並行して進めたいとき

方法2：今開いているファイルを別ウィンドウで開く

現在開いているファイルを、そのまま別ウィンドウで表示します。

同じファイルを2つのモニターに表示したいときに便利です。

ショートカットキーで開く（2段階操作）

Windows/Linux:

  1. Ctrl + K を押す
  2. キーを離す
  3. O（オー）を押す

Mac:

  1. Cmd + K を押す
  2. キーを離す
  3. O（オー）を押す

注意点：

  • Ctrl + K（または Cmd + K）を押したあと、一度キーを離してから O を押してください
  • 0（ゼロ）ではなく、O（オー）です

コマンドパレットから開く

ショートカットがうまく動かない場合は、コマンドパレットを使いましょう。

手順：

  1. Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開く
  2. 「new window」と入力
  3. 「File: Open Active File in New Window」を選択

これで、現在開いているファイルが新しいウィンドウで開きます。

使いどころ：

  • 1つのファイルの上部と下部を同時に見たいとき
  • 参考コードを見ながら別の場所を編集したいとき
  • デュアルモニターで作業するとき

方法3：同じプロジェクト（ワークスペース）を別ウィンドウで開く

プロジェクト全体を別ウィンドウで開く方法です。

これが一番便利で、よく使う機能です。

コマンドパレットから開く

手順：

  1. Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開く
  2. 「duplicate」と入力
  3. 「Workspaces: Duplicate As Workspace in New Window」を選択

すると、同じプロジェクトが新しいウィンドウで開きます。

重要なポイント：

  • 新しいウィンドウでも、同じフォルダ構造がすべて表示されます
  • 拡張機能や設定も共有されます
  • ただし、ファイルの変更はリアルタイムで同期されません（保存すれば同期されます）

よく使う場合はショートカットキーを設定しよう

この機能はデフォルトでショートカットキーが割り当てられていません。

頻繁に使う場合は、自分で設定しましょう。

設定方法：

  1. Ctrl + K → Ctrl + S（MacはCmd + K → Cmd + S）でキーボードショートカット設定を開く
  2. 検索ボックスに「duplicate workspace」と入力
  3. 「Workspaces: Duplicate As Workspace in New Window」を見つける
  4. 左側の「+」アイコンをクリック
  5. 好きなキーの組み合わせを入力（例：Ctrl + Shift + D）
  6. Enterで確定

これで、設定したショートカットキーで、いつでもワークスペースを複製できます。

使いどころ：

  • デュアルモニターで、1つの画面でコード、もう1つの画面でターミナルやプレビューを表示
  • 同じプロジェクトの異なるファイルを同時に編集
  • コードレビューやリファクタリング作業

方法4：タブをドラッグして別ウィンドウにする（最新機能）

VSCodeの最新版（バージョン1.84以降）では、タブを別ウィンドウにドラッグできる機能が追加されました。

使い方

手順：

  1. 別ウィンドウにしたいファイルのタブをクリックしたまま
  2. VSCodeウィンドウの外にドラッグ
  3. マウスを離す

これで、そのファイルが新しいウィンドウで開きます。

注意点：

  • この機能は比較的新しいので、古いバージョンのVSCodeでは使えません
  • VSCodeを最新版にアップデートしてください

代替方法：タブを右クリック

タブを右クリックして、メニューから操作することもできます。

手順：

  1. 別ウィンドウにしたいタブを右クリック
  2. 「エディターを新しいウィンドウに移動」または「Move Editor into New Window」を選択

これでも同じように別ウィンドウで開きます。

使いどころ：

  • ブラウザと同じ感覚で直感的に操作したいとき
  • マウス操作が得意な方
  • 複数のファイルを素早く別ウィンドウに分けたいとき

方法5：ファイルを常に新規ウィンドウで開く設定

デフォルトでは、ファイルを開くと既存のウィンドウに追加されます。

でも、「いつも新しいウィンドウで開きたい」という方は、設定を変更できます。

設定方法

手順1：設定画面を開く

  • Ctrl + ,（MacはCmd + ,）で設定を開く

または

  • メニューから「ファイル」→「ユーザー設定」→「設定」

手順2：検索して設定を変更

  1. 検索ボックスに「open files in new window」と入力
  2. 「Window: Open Files In New Window」を探す
  3. ドロップダウンから「on」を選択

設定値の意味：

  • off（デフォルト）：既存のウィンドウで開く
  • on：常に新しいウィンドウで開く
  • default：状況に応じて自動判断

settings.jsonで直接編集する方法

設定ファイルを直接編集することもできます。

手順：

  1. Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開く
  2. 「settings json」と入力
  3. 「Preferences: Open User Settings (JSON)」を選択
  4. 以下を追加
{
  "window.openFilesInNewWindow": "on"
}

保存すれば、設定が反映されます。

使いどころ：

  • 常に複数のウィンドウで作業する方
  • ファイルごとに独立した環境で開きたい方
  • デュアルモニター環境で作業する方

最近開いたファイルやワークスペースを別ウィンドウで開く

過去に開いたファイルやプロジェクトを、新しいウィンドウで開き直す方法です。

操作方法

手順：

  1. メニューから「ファイル」→「最近使用した項目を開く」を選択

または

  • Ctrl + R（MacはCmd + R）を押す
  1. 開きたいファイルやワークスペースを見つける
  2. Ctrl（MacはCmdまたはOption）を押しながらクリック

これで、選択した項目が新しいウィンドウで開きます。

注意：

  • Ctrlキーを押さずにクリックすると、現在のウィンドウが置き換わってしまいます
  • 必ずCtrlキー（またはCmdキー/Optionキー）を押しながらクリックしてください

使いどころ：

  • 以前作業していたプロジェクトを、今の作業と並行して開きたいとき
  • 複数のプロジェクトを同時に参照したいとき

ターミナルを擬似的に別ウィンドウにする方法

VSCodeのターミナルは、標準では完全に別ウィンドウにできません。

でも、工夫すれば、ターミナル専用のウィンドウのように使えます。

方法

手順：

  1. Ctrl + Shift + N（MacはCmd + Shift + N）で新しいウィンドウを開く
  2. 新しいウィンドウで、同じフォルダを開く
  3. ターミナルを開く（Ctrl + `）
  4. ターミナルの右上にある「↑」アイコンをクリック

これで、ターミナルがウィンドウいっぱいに広がります。

エディタ部分を隠して、ターミナル専用のウィンドウのように使えます。

使いどころ：

  • ログやコンソール出力を常に表示しておきたいとき
  • ターミナルでコマンドを実行しながら、別画面でコードを編集したいとき

よくある質問と解決方法

Q1. 同じフォルダを2つのウィンドウで開けない

A: 「Duplicate Workspace in New Window」を使ってください。

普通に「新しいウィンドウ」を開いてから同じフォルダを開こうとすると、既存のウィンドウにフォーカスが移動するだけで、2つ目のウィンドウは開きません。

これはVSCodeの仕様です。

解決方法：

  1. 既にフォルダを開いている状態で
  2. Ctrl + Shift + P（MacはCmd + Shift + P）
  3. 「Duplicate As Workspace in New Window」を実行

これで、同じフォルダを2つのウィンドウで開けます。

Q2. タブをドラッグしても別ウィンドウにならない

A: VSCodeのバージョンが古い可能性があります。

タブをドラッグして別ウィンドウにする機能は、バージョン1.84（2023年10月）以降で追加されました。

確認方法：

  1. メニューから「ヘルプ」→「バージョン情報」を選択
  2. バージョン番号を確認

バージョンが1.84未満の場合は、VSCodeをアップデートしてください。

更新方法：

  1. メニューから「ヘルプ」→「更新の確認」

Q3. 別ウィンドウで開いたファイルの変更が反映されない

A: ファイルを保存してください。

VSCodeでは、同じファイルを複数のウィンドウで開いた場合、ファイルを保存するまで変更は同期されません。

対策：
自動保存を有効にすると、このストレスがなくなります。

設定方法：

  1. メニューから「ファイル」→「自動保存」をクリック
  2. チェックが入れば有効になります

または、settings.jsonに以下を追加します。

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

これで、1秒（1000ミリ秒）ごとに自動保存されます。

Q4. ショートカットキー Ctrl + K → O が動かない

A: キーを押す順序を確認してください。

正しい手順：

  1. Ctrl + K を同時に押す
  2. 両方のキーを離す
  3. O（オー）を押す

多くの方が、Ctrlを押したままOを押してしまい、うまく動きません。

Ctrl + K のあと、必ず一度キーを離してから O を押してください。

Q5. ブラウザみたいにタブをドラッグしたい

A: 最新版では対応していますが、古いバージョンでは使えません。

VSCodeをバージョン1.84以降にアップデートすれば、ブラウザと同じようにタブをドラッグして別ウィンドウにできます。

更新できない環境の場合は、「方法2」または「方法3」を使ってください。

Q6. デュアルモニターで使うときのおすすめ設定は？

A: 以下の設定がおすすめです。

推奨設定：

  1. 自動保存を有効にする（両方のウィンドウで変更がすぐ反映される）
  2. ショートカットキーを覚える（素早く操作できる）
  3. ワークスペースを複製して使う（プロジェクト全体を2画面に）

おすすめの使い方：

  • メイン画面：コード編集
  • サブ画面：ターミナル、プレビュー、参考コード

デュアルモニターでの効率的な使い方

最後に、デュアルモニター環境でVSCodeを使うときのおすすめワークフローを紹介します。

パターン1：コード＋ドキュメント

メイン画面（左）：

  • 編集中のコード

サブ画面（右）：

  • APIドキュメント
  • 参考コード
  • 設計書

別ウィンドウで参考資料を開いておけば、いちいちタブを切り替える必要がありません。

パターン2：フロントエンド開発

メイン画面（左）：

  • HTML、CSS、JavaScriptのコード

サブ画面（右）：

  • ブラウザでライブプレビュー
  • またはVSCodeのプレビュー画面

Live Serverなどの拡張機能と組み合わせると、リアルタイムでプレビューを確認しながら開発できます。

パターン3：バックエンド開発

メイン画面（左）：

  • コード編集

サブ画面（右）：

  • ターミナル（ログやテスト結果を常に表示）
  • デバッグコンソール

ログを常に確認しながら開発できるので、効率が上がります。

パターン4：同じファイルの異なる箇所

メイン画面（左）：

  • ファイルの上部（関数定義）

サブ画面（右）：

  • ファイルの下部（関数呼び出し）

長いファイルを編集するとき、2つのウィンドウで別々の箇所を表示できます。

まとめ：別ウィンドウを使いこなそう！

VSCodeで別ウィンドウを開く方法をまとめます。

5つの主な方法：

  1. 新規空白ウィンドウ：Ctrl + Shift + N
  2. 現在のファイルを別ウィンドウに：Ctrl + K → O
  3. ワークスペースを複製：Duplicate Workspace in New Window
  4. タブをドラッグ：最新版で対応
  5. 常に新規ウィンドウで開く設定：設定を変更

よく使うショートカット：

  • 新規ウィンドウ：Ctrl + Shift + N
  • アクティブなファイルを新規ウィンドウに：Ctrl + K → O
  • コマンドパレット：Ctrl + Shift + P
  • 最近使用した項目：Ctrl + R（Ctrlを押しながら選択で新規ウィンドウ）

おすすめの使い方：

  • デュアルモニターでは「ワークスペースの複製」が便利
  • 自動保存を有効にすると、複数ウィンドウでの作業が快適
  • よく使う機能は、ショートカットキーを設定しておく

別ウィンドウをうまく使えば、作業効率が格段にアップします。

特にデュアルモニター環境では必須のテクニックです。

ぜひ、この記事を参考に、快適なVSCode環境を作ってみてください！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました