VSCodeでネットワークドライブ完全攻略！NASや共有フォルダでの開発を快適にする方法

プログラミング・IT

「会社のファイルサーバーにあるコードを直接編集したい」 「NASに保存したプロジェクトをVSCodeで開きたいけど、遅い…」 「チームで共有フォルダを使って開発してるけど、トラブルが多い」 「在宅勤務で会社のネットワークドライブにアクセスしたい」

こんな悩み、ありませんか？

ネットワークドライブでの開発は、チーム開発や在宅勤務では避けて通れません。でも、設定を間違えると動作が重くなったり、ファイルが保存できなかったりと、トラブルも多いんです。

この記事では、VSCodeでネットワークドライブを快適に使う方法から、よくあるトラブルの解決法、パフォーマンス改善のテクニックまで、すべて分かりやすく解説していきます！

スポンサーリンク

ネットワークドライブの基本：まずは仕組みを理解しよう

ネットワークドライブとは？

ネットワークドライブは、ネットワーク経由でアクセスできる共有ストレージです。

種類：

  • ファイルサーバー：会社の共有サーバー
  • NAS（Network Attached Storage）：ネットワーク接続型ストレージ
  • 共有フォルダ：他のPCの共有設定されたフォルダ
  • クラウドストレージ：OneDrive、Google Driveなどの同期フォルダ

ローカルドライブとの違い

処理の流れ：

ローカルドライブ：
VSCode → ファイル読み書き → 即座に完了

ネットワークドライブ：
VSCode → ネットワーク → サーバー → ファイル読み書き → ネットワーク → VSCode
（通信が入るため遅延が発生）

主な違い：

  • 速度：ネットワーク速度に依存（ローカルより遅い）
  • 信頼性：ネットワーク切断のリスク
  • 権限：アクセス権限の管理が複雑
  • 同時編集：ファイルロックの問題

Windows編：ネットワークドライブの接続と設定

ネットワークドライブの割り当て

手順：

  1. エクスプローラーを開く
  2. 「PC」を右クリック → 「ネットワークドライブの割り当て」
  3. ドライブ文字を選択（例：Z:）
  4. フォルダーパスを入力 \\サーバー名\共有フォルダ名例：\\fileserver\projects　　\\192.168.1.100\share
  5. 「サインイン時に再接続」にチェック
  6. 資格情報を入力（必要な場合）

VSCodeでの開き方

方法1：エクスプローラーから

1. Ctrl + K → Ctrl + O（フォルダーを開く）
2. ネットワークドライブ（Z:など）を選択
3. プロジェクトフォルダを選択

方法2：パスを直接指定

1. Ctrl + K → Ctrl + O
2. パスを入力：\\server\share\project
3. Enter

UNCパスとドライブレターの使い分け

ドライブレター（Z:\project）：

  • メリット：短くて分かりやすい
  • デメリット：環境依存（他のPCでは使えない）

UNCパス（\server\share\project）：

  • メリット：どのPCでも同じパス
  • デメリット：長くて入力が面倒

推奨：

// .vscode/settings.json で両方に対応
{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true
  },
  "search.useIgnoreFiles": true
}

Mac編：SMB/AFP接続とVSCode設定

ネットワークドライブへの接続

Finderから接続：

  1. Finder → 移動 → サーバへ接続（Cmd + K）
  2. サーバーアドレスを入力 smb://サーバー名/共有名smb://192.168.1.100/shareafp://server.local/share
  3. 認証情報を入力
  4. マウントポイントが作成される /Volumes/共有名

自動マウント設定

ログイン時に自動接続：

# スクリプトを作成
cat > ~/mount_network.sh << 'EOF'
#!/bin/bash
mkdir -p /Volumes/MyShare
mount_smbfs //username:password@server/share /Volumes/MyShare
EOF

# 実行権限を付与
chmod +x ~/mount_network.sh

# ログイン項目に追加
# システム環境設定 → ユーザとグループ → ログイン項目

