GitHub CodespacesとVisual Studio Codeでコーディング

GitHub CodespacesとVisual Studio Codeを使用してコーディングしましょう！

ステップ2: あなたのcodespaceにカスタムイメージを追加しましょう！

素晴らしい仕事です！ 🎉 VS Codeを使用して最初のcodespaceを作成し、コードをプッシュしました！

リポジトリのdev containerを設定することで、そのリポジトリ用に作成されたどのcodespaceでも、特定のプロジェクトに取り組むために必要なすべてのツールとランタイムを備えたカスタマイズされた開発環境を提供することができます。

dev containerとは何ですか？ dev containerは、完全な機能を備えた開発環境を提供するために特別に設定されたDockerコンテナです。codespaceで作業する際は常に、仮想マシン上のdev containerを使用しています。

dev containerファイルは、codespaceを実行するデフォルトイメージをカスタマイズしたり、VS Codeの設定を行ったり、カスタムコードを実行したり、ポートを転送したりするためのJSONファイルです！

devcontainer.jsonファイルを追加してカスタムイメージを設定しましょう。

⌨️ アクティビティ: devcontainer.jsonファイルを追加してcodespaceをカスタマイズする

1. リポジトリのCodeタブに戻り、Add fileドロップダウンボタンをクリックし、Create new fileをクリックします。

2. 空のテキストフィールドプロンプトに次の内容をタイプまたは貼り付けてファイルに名前を付けます。

   .devcontainer/devcontainer.json
   

3. 新しい .devcontainer/devcontainer.json ファイルの本文に、次の内容を追加します：

   {
   // この設定に名前を付ける
   "name": "はじめてのCodespace！",
   // ベースのcodespaceイメージを使用する
   "image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
   
   "remoteUser": "codespace",
   "overrideCommand": false
   }

4. Commit changesをクリックし、その後Commit changes directly to the main branchを選択します。

5. リポジトリのCodeタブに戻り、新しいcodespaceを作成します。

6. ページの中央にある緑色のCodeボタンをクリックします。

7. ポップアップされるボックスのCodespacesタブをクリックします。

8. タブ上の+記号をクリックします。これにより、mainブランチ上に新しいcodespaceが作成されます。（ここに他のcodespaceがリストされていることに注意してください。）

   codespaceが起動されるまで約2分間待ちます。

9. 前回と同様に、新しいcodespaceが実行されていることを確認します。

   使用されているイメージがGitHub Codespaces用に提供されているデフォルトイメージであることに注意してください。これにはPython、Node.js、Dockerなどのランタイムとツールが含まれています。完全なリストはこちらを参照：https://aka.ms/ghcs-default-image。 開発チームは、必要な前提条件がインストールされている任意のカスタムイメージを使用できます。詳細については、codespace imageを参照してください。

10. 約20秒待ってからこのページをリフレッシュします。そうすると、GitHub ActionsによってREADMEの内容が次の指示に置き換えます。

---

Get help: Post in our discussion board • Review the GitHub status page

© 2023 GitHub • Code of Conduct • MIT License