GitHub Codespaces のクイックスタート

はじめに

このガイドでは、テンプレートリポジトリから codespace を作成し、codespace 内で使用できるいくつかの重要な機能について調べます。ブラウザーバージョンの Visual Studio Code で作業します。これは、最初は GitHub Codespaces の既定のエディターです。このクイックスタートを試した後、他のエディターで Codespaces を使用し、既定のエディターを変更できます。リンクは、このガイドの最後に示します。

このクイックスタートでは、codespace を作成し、転送されるポートに接続して実行中のアプリケーションを表示し、新しいリポジトリに codespace を発行し、拡張機能でセットアップをカスタマイズする方法について学習します。

GitHub Codespaces の厳密なしくみについて詳しくは、コンパニオンガイド「GitHub Codespaces の詳細」をご覧ください。

codespace を作成する

github/haikus-for-codespaces テンプレートリポジトリに移動します。
[このテンプレートを使用する] をクリックし、 [codespace で開く] を選びます。

アプリケーションの実行

codespace が作成されると、そこにテンプレートリポジトリが自動的にクローンされます。これで、アプリケーションを実行し、ブラウザーで起動できます。

ターミナルが使用可能になったら、コマンド npm run dev を入力します。この例では Node.js プロジェクトを使用します。また、このコマンドは package.json ファイルで、サンプルリポジトリで定義されている Web アプリケーションを起動する "dev" というラベルの付いたスクリプトを実行します。

別のアプリケーションの種類を使用している場合は、そのプロジェクトの対応する開始コマンドを入力します。
アプリケーションが起動すると、アプリケーションが実行しているポートが codespace によって認識され、ポートが転送されたことを伝えるポップアップメッセージが表示されます。
[ブラウザーで開く] をクリックして、実行中のアプリケーションを新しいタブで表示します。

アプリケーションを編集して変更を表示する

codespace に戻り、エクスプローラーで haikus.json ファイルをクリックして開きます。
最初の俳句の text フィールドを編集して、独自の俳句でアプリケーションをカスタマイズします。
ブラウザーで実行中のアプリケーションのタブに戻り、表示を更新して変更を確認します。

ブラウザーのタブを閉じた場合は、VS Code の [Ports] タブをクリックし、実行しているポートの [Local Address] の値をポイントして、[Open in Browser] アイコンをクリックします。

変更のコミットとプッシュ

いくつかの変更を加えたので、統合ターミナルまたはソースビューを使って作業をリポジトリに公開できます。

アクティビティバーで、 [ソース管理] ビューをクリックします。
変更をステージングするには、haikus.json ファイルの横の [