GitHub Codespaces のクイックスタート

はじめに

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

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

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

codespace を作成する

1. github/haikus-for-codespaces テンプレート リポジトリに移動します。

2. [このテンプレートを使用する] をクリックし、 [codespace で開く] を選びます。

   

アプリケーションの実行

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

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

   

   別のアプリケーションの種類を使用している場合は、そのプロジェクトの対応する開始コマンドを入力します。

2. アプリケーションが起動すると、アプリケーションが実行しているポートが codespace によって認識され、ポートが転送されたことを伝えるポップアップ メッセージが表示されます。

   

3. [ブラウザーで開く] をクリックして、実行中のアプリケーションを新しいタブで表示します。

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

1. codespace に戻り、エクスプローラーで haikus.json ファイルをクリックして開きます。

2. 最初の俳句の text フィールドを編集して、独自の俳句でアプリケーションをカスタマイズします。

3. ブラウザーで実行中のアプリケーションのタブに戻り、表示を更新して変更を確認します。

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

   

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

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

1. アクティビティ バーで、 [ソース管理] ビューをクリックします。

   

2. 変更をステージングするには、haikus.json ファイルの横の [] をクリックします。複数のファイルを変更してすべてをステージングする場合は、 [変更] の横のものをクリックします。

   

3. ステージングされた変更をコミットするには、行った変更を説明するコミット メッセージを入力し、 [コミット] をクリックします。

   

4. [ブランチを公開する] をクリックします。

   

5. [リポジトリ名] ドロップダウンに新しいリポジトリの名前を入力してから、 [GitHub プライベート リポジトリに発行] または [GitHub パブリック リポジトリに発行] を選びます。

   

   新しいリポジトリの所有者は、codespace を作成した GitHub アカウントになります。

6. エディターの右下隅に表示されるポップアップで [GitHub で開く] をクリックし、GitHub の新しいリポジトリを表示します。 新しいリポジトリで haikus.json ファイルを表示し、codespace で加えた変更がリポジトリに正常にプッシュされたことを確認します。

   

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

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

1. アクティビティ バーの拡張機能アイコンをクリックします。

   

2. 検索バーに「fairyfloss」と入力し、 [インストール] をクリックします。

   

3. 一覧で fairyfloss テーマをクリックして選択します。

   

Settings Sync について

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

次のステップ

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

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

参考資料

• 「組織での GitHub Codespaces の有効化または無効化」
• Visual Studio Code で GitHub Codespaces を使用する
• JetBrains IDE で GitHub Codespaces を使う
• 「GitHub CLI で GitHub Codespaces を使用する」
• 「GitHub Codespaces の既定のエディターを設定する」
• 「組織での GitHub Codespaces のコストの管理」