Quickstart for Codespaces

Try out Codespaces in 5 minutes.

Codespaces is available for organizations using GitHub Team or GitHub Enterprise Cloud. 詳しい情報については「GitHubの製品」を参照してください。

はじめに

In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace.

From this quickstart, you will learn how to create a codespace, connect to a forwarded port to view your running application, use version control in a codespace, and personalize your setup with extensions.

For more information on exactly how Codespaces works, see the companion guide "Deep dive into Codespaces."

codespace を作成する

  1. Navigate to the template repository and select Use this template.

  2. Name your repository, select your preferred privacy setting, and click Create repository from this template.

  3. Navigate to the main page of the newly created repository. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, click New codespace.

    [New codespace] ボタン

Running the application

Once your codespace is created, your repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

  1. Since this example uses a Node.js project, start the application by entering npm run dev in the terminal. このコマンドは、package.json ファイルの dev スクリプトを実行し、サンプルリポジトリで定義された Web アプリケーションを起動します。

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

    If you're following along with a different application type, enter the corresponding start command for that project.

  2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to forward that port so you can connect to it.

    ポートフォワーディングトースト

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

Edit the application and view changes

  1. Switch back to your codespace and open the haikus.json file by double-clicking it in the File Explorer.

  2. Edit the text field of the first haiku to personalize the application with your own haiku.

  3. Go back to the running application tab in your browser and refresh to see your changes.

    If you've closed the tab, open the Ports panel and click the Open in browser icon for the running port. Port Forwarding Panel

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to commit and push the changes back to the remote.

  1. Activityバーで、Source Control(ソースコントロール)ビューをクリックしてください。 ソースコントロールビュー
  2. 変更をステージングするには、変更したファイルの隣にある [+] をクリックするか、複数のファイルを変更してすべてをステージングする場合は [Changes] の隣をクリックします。 ステージングボタンが強調表示されたソースコントロールサイドバー
  3. 行った変更について説明するコミットメッセージを入力します。 コミットメッセージがあるソースコントロールサイドバー
  4. ステージングされた変更をコミットするには、ソースコントロールサイドバーの上部にあるチェックマークをクリックします。 Click the check mark icon
    You can push the changes you've made. それにより、変更がリモートリポジトリの上流ブランチに適用されます。 プルリクエストの作成準備が整っていない場合、または GitHub でプルリクエストを作成する場合は、この操作を行うことをお勧めします。
  5. サイドバーの上部にある省略記号(...) をクリックします。 [View] および [More Actions] の省略記号ボタン
  6. ドロップダウンメニューで、[Push] をクリックします。

Personalizing with an extension

codespace 内で、Visual Studio Code Marketplace にアクセスできます。 For this example, you'll install an extension that alters the theme, but you can install any extension that is useful for your workflow.

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

  2. 検索バーに「fairyfloss」と入力し、fairyfloss の機能拡張をインストールします。

    機能拡張を追加

  3. リストから fairyfloss のテーマを選択します。

    fairyfloss のテーマを選択

  4. Changes you make to your editor setup in the current codespace, such as theme and keyboard bindings, are synced automatically via Settings Sync to any other codespaces you open and any instances of Visual Studio Code that are signed into your GitHub account.

次のステップ

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

参考リンク

このドキュメントは役立ちましたか?

プライバシーポリシー

これらのドキュメントを素晴らしいものにするのを手伝ってください!

GitHubのすべてのドキュメントはオープンソースです。間違っていたり、はっきりしないところがありましたか?Pull Requestをお送りください。

コントリビューションを行う

OR, コントリビューションの方法を学んでください。

問題がまだ解決していませんか?