GitHub Codespaces のクイックスタート

GitHub Codespaces は 5 分以内で試すことができます。

この記事の内容

はじめに

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

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

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

codespace を作成する

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

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

    [このテンプレートを使用] ボタンと、ドロップダウン メニューが展開されて [codespace で開く] が表示されている状態のスクリーンショット。

アプリケーションの実行

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

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

    "npm run dev" コマンドが入力された VS Code のターミナルのスクリーンショット。

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

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

    ポップアップ メッセージのスクリーンショット: "ポート 3000 で実行されているアプリケーションを使用できます。" この下には、[ブラウザーで開く] というラベルが付いた緑色のボタンがあります。

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

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

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

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

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

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

    [ポート] タブのスクリーンショット。 [ポート] タブと、ブラウザーで転送されたポートを開く地球アイコンが、オレンジ色の枠線で強調されています。

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

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

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

    [ソース管理] ボタンがオレンジ色の枠線で強調されている VS Code アクティビティ バーのスクリーンショット。

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

    [ソース管理] サイド バーのスクリーンショット。[変更] の右側にあるステージング ボタン (プラス記号) が濃いオレンジ色の枠線で強調表示されています。

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

    [ソース管理] サイド バーのスクリーンショット。 コミット メッセージ "俳句のテキストとスタイルを変更する" が入力され、[コミット] ボタンがオレンジ色の枠線で強調されています。

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

    [ブランチを公開する] ボタンが表示されている [ソース管理] サイド バーのスクリーンショット。

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

    VS Code でのリポジトリ名ドロップダウンのスクリーンショット。 プライベートまたはパブリック リポジトリに発行するための 2 つのオプションが示されています。

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

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

    [GitHub で開く] ボタンが示されている、正常に発行されたリポジトリの確認メッセージのスクリーンショット。

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

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

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

    アクティビティ バーのスクリーンショット。 [拡張機能] アイコンがオレンジ色の枠線で強調されています。

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

    [拡張機能: Marketplace] サイド バーのスクリーンショット。 検索ボックスに「fairyfloss」と入力され、その下に "fairyfloss" 拡張機能と [インストール] ボタンが表示されています。

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

    "fairyfloss" テーマが選ばれている、[配色テーマの選択] ドロップダウンのスクリーンショット。

Settings Sync について

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

次のステップ

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

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

参考資料