VSCodeでネットワーク上のファイル編集完全ガイド｜共有フォルダやリモートサーバーを快適に操作する方法

「社内の共有サーバーのファイルを直接編集したい…」「リモートサーバーのコードをいちいちダウンロードするのが面倒…」「NASに保存したプロジェクトをVSCodeで開きたい…」

開発環境が分散している現代、ネットワーク上のファイルを編集する機会は増える一方。実はVSCodeには、ネットワーク上のファイルをまるでローカルファイルのように扱える様々な方法があるんです！

この記事では、Windows共有フォルダからSSH接続、FTP/SFTP、さらにはクラウドストレージまで、あらゆるネットワークファイルの編集方法を完全解説します。

ネットワークファイルにアクセスする5つの方法
1. 方法の一覧と特徴
方法1：Windows共有フォルダ（SMB/CIFS）
方法2：Remote-SSH拡張機能（最も強力！）
方法3：FTP/SFTP拡張機能
方法4：クラウドストレージ連携
1. OneDrive/Dropbox/Google Drive
2. GitHub Codespaces連携
パフォーマンス最適化
セキュリティ対策
トラブルシューティング
ワークフロー別おすすめ構成
便利な拡張機能とツール
まとめ：最適な方法を選んで快適なリモート開発を！

ネットワークファイルにアクセスする5つの方法

方法の一覧と特徴

ネットワークドライブ（Windows共有）
- 最もシンプル
- Windows環境で便利
UNCパス直接アクセス
- マウント不要
- 一時的なアクセスに最適
Remote-SSH拡張機能
- 最も高機能
- Linux/Unixサーバーに最適
FTP/SFTP拡張機能
- レガシーシステム対応
- Webサーバー編集に便利
Remote Containers/WSL
- 開発環境ごと共有
- チーム開発に最適

それぞれ詳しく見ていきましょう！

方法1：Windows共有フォルダ（SMB/CIFS）

ネットワークドライブとしてマウント

Windows でのマウント手順：

エクスプローラーを開く
「PC」を右クリック → 「ネットワークドライブの割り当て」
ドライブ文字を選択（例：Z:）
フォルダーパスを入力 \\server-name\shared-folder
「サインイン時に再接続」にチェック
資格情報を入力

マウント後のVSCodeでの開き方：

# コマンドラインから
code Z:\project

# またはVSCode内で
File → Open Folder → Z:ドライブを選択

UNCパスで直接開く（マウント不要）

VSCodeで直接UNCパスを指定：

Ctrl+K Ctrl+O（フォルダーを開く）
パスに直接入力： \\192.168.1.100\share\projectまたは\\server-name\share\project

コマンドラインから：

code "\\server-name\share\project"

Mac/Linuxでの共有フォルダアクセス

Macでのマウント：

# Finderから
Cmd+K → smb://server-name/share

# ターミナルから
mount_smbfs //user@server/share /Volumes/share

Linuxでのマウント：

# CIFSでマウント
sudo mkdir /mnt/share
sudo mount -t cifs //server/share /mnt/share -o username=user

# 永続化する場合は/etc/fstabに追加
//server/share /mnt/share cifs credentials=/home/user/.smbcredentials 0 0

方法2：Remote-SSH拡張機能（最も強力！）

インストールと初期設定

拡張機能のインストール：

拡張機能ビューを開く（Ctrl+Shift+X）
「Remote – SSH」を検索
Microsoft製のものをインストール

SSH接続の設定

config ファイルの作成：

# ~/.ssh/config
Host my-server
    HostName 192.168.1.100
    User username
    Port 22
    IdentityFile ~/.ssh/id_rsa

接続方法：

F1またはCtrl+Shift+P
「Remote-SSH: Connect to Host」
設定したホスト名を選択
パスワードまたは鍵認証

SSHキー認証の設定（パスワード不要）

キーペアの生成：

# Windowsの場合（PowerShell）
ssh-keygen -t rsa -b 4096

# 公開鍵をサーバーにコピー
type ~/.ssh/id_rsa.pub | ssh user@server "cat >> ~/.ssh/authorized_keys"

Mac/Linuxの場合：

# キー生成
ssh-keygen -t rsa -b 4096

# 公開鍵をコピー
ssh-copy-id user@server

Remote-SSHの便利な機能

ポートフォワーディング：

// .vscode/settings.json
{
  "remote.SSH.defaultForwardedPorts": [
    {
      "localPort": 3000,
      "remotePort": 3000,
      "name": "Dev Server"
    }
  ]
}

拡張機能の自動インストール：

