VSCode（Visual Studio Code）では、OneDriveに保存しているファイルやフォルダを開いて編集できます。
特別なOneDrive専用拡張機能を導入する必要は基本的にありません。
Windows上でOneDriveと同期しているフォルダをVSCodeから開けば、通常のローカルフォルダとほぼ同じ感覚で作業できます。
例えば、HTML、CSS、JavaScript、Markdown、PHPなどのファイルをOneDriveに保存し、自宅のデスクトップPCとノートPCの両方から編集するといった使い方が可能です。
ただし、OneDriveはGitのようなソースコード専用のバージョン管理システムではありません。
小規模なファイル編集では便利ですが、本格的なWeb開発ではGitやGitHubなどと役割を分けて利用することが重要です。
VSCodeでOneDriveを利用する仕組み
VSCodeがOneDriveへ直接接続するわけではない
VSCodeでOneDriveを利用するといっても、通常はVSCode自身がOneDriveのクラウドサービスへ直接接続するわけではありません。
WindowsにインストールされているOneDriveアプリがクラウドとPCを同期し、そのPC上のOneDriveフォルダをVSCodeから開きます。
仕組みを簡単にすると、次のようになります。
VSCode
↓
PC上のOneDriveフォルダ
↓
OneDrive同期アプリ
↓
OneDriveクラウド
VSCodeから見ると、OneDriveフォルダも通常のローカルフォルダの一つです。
そのため、ファイル作成や編集、削除、検索、ターミナル操作などを通常どおり行えます。
OneDrive側がファイル変更を同期する
VSCodeでOneDriveフォルダ内のファイルを編集し、保存すると、その変更内容をOneDriveアプリが検知します。
インターネットに接続されていれば、変更したファイルが自動的にクラウドへ同期されます。
そのため、VSCodeから毎回「OneDriveへアップロードする」といった操作を行う必要はありません。
OneDriveを利用できる状態にする
WindowsでOneDriveにサインインする
最初に、WindowsでOneDriveが利用できる状態になっているか確認します。
Windows 11では、OneDriveアプリがあらかじめ用意されている環境が一般的です。
スタートメニューなどからOneDriveを起動し、Microsoftアカウントでサインインします。
会社や学校でMicrosoft 365を利用している場合は、職場または学校のアカウントを利用します。
サインインが完了すると、エクスプローラーにOneDriveフォルダが表示されます。
OneDriveフォルダの保存場所を確認する
個人用OneDriveでは、一般的に次のような場所にフォルダが作成されます。
C:\Users\ユーザー名\OneDrive
会社や学校のアカウントでは、次のような名前になる場合があります。
C:\Users\ユーザー名\OneDrive - 会社名
ただし、OneDriveの保存場所は設定や利用環境によって異なります。
必ずこのパスになるわけではないため、実際の場所はWindowsのエクスプローラーから確認するのが確実です。
OneDrive内にVSCode用フォルダを作成する
プロジェクト専用フォルダを作る
OneDrive内にVSCode用のプロジェクトフォルダを作っておくと、ファイルを整理しやすくなります。
例えば、次のような構成です。
OneDrive
└─ Projects
├─ website
├─ javascript
├─ markdown
└─ wordpress-theme
Webサイトを制作する場合は、さらに次のように整理できます。
OneDrive
└─ Projects
└─ my-website
├─ index.html
├─ css
│ └─ style.css
├─ js
│ └─ main.js
└─ images
このmy-websiteフォルダをVSCodeから開けば、通常のWeb制作プロジェクトとして利用できます。
OneDriveフォルダをVSCodeで開く方法
「フォルダーを開く」から指定する
VSCodeを起動し、上部メニューから「ファイル」を選択します。
続いて「フォルダーを開く」をクリックします。
エクスプローラーが表示されたら、OneDrive内に作成したプロジェクトフォルダを選択します。
例えば、次のような場所です。
OneDrive
↓
Projects
↓
my-website
フォルダを選択すると、そのフォルダがVSCodeのワークスペースとして開きます。
以降は通常のプロジェクトと同じように編集できます。
Windowsのエクスプローラーから開く
VSCodeをインストールするときにエクスプローラーのコンテキストメニューを有効にしている場合は、OneDriveフォルダから直接開くこともできます。
対象のフォルダを右クリックし、次の項目を選択します。
Code で開く
または英語環境では、次のように表示されることがあります。
Open with Code
これだけで対象フォルダをVSCodeで開けます。
参考サイト
OneDriveとVS Codeの完全連携ガイド：クラウド開発環境を構築する方法
ターミナルからOneDriveフォルダをVSCodeで開く方法
code .コマンドを利用する
VSCodeのcodeコマンドが利用できる環境であれば、PowerShellやWindows TerminalからOneDriveフォルダを開けます。
例えば、次のようなプロジェクトがあるとします。
C:\Users\taro\OneDrive\Projects\my-website
PowerShellなどで次のように入力します。
cd "C:\Users\taro\OneDrive\Projects\my-website"
code .
code .の.は、現在のフォルダを意味します。
そのため、現在移動しているフォルダをVSCodeで開けます。
VSCodeで編集したファイルをOneDriveへ同期する方法
VSCodeで通常どおり保存する
OneDrive内のファイルも、通常のファイルと同じように編集できます。
例えばindex.htmlを編集した場合、Windowsでは一般的に次のショートカットで保存できます。
Ctrl + S
VSCodeがファイルを保存すると、OneDriveアプリが変更を検知し、クラウドへ同期します。
自動保存も利用できる
VSCodeでは自動保存機能を有効にすることもできます。
自動保存を利用すると、一定時間操作しなかった場合などにVSCodeが自動的にファイルを保存します。
保存された変更はOneDriveの同期対象になります。
ただし、複数PCで同じファイルを扱う場合、自動保存によって頻繁に変更が発生することがあります。
複数端末で同時編集する場合は、同期状況を意識して利用することが重要です。
OneDriveのFiles On-Demandとは
オンライン専用ファイルを利用できる機能
OneDriveには「Files On-Demand」という機能があります。
この機能を利用すると、OneDrive上のファイルをPCのストレージにすべて保存しなくても、エクスプローラー上に表示できます。
オンライン専用のファイルには、一般的に青い雲のアイコンが表示されます。
ファイルを開くと必要に応じてPCへダウンロードされます。
開発用フォルダはローカルに保存すると扱いやすい
VSCodeでは、プロジェクト内の多数のファイルへ頻繁にアクセスする場合があります。
そのため、頻繁に編集する開発フォルダについては、OneDriveの次の設定を利用すると扱いやすくなる場合があります。
フォルダを右クリック
↓
このデバイス上で常に保持する
この設定を行うと、対象ファイルがPCにも保存されます。
インターネット接続がない場合でもファイルを開けるため、開発用途では便利です。
ただし、必ず設定しなければならないわけではありません。
ストレージ容量とのバランスを考えて利用するとよいでしょう。
別のPCでも同じVSCodeプロジェクトを利用する方法
同じOneDriveアカウントでサインインする
OneDriveを利用すると、複数PCから同じファイルへアクセスできます。
例えば、自宅のデスクトップPCで編集したファイルをOneDriveへ同期し、外出先のノートPCで続きを編集できます。
流れは次のようになります。
PC AでVSCodeを使って編集
↓
OneDriveへ同期
↓
クラウドへ保存
↓
PC BでOneDriveを同期
↓
VSCodeで続きを編集
別のPCでも同じOneDriveアカウントへサインインし、対象フォルダの同期が完了してからVSCodeで開きます。
作業前に同期完了を確認する
複数PCを利用する場合は、編集を始める前にOneDriveの同期が完了しているか確認することが大切です。
例えば、PC Aで編集した直後にPC Bを起動し、同期完了前の古いファイルを編集すると、意図しない上書きや同期上の問題につながる可能性があります。
次の流れで利用すると安全です。
PC Aで編集終了
↓
保存
↓
OneDriveの同期完了を確認
↓
PC Bを起動
↓
PC B側の同期完了を確認
↓
VSCodeで編集開始
OneDriveの同期対象フォルダを確認する
OneDriveでは同期するフォルダを選択できる
OneDriveでは、クラウド上のすべてのフォルダをPCへ同期する必要はありません。
OneDriveの設定から、同期対象となるフォルダを選択できます。
目的のVSCodeプロジェクトがエクスプローラーに表示されない場合は、OneDriveの設定を確認します。
一般的には、次のような場所から設定できます。
OneDrive
↓
設定
↓
アカウント
↓
フォルダーの選択
同期対象から外したフォルダはPCから表示されなくなる場合がありますが、OneDriveクラウド上から削除されるわけではありません。
OneDriveフォルダ内のファイル削除には注意する
VSCodeから削除するとOneDrive側にも反映される
VSCodeのエクスプローラーからOneDriveフォルダ内のファイルを削除した場合、その操作は通常のファイル削除として扱われます。
そのため、OneDriveの同期が行われるとクラウド側にも削除が反映されます。
例えば、次のファイルをVSCodeから削除した場合です。
style.css
ローカルPCだけではなく、OneDrive上からも削除される可能性があります。
重要なファイルを削除するときは注意しましょう。
VSCode Settings SyncとOneDriveの違い
OneDriveはプロジェクトファイルの同期に利用する
OneDriveは、主にファイルやフォルダをクラウドへ保存して複数端末間で同期するサービスです。
例えば、次のようなファイルを管理できます。
HTML
CSS
JavaScript
Markdown
画像
資料
ブログ原稿
VSCodeの設定同期にはSettings Syncを利用する
VSCodeには、設定を複数端末で同期するための「Settings Sync」という機能があります。
Settings Syncでは、主に次のような情報を同期できます。
設定
キーボードショートカット
ユーザースニペット
拡張機能
プロファイル
UI関連の状態
そのため、複数PCでVSCodeを利用する場合は、次のように役割を分けると分かりやすくなります。
プロジェクトファイル
→ OneDriveまたはGit
VSCodeの設定
→ Settings Sync
HTMLやCSSの制作でOneDriveを利用する場合
小規模なWeb制作には利用しやすい
HTML、CSS、JavaScriptなどを中心とした小規模なWeb制作であれば、OneDriveでも比較的管理しやすいでしょう。
例えば、次のような構成です。
OneDrive
└─ WebProjects
└─ company-site
├─ index.html
├─ about.html
├─ css
├─ js
└─ images
このフォルダをVSCodeで開けば、通常のWeb制作環境として利用できます。
自宅PCとノートPCで同じプロジェクトを編集したい場合にも便利です。
WordPress開発でOneDriveを利用する場合
テーマやプラグインの保存には利用できる
WordPressの自作テーマや自作プラグインをOneDriveに保存することもできます。
例えば、次のような構成です。
OneDrive
└─ WordPress
└─ my-theme
├─ style.css
├─ functions.php
├─ header.php
├─ footer.php
└─ index.php
テーマファイルだけを管理するのであれば、OneDriveでも比較的扱いやすいでしょう。
WordPress開発環境全体の同期には注意する
Local、XAMPP、Dockerなどを利用したWordPress開発環境では、多数のファイルが頻繁に更新される場合があります。
例えば、次のようなデータです。
WordPress本体
プラグイン
キャッシュ
ログ
画像
一時ファイル
データベース関連ファイル
これらをすべてOneDrive同期対象にすると、同期するファイル数や更新量が増える可能性があります。
そのため、開発環境全体をOneDriveで同期するよりも、自作テーマや自作プラグイン、資料など必要なものだけを管理する方法も検討するとよいでしょう。
Node.jsプロジェクトをOneDriveに置く場合の注意点
node_modulesには大量のファイルが含まれる
React、Next.js、Vue、ViteなどNode.jsを利用するプロジェクトでは、一般的にnode_modulesフォルダが作成されます。
node_modulesには非常に多くのファイルが含まれる場合があります。
そのため、OneDrive配下に置くと同期対象となるファイル数が増え、同期処理の負荷が大きくなる可能性があります。
ただし、OneDriveにnode_modulesを置けないという意味ではありません。
技術的には利用可能です。
依存パッケージは再インストールできる
Node.jsプロジェクトでは通常、依存関係を次のようなファイルで管理します。
package.json
package-lock.json
別のPCへ移動した場合でも、次のコマンドを実行すれば依存パッケージを再インストールできます。
npm install
または、ロックファイルに基づいてインストールする場合は次のコマンドを利用できます。
npm ci
そのため、node_modulesそのものを複数PC間でOneDrive同期する必要性は一般的には高くありません。
OneDriveとGitの違い
OneDriveはファイル同期サービス
OneDriveは、ファイルをクラウドへ保存してPC間で同期するためのサービスです。
主に次のような用途に適しています。
ファイル保存
クラウド同期
ファイル共有
資料管理
バックアップ補助
Gitはソースコードのバージョン管理システム
Gitはソースコードの変更履歴を管理するための仕組みです。
Gitでは、次のような操作を行えます。
コミット
ブランチ
マージ
差分確認
履歴管理
変更の取り消し
そのため、OneDriveとGitは似ているように見えて目的が異なります。
OneDriveはGitの代わりになるものではありません。
OneDriveとGitを併用する場合の注意点
OneDrive内でもGitは利用できる
OneDriveフォルダ内にGitリポジトリを作成すること自体は可能です。
例えば、次のような構成です。
OneDrive
└─ Projects
└─ website
├─ .git
├─ index.html
└─ style.css
この構成でもGitを利用できます。
複数の同期・管理方法が重なる点に注意する
OneDrive内でGitを利用すると、次の2つの仕組みが同時に動きます。
OneDrive
→ ファイル同期
Git
→ バージョン管理
さらに複数PCで同じリポジトリを利用すると、OneDriveの同期とGitの変更管理が重なり、運用が複雑になる可能性があります。
そのため、本格的な開発では次のような構成も検討するとよいでしょう。
ローカルPC
└─ Projects
└─ my-project
↓
Git
↓
GitHub / GitLab / Azure DevOps
OneDrive内でGitを利用することが禁止されているわけではありませんが、用途に応じて管理方法を分けることが重要です。
VSCodeとOneDriveで同期競合を避ける方法
同じファイルを複数PCで同時編集しない
OneDriveを利用して複数PCで同じファイルを編集する場合は注意が必要です。
例えば、PC AとPC Bで同じindex.htmlをほぼ同時に変更すると、同期タイミングによって意図しない上書きなどが発生する可能性があります。
そのため、次のような運用がおすすめです。
PC Aで作業
↓
保存
↓
同期完了を確認
↓
PC Bで同期
↓
編集開始
複数人で頻繁に同じソースコードを編集する場合は、OneDriveよりGitを中心にした運用のほうが適しています。
OneDriveとVSCodeを利用するメリット
複数PCから同じファイルを利用できる
OneDriveの大きなメリットは、複数端末から同じファイルへアクセスできることです。
自宅PCとノートPCの両方で同じHTMLやMarkdownファイルを編集するといった使い方ができます。
自動的にクラウドへ同期できる
OneDriveフォルダ内のファイルであれば、VSCodeから通常どおり保存するだけで同期されます。
毎回ブラウザを開いてアップロードする必要がありません。
Web制作以外のファイルもまとめて管理できる
OneDriveではソースコード以外にも、次のようなファイルをまとめて管理できます。
画像素材
記事原稿
PDF
Excel
Word
Markdown
設計資料
Web制作に関連する資料をまとめて管理したい場合にも便利です。
OneDriveとVSCodeを利用するデメリット
大量のファイルを扱う開発には向かない場合がある
Node.jsプロジェクトのnode_modulesなど、大量のファイルを含むフォルダを同期すると、OneDriveの同期処理に負荷がかかる可能性があります。
同期とバージョン管理は別物
OneDriveにはファイル履歴などの機能がありますが、Gitのようなソースコード専用の履歴管理機能とは異なります。
本格的な開発ではGitの導入を検討する必要があります。
複数PCでの同時編集には注意が必要
OneDriveは複数PC間のファイル同期には便利ですが、ソースコードを複数端末から同時に編集するための専用ツールではありません。
同期状態を確認してから作業することが重要です。
VSCodeとOneDriveのおすすめ運用方法
小規模なWeb制作の場合
HTML、CSS、JavaScript、Markdownなどを中心に利用する場合は、OneDrive内にプロジェクトフォルダを作る方法でも十分活用できます。
例えば、次のような構成です。
OneDrive
└─ VSCode
├─ HTML
├─ CSS
├─ JavaScript
└─ Markdown
頻繁に利用するフォルダについては、「このデバイス上で常に保持する」を設定しておくと扱いやすくなります。
本格的なWeb開発の場合
React、Next.js、WordPress、Dockerなどを利用する本格的な開発では、ローカルフォルダとGitを中心に管理する方法が分かりやすいでしょう。
例えば、次のように役割を分けます。
ソースコード
→ ローカルPC + Git
リモートリポジトリ
→ GitHub / GitLab / Azure DevOps
資料・画像・記事原稿
→ OneDrive
VSCodeの設定
→ Settings Sync
すべてをOneDriveだけで管理するのではなく、それぞれのサービスの得意分野に合わせて使い分けることが重要です。
まとめ
VSCodeでOneDriveを利用する方法はシンプルです。
OneDriveアプリでクラウドとPCを同期し、そのOneDriveフォルダをVSCodeから開けば利用できます。
専用のOneDrive拡張機能をインストールする必要は基本的にありません。
HTML、CSS、JavaScript、Markdown、記事原稿など比較的軽量なファイルを複数PCで共有する用途には便利です。
一方、ReactやNext.jsなど大量のファイルを生成する開発や、複数人での本格的なソースコード管理では、GitやGitHubなどを利用するほうが適している場合があります。
OneDriveとVSCodeを利用するときは、「OneDriveはファイル同期」「Gitはソースコードのバージョン管理」「Settings SyncはVSCode設定の同期」というように役割を分けて考えると分かりやすくなります。
用途に応じてOneDrive、Git、Settings Syncを使い分けることで、VSCodeを複数PCでも効率よく利用できるでしょう。
以上、VSCodeでOneDriveを利用する方法についてでした。
最後までお読みいただき、ありがとうございました。
