みなさんこんにちは、FascodeNetworkのブログスケジュール管理などを行っているなおこです。
今回は、Visual Studio Code略してVSCodeのブラウザ版がリリースされたということなのでレビューしていきたいと思います。
Visual Studio Code（VSCode）とは
そもそもVisual Studio Codeを知らないという方もいそうなのでざっくりと解説していきたいと思います。
Visual Studio Codeは一度はみなさんが使ったことのあるWindowsを開発しているMicrosoftが開発したクロスプラットホームのテキストエディタです。
テキストエディタ言ってもメモ帳のようなものではなくプログラムをかくのに特化したテキストエディタです。
詳しく知りたい方はWikiを見たほうがわかりやすいと思われる
ブラウザ版のVisual Studio Codeとは
ブラウザ版のVisual Studio Codeは2021年10月20日にVisual Studio Codeの公式ブログで発表されました。
File System Access API を用いてローカルファイルにアクセスしてファイルの読み書きが可能、GitHubとの連携機能を使うことでかんたんにGitHubのファイルを編集できたり、Microsoftが開発しているLive Shareという複数人でリアルタイム編集できる拡張機能も使用できる。
まだまだ対応していない拡張機能もありますが、外出先でvscodeを入れていない端末などを使っていてちょこっとソースコードを編集したりするのが容易になったというのはありがたいですね。
ブラウザ版を実際に使ってみる
ブラウザ版のVisual Studio Codeを使うのは非常にかんたんです。
ブラウザを開き、https://vscode.dev にアクセスするだけで使用できます。
右側にある初期設定のところでGitHubと連携させとくことをおすすめする。
サイトにアクセスし連携ができたら、自分が普段使っている拡張機能を入れてみる。
拡張機能は左の□が4くっついたようなアイコンのやつをクリックすると拡張機能を管理するページに飛べる。
拡張機能のページに移動したら検索バーから入れたい拡張機能を検索します。
検索すると⚠マークのやつとinstallボタンのやつが出てきますが、⚠マークのやつはブラウザ版では導入することができません。
installボタンをクリックすればあっさりとインストールできる。
今回は以前、mklinux419さんがレビューしていたインデントレインボーを導入したいと思います。
インデントレインボーについてはmklinux419さんのブログをご覧ください。
次にローカルのファイルを編集してみます。
OpenFileやOpenFolderをクリックしてフォルダやファイルを選択し、表示されたポップアップのファイルを表示をクリックします。システムファイルが存在するディレクトリとかじゃなければあっさり表示することができます。
試しにhtmlファイルの雛形を多少いじってて気づいたのがファイルの編集などは自動で保存される。ある意味コレはありがたいかもしれない。ソフトの方は保存する際に一々ショートカットキーやファイルから保存する必要があるけどブラウザ版は自動で保存されるため一々ショートカットキーを押さなくてよいのは良い。
GitHubのリポジトリにあるファイルを編集してみる。
Open Repositoryをクリックするとクリップボードへの許可が求められるので許可します。
次にリポジトリとpullリクエストどちらを開くか選択する画面が表示されるので今回はリポジトリを選択。
AllowをクリックしてGitHubへのアクセスについての許可します。
GitHubの連携に関するウィンドウが表示されたらメールアドレスやパスワード、2段階認証などを入力後Contiunueをクリックして連携を行います。
連携が完了したらOpenRepositoryをクリックして任意のリポジトリを検索し開けばローカルファイルをいじるときとほぼほぼ変わりなくファイル編集もできる。リポジトリをクローンしたりする手間なく外出先で編集しやすくなったのは本当にありがたい。
既存の開発環境と同期してみる
メインの開発環境のVSCodeと同期してみました。
左側のアイコンからMicrosoft アカウント、もしくはGitHubアカウントにログインします。
約3秒ほどでいつもの拡張機能やテーマがインストールされ、使えるようになりました。
（当然、ウェブ版で対応していない拡張機能はインストールされません。）
ブラウザ版のメリット、デメリットは？
1週間ほど使ってみて2021/11/02時点で感じた個人的メリットやデメリットをリストにまとめました、2021/11/02時点の話なので今後のアップデートで改善されるかもしれません。
メリット
- GitHubのソースコードを容易にいじることができる。
- 最低限必要な拡張機能が対応している。
- ローカルファイルの読み書きができる。
- ローカルファイルの編集は自動保存がされる。
- AndroidタブレットやiPad、ChromeOSなどでもVSCodeが使用できる
- VSCodeテーマをプレビューできる。
デメリット
- 一部の拡張機能が対応していない
- ターミナル機能がない
最後に
VSCodeのブラウザ版についてレビューしてみました。
何度も言うけど外出先で、かんたんにソースコードがいじれるし普段使ってる拡張機能も使えるしアンドロイドタブレットでも作業できるようになったのは良い。
ということでブラウザ版VSCode最高って話でした。それではそれでは次のブログでお会いしましょう。
The post VSCodeのブラウザ版を試してみた。GitHub、ChromeOS使いにおすすめ first appeared on FascodeNetwork Blog.