はじめに
「今日はカフェでコーディングしたいけど、ノートPCを持っていくのは重たい。。。」
「電車の中の空き時間で、さっきのバグを修正したい。。。」
「ソファでリラックスしながら、気軽にコードレビューしたい。。。」
そんな時、スマホ一台でVS Codeが使えたら最高だと思いませんか？
VS Code Serverを使えば、スマホやタブレットからでも本格的な開発が可能です。重いノートPCを持ち歩く必要もなく、いつでもどこでも快適にコーディングできます。
この記事では、VS Code Serverを使った「Vibe Coding」について紹介します。お気に入りの音楽を聴きながら、カフェでも電車でも自宅のソファでも、スマホで気軽に最高の開発体験を実現する方法をお伝えします。
対象読者
- スマホやタブレットでコーディングしたい開発者
- 移動中の空き時間を有効活用したい方
- ノートPCを持ち歩きたくない方
- どこでも気軽に開発環境にアクセスしたい方
- 音楽を聴きながらリラックスしてコーディングしたい方
前提知識
- 基本的なLinuxコマンドの知識
- VS Codeの基本的な使い方
- SSHの基礎知識
環境
- サーバー。Ubuntu 22.04 LTS
- クライアント。Windows 11 / macOS Ventura / iPad
- VS Code Server。最新版
- Node.js。22.x LTS
システム構成
VS Code Serverとは
VS Code Serverは、Visual Studio Codeの機能をサーバー上で実行し、ブラウザやVS Codeクライアントからアクセスできるようにする技術です。
スマホで使うメリット
-
どこでもコーディング
- カフェ、電車、ベッド、どこでも開発可能
- スマホのブラウザだけでフル機能のVS Code
-
バッテリー持続時間の向上
- 重い処理はサーバー側で実行
- スマホは表示とキー入力だけ
-
瞬時にアクセス
- URLを開くだけですぐに作業再開
- PCを起動する必要なし
デモ画像
実際にiPadからVS Code Serverにアクセスして、Claude Codeを起動している様子です。
※画像は記事末尾の「実際の使用例」セクションをご覧ください。
セットアップ
VS Code Serverの構築方法には、GitHub Codespacesを使う方法もありますが、今回はクラウド上のLinuxマシンに構築する方法を紹介します。この方法により、より自由度の高いカスタマイズが可能になります。
1. サーバーの準備
まず、VS Code Serverを動かすサーバーを準備します。Azure VM、AWS EC2、Google Cloud Compute Engine、など、お好みのクラウドサービスでLinuxマシンを用意してください。
# システムの更新
sudo apt update && sudo apt upgrade -y
# 基本パッケージのインストール
sudo apt install -y wget curl git build-essential
# 開発ツールのインストール
sudo apt install -y vim nano htop unzip tree jq
# Python開発環境（オプション）
sudo apt install -y python3 python3-pip python3-venv
# Node.js 22.xのインストール
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs build-essential
# GitHub CLIのインストール
curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
sudo apt update
sudo apt install -y gh
# Dockerのインストール（オプション）
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo usermod -aG docker $USER
# バージョン確認
node --version
npm --version
git --version
gh --version
python3 --version
開発言語別の追加セットアップ
必要に応じて、使用する開発言語の環境を追加でセットアップします。
# Go言語（オプション）
wget -c https://golang.org/dl/go1.21.0.linux-amd64.tar.gz
sudo tar -C /usr/local -xzf go1.21.0.linux-amd64.tar.gz
echo 'export PATH=$PATH:/usr/local/go/bin' >> ~/.bashrc
# Rust（オプション）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.cargo/env
# Java（OpenJDK）（オプション）
sudo apt install -y openjdk-17-jdk
# バージョン確認
go version
rustc --version
java -version
2. code-serverのインストールと設定
VS Code ServerはMicrosoftの公式版とcode-server（コミュニティ版）があります。この記事では、より柔軟な設定が可能なcode-serverを使用します。
2-1. code-server のインストール
# code-serverのインストール
$ sudo curl -fsSL https://code-server.dev/install.sh | sh
# バージョン確認
$ code-server --version
2-2. code-server の設定ファイルの作成
# 設定ディレクトリの作成
$ mkdir -p ~/.config/code-server
# 設定ファイルの編集
$ nano ~/.config/code-server/config.yaml
以下の内容を記述します。
bind-addr: 0.0.0.0:8080
auth: password
password: your-secure-password
cert: false
本番環境では必ずHTTPS化し、強力なパスワードを設定してください。
2-3. code-server をサービスとして起動
# systemdサービスを有効化
$ sudo systemctl enable --now code-server@$USER
# ステータス確認
$ sudo systemctl status code-server@$USER
3. Reverse Proxy Sever (Caddy) の設定
code-sever をHTTPS化するために Caddy をインストールし、設定します。
3-1. DNSの設定: Let's Encrypt との連携
Let's Encrypt から証明書を自動取得し、自動設定するためには、そのサーバーのAレコードをDNSに登録ておく必要がありますので、Aレコードを設定します。
3-2. Caddy のインストール
$ sudo apt install -y caddy
3-3. Caddy の設定
/etc/caddy/Caddyfile を以下のように編集します。
code.consoto.com {
reverse_proxy http://localhost:8080
}
code.consoto.com には 3-1 でAレコードを設定したホスト名を入力します。
3-4. Caddy をサービスと起動
# Caddy を自動起動するようにする
$ sudo systemctl enable --now caddy
# ステータスの確認
$ sudo systemctl status caddy
4. ファイアウォールの設定
$ sudo ufw allow 443
$ sudo ufw enable
$ sudo ufw status
5. その他の背亭
5-1. テーマとフォントの設定
快適なコーディングには、見やすいテーマとフォントが欠かせません。
{
"workbench.colorTheme": "Tokyo Night",
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.6,
"editor.letterSpacing": 0.5
}
5-2. 拡張機能のインストール
リモート環境でも快適に開発できる拡張機能をインストールします。
# コマンドラインから拡張機能をインストール
code-server --install-extension esbenp.prettier-vscode
code-server --install-extension dbaeumer.vscode-eslint
code-server --install-extension eamodio.gitlens
code-server --install-extension ms-python.python
code-server --install-extension golang.go
5-3. ターミナルのカスタマイズ
# Oh My Zshのインストール
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
# Powerlevel10kテーマのインストール
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
AIコーディングアシスタントの導入
Vibe Codingをさらに快適にするため、AIアシスタントを導入しましょう。
Claude Codeのインストール
Claude Codeは、Anthropic公式のCLIツールです。コードの理解、生成、リファクタリングを支援します。
インストール方法
# npxを使用した実行（インストール不要）
npx @anthropic-ai/claude-code
# またはグローバルインストール
npm install -g @anthropic-ai/claude-code
# インストール確認
claude --version
初回セットアップ（Claude Pro/Maxプラン必須）
Claude Codeを使用するには、Claude ProまたはMaxプランの契約が必要です。
# セットアップトークンの取得（初回のみ）
claude setup-token
# このコマンドでブラウザが開き、トークンが表示されます
# トークンをコピーして、ターミナルに貼り付けてください
- Claude Codeの利用にはClaude ProまたはMaxプランが必要です
- セットアップトークンの取得は最初の1回だけで大丈夫です
- 一度設定すれば、以降は自動的に認証されます
プランに応じた利用制限があります。
- Pro。月間利用量に制限あり
- Max。より多くの利用が可能
- 詳細はClaude Pricingをご確認ください
詳細設定
Claude Codeにはさまざまな設定オプションがあります。
# 基本的な設定確認
claude config show
# 認証状態の確認
claude auth status
Claude Codeの詳細な設定方法（エディター統合、カスタムコマンド、高度な設定など）については、公式ドキュメントを参照してください。
Gemini CLIのインストール
Google GeminiのCLIツールも活用できます。
前提条件
- Node.js 18以上が必要です
インストール方法
# 推奨：npxを使用した実行（インストール不要）
npx https://github.com/google-gemini/gemini-cli
# またはグローバルインストール
npm install -g @google/gemini-cli
初回セットアップ
初回起動時に以下の設定を行います。
# Gemini CLIを起動
gemini
# 初回起動時の設定：
# 1. CLIテーマを選択
# 2. Googleアカウントで認証
# 3. Gemini 2.0 Flash（100万トークン）へのアクセスを確認
基本的な使い方
# 対話モード
gemini
# 非対話モード
gemini --prompt "JavaScriptでフィボナッチ数列を生成する関数を書いて"
# ファイルを含めた質問
# @でローカルファイルやディレクトリを指定
gemini --prompt "@main.js このコードをリファクタリングして"
# シェルコマンドの実行
# !でコマンドを実行
gemini --prompt "!ls -la 現在のディレクトリの内容を説明して"
プロジェクト固有のAI指示を設定したい場合は、プロジェクトルートにGEMINI.mdファイルを作成してください。
VS Code拡張機能との連携
# AI関連の拡張機能をインストール
code-server --install-extension continue.continue
code-server --install-extension github.copilot
code-server --install-extension tabnine.tabnine-vscode
AIアシスタントの活用例
// Claude Codeでリファクタリング提案を受ける
// コマンド: claude refactor ./src/app.js
// Gemini CLIでコードレビュー
// コマンド: gemini --prompt "@./src/components/Button.jsx このコードをレビューして"
// VS Code内でのショートカット
// Ctrl+Shift+A: AIアシスタントパネルを開く
// Ctrl+Shift+G: コード生成
// Ctrl+Shift+R: リファクタリング提案
スマホでAIアシスタントを使うことで、タイピングが少なくても高品質なコードを書けます。音声入力と組み合わせれば、さらに効率的です。
スマホでのAI活用テクニック
1. **音声でプロンプト入力**
- 「Hey Claude, このfunctionをTypeScriptに変換して」
- 「Gemini, このコードのバグを見つけて」
2. **ショートカットの設定**
- スマホのキーボードアプリにAIコマンドを登録
- 例。"cc"→"claude generate"
3. **クイックアクション**
- 選択したコードを長押し → AIメニュー
- スワイプジェスチャーでAI提案を呼び出し
音楽と共にコーディング
Vibe Codingの醍醐味は、好きな音楽を聴きながらコーディングすることです。
Spotify統合
VS Code内でSpotifyを制御できる拡張機能を使います。
code-server --install-extension shyykoserhiy.vscode-spotify
設定例：
{
"spotify.showMuteUnmuteVolumeButton": true,
"spotify.showToggleShufflingButton": true,
"spotify.showToggleRepeatingButton": true,
"spotify.prioritizeSearchForCurrentlyPlayingArtist": true
}
ローファイBGM拡張機能
code-server --install-extension thebearingedge.lofi
コーディング中のBGMは、歌詞のないインストゥルメンタルやローファイヒップホップがオススメです。集中力を保ちながら、リラックスした雰囲気で作業できます。
パフォーマンスチューニング
1. リソース制限の設定
{
"files.maxMemoryForLargeFilesMB": 4096,
"search.maxResults": 10000,
"extensions.autoUpdate": false,
"telemetry.telemetryLevel": "off"
}
2. 拡張機能の最適化
不要な拡張機能は無効化し、必要最小限に抑えます。
# インストール済み拡張機能の確認
code-server --list-extensions
# 不要な拡張機能の削除
code-server --uninstall-extension <extension-id>
スマホでの快適な開発環境構築
iPhone/Androidでの設定
1. ホーム画面に追加（PWA化）
// iPhoneの場合
1. Safariで https://your-domain.com にアクセス
2. 共有ボタンをタップ
3. 「ホーム画面に追加」を選択
4. アプリ名を設定（例: "VS Code"）
// Androidの場合
1. Chromeで https://your-domain.com にアクセス
2. メニューから「ホーム画面に追加」を選択
3. アプリ名を設定
PWA化することで、アドレスバーが非表示になり、より広い作業領域を確保できます。
2. スマホ用の設定最適化
{
// スマホ用フォントサイズ
"editor.fontSize": 12,
"terminal.integrated.fontSize": 11,
// タッチ操作の最適化
"editor.hover.enabled": false,
"editor.minimap.enabled": false,
// モバイル用レイアウト
"workbench.activityBar.visible": false,
"workbench.statusBar.visible": true,
"workbench.sideBar.location": "right",
// タッチスクロール対応
"editor.scrollbar.vertical": "visible",
"editor.scrollbar.horizontal": "visible"
}
スマホ用キーボード設定
外付けキーボードなしでも快適に
-
Gboardの活用（Android/iOS）
- スワイプ入力でコード補完 - 音声入力でコメント記述 - クリップボード履歴機能 -
ショートカットの登録
設定 > 一般 > キーボード > ユーザ辞書 よく使うコードスニペットを登録。 - "func" → "function() { }" - "cl" → "console.log()" - "imp" → "import {} from ''"
タッチ操作のコツ
基本操作
| 操作 | ジェスチャー |
|---|---|
| ファイルを開く | ファイル名をタップ |
| 右クリックメニュー | 長押し |
| 複数選択 | ダブルタップ + ドラッグ |
| ズーム | ピンチイン/アウト |
| サイドバー表示 | 左端から右スワイプ |
コード編集のテクニック
1. **カーソル移動**
- 画面端をタップ。行頭/行末へ移動
- ダブルタップ。単語選択
- トリプルタップ。行選択
2. **効率的な編集**
- 音声入力で変数名を入力
- コード補完を積極的に活用
- Emmetでタグを高速入力
スマホでのデバッグ
// コンソールログを画面に表示する便利関数
function mobileLog(message) {
const logDiv = document.getElementById('debug-log') ||
(() => {
const div = document.createElement('div');
div.id = 'debug-log';
div.style.cssText = `
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.8);
color: #0f0;
padding: 10px;
font-family: monospace;
font-size: 10px;
max-height: 30vh;
overflow-y: auto;
`;
document.body.appendChild(div);
return div;
})();
logDiv.innerHTML += `${new Date().toTimeString().split(' ')[0]} ${message}<br>`;
logDiv.scrollTop = logDiv.scrollHeight;
}
// 使用例
mobileLog('デバッグ開始');
トラブルシューティング
接続できない場合
# サービスの状態確認
sudo systemctl status code-server@$USER
# ログの確認
sudo journalctl -u code-server@$USER -f
# ポートの確認
sudo netstat -tlnp | grep 8080
パフォーマンスが遅い場合
-
サーバーリソースの確認
htop df -h free -m -
拡張機能の見直し
- 重い拡張機能を無効化
- ワークスペースごとに必要な拡張機能のみ有効化
実際の使用シナリオ
通勤電車でバグ修正
7:45 - 電車に乗車
7:46 - スマホでVS Codeを起動（ホーム画面のアイコンから）
7:47 - GitHubのIssueを確認
7:50 - 該当ファイルを検索して修正
8:05 - テストを実行して動作確認
8:10 - git commitとpush
8:15 - PRを作成して完了
片手でつり革、片手でコーディング。
座席が取れなくても開発は止まりません。
カフェでのんびりコードレビュー
環境:
場所: スターバックス
デバイス: iPhone 13 Pro
BGM: Spotify（Lo-fi Hip Hop）
飲み物: アイスラテ
作業内容:
- PRのコードレビュー
- 軽微な修正の提案
- ドキュメントの更新
- Slackでチームと連携
寝る前のアイデア実装
午後11時45分、ベッドで横になりながら突然のひらめき。普通なら「明日PCを開いたらやろう」と思うところですが、VS Code Serverがあれば話は別です。
実際の流れ：
-
アイデアの瞬間
- ベッドで横になりながら、新しい機能のアイデアがひらめく
- 「これ、おもしろいかも」という直感
-
即座の行動
- スマホでVS Code Serverにアクセス
- PWAとしてホーム画面に登録したアイコンをタップ
- 数秒でコーディング環境が立ち上がる
-
アイデアの実装
- 暗い部屋でも見やすいダークテーマで作業
- 音声入力でコメントを追加
- 基本的な骨格を素早く実装
-
翌朝のサプライズ
- PCを開くと、昨夜のアイデアがすでに形になっている
- 「昨夜の自分、ありがとう」という気持ち
- すぐに詳細な実装に取りかかれる
これこそが、VS Code Serverを使ったVibe Codingの醍醐味です。アイデアが生まれた瞬間の熱量を逃すことなく、その場でコードに落とし込める。場所や時間、デバイスに縛られない、本当に自由な開発スタイルです。
よくある質問
Q: スマホの画面は小さくないですか？
A: 確かに最初は小さく感じるかもしれません。しかし、以下の工夫で快適に使えます。
- フォントサイズの調整
- 不要なUIの非表示
- 外部モニターへの接続（USB-C対応機種）
- タブレットモードの活用
Q: 通信量は大丈夫ですか？
A: VS Code Serverは差分のみを送信するため、思ったより通信量は少なめです。
平均的な使用量（1時間あたり）。
- コード編集。10-30MB
- ターミナル操作。5-20MB
- ファイル保存。1-5MB
Q: セキュリティは大丈夫ですか？
A: 以下の対策で安全に使用できます。
- HTTPS必須
- 強力なパスワード設定
- VPN経由でのアクセス
- IPアドレス制限
まとめ
VS Code Serverを使ったVibe Codingで、スマホが最強の開発マシンに変わります。
実現できること。
- 🚃 通勤時間が開発時間に
- ☕ カフェがオフィスに
- 🛏️ ベッドが開発環境に
- 🎵 音楽と共にどこでもコーディング
必要なもの。
- スマホ（iPhone/Android）
- インターネット接続
- VS Code Server
- 音楽（オプションだが推奨）
もうノートPCを持ち歩く必要はありません。スマホ一台で、いつでもどこでも最高の開発体験を。
Happy Vibe Coding!🎵📱💻