意外と知らない、GitHub Codespacesでできる10のこと!
Published at February 28, 2023
Category: Engineering,Product,Codespaces
Author: Rizel Scarlett
Summary
GitHub Codespacesは、仮想マシン上に強力な統合開発環境(IDE)を提供し、性能の低いマシンを持つ開発者がローカルリソースを消耗せずにコーディングできるようにし、AI画像の生成など様々なタスクに利用することが可能です。
飛行中の飛行機でコーディングしているような気分になったことはありませんか?私が初めてコードを学んだ5年ほど前、私のノートパソコンは苦痛を感じるほど遅かったのですが、もっと良いものを買う余裕はありませんでした。そのため、私はコードを実行するためにjsbin.comのようなブラウザベースの IDE に頼っていました。
GitHub Codespaces は、仮想マシン上で本格的なブラウザベースの統合開発環境 (IDE) を提供します。つまり、ローカルマシンのリソースを消費することなく、コードを書くことができるのです。クラウドパワーによる開発は、マシン性能の低いユーザーにとっては画期的なことですが、GitHub Codespacesの多機能性についてはまだほんの少ししか触れていないのが現状です。
このブログでは、GitHub Codespacesを最大限に活用するための方法をいくつか紹介します。
AI画像の生成
GitHub CodespacesでStable Diffusionを実行することができます。DALL-EやMidjourneyのように、Stable Diffusionはディープラーニングを使ってテキストをアートに変換する数多くの機械学習モデルの1つです。
Stable Diffusionは、以下の手順でテキストをアートに変換します。
- AIが画像を受け取る
- AIは、画像が全く認識できなくなるまで、画像にノイズを加える。(ノイズは、ピクセル化されたドットの別の言い方です)。
- AIがノイズを除去し、クリアで高品質な画像を生成する
- AIは「LAION-Aesthetics」と呼ばれるデータベースから学習する。このデータベースには画像とテキストのペアがあり、テキストを画像に変換するための学習を行っています。
このプロセス全体は、リソースを大量に消費します専門家は、Stable Diffusionのようなデータの多いタスクを実行するには、強力なグラフィック・プロセッシング・ユニット(GPU)を搭載したコンピュータを使用することを推奨しています。しかし、誰もがそのような計算能力を持つコンピューターを持っているわけではないので(私も含めて)、私は代わりにGitHub Codespacesを使用しています。
コードスペースは仮想マシン上でホストされるので、マシンの種類を2コアから32コアまで設定することができます。より強力なマシンが必要な場合は、GPUを搭載したコードスペースへのアクセスをリクエストすることができます。つまり、機械学習エンジニアがiPadやChromebookを使って、GitHub Codespaces経由でデータ量の多い深層学習の計算を行うことができるのです。
私がどのようにコードスペース内でアートを生成したかについては、私のDEV投稿とリポジトリをチェックしてみてください。
以下では、GitHub Codespacesで生成したコードとAI画像をご覧いただけます。
from torch import autocast
画像のプロンプトをここで変更しましょう
prompt = “綿菓子の髪とピンクのドレスを着た漫画の黒人の女の子が、綿菓子の雲があるピンクの空の前に立っている”
with autocast(device):
image = pipe(prompt, height=768, width=768).images[0].
イメージ
GitHub のコード空間をコマンドラインから管理する
2000年代には、うっかりドキュメントを閉じてしまったり、コンピュータが突然シャットダウンしてしまったりして、せっかく作った作品が永遠に失われてしまうことがありました。幸いなことに、今は2023年、GitHub Codespacesを含め、多くのエディターがそのような事態を防いでくれています。コードスペースを閉じれば、たとえ変更をコミットし忘れたとしても作業内容が保存されます。
しかし、コードをリポジトリにプッシュしたからといって、コードスペースが終了したのであれば、遠慮なく削除してしまってかまいません。GitHub のコードスペース管理は、次のような理由から重要です。
- GitHub Codespace がたくさんあって混乱して、誤って間違ったものを削除してしまわないように。
- デフォルトでは、アクティブでないGitHub Codespacesは30日ごとに自動的に削除されます。
GitHub CodespacesはGitHub UIまたはGitHub CLIで管理することができます。GitHub CLIでは、以下のようなことができます。
コードスペースの作成
gh codespace create -r OWNER/REPO_NAME [-b BRANCH] (コードスペースの作成)
自分のコードスペースをすべてリストアップする
gh コードスペースの一覧
コードスペースを削除する
gh コードスペースの削除 -c CODESPACE-NAME
コードスペースの名前を変更する
gh コードスペース編集 -c CODESPACE-NAME -d DISPLAY-NAME
コードスペースのマシンタイプを変更
gh コード空間の編集 -m MACHINE-TYPE-NAME
GitHub コードスペースを CLI で管理する方法については、これですべてを網羅したわけではありません。コマンドラインからコードスペースを管理する方法については、こちらで詳しく説明しています。
チームメイトとのペアプログラミング
リモートで作業しているときのペアプログラミングは、なかなか難しいものです。チームメイトの隣に座っていないと、画面やコードを共有するのが難しくなります。しかし、それがうまくいけば、双方のコミュニケーションと技術的なスキルの向上につながるので、価値があるのです。Live Share エクステンションをインストールしてポートを転送すれば、GitHub Codespaces でのリモートペアプログラミングをより簡単に行えるようになります。
転送したポートの共有
ローカルでホストしているウェブアプリの URL を共有し、チームメイトや共同作業者がそれを使えるようにすることができます。共有したいポートを右クリックすると、ポートの可視性を "Private" から "Public" に切り替えるオプションが表示されます。ローカルアドレスの値をコピーして必要な共同作業者に共有すれば、あなたとは別の部屋にいてもローカルでホストされているウェブアプリを閲覧したりテストやデバッグをしたりすることができるようになります。
ライブシェア
Live Shareエクステンションを使えば、あなたとあなたのチームメイトが同時に同じプロジェクトに入力することができます。チームメイトのカーソルとあなたのカーソルがハイライトされるので、誰がタイピングしているのかを簡単に識別することができます。
AIとのペアプログラム
Visual Studio Codeのマーケットプレイスでは、GitHubCopilotをはじめ、GitHub Codespacesと互換性のあるさまざまな拡張機能が提供されています。コードを書きながらアイデアを交換したいけれど、周りに誰もいないという場合は、GitHub Copilotという拡張機能をインストールして、AIとペアプログラミングをしてみてはいかがでしょうか。GitHub CopilotはAIを搭載したコード補完ツールで、コードスニペットを提案したり、コードを補完したりして、より速くコードを書くことを支援します。
コード補完による生産性向上だけでなく、GitHub Copilotは様々なバックグラウンドを持つ開発者に力を与えてくれます。私のお気に入りのGitHub Copilotツールの1つは、ハンズフリーで音声起動するAIプログラマーの「Hey, GitHub」です。以下のビデオで、"Hey, GitHub "が手先が不自由な人や視覚障害者の開発者体験をどのように向上させるかをご覧ください。
GitHub Copilotのその他の使用例については、こちらをご覧ください。
コーディングを教える
ブートキャンプ、教室、ミートアップ、カンファレンスなどを通じてコーディングについて教育する中で、私は、人々にコードを教えることは難しいということを学びました。ワークショップでは、参加者がフォローできるように環境を整えることにほとんどの時間を費やしてしまうこともあります。しかし、GitHub Codespacesでコーディングを教えたり、ワークショップを運営したりすることは、参加者全員にとってより良い経験を生み出します。初心者の開発者に、テンプレートを使って作業するためにリポジトリをクローンする方法を理解することを期待するのではなく、コードスペースを開いて、設定した開発環境で作業することができるのです。これで、誰もがあなたと同じ環境を持っていて、簡単にフォローできるという安心感を得ることができます。これにより、多くの時間、ストレス、混乱が軽減されます。
GitHub Codespaces を教師や学生にとってより利用しやすくするために、180時間の無料利用(50人のクラスで月5回分の課題に相当)を提供しました。GitHub Codespacesの設定と、CodeTourなどの拡張機能を活用したセルフガイドのワークショップの運営に関するチュートリアルをご覧ください。
ハーバード大学最大のクラスであるCS50が、どのようにGitHub Codespacesを使って学生にコードを教えているのか、ご覧ください。
新しいフレームワークを学ぶ
コードを学ぶとき、チュートリアルを追うことに時間をかけすぎてしまいがちです。チュートリアルの消費とプロジェクトの構築のバランスをとることで、学習はより効果的になることが多いのです。GitHub Codespaces のクイックスタート・テンプレートは、フレームワークを学ぶための迅速かつ効率的な方法です。
クイックスタートテンプレートには、Next.js, React.js, Django, Express, Ruby on Rails, Preact, Flask, Jupyter Notebookといった最も一般的なアプリケーションフレームワークの定型コード、転送ポート、設定済み開発コンテナなどが含まれています。テンプレートは、開発者に、コードスペースでアプリケーションを構築、テスト、デバッグするためのサンドボックスを提供します。ワンクリックでテンプレートを開き、新しいフレームワークで実験することができます。
コードスペースでフレームワークを試すことで、開発者はフレームワークの構造と機能をよりよく理解し、よりよい定着と習得につなげることができます。たとえば、私は Jupyter Notebook にはなじみがありませんが、GitHub Codespaces の Jupyter Notebook テンプレートを使ったことがあります。この定型文のおかげで、Jupyter Notebookの構造を実験し、よりよく理解することができました。このテンプレートを使って、小さなプロジェクトも作りました。
このブログ記事と テンプレートは、GitHub Codespacesを使って、開発者がReactの最初の行を書くのをガイドするもので、チェックしてみてください。
環境変数の保存
過去に何度か、環境変数を誤って共有したり誤操作したりしたことがありました。ここでは、私が環境変数を誤って扱ってしまった、ぞっとするような瞬間をいくつか紹介します。
- ライブデモで聴衆に見せてしまった。
- 環境変数をGitHubにアップロードしてしまった。
- チームメイトと値を共有する良い方法が見つからなかった。
このような事態を避けるために、GitHub の Codespaces シークレットを使うことができました。GitHub Codespaces の secret には、API Key や環境変数、秘密の認証情報などを GitHub Codespaces ごとに保存しておくことができます。
GitHub Codespaces secret に保存した後は、コード内でprocess.env.{SUPER_SECRET_API_KEY}
のように環境変数を参照することができるようになります。
GitHub Codespaces で環境変数を安全に保存する方法については、こちらのチュートリアルを参照ください。
開発者をより早く取り込む

