github.devでできるスゴイこと10選

8月29日、dev.toに「GitHub.devでできる10のクールなこと😎」が公開された。

この記事は、最近リリースされたgithub.devで、VSCodeのエコシステムを活用して、より便利にできる例を10個紹介している。

github.dev

github.devとは、ブラウザで起動するVSCodeである。
リポジトリやプルリクエストで . のショートカットキーを押すか、ドメインを"github.com"から "github.dev"に変えることでアクセスできる。

クレジット: github

1. エディタのカスタマイズ

github.devはVSCodeベースなので、キーバインド、カラーテーマ、ファイルアイコン、スニペットなどをカスタマイズできる。
さらに、設定の同期をオンにすれば、VSCode、github.dev、Codespacesで自分のカスタマイズを同期させることができる。

クレジット: @PhilippKief

2. ディープリンクの共有

リポジトリからだけでなく、特定のファイルを見るときにもgithub.devを起動できる。
さらに、現在開いているファイルでテキストを選択してから . を押すと、VSCodeにファイルとテキストの選択状態が維持される。
そして、そのURLをコピーし、他の人に送信することで、全く同じコンテキストを共有することができる。

クレジット: @TylerLeonhardt

3. プルリクエストのレビュー

github.devは、プルリクエストを見るときにも使える。
リッチなマルチファイルビューを使用してプルリクエストのレビューができ、コメントへの返信、変更の提案、さらにはプルリクエストの承認/マージをエディタから直接行うことができる。

クレジット: @TweetsOfSumit

4. 画像と図の編集

VSCodeでは拡張機能を使えば、プロジェクト内のあらゆるタイプのアセットを編集できるようになる。
たとえば、Draw.ioの拡張機能をインストールすると、SVGベースのリッチな図を表示および編集することができる。

クレジット: @hediet_dev

さらにLuna Paintの拡張機能をインストールすれば、画像の編集もできる。

5. コードベース・ウォークスルー

新しいコードベースを学ぶのは大変である。
どこから始めればいいのか、さまざまなファイルやフォルダーがどのように関連しているのか分からないからだ。

github.devで、CodeTourの拡張機能をインストールすることで、コードのガイド付きウォークスルーを作成・再生することができる。
これにより、チームやコミュニティの誰もが、ローカルに何かをインストールすることなく、簡単に学び始めることができる。

デモ: このリポジトリを開き、CodeTourをインストールすると、ツアーを試すことができる。

6. コードスニペット・Gist

GitHub Gistは、コードスニペット、設定ファイル、メモなどを管理、共有する方法だ。
github.devでは、GistPadの拡張機能をインストールして、gistを閲覧・編集することができる。
これにより、複数のリポジトリでコードスニペットを管理することができ、いつでもアクセスできるようになる。

クレジット: @LostInTangent

7. ウェブ・プレイグラウンド+チュートリアル

コーディングプレイグラウンド (CodePen、JSFiddleなど) は、プログラミング言語・ライブラリを学び、共有する人気のある方法である。
github.devでは、CodeSwingの拡張機能をインストールすることで、エディタを利用して、GitHubにファイルを保存しながら、ウェブ・プレイグラウンドの作成を開始することができる。

デモ: このリポジトリを開き、CodeSwingとCodeTourをインストールすると、数秒後にプレイグラウンド環境が表示される。

8. ノートテイキング+ナレッジベース

VSCodeはマークダウンエディタとしても使えるため、個人的なメモ・文書を編集およびプレビューすることができる。
さらに、WikiLensの拡張機能をインストールすることで、Roam/Obsidianのような編集体験を得ることができる。

GitHubに保存されたナレッジベースを維持し、VSCodeの拡張機能・カスタマイズのエコシステムの恩恵を受けることができる。

クレジット: @LostInTangent

9. Jupyter Notebook

コーディングプレイグラウンドに加えて、コードを学び共有するもう一つの一般的な方法は、Jupyter Notebookである。

github.devで.ipynbファイルを開くと、そのノートブックのセルとキャッシュされた出力をすぐに見ることができる。
さらに、Pyodideの拡張機能をインストールすれば、ブラウザ上でPythonコードを実際に実行することができる。

10. 独自の拡張機能を作れる

これまでの項目のほとんどは、誰かが作成して公開した拡張機能によって実現されている。

VSCodeはJavaScript APIを使用して拡張可能なので、VSCodeデスクトップだけでなく、github.devをサポートする独自の拡張機能を作成することができる。

もしGitHubでのコーディングをより生産的で楽しいものにするための素晴らしいアイデアを持っているなら、必要なものはすべて揃っている。ぜひ開発してみよう。

10 Fun Things You Can Do With GitHub.dev 😎 - DEV Community