Skip to main content
ドキュメントへの更新が頻繁に発行されており、このページの翻訳はまだ行われている場合があります。 最新の情報については、「英語のドキュメント」を参照してください。

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

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

    ターミナルで dev を実行する npm

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

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

    ポート転送の "トースト" 通知

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

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

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

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

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

    タブを閉じた場合は、[ポート] パネルを開き、実行中のポートの [ブラウザーで開く] アイコンをクリックします。

    ポート転送パネル

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

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

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

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

    ステージング ボタンが強調表示されたソース コントロール サイドバー

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

    コミット メッセージがあるソース管理サイドバー

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

    VS Code の [ブランチの発行] ボタンのスクリーンショット

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

    VS Code の [リポジトリ名] ドロップダウンのスクリーンショット

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

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

    VS Code の [GitHub で開く] ポップアップのスクリーンショット

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

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

  1. 左サイトバーで、[Extensions] アイコンをクリックします。

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

    機能拡張を追加

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

    fairyfloss のテーマを選択

Settings Sync について

Settings Sync を有効にして、VS Code のデバイスやインスタンス間で拡張機能やその他の設定を同期できます。 ノート PC の VS Code デスクトップ アプリケーションなど、VS Code のインスタンスで [設定の同期] を有効にすると、そのインスタンスの設定がクラウドに格納されます。 クラウドから、設定は作成時にすべての新しい codespace にプルされ、[設定の同期] が有効になっている既存の codespace に継続的に同期されます。

codespace で [設定の同期] が既定で有効になっているかどうかは、既存の設定と、ブラウザーで codespace を開くか、VS Code デスクトップ アプリケーションで開くかによって異なります。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」をご覧ください。

次のステップ

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

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

参考資料