{
  "remote.SSH.defaultExtensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

方法3：FTP/SFTP拡張機能

SFTP拡張機能の設定

おすすめ：「SFTP」by Natizyskunk

インストール後の設定：

Ctrl+Shift+P → 「SFTP: Config」
.vscode/sftp.jsonが作成される

設定例：

{
  "name": "My Server",
  "host": "example.com",
  "protocol": "sftp",
  "port": 22,
  "username": "user",
  "password": "password",
  "remotePath": "/var/www/html",
  "uploadOnSave": true,
  "downloadOnOpen": false,
  "ignore": [
    ".vscode",
    ".git",
    "node_modules"
  ]
}

自動アップロード設定

{
  "uploadOnSave": true,  // 保存時に自動アップロード
  "syncOption": {
    "delete": true,      // ローカルで削除したらリモートも削除
    "skipCreate": false, // 新規ファイルも同期
    "ignoreExisting": false
  }
}

FTP-Sync拡張機能（レガシーFTP対応）

通常のFTPサーバーの場合：

// .vscode/ftp-sync.json
{
  "remotePath": "/public_html",
  "host": "ftp.example.com",
  "username": "ftpuser",
  "password": "password",
  "port": 21,
  "protocol": "ftp",
  "uploadOnSave": false,
  "passive": true,
  "secure": false
}

方法4：クラウドストレージ連携

OneDrive/Dropbox/Google Drive

同期フォルダを使用：

クラウドストレージのデスクトップアプリをインストール
同期フォルダにプロジェクトを配置
VSCodeで通常通り開く

注意点：

// .vscode/settings.json
{
  // 大きなファイルの監視を無効化
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true
  }
}

GitHub Codespaces連携

ブラウザで編集：

GitHubリポジトリで「.」キーを押す
VSCode for Webが起動
クラウド上で直接編集

パフォーマンス最適化

ネットワークファイルが遅い時の対策

設定の最適化：

{
  // ファイル監視を制限
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/bower_components/**": true
  },
  
  // 検索対象を制限
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
  },
  
  // 自動保存を無効化
  "files.autoSave": "off",
  
  // Git機能を制限
  "git.enabled": false,
  "git.autorefresh": false
}

キャッシュの活用

{
  // IntelliSenseのキャッシュ
  "typescript.tsserver.maxTsServerMemory": 4096,
  
  // ファイルキャッシュ
  "files.maxMemoryForLargeFilesMB": 4096
}

大きなファイルの取り扱い

{
  // 大きなファイルの警告サイズ
  "editor.largeFileOptimizations": true,
  
  // バイナリファイルのサイズ制限
  "workbench.editorLargeFileSizeLimit": 50
}

セキュリティ対策

安全な接続方法

推奨される優先順位：

SSH（暗号化）
SFTP（暗号化）
HTTPS/SSL
VPN経由のSMB
~~平文FTP（非推奨）~~

認証情報の安全な管理

パスワードをコードに書かない：

// ❌ 悪い例
{
  "password": "mypassword123"
}

// ✅ 良い例（環境変数を使用）
{
  "password": "${env:SFTP_PASSWORD}"
}

SSHキーの管理：

# 適切な権限設定
chmod 700 ~/.ssh
chmod 600 ~/.ssh/id_rsa
chmod 644 ~/.ssh/id_rsa.pub

ファイアウォール設定

必要なポート：

SSH/SFTP: 22
FTP: 21（制御）, 20（データ）
SMB: 445, 139
WebDAV: 80/443

トラブルシューティング

Q1: ネットワークドライブが開けない

チェックリスト：

[ ] ネットワークに接続されているか
[ ] 資格情報は正しいか
[ ] ファイアウォールでブロックされていないか
[ ] SMBv1が必要な場合は有効化

Windows 10/11でSMBv1を有効化：

# PowerShell（管理者）
Enable-WindowsOptionalFeature -Online -FeatureName SMB1Protocol

Q2: 「権限がありません」エラー

解決方法：

# Linuxサーバーの場合
sudo chown -R username:groupname /path/to/project
sudo chmod -R 755 /path/to/project

Q3: 接続が頻繁に切れる

安定化設定：

// SSH設定
{
  "remote.SSH.connectTimeout": 60,
  "remote.SSH.serverAliveInterval": 30,
  "remote.SSH.serverAliveCountMax": 10
}

Q4: 日本語ファイル名が文字化け

エンコーディング設定：

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": true
}

ワークフロー別おすすめ構成

Webサイト制作（HTML/CSS/JS）

推奨：SFTP拡張機能

保存時自動アップロード
プレビュー用URLと連携
軽量で高速

システム開発（大規模プロジェクト）

推奨：Remote-SSH

開発環境をサーバー側に統一
ビルドやテストもリモートで実行
チーム全員が同じ環境

データ分析（Python/R）

推奨：Remote Containers

Dockerコンテナで環境構築
GPUサーバーも活用可能
Jupyter連携も簡単

便利な拡張機能とツール

Remote Development Extension Pack

含まれる拡張機能：

Remote – SSH
Remote – Containers
Remote – WSL

一括インストールで全環境対応！

SSH FS

特徴：

SSHをファイルシステムとしてマウント
エクスプローラーに統合
複数サーバー同時接続

Live Share