← Vim研究所

ブラウザのクラウドIDEでVimキーバインドを使う方法

2026-08-03 公開 ・ 更新: 2026-09-03

ローカルに開発環境を作らず、ブラウザだけでコードを書けるクラウドIDEを使う機会は増えています。GUIベースのエディタが標準でも、Vimキーバインドに慣れていれば、ほとんどのクラウドIDEで同じ操作感に切り替えられます。

ただし切り替えたあとに引っかかるのは、Vimの操作そのものではなくCtrlを絡めたキーのほうです。エディタに届く前にブラウザが持っていくキーがあり、これはサービスを乗り換えても付いてきます。この記事では2026年9月時点の顔ぶれと、どのサービスでも共通して起きるキーの奪い合いを整理します。

確かめた範囲：手元で動かしたのは、macOSのVim 9.1とNVIM v0.12.4でのCtrl-wなどの挙動と、配布されているVSCodeVim 1.32.4・VSCode Neovim 1.19.0のパッケージの中身です。AWS各サービスの提供状況とブラウザ側のショートカットは公式ドキュメントを読んだだけで、CodespacesやCloudShellの画面は開いていません。

目次（8項目）

AWS Cloud9はもう新規に使えない

かつて代表的な選択肢だったAWS Cloud9は、新規の受け付けを終了しています。公式ドキュメントの各ページ冒頭に新規のお客様には提供していないという告知が固定で出ています。案内が始まったのは移行ブログの公開日と同じ2024年7月25日です。既存の環境はそのまま使えますが、新機能の追加は行わない方針です。

この記事は以前、乗り換え先としてAmazon CodeCatalystのDev Environmentsを挙げていました。そこが古くなっています。CodeCatalystの移行ガイドによると、CodeCatalyst自体が2025年11月7日で新規の受け付けを終え、既存ユーザーも新しいスペースは作れません。案内していた乗り換え先のほうが先に閉じた形です。

AWSがCloud9からの移行先として挙げているのは、Visual Studio CodeやJetBrains製IDEに入れるAWS IDE Toolkitsか、AWS CloudShellの2つです（CodeCatalystの移行先はこれとは別に案内されています）。前者は手元のIDEを使う話なので、ブラウザだけで完結させたい人が見るのは後者になります。

Vimを使う側から見ると、CloudShellはCloud9より素直です。ブラウザの中で動いているのは本物のLinuxシェルで、プリインストールされているソフトウェアの一覧にvimとtmuxが並んでいます。エミュレーションではなく本物のVimが起動するので、モードもレジスタもマクロもそのまま動きます。

常用の環境として見るなら制約もあります。割り当ては1 vCPUと2 GiBメモリ、セッションをまたいで残るのはホームディレクトリの1 GBだけです。dnfで入れたコマンドはホームの外に置かれるので、セッションが終わると消えます。.vimrcやプラグインはホームに置けば残ります。

2026年8月17日にはeditコマンドが追加され、シェルから呼び出せるビジュアルなファイルエディタが標準で入りました。ただしVimキーバインドを備えるという案内は出ていないので、Vimの操作で書きたいならvimを叩くことになります。

GitHub Codespaces

GitHubリポジトリと直結したクラウド開発環境です。中身はVS Code（Web版）そのものなので、VS Code向けのVim拡張機能がそのまま使えます。

  1. Codespaceを起動します
  2. 拡張機能タブから「Vim」（VSCodeVim）を検索してインストールします
  3. 有効化すると、通常のVS Codeと同じ感覚でVimキーバインドが使えるようになります

GitHubのリポジトリに.vscode/extensions.jsonで拡張機能を指定しておけば、チームメンバーがCodespaceを開いたときに自動でインストールを促す設定もできます。

{
  "recommendations": ["vscodevim.vim"]
}

ブラウザだけのVS Codeで拡張機能が動くかどうかは、そのpackage.jsonにbrowserの指定があるかで決まります。VSCodeVim 1.32.4のパッケージを展開して見たところ、browserにWeb用の実装が指定されていました。ブラウザ側で動く実体を持っているので、サーバーが付いていないVS Codeにも入ります。