VSCodeの設定最適化

// settings.json
{
  // ファイル監視を制限
  "files.watcherExclude": {
    "**/Volumes/**": false,
    "**/node_modules/**": true
  },
  
  // 検索から除外
  "search.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/dist": true
  },
  
  // 自動保存を調整
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 3000
}

Linux編：CIFS/NFS/SSHFSの設定

CIFSマウント（Windowsファイル共有）

# 必要なパッケージをインストール
sudo apt install cifs-utils

# マウントポイント作成
sudo mkdir -p /mnt/share

# マウント
sudo mount -t cifs //server/share /mnt/share \
  -o username=user,password=pass,uid=$(id -u),gid=$(id -g)

# 永続化（/etc/fstab）
//server/share /mnt/share cifs username=user,password=pass,uid=1000,gid=1000 0 0

NFSマウント

# NFSクライアントをインストール
sudo apt install nfs-common

# マウント
sudo mount -t nfs server:/export/share /mnt/nfs

# 永続化
echo "server:/export/share /mnt/nfs nfs defaults 0 0" | sudo tee -a /etc/fstab

SSHFS（SSH経由でマウント）

# SSHFSをインストール
sudo apt install sshfs

# マウント
sshfs user@server:/remote/path /local/mount/point

# アンマウント
fusermount -u /local/mount/point

パフォーマンス最適化：重い・遅いを解決する

VSCodeの設定で高速化

必須の設定：

{
  // ファイル監視を最小限に
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/.hg/store/**": true,
    "**/vendor/**": true
  },
  
  // Git機能を制限
  "git.enabled": false,  // または
  "git.autorefresh": false,
  "git.autofetch": false,
  
  // 検索を高速化
  "search.followSymlinks": false,
  "search.maxResults": 10000,
  
  // ファイルの自動検出を無効化
  "files.autoGuessEncoding": false,
  
  // 拡張機能の自動更新を無効化
  "extensions.autoUpdate": false
}

ワークスペース設定の活用

.vscode/settings.json：

{
  // プロジェクト固有の設定
  "typescript.tsdk": "./node_modules/typescript/lib",
  "eslint.workingDirectories": ["./"],
  
  // ネットワークドライブ用の調整
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  
  // 大きなファイルの警告を調整
  "files.maxMemoryForLargeFilesMB": 4096
}

キャッシュの活用

拡張機能でキャッシュ：

  • TypeScript："typescript.tsserver.useSeparateSyntaxServer": true
  • ESLint："eslint.cacheLocation": ".eslintcache"
  • Prettier：キャッシュ機能あり

よくあるトラブルと解決方法

「ファイルが保存できません」エラー

原因と対策：

  1. 権限不足 # Windowsで権限確認 icacls "Z:\project" # Mac/Linuxで権限確認 ls -la /Volumes/share
  2. ファイルロック
    • 他のユーザーが編集中
    • 解決：ファイルを閉じてもらう
  3. ネットワーク切断
    • 一時的にローカルに保存
    • ネットワーク復旧後に同期

Gitが異常に遅い

解決策：

  1. Git設定の最適化 # プリロードを有効化 git config core.preloadindex true # ファイルシステムキャッシュ git config core.fscache true # 並列処理 git config core.packedGitLimit 256m git config core.packedGitWindowSize 256m
  2. VSCode設定 { "git.autorefresh": false, "git.decorations.enabled": false }

IntelliSenseが動作しない

対処法：

{
  // TypeScript設定
  "typescript.disableAutomaticTypeAcquisition": false,
  "typescript.tsserver.log": "verbose",
  
  // 言語サーバーの再起動
  // Ctrl + Shift + P → "TypeScript: Restart TS Server"
}

ファイル変更が検知されない

解決方法：

{
  // ポーリングを使用（CPU使用率注意）
  "files.watcherExclude": {
    "**/large-folders/**": true
  },
  
  // 手動リフレッシュ
  // Ctrl + Shift + P → "File: Refresh Explorer"
}

セキュリティ対策：安全に使うために

認証情報の管理

やってはいけないこと：

// ❌ settings.jsonに認証情報を書かない
{
  "remote.host": "user:password@server"  // 危険！
}

正しい方法：

  • Windows：資格情報マネージャーを使用
  • Mac：キーチェーンアクセスで管理
  • Linux：gnome-keyring または secret-tool

VPN経由でのアクセス

在宅勤務での推奨構成：

  1. VPN接続を確立
  2. ネットワークドライブをマウント
  3. VSCodeで開く

自動化スクリプト（Windows）：

# VPN接続とドライブマウント
rasdial "VPN Connection" username password
net use Z: \\server\share /persistent:yes
code Z:\project

ファイルの暗号化

機密ファイルの扱い：

{
  // 特定のファイルを除外
  "files.exclude": {
    "**/*.key": true,
    "**/*.pem": true,
    "**/secrets/**": true
  }
}

