GitHub Codespaces のクイックスタート

はじめに

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

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

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

codespace を作成する

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

アプリケーションの実行

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

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

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

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

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

ブラウザーのタブを閉じた場合は、VS Code の [ポート] タブをクリックし、実行しているポートの [ローカルアドレス] の値をポイントして、 [ブラウザーで開く] アイコンをクリックします。

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

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

アクティビティバーで、 [ソース管理] ビューをクリックします。
変更をステージングするには、ファイルの横の [] をクリックします。複数のファイルを変更してすべてをステージングする場合は、 [変更] の横のものをクリックします。
ステージングされた変更をコミットするには、行った変更を説明するコミットメッセージを入力し、 [コミット] をクリックします。
[ブランチを公開する] をクリックします。
[リポジトリ名] ドロップダウンに新しいリポジトリの名前を入力してから、 [GitHub プライベートリポジトリに発行] または [GitHub パブリックリポジトリに発行] を選びます。

新しいリポジトリの所有者は、codespace を作成した GitHub アカウントになります。
エディターの右下隅に表示されるポップアップで、[GitHub で開く] をクリックして、GitHub の新しいリポジトリを表示します。新しいリポジトリでファイルを表示し、codespace で加えた変更がリポジトリに正常にプッシュされたことを確認します。

拡張機能を使用した個人用設定

ブラウザーまたは Visual Studio Code デスクトップアプリケーションを使用して codespace に接続すると、エディターから Visual Studio Code Marketplace に直接アクセスできます。この例では、テーマを変更する VS Code 拡張機能をインストールしますが、ご自分のワークフローにとって便利なあらゆる拡張機能をインストールすることができます。

アクティビティバーの拡張機能アイコンをクリックします。
検索バーに「」と入力し、 [インストール] をクリックします。
一覧でテーマをクリックして選択します。

Settings Sync について

Settings Sync を有効にして、VS Code のデバイスやインスタンス間で拡張機能やその他の設定を同期できます。同期された設定は、クラウドにキャッシュされます。 codespace で Settings Sync をオンにすると、codespace で設定に行った更新はすべてクラウドにプッシュされ、他の場所からクラウドにプッシュした更新は codespace にプルされます。詳しくは、「AUTOTITLE」をご覧ください。

次のステップ

codespace で最初のアプリケーションを正常に作成、パーソナライズ、および実行しましたが、その他にもできることはまだまだたくさんあります。 GitHub Codespaces で次の手順を行うのに役立つリソースをいくつか以下に示します。

AUTOTITLE: このクイックスタートでは、GitHub Codespaces のいくつかの機能を説明しました。詳細情報では、これらの領域について技術的な観点から説明します。
AUTOTITLE: これらのガイドでは、特定の言語で GitHub Codespaces を使用するようにリポジトリを設定する方法について説明します。
AUTOTITLE: このガイドではプロジェクト向けの Codespaces のカスタム構成の作成について詳しい情報を提供します。

参考資料

AUTOTITLE
AUTOTITLE
AUTOTITLE
AUTOTITLE。
AUTOTITLE

GitHub Codespaces のクイックスタート

この記事の内容