📝

ブラウザでVSCodeが使えるらしいgithub.devとかGitHub Codespacesを検証してみた

2023/08/29に公開

https://qiita.com/items/7b95c71e78a96ad1af27


お詫び

Qiitaの元記事にて、区切り線を「---」で書いている場所があり、これがZennの記法に干渉して一部うまく表示できない記事がある事を認識しています。
全ての記事を精査しきれていないため、お手数ですがお見かけの際は教えていただけると大変喜びます。


与太話

今さっき難産の講師哲学の話を書いてひと段落した時に、アドカレの記事だけじゃなくて、カレンダー自体の❤️に気付きました、ありがとうございます。
通知になかったんでいつ押してくれたか分からないんですが、率直に嬉しいです!
あんまりこう言うといいね乞食みたいで嫌(少なくとも、私が見る側の立場だった時はそう思ってます)なんですが、書いている側だと「ちゃんと見てるよ」って言った方が良いんじゃないか?と思うこの違いはなんなんでしょうね。
きっと、明日の私がこれ見たら「コイツいいね乞食してんじゃん」って絶対言う。断言します。
なので、今の率直な私の気持ちを書き残しておきます。

いいねくれてありがとう!

もう疲れてんね、でもあと10時間以内(日が変わるまで)にこれ書きあげるよ。
明日の分も書いて余裕作ってゆっくり寝るよ!
じゃないと、何のために今日を休みにしたか分からんです。

アドベントカレンダーの購読 is 何?

いいねボタンは自分では押せない(わかる)ですが、購読する(RSS)ボタンは自分でも押せる(???)みたいですね。
使った事ないんで、これやったらどうなるんだろう?と思って自分のカレンダーを購読してます。つまり購読者の一人は私です。
こういうのにウソは良くないからね、自らゲロっていきますよ!
(単純に、積極的にアクセスを取りに行く気がないとも言います😅)

どうしても気になる、カレンダーページのコレ

俺のカレンダーは俺の一人踊りを披露する場所にしたいので参加者を募集してないんですが、この表示がいつも気になってます。
スクリーンショット 2022-12-15 13.57.42.png

誰も招待しなければ一人しか書いてないわけだし、気にしなくてもいいと思うんですが、この表示を見るたびに「募集してないわい」と突っ込んでます。


以下、本題です。

前提・想定読者

  • Githubアカウントが必要

これだけです。

Q. Github.devとかGitHub Codespacesとは?

A. Githubリポジトリ上で動くVSCode

つまり、VSCodeを使いたくなったらcloneしてcommitしてpushするステップのようになります。
cloneがなくなるので、不要になったら捨てる作業がなくなります。
捨て忘れがなくなると考えるとかなり大きいです。

:::note warn
Github.devはターミナルが使えません。
:::

:::note
Github Codespacesはターミナルも使えます。
:::

GitHub(dev or Codespaces)の利用費用

https://docs.github.com/ja/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces

今後変わりそうなので、本稿で触れるのは控えます。
なお、Github.devは無料です。

使い方

操作 実行方法
Github.dev ブラウザから使いたいリポジトリに移動して[.]キーで起動します。
Github Codespaces いつもcloneなりダウンロードしている緑の「Code」ボタンを押すと、タブが表示されます。それぞれLocalとCodespacesです。

繰り返しですが、ターミナルが使えるかどうかが違いです。

真価を発揮する場合

github.devについては正直大きな価値はないです。位置付けとしては便利な機能の一つぐらいの感覚です。
Codespaces=クラウドコンピューティングのメリットがそのまま使えます。
いわゆるAWSやらGCPなどと同じカテゴリです。ストレージはGithubなので、作ったファイルはGithubに格納する事ができます。
ただし、gitで管理しているので終了前にcommit-pushは忘れずに。

せっかくgithubでVSCodeを使うのなら、1画面で全部やりたい

何が言いたいかというと、VSCodeだけでGithubのリポジトリの機能を全部使おうというお話です。

GitHub Pull Requests and Issues

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

github.devデフォルトで入ってますが、ローカルでも適用できます。
プルリクとIssueが見れます。

GitHub Repositories

https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub

これもデフォルトで入ってます。
別のリポジトリにVSCodeから切り替えができるのが非常に便利です。

GitHub Actions

https://marketplace.visualstudio.com/items?itemName=cschleiden.vscode-github-actions

公式ではないですが、CIガンガンに回している場合は結果も見れて快適です。

GistPad

https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs

こちらも公式ではないですが、gistを活用している方に重宝します。
この拡張を入れる事で、リポジトリを横断してメモを共有する事ができるというgistの新しい使い方が見出せます。

使えない機能

以下を閲覧(参照)できません。

  • Wiki
  • Project
  • Discussion
  • Pages

WikiについてはVSCodeではなく、Githubでやりようはあるんですが、編集ができません。
厳密に言えば、編集はできますが編集内容が本来のWikiに反映されないため、こちらにも専用のCIを作る必要があります。

たとえば、以下のようなイメージです。

  1. 元リポジトリ.wiki.gitを通常リポジトリにforce push
  2. force pushしたリポジトリ(Wikiの内容)を編集して保存
  3. pushをトリガーにして元リポジトリ.wiki.gitにforce push

このやり方で実施する場合は、github.devではできない(force pushができない)ため、ターミナル(ここではCodespaces)からforce pushを実行する必要があるんですね。
ファイリングするだけならwikiを使うよりwikiディレクトリを作って、以下に格納しておけば良いわけですが、従来のWikiのような感覚でブラウジングしていく際には非常に見えにくいです。
もしwikiを充実させたい場合は、現行のGithubWebエディターを使った方がいいかもしれません。

次の記事

GitHubで編集を提案

Discussion