Visual Studio Code（VS Code）は、プログラミング初心者から上級者まで幅広く使われている人気のコードエディタです。PythonやHTMLの実行だけでなく、Google ColabやGoogleドライブとの連携も可能です。しかし、初めて触る人には「どうやって動かすの？」「どこに保存されるの？」と分かりにくい部分も多いです。この記事では、VS CodeでGoogle Colabを使う方法、HTMLを表示する方法、Googleドライブへ保存する方法を初心者向けに整理しています。
VS Codeとは何ができるソフトなのか
VS CodeはMicrosoftが提供している無料のコードエディタです。
以下のような用途でよく使われています。
- Python開発
- HTML/CSS作成
- JavaScript開発
- AI開発
- Webサイト制作
- Google Colab連携
拡張機能を追加することで、機能を自由に増やせるのが大きな特徴です。
VS CodeでHTMLを動かす方法
HTMLは、VS Codeの中でも特に簡単に動かせます。
基本的な流れは以下です。
- 新しいフォルダを作成
- index.htmlを作成
- HTMLを書く
- ブラウザで開く
例えば以下のようなコードを書きます。
<!DOCTYPE html><html><head><title>テスト</title></head><body><h1>Hello World</h1></body></html>保存後にファイルをダブルクリックすると、ブラウザで表示されます。
Live Serverを使うと便利
VS Codeでは「Live Server」という拡張機能が非常に人気です。
導入すると、右クリック→「Open with Live Server」で自動表示できます。
| 機能 | メリット |
|---|---|
| 自動更新 | 保存すると即反映 |
| ブラウザ表示 | すぐ確認できる |
| 初心者向け | 設定が簡単 |
VS CodeでGoogle Colabを使う方法
Google Colabは、本来ブラウザ上で動くPython環境です。
ただしVS Code側からも近い操作感で使えます。
基本的な方法
- Python拡張機能を入れる
- Jupyter拡張機能を入れる
- .ipynbファイルを作成
- Google Colab形式で開く
VS CodeではJupyter Notebook形式を使うことで、Colabに近い操作ができます。
また、Google Colab側で作った.ipynbファイルをVS Codeで編集することも可能です。
Google Colabとの違い
| 項目 | Colab | VS Code |
|---|---|---|
| 実行場所 | クラウド | PC本体 |
| GPU利用 | 簡単 | 設定必要 |
| オフライン | 不可 | 可能 |
AI学習や重い処理はGoogle Colab、普段の編集はVS Codeという使い分けをする人も多いです。
Googleドライブへ保存する方法
VS Code単体では、自動的にGoogleドライブへ保存されるわけではありません。
一般的には以下の方法を使います。
方法1：Google Drive for desktopを使う
最も簡単なのがこれです。
- Google Drive for desktopをインストール
- PCにGoogle Driveフォルダを作成
- VS Codeでそのフォルダを開く
これで保存したファイルが、自動的にGoogleドライブへ同期されます。
方法2：Colab経由で保存
Google Colabでは以下のコードでGoogleドライブを接続できます。
from google.colab import drivedrive.mount('/content/drive')すると、Googleドライブ内へ直接保存可能になります。
初心者がつまずきやすいポイント
VS Code初心者は、以下で迷いやすいです。
- 拡張機能が多すぎる
- 保存場所が分からない
- ターミナルが怖い
- ColabとVS Codeの違いが曖昧
特に“VS Codeはエディタ”“Google Colabは実行環境”という違いを理解すると整理しやすくなります。
初心者におすすめの使い分け
最初は以下の使い分けがおすすめです。
| 用途 | おすすめ |
|---|---|
| HTML学習 | VS Code |
| Python練習 | Google Colab |
| AI学習 | Google Colab |
| Web制作 | VS Code |
慣れてきたら、VS Code中心に統一していく人も多いです。
まとめ
VS CodeではHTMLを簡単に表示でき、Google Colab形式のNotebookも扱えます。また、Google Drive for desktopを使えば、Googleドライブへの自動保存も可能です。初心者のうちは「VS Code＝編集」「Google Colab＝実行」というイメージで整理すると分かりやすく、無理に全部を一気に理解しなくても問題ありません。まずはHTML表示とファイル保存から慣れていくと、学習がかなりスムーズになります。
コメント