一般に、ソフトウェアエンジニアはチームに参加したときに自分のローカル環境をセットアップする責任があります。ローカル環境のセットアップには、ドキュメントの質にもよりますが一日から一週間かかることもあります。幸いなことに、組織は GitHub Codespaces を使ってカスタム環境を設定し、オンボーディングプロセスを自動化することができます。新しいエンジニアがチームに参加する際、コードスペースを開くと、必要な拡張機能、依存関係、環境変数がコードスペース内に存在するため、ローカル環境のセットアップを省略することができるのです。
2021年、GitHubエンジニアリングチームは、GitHub.comの開発において、macOSモデルからGitHubコードスペースに 移行しました。14年以上経過し、私たちのリポジトリはディスク上に約13GBを蓄積していました。リポジトリのクローン、依存関係のセットアップ、ブートストラップに約45分かかりました。GitHub Codespacesに完全に移行した後は、事前に設定された信頼性の高いコードスペースでGitHub.comを起動するのに10秒しかかかりません。
しかし、私たちの言葉を鵜呑みにする必要はありません。通信会社TELUSの情報サービス担当マネージャーであるKetan Shah氏は、「GitHubは新入社員のオンボーディングプロセスを丸々一日短縮してくれるんだ」と証言しています。新しい開発者は、すべてが一カ所に集まっているため、数分で作業を開始することができます」。
GitHub Codespacesによる開発者の迅速なオンボーディングについて、詳しくはこちらをご覧ください。
- TELUS社によるGitHub Codespacesの活用方法
- Elanco社によるGitHub Codespacesの利用方法
- GitHub Codespace を使って、開発コンテナでポジティブなオンボーディング体験を構成する方法
技術面接の実施
持ち帰りのプロジェクトやテクニカルスクリーン、ライブコーディングは、ソフトウェア開発者にとって苦痛でありながらも必要な面接体験の一部となります。候補者にきちんと設定された信頼性の高い環境を提供することで、面接官は不安を軽減し、パフォーマンスを向上させることができるのです。GitHub Codespacesを使えば、候補者はもう環境のセットアップを心配する必要はありません。面接官はGitHub Codespacesを使ってリアルタイムにフィードバックを行い、Visual Studio Code Live Shareなどの組み込みツールを使ってコラボレーションを行うことができます。さらに、GitHub Codespacesは面接プロセスにおいて安全で隔離された環境を提供し、機密情報やデータの保護を保証します。
GitHubの様々なエンジニアリングチームがGitHub Codespacesを使用してどのようにインタビューを実施しているかをご覧ください。
クラウド上で好きなエディターでコーディング
私はVisual Studio Codeが大好きで、メインエディターとして使っています。しかし、あなたの役割や他の要因によって、異なる好みがあるかもしれません。 GitHub Codespaces は Visual Studio Code 以外にも、以下のエディタをサポートしています。
- Jupyter Notebook
- IntelliJ IDEA
- RubyMine
- GoLand
- PyCharm
- PhpStorm
- WebStorm
でも、まだあるんです
GitHub Codespacesの超能力は、どんなデバイスからでもコーディングができ、インターネットさえあれば標準化された環境を手に入れることができることです。しかし、ソフトウェア開発のワークフローをより簡単にする機能も搭載されています。GitHubユーザーは月60時間、GitHub Proユーザーは月90時間無料で利用できるので、実際に試してその良さを体験しない手はない。さあ、今すぐ試してみませんか?
Source
10 things you didn’t know you could do with GitHub Codespaces
Ever feel like you’re coding on a plane mid-flight? When I first learned to code about five years ago, my laptop was painstakingly slow, but I couldn’t afford a better one. That’s why I relied on browser-based IDEs like jsbin.com to run my code. Now fast forward to today, where GitHub Codespaces …