特集
Visual Studio Codeのブラウザ版は何ができて何ができないのか?
2021年11月16日 06:50
PC Watchの読者なら、Visual Studio Codeというエディタをご存じの方は少なくないかと思う。Microsoftは長らくVisual Studioと呼ばれるIDE(統合開発環境)を提供してきていた。最新版はVisual Studio 2022(以下VS2022)で、11月9日に一般公開された。以前は有償版しか存在しなかったのだが、2005年に無償版(ただし機能に限りがあり、また用途も限られる)のVisual Studio ExpressというEditionが追加。現在ではVisual Studio Community Editionとして提供されている(これも当然無償)。
Visual Studioはプログラムの開発を目的としたものであるが、ここからエディタ部だけを抜き出して、やはり無償提供されているのがVisual Studio Code(以下VS Code)である。何が違うのかというと、画面を見ていただくのが早いかと思う。
写真1は自作のプログラムをVS 2022で表示させたもの、写真2は同じプログラムをVS Codeで表示させたものだ。VS 2022は開発ツールだから、このからそのままプログラムのビルドとか実行/デバッグまで可能だし、開発にあたってのコード類の関係性の表示なども可能である。ただし、その分起動には時間が掛かるし、処理もちょっと重い事が多い。そのため、プログラムを書いたりデバッグしたりする場合には利用するが、ソースコードを眺めるだけ(例えばサンプルプログラム一式をダウンロードして、中身を確認するとか)の場合にはちょっと面倒である。こうした場合にはVS Codeの方が軽くて便利である。
加えて言えば、VS CodeはVisual Studio由来という事もあって、「フォルダを開く」のがデフォルト動作である。要するにファイルの入っているフォルダを指定すれば、そのフォルダにある全ファイルを一気に参照ができる。これは一般にプログラムを作る場合、関連するソースファイルやヘッダファイルなどを1つのフォルダにまとめて格納するためという事情があり、そのため同一フォルダ内の複数のファイルを、Tabで切り替えたり、場合によっては並べて表示しながら見比べる場合などに動作が非常にスムーズであり、もともとVisual Studioでプログラムを書いていた筆者には非常に便利である。
「それだけかい!」とか言われそうだが、個人ではGitHubも使っていないし、最近の開発言語にも疎い(いまだにメインはC言語)ので、VS2022とかVS Codeの豊富な機能は正直持て余している感もなくはないのだが、こういう使い方をしているのが筆者だけというわけでもないだろう。
余談ながらVS Codeは拡張機能の形で色々な事が可能である。先にVS CodeはVisual Studioからエディタ部分を抜き出したと書いたが、ここに拡張機能の形でコンパイラやデバッガを組み入れてIDEにする事もできる。例えばArduinoなら、拡張機能の検索で"Arduino"を検索すると、トップにMicrosoft謹製の"Arduino for Visual Studio Code"が出てきて、これを入れるとArduino IDEと連動ができるようになる(写真3)。
あるいは標準でも画像ファイル表示用プラグインは搭載されているが、機能拡張を利用するとExcelとかPDFなども開けるようになる。複数の資料などを見ながら原稿を確認する事もできて便利である(写真4)。筆者は使ってないが、Pythonのインタプリタを組み込むこともできるそうだ。最近だとWebデザイナーやWebプログラマの方も随分VS Codeに拡張機能を組み込んで使っていると聞く。
もっともプログラムを書いたり参照したりするのに便利なVS Codeでも、原稿を書くのに便利か? と言われるとちょっと怪しいところがある。筆者の場合で言えば、秀丸をもうずいぶん長い事愛用しているが、マクロを使ってのサウンドレコーダー制御(テープ起こし用)とか、改行コードに拠らない行番号とか、文字数カウントツールのカスタマイズなど、色々な面で秀丸の方が便利だったりする。まぁこれは個人の好みの範疇なので、中にはVS Codeで原稿を書く人もいるだろう(VS Codeのアウトライン機能は便利だと思うが、これは秀丸にもあるので甲乙つけがたい)。
さて、ここまではいつものごとく長い枕。10月20日にこのVS Codeのブラウザ版であるVisual Code for Web(以下VS Code for Web)がリリースされた。これについて簡単にVS Codeとの違いをご紹介したいと思う。
使い勝手というか使い方で言えば、実はものすごく楽で、サイトにアクセスすると、いきなりこの画面(写真5)である。Webブラウザで動いている、という点を除けば見た目は全く変わらない。強いて違いを言えば、VS Codeは標準でメニューバーが表示されている(消すこともできる)が、VS Code for Webはメニューバー表示機能がないあたりだろうか。
ちなみに、Gitと連動させるとかの場合にはもちろんアカウントの設定が必要だが、VS Code for Webを単体で使う分にはログインも何も必要なく、そのまま利用できる。メッセージの日本語化などはされておらず、全て英語になっているが、VS Codeを使う人であれば、これは大きな問題にはならないだろう。
実際にファイルを開いてみると、VS Codeそのものといった感じで、特に使い勝手も変わらない(写真6)。メニューが日本語化されてないので、ひょっとして日本語エンコードには未対応かと思ったのだが、こちらは問題なくサポートされており、標準的な拡張機能(JPEGの表示など)も問題なかった(写真7)。
ではVS Code Webは普通に使えるかというと、やはりVS Codeに比べると色々不便なことはある。具体的には以下の6つを挙げる。
(1)一部ブラウザではフォルダを開けない
EdgeとChromeに関しては、File System APIが利用できるので、フォルダのブラウズが可能である。写真7で左端にブラウズ画面が出ているのがお分かりいただけよう。ただFireFoxでは未対応な結果、"Open Folder"を選ぶとこんな感じで拒否されてしまう(写真8)。
(2)未対応の機能拡張が少なくない
例えば、VS Codeの機能拡張で"PDF"を検索すると、VS Code向けには多数の機能拡張がヒットする(写真9)が、VS Code for Webで同じことをすると、ほとんどの機能拡張が未対応となる(写真10)。そのため、機能拡張で環境を拡張してVS Codeを使っている場合、現時点では結構制約が多い。
Microsoftによれば、プラグインはブラウザの提供するSandbox上での動作となる関係で、テーマの変更とかスニペット、文法チェックなどの機能拡張であればVS code用のものがそのまま変更なしに動くが、それ以外のものはサンドボックスでの動作に向けて改変する必要があるとされている。
既にMicrosoftは機能拡張の作者向けにWeb対応のガイドを提示しているが、一読する限りは一部の処理はNative(つまりVS Code向け)とWeb(つまりVS Code for Web)で処理を分ける必要がありそうだ。
(3)動作がややもっさり
例えばファイルブラウザなどが一番判りやすいが、ファイルを選んでから実際にそれが反映されるまでの時間がVS CodeとVS Code for Webでは明らかに異なる。VS Code for Webでは「一拍置いて反映」という感じになるからだ。IntelliSenseの反応も、かなり高速とは言えVS Codeよりやや遅いように感じる。
(4)IntelliSenseの対応が少ない
IntelliSenseはユーザーの入力に合わせて候補を示してくれるもので、例えば今"Pathist = (TCHAR*)calloc"まで打つと、これに相当する関数その他のリストを出してくれる(写真11)し、その後に"()"を付けて関数であることを示すと、calloc()の関数仕様を示してくれる(写真12)。
ところがVS Code for Webだと候補そのものが少ない(写真13)し、関数定義も出してくれない。そもそもVS Codeだと関数にマウスを合わせるだけでIntellisenseがフローティングで関数仕様を表示してくれるが(写真14)、この機能はVS Code for Webにはない。
(5)Webブラウザの機能とぶつかる場合がある
VS Codeのいくつかのキーバインド(例えばCtrl+N)は、Webブラウザで既にそのキーバインドが使われているとこちらに取られてしまうので、VS Code for Webでは動作しない。またVS Code for Webで複数Tabを開く際に、いちいちクリップボードのアクセスの許可を求めてくる事もあり、ちょっと煩わしい。
(6)Terminalが開けない
VS Codeの場合、"ターミナルを開く"でコマンドコンソールを開き、ここでシェルを動かして作業をし、その結果をテキストにコピーするといった作業が簡単にできる(写真15)が、VS code for Webはこれが丸ごと落ちている。
VS Codeが使えない環境でのお供に
いずれも致命的な問題という訳ではないが、本格的に使い込んでいこうとすると引っかかる場合が多いだろう。
ではVS Code for Webは役立たずかというと、そんなことはないだろう。もちろん既に手元のマシンにVS Codeがインストールしてあるのであれば、あえてVS Code for Webを使う必要はない。しかし、Chromebookのように、そもそもVS Codeをインストールできないような環境でVS Codeの機能を使えるのは素晴らしい。
筆者の経験で言えば、例えばこの記事を書いた時にターゲットマシン上でスクリプトの書き換えなど色々作業があり、この時はemacsを起動して作業したが、これはマシンがパワフルだからこその話で、Raspberry Piクラスになるとemacsはちょっと重い。
そんな場合、VS Code for Webだと比較的軽量で、しかもWebブラウザさえあればインストールなしで利用できる。今後こうした作業が必要な機会が出てきたら、次は多分VS Code for Webを使うだろう。なんでもかんでもこれで解決するわけではないが、ブラウザを使える(&オンラインの)環境があれば、軽量なコードエディタの候補の1つとして覚えておくのは悪くないだろう。