# リモートで編集する方法：VS Code Tunnels を活用した開発環境構築ガイド

## はじめに

このガイドでは、自宅のネットワーク環境で VS Code Tunnels を利用し、リモートから vscode.dev 経由で開発作業を行う方法を解説します。

:::info
**※注意：**

- **GitHub アカウントが必須です。** まだお持ちでない方は、事前に [GitHub のサインアップページ](https://github.com/join) からアカウントを作成してください。

:::

## ステップ 1: GitHub アカウントの作成

- まだ作成していない場合は、[GitHub のサインアップページ](https://github.com/join) にアクセスし、アカウントを作成してください。
- アカウント作成後、ログイン状態にしておくと後の認証がスムーズになります。

## ステップ 2: ターミナルでのコマンド実行

Wi-Fi に接続後、ターミナルを起動して以下のコマンドを実行してください。

code tunnel

または、以下の3つのコマンド:

sudo apt update
sudo apt install -y code
code tunnel

### コマンドの説明

- **`sudo apt update`**
システムのパッケージリストを最新の状態に更新します。
- **`sudo apt install -y code`**
Visual Studio Code（`code` コマンド）をインストールします。
※ 既にインストール済みの場合は、このステップはスキップしても問題ありません。
- **`code tunnel`**
VS Code Tunnels を起動し、ローカル環境にトンネルを作成します。
このコマンドを実行すると、ターミナル上に認証用のリンクやトンネル情報が表示されるはずです。

## ステップ 3: ブラウザで vscode.dev へアクセス

1. **認証の実施**
- `code tunnel` 実行時に表示されたリンクをコピーして、ブラウザで開いてください。
- GitHub アカウントを用いて認証する画面が表示される場合がありますので、画面の指示に従い認証を完了してください。
2. **vscode.dev での作業開始**
- 認証が成功すると、ブラウザ上で [vscode.dev](https://vscode.dev) にアクセスできるようになります。
- これにより、リモートで実行中の VS Code 環境に接続し、コードの編集や開発作業を行うことが可能です。

## 補足・トラブルシューティング

GitHub アカウント認証後、vscode.dev 初回アクセス時に以下のようなアクセス権の許可ダイアログが出ます。


信頼する、を選択すると編集可能になります。

## まとめ

このガイドでは、以下の手順でリモート開発環境を構築する方法を解説しました。

1. **事前準備**
- GitHub アカウントの作成
2. **ターミナルでのコマンド実行**
- トンネル作成
3. **ブラウザでの接続**
- 表示されたリンクを使って認証し、vscode.dev で作業開始

ぜひ、自宅の環境でお試しください。これにより、どこからでも手軽にリモートでの編集作業が可能となります。

**Happy Coding!**

_ChatGPT o3-mini によって生成された文書をもとに改変して作成_