GitHub Codespaces のクイックスタート

GitHub Codespacesをすぐに使い始めましょう。

この記事で

はじめに

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

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

GitHub Codespacesのしくみの詳細については、コンパニオン ガイドの AUTOTITLE を参照してください。

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

    [ソース管理] サイド バーのスクリーンショット。 「Change haiku text and styles」というコミット メッセージと [コミット] ボタンがオレンジ色の枠線で囲まれています。

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

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

  5. [Repository Name](リポジトリ名) ドロップダウンで、新しいリポジトリの名前を入力し、[ Publish to GitHub private repository ] または [Publish to GitHub public repository] を選択します。

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

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

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

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

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

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

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

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

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

    [拡張機能: Marketplace] のスクリーンショット。 検索ボックスに「fairyfloss」と表示されています。 結果には「fairyfloss」拡張機能と [インストール] ボタンが表示されています。

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

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

Settings Sync について

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

次のステップ

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

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

参考資料