代替手段：ネットワークドライブ以外の選択肢

Remote Development拡張機能

SSH接続で直接開発：

// .ssh/config
Host devserver
    HostName server.example.com
    User developer
    Port 22

メリット：

  • サーバー上で直接実行
  • ネットワーク遅延の影響が少ない
  • 大規模プロジェクトに最適

WSL2（Windows）

Linux環境での開発：

# WSL2内でプロジェクトを管理
cd /home/user/projects
code .

Docker Devcontainer

コンテナ内で開発：

// .devcontainer/devcontainer.json
{
  "name": "My Project",
  "image": "node:16",
  "mounts": [
    "source=//server/share,target=/workspace,type=bind"
  ]
}

ベストプラクティス：チーム開発での活用

プロジェクト構成

推奨フォルダ構造：

\\server\projects\
├── project-a/
│   ├── .vscode/        # 共有VSCode設定
│   ├── src/
│   └── package.json
├── project-b/
└── shared-resources/   # 共有リソース

チーム設定の共有

.vscode/settings.json：

{
  // チーム共通設定
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // ネットワークドライブ最適化
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true
  },
  
  // 推奨拡張機能
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

同時編集の対策

ファイルロックを避ける：

  1. 小さな単位でコミット
  2. ブランチを分けて作業
  3. 定期的にプル/プッシュ
  4. コンフリクトは早めに解決

パフォーマンス測定とモニタリング

速度測定

ネットワーク速度の確認：

# Windows
robocopy \\server\share C:\temp\test /L /E /BYTES

# Mac/Linux
rsync -avz --dry-run server:/share /tmp/test

VSCodeのパフォーマンスログ

{
  "telemetry.telemetryLevel": "all",
  "workbench.enableExperiments": true,
  
  // Developer Tools で確認
  // Help → Toggle Developer Tools → Performance
}

まとめ：ネットワークドライブでも快適に開発しよう！

VSCodeでネットワークドライブを使うポイント：

基本設定：

  1. 適切なマウント方法を選択（SMB、NFS、SSHFS）
  2. ファイル監視を最小限に設定
  3. Git機能を制限してパフォーマンス向上
  4. キャッシュを活用して高速化

トラブル対策：

  • 権限エラー → 管理者に確認
  • 保存できない → ファイルロック確認
  • 動作が重い → 設定で最適化
  • 検知されない → 手動リフレッシュ

代替案の検討：

  • Remote Development拡張機能
  • WSL2/Docker
  • ローカルコピーで作業

ベストプラクティス：

  • チーム設定を共有
  • 定期的な同期
  • セキュリティを意識

ネットワークドライブでの開発は、設定次第で快適にも不快にもなります。この記事の設定を適用すれば、ローカル開発に近い快適さを実現できるはずです。

まずは基本的な最適化設定から始めて、徐々に自分の環境に合わせてカスタマイズしていってください！

Youtube

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

スポンサーリンク

コメント

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