入れた直後に気づきにくいのがコピーの行き先です。VSCodeVimのvim.useSystemClipboardは既定で無効なので、yyした内容は拡張機能の中のレジスタに入るだけで、OSのクリップボードには渡りません。Vimでクリップボードを共有する設定と同じ悩みが、名前を変えて出てきます。

VSCode Web（vscode.dev）

インストール不要でブラウザからアクセスできるVS Codeの軽量版です。こちらも拡張機能タブからVim拡張を追加すれば同様にキーバインドを切り替えられます。フルのCodespacesほどの計算リソースは使えませんが、ちょっとした編集作業やコードレビューには十分です。

ここで動く拡張機能は、VS CodeのWeb拡張機能のガイドにあるとおり、ブラウザのWeb Workerの中で動きます。子プロセスを作ったり実行ファイルを起動したりはできない、という制約が明記されていて、この一文が後ろの節で効いてきます。

Ctrl系のキーをブラウザに取られる

Vim拡張を入れて最初に困るのは、押したキーがエディタまで届かないことです。Chromeのキーボードショートカット一覧にあるWindows/Linux向けのCtrlと英字1文字の組み合わせは16個で、d、e、f、g、h、j、k、l、n、o、p、r、s、t、u、wが埋まっています。

この16個はすべて、VSCodeVimが自分で処理すると宣言しているキーに入っています。1.32.4のパッケージにあるキーバインド定義75件から、拡張機能が横取りするCtrl系の組み合わせを数えると35通りあり、英字はaからzまで26文字が全部そろっていました。

この16個がVim側で何をするキーなのかを、macOSのVim 9.1で実際に押して確かめました。よく使うものだけ抜き出します。

キーVimでの働きChromeの割り当て（Windows/Linux）
Ctrl-wウインドウ操作の前置き。挿入モードでは直前の単語を削除タブを閉じる
Ctrl-n挿入モードのキーワード補完（前方）新しいウインドウ
Ctrl-p挿入モードのキーワード補完（後方）印刷
Ctrl-t挿入モードでインデントを1段深くする新しいタブ
Ctrl-f1画面ぶん先へ送るページ内検索
Ctrl-d半画面ぶん下へ送るブックマークに追加
Ctrl-u半画面ぶん上へ戻すページのソースを表示
Ctrl-oジャンプの履歴を1つ戻るファイルを開く

ブラウザが必ず勝つわけではありません。ページ側で打ち消せるものと、打ち消せないものがあります。VS CodeのWeb版のドキュメントは後者を名指ししていて、Ctrl-nでは新しいウインドウが開いてしまい、Cmd-w（WindowsはCtrl-F4、LinuxはCtrl-w）でタブが閉じる、と書かれています。ブラウザ側の割り当てはこれとは別で、Chromeは Windows と Linux のどちらでもCtrl-wをタブを閉じる操作に当てています。

衝突する数はOSでも変わります。Chromeのショートカット一覧では、macOS向けの表はタブを閉じるのも新しいタブを開くのもCmd側で、Ctrl-wとCtrl-tは載っていません。macOSで書いた手順書がWindowsのメンバーの手元では通らない、ということが起こり得ます。

取り返せる側のキーは、VSCodeVimの2つの項目で調整します。vim.useCtrlKeys（既定で有効）がCtrl系をまとめて拡張機能側へ寄せるスイッチで、vim.handleKeysが個別にVS Codeへ返す指定です。既定値は保存のCtrl-sとundoのCtrl-zだけをVS Codeに渡す形になっていました。

{
  "vim.useCtrlKeys": true,
  "vim.handleKeys": {
    "<C-f>": false,
    "<C-p>": false
  }
}

ブラウザに取られてしまう側は、Vimの操作のほうを別のキーへ移すしかありません。ウインドウ移動をCtrl-wから離す例が次の設定です。前置きに空きキーを1つ立てる考え方はVimのLeaderキーと同じです。空きキーは未割り当てキーの一覧から選べます。

{
  "vim.normalModeKeyBindingsNonRecursive": [
    { "before": ["<space>", "j"], "after": ["<C-w>", "j"] },
    { "before": ["<space>", "k"], "after": ["<C-w>", "k"] }
  ]
}

同じキーの取り合いは、ブラウザの外でも起きています。Vimの:terminalで開いた端末ウインドウではCtrl-wをVimが前置きキーとして横取りするため、シェル側の単語削除に届きません。こちらは'termwinkey'で前置きキーを移せます。ブラウザ、VS Code、Vim、シェルと層が重なるほど、同じキーを何が先に取るかの問題になります。

その他のブラウザベースエディタ

自前でホスティングするcode-server（VS Codeをブラウザ経由で動かすオープンソースプロジェクト）を社内サーバーに立てている場合も、同様にVim拡張機能をインストールするだけで対応できます。VS Code系の拡張機能エコシステムに乗っているサービスであれば、基本的にどこでも同じ手順が通用します。

手順が同じということは、前の節の奪い合いもそのまま付いてくるということです。ブラウザが先に取るキーは、エディタの中でも統合ターミナルの中でも同じように取られます。code-serverのターミナルから本物のVimを起動してもCtrl-wの行き先はブラウザの都合で決まる、という理屈です（この組み合わせは手元では試していません）。

本格的にVimを使いたいなら

クラウドIDEのVimエミュレーションはあくまで「VS Codeの見た目でVimキー操作をする」ものであり、本物のVim scriptプラグインは動きません。もっと本格的な環境が必要な場合は、VPS上にVim/Neovimを立ててSSHで接続するという選択肢のほうが、設定・プラグインをフルに活かせます。

なぜエミュレーションになるのかは、拡張機能のパッケージを開くとはっきりします。デスクトップのVS Codeで本物のNeovimを裏に置けるVSCode Neovimの1.19.0を展開したところ、browserの指定が無く、代わりにOSごとのneovimExecutablePathsという項目が並んでいました。裏で本物のnvimのプロセスを起動する作りです。Web拡張機能では実行ファイルを起動できないと明記されている以上、ブラウザだけのVS Codeには持ち込めません。

VSCodeVimのほうはbrowserを持つ代わりに、Vimの挙動をTypeScriptで書き直しています。マクロやレジスタのように拡張機能の中で完結する機能は再現できても、Vim scriptで書かれたプラグインを読み込む先が無い、という差はここから来ます。

ただしCodespacesのようにコンテナ側で拡張機能を動かせる環境は、話が少し違います。VSCode Neovimのパッケージには、リモート側の拡張ホストで動かせることを示す指定が入っていました。devcontainerにNeovimを入れれば動く余地はありますが、手元でCodespaceを立てていないので言い切れるところまでは確かめていません。

使ってみて

この記事は2019年に書いたもので、今回見直すまで「Cloud9の後継はCodeCatalyst」と書いたままでした。調べ直すと、案内していたCodeCatalystのほうが先に新規受け付けを終えていて、記事のとおりに動いても入り口にたどり着けない状態でした。コマンドの解説と違い、サービス名を出した記事は自分が何も触らなくても古くなります。キーの衝突の話を軸に足したのは、サービスが入れ替わっても残る部分がそこだけだったからです。

まとめ

目安は3つです。ブラウザだけで完結させたいならGitHub Codespacesかvscode.devにVSCodeVimを入れる、AWSのコンソールついでに設定ファイルを直すだけならCloudShellのvimで足りる、自分の.vimrcとプラグインを丸ごと持ち込みたいならVPSにSSHで入る、という順に候補が変わります。ブラウザを使わずに済むならDockerのサンドボックスのほうが本物のVimに近い環境を早く作れます。どれを選んでもCtrl系のキーをブラウザと分け合う点は共通なので、手癖の強いキーは早めに移しておくと後が楽です。

関連記事

← Vim研究所 トップへ戻る