GitHub オンラインエディタ

起動方法は非常に簡単で、GitHubのリポジトリページでドット(.) を入力するだけで起動します。

初回起動は10秒程時間がかかりましたが、2回目以降はコードを編集できるようになるまで数秒間しかかかりません。

エディター起動後は基本的にVS Codeと同様の利用方法ができます。

GitHubとは
  • ソースコードホスティングサービス
  • この種のサービスで最大規模
起動しコメントを追加した状態 
差分表示ももちろん可能

しかし残念ながらこれはあくまでもエディターであるため、コードの実行を行うことは出来ません。

仮想マシンでコード実行できる Codespaces

Today, GitHub is making Codespaces available to Team and Enterprise Cloud plans on github.com

https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/

また同日、GitHubはオンライン開発環境であるCodeSpacesを企業向けにリリースしました。

GitHub’s Engineering Team has moved to Codespaces | The GitHub Blog
Over the past months, we’ve left our macOS model behind and moved to Codespaces for the majority of GitHub.com development.

これは先程のエディターとは異なり、仮想マシンを利用することが出来る有料サービスです。

https://github.com/features/codespaces

マシンは2コア/4GBメモリが1時間あたり18セント(20円)から利用することが可能です。

また最大で32コア/64GBメモリ構成も利用することもできるため、ほとんどのプロジェクトに対応することができます。

またblog記事の中で GitHub自身もこの codespacesを利用して開発を行われていると記載されています。

ん?どこかで見たような・・

実はかなり前からVS Code表示にしてくれるサービスがありました。

GitHub - conwnet/github1s: One second to read GitHub code with VS Code.
One second to read GitHub code with VS Code. Contribute to conwnet/github1s development by creating an account on GitHub.

まとめ

ドットを押せば起動
自分のリポジトリでなくてもエディターが起動しますので、単にVScodeと同じように表示することが可能です。
あくまでもエディター
編集ツールであるため、残念ながら実行することは出来ません。実行にはCodespacesなどの手段があります。

エディターとしてマークダウン編集できたりと便利ですね〜

他には用途に特化したStackBlitzのようなブラウザ側メインの開発環境もあります。

オンライン開発環境とWebAssembly
オンライン開発環境を提供しているStackBlitzをひとつの例として利用が増えているWebAssemblyが使われている場面を紹介します。

References

  1. GitHub’s Engineering Team has moved to Codespaces https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/
  2. GitHub Codespaces https://github.com/features/codespaces