{"meta":{"title":"devcontainer.json ファイルへの機能の追加","intro":"機能を使用すると、dev container 構成にツール、ランタイム、またはライブラリをすばやく追加できます。","product":"Codespaces","breadcrumbs":[{"href":"/ja/codespaces","title":"Codespaces"},{"href":"/ja/codespaces/setting-up-your-project-for-codespaces","title":"プロジェクトの設定"},{"href":"/ja/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers","title":"開発コンテナーの構成"},{"href":"/ja/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file","title":"機能の追加"}],"documentType":"article"},"body":"# devcontainer.json ファイルへの機能の追加\n\n機能を使用すると、dev container 構成にツール、ランタイム、またはライブラリをすばやく追加できます。\n\n各機能は、インストール コードと開発コンテナー構成の自己完結型ユニットであり、さまざまな基本コンテナー イメージで動作するように設計されています。 各機能を使用すると、codespace イメージにツール、ランタイム、またはライブラリをすばやく追加できます。 詳しくは、開発コンテナーの Web サイトで、[使用できる機能](https://containers.dev/features)と[機能の仕様](https://containers.dev/implementors/features/)に関するページをご覧ください。\n\n機能は、VS Code からか、GitHub のリポジトリから `devcontainer.json` ファイルに追加できます。 この記事のタブを使用して、これらの機能を追加する各方法の手順を表示します。\n\n## `devcontainer.json` ファイルへの機能の追加\n\n<div class=\"ghd-tool webui\">\n\n1. GitHub のリポジトリに移動して `devcontainer.json` ファイルを見つけたら、<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-pencil\" aria-label=\"Edit this file\" role=\"img\"><path d=\"M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z\"></path></svg> をクリックしてファイルを編集します。\n\n`devcontainer.json` ファイルがない場合は、ここで作成します。 詳しくは、「[開発コンテナーの概要](/ja/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#creating-a-custom-dev-container-configuration)」をご覧ください。\n\n1. ファイル エディターの右側にある **\\[Marketplace]** タブで、追加する機能を参照または検索し、その機能の名前をクリックします。\n\n   ![\\[Marketplace\\] タブのスクリーンショット。検索ボックスに「Terra」と入力されており、検索結果に Terraform 機能が表示されています。](/assets/images/help/codespaces/feature-marketplace.png)\n\n2. \\[インストール] で、コード スニペットをクリックしてクリップボードにコピーし、`features` ファイル内の `devcontainer.json` オブジェクトにスニペットを貼り付けます。\n\n   ![\\[Marketplace\\] タブのスクリーンショット。Terraform のインストール コードのスニペットが表示されています。](/assets/images/help/codespaces/feature-installation-code.png)\n\n   ```jsonc\n   \"features\": {\n        // ...\n        \"ghcr.io/devcontainers/features/terraform:1\": {},\n        // ...\n    }\n   ```\n\n3. 既定では、最新バージョンの機能が使用されます。 別のバージョンを選んだり、機能の他のオプションを構成したりするには、\\[オプション] の下に表示されているプロパティを展開して使用可能な値を表示し、`devcontainer.json` ファイル内のオブジェクトを手動で編集してオプションを追加します。\n\n   ![\\[Marketplace\\] タブの \\[オプション\\] セクションのスクリーンショット。\\[バージョン\\] と \\[tflint\\] のプロパティが展開されています。](/assets/images/help/codespaces/feature-options.png)\n\n   ```jsonc\n   \"features\": {\n        // ...\n        \"ghcr.io/devcontainers/features/terraform:1\": {\n            \"version\": \"1.1\",\n            \"tflint\": \"latest\"\n        },\n        // ...\n    }\n   ```\n\n4. `devcontainer.json` ファイルへの変更をコミットします。\n\n構成の変更は、リポジトリから作成された新しい codespace で有効になります。 既存の codespace で変更を有効にするには、`devcontainer.json` ファイルの更新を codespace にプルしてから、codespace のコンテナーをリビルドする必要があります。 詳しくは、「[開発コンテナーの概要](/ja/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)」をご覧ください。\n\n</div>\n\n<div class=\"ghd-tool vscode\">\n\n> \\[!NOTE]\n> ローカルで作業していて、codespace に接続されていないときに VS Code に機能を追加するには、\"Dev Containers\" 拡張機能がインストールされ、有効になっている必要があります。 この拡張機能の詳細については、「[VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)」を参照してください。\n\n1. <kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> (Mac) または <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows/Linux) を使用して、VS Code Command Palette にアクセスします。\n\n2. 「add dev」と入力を始め、 **\\[Codespaces: 開発コンテナー構成ファイルの追加]** をクリックします。\n\n   ![「開発の追加」と入力され、\\[Codespaces: 開発コンテナー構成ファイルの追加\\] が一覧に表示されている、コマンド パレットのスクリーンショット。](/assets/images/help/codespaces/add-prebuilt-container-command.png)\n\n3. **\\[Modify your active configuration] (アクティブな構成の変更)** をクリックします。\n\n4. 機能の選択を更新し、 **\\[OK]** をクリックします。\n\n5. codespace で作業している場合は、右下隅にプロンプトが表示されます。 コンテナーをリビルドし、作業中の codespace に変更を適用するには、 **\\[今すぐリビルド]** をクリックします。\n\n   ![\"開発コンテナー構成が変更されています\" というメッセージのスクリーンショット。 この下には \\[今すぐリビルド\\] ボタンがあります。](/assets/images/help/codespaces/rebuild-prompt.png)\n\n</div>"}