Visual Studio Codespacesを使って、ブラウザだけでPythonでサクッとハロワ!

こんにちは、サイオステクノロジー武井です。今回は、マイクロソフトが実施した開発者向け大型テックカンファレンス「Build 2020」で発表されたVisual Studio Codespacesを使って、Pythonでハロワしてみました。

Visual Studio Codespacesってなに?

ざっくりいってしまうと、ブラウザで動くVisual Studio Codeです。旧名称は、Visual Studio Onlineです。これが、すごいんです。まんま、Visual Studio Codeです。ちなみにVisual Studio Codeについては、「 Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット」を参照頂けますと幸いです。

で、まんま、Visual Studio Codeなんです。GitHubとの連携もできますし、各種プラグインもインストールできますし、なんとdevcontainer(上記のリンクで紹介したRemote Development + Dockerで作る開発環境)もできるのです!!これはもうやるしかない(^o^)

いくらくらいかかるの?

Visual Studio Codespacesは動作している時間だけ課金される従量課金制です。Virtual Machineのようなイメージです。スペックに応じて、Basic、Standard、Premiumがあります。そして、アクティブとスタンバイという両方の状態があり、使っているときにはアクティブという状態になり課金の対象になります。使っていないときにはスタンバイという状態にしておけば、その間は課金はされません。ただし、ストレージについては、常時費用がかかり、2020年6月10日現在で¥0.9820/時間 かかります。

では、コストをシミュレーションしてみたいと思います。働き方改革にならい、1日7時間使った場合の一ヶ月分のコストを考えてみます。通常の利用では、よほどビルドにスペックが必要でない限り、Basic(2 コア、4 GB RAM、64 GB SSD)で十分かと思いますので、Basicを想定します。リージョンは米国西部とします(2020年6月10日現在で日本リージョンがない(ToT))。

アクティブな時間の料金(1日7時間)
約1,990円(¥9.476/時間 ✕ 7時間 ✕ 30日)
ストレージの利用料

約707円(¥0.9820/時間 ✕ 24時間 ✕ 30日)

合計
2,697円

 

うん、個人利用でもお小遣いの範囲内でなんとかなる金額かと思います。

料金についての詳細は以下のURLをごらんください。

https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-online/

セットアップ

ご利用にはAzureのサブスクリプションとアカウントが必要になりますので、事前にご用意下さい。

まず、以下のURLにアクセスして、「開始する」をクリックします。

https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/

 

「Sign in」をクリックします。マイクロソフトアカウントによるサインイン画面が出てきますので、サインインします。

 

「Create Codespace」をクリックします。

 

Azureサブスクリプションとリージョンを選択して「Create」をクリックします。2020年6月9日現在、日本リージョンはまだないようです。

 

Visual Studio Codespacesは「Codespace」という単位で管理します。Codespaceはちょうど、PC上で起動したVisual Studio Codeのアプリそのものに相当すると思って頂ければと思います。もちろん複数のCodespaceを作ることも可能です。

上図の入力項目の詳細になります。

Codespace Name Codespaceを一意に識別する名称入力します。
Git Repository

Gitのリポジトリ名を入力します。ここで定義したGitリポジトリに基づいてプロジェクトが出来上がります。Gitのリポジトリは特に入力しなくても使えますが、この後お話するdevcontainerやる場合には必須です。サポートしているリポジトリはGitHubのみのようで、書式は以下のとおりです。

■ owner/repo

GitHubのリポジトリのURLがhttps://github.com/noriyukitakei/vscodespacesだとすると、noriyukitakei/vscodespacesという書式になります。

■ https://github.com/owner/repo/tree/name

特定のブランチをCheckoutするための書式です。https://github.com/noriyukitakei/vscodespacesというGitHubリポジトリのdevelopブランチをCheckoutしたい場合は以下になります。

https://github.com/noriyukitakei/vscodespaces/tree/develop

■ https://github.com/owner/repo/commit/ID

特定のCommit IDからCheckoutすることができます。先のリポジトリの例だと、以下のようになります(XXXXはCommit IDです)。

https://github.com/noriyukitakei/vscodespaces/commit/XXXX

Instance Type Codespacesが動作するインスタンスタイプを選択します。ビルドにパワーが必要のときにはスペックの高いインスタンスを選択するとよいですが、その分料金がかさみます。
Suspend idle Codespace after… 指定した時間経過するとサスペンドになります。サスペンドしている間は通常の料金より安い課金で済みます。

先程の画面で、Git Repository名を入力して、「Auth & Create」をクリックすると、GitHubの認証画面が表示されます。UsernameやPasswordなど必要な認証情報を入力します。Git Repository名を入力しないと、以下の画面はスキップされます。

 

しばらくすると、以下のような画面が表示されます。

 

どうですか?見た目、まんま、Visual Studio Codeですよね。見た目だけじゃないんです。中身もほぼVisual Studio Codeです。すごいヮ(゚д゚)ォ!

Pythonでハロワ

では、Pythonでハロワしてみましょう。Pythonを実行したりデバッグしたりするための拡張プラグインをインストールします。画面左部の四角が4つ並んでいるアイコンをクリックして表示されるテキストボックスに「ms-python.python」と入力します。そして、画面右部に表示される「Install」ボタンをクリックします。

 

「Reload Required」をクリックすれば、拡張プラグインのインストールは完了です。

 

画面左上の波平のおでこみたいなのをクリックして、「File」→「New File」の順にクリックします。

 

以下の内容を入力します。

 

画面左上の波平のおでこみたいなのをクリックして、「File」→「Save As…」の順にクリックします。

 

下図のように「/home/vsonline/workspace/hello.py」と入力して「OK」をクリックします。

 

ではデバッグしてみましょう。先程書いたコードの1行目にブレークポイントを打ちます。行番号1のちょっと左側をクリックすると赤いマークが付きます。

 

画面左部の虫みたいなアイコンをクリックします。そして「Run and Debug」をクリックします。

 

「Python File」をクリックします。

 

すると、ブレークポイントを打ったところで実行が止まってますね!!デバッグできましたー!!

 

ステップオーバーのボタン()をクリックすると、次の行へ飛びます。

 

画面右下のターミナルに「hello world」って表示されます。

 

簡単だったでしょ。

まとめ

ブラウザだけでここまでできてしまうなんて、もうすぐそこに未来は来ています。みんなで一緒に使おう、Visual Codespaces!!No Visual Codespaces, No Life!!





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

1人がこの投稿は役に立ったと言っています。

コメント投稿

メールアドレスは表示されません。


*