i18n(ja): Update integrations-guide.mdx

src/content/docs/ja/guides/integrations-guide.mdx

@@ -2,6 +2,7 @@
 title: インテグレーションを追加する
 i18nReady: true
 ---
+
 import IntegrationsNav from '~/components/IntegrationsNav.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
@@ -16,13 +17,17 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 - サイトマップの自動生成など、プロジェクトに新機能を追加できます。
 - ビルドプロセスや開発サーバーなどにフックするカスタムコードを書けます。
 
+:::tip[インテグレーションディレクトリ]
+[インテグレーションディレクトリ](https://astro.build/integrations/)で、何百もの公式・コミュニティ製のインテグレーションを検索・閲覧できます。認証、アナリティクス、パフォーマンス、SEO、アクセシビリティ、UI、開発者ツールなど、Astroプロジェクトに追加すべきパッケージを見つけてください。
+:::
+
 ## 公式インテグレーション
 
 <IntegrationsNav />
 
 ## インテグレーションの自動セットアップ
 
-Astroには、インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。
+Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。一部のコミュニティプラグインもこのコマンドを使用して追加できます。`astro add`がサポートされているかどうか、あるいは[手動でインストール](#手動インストール)する必要があるかどうかは、各インテグレーションのドキュメントを確認してください。
 
 好みのパッケージマネージャーを使用して`astro add`コマンドを実行すると、インテグレーション用の自動ウィザードが設定ファイルの更新と必要な依存関係のインストールを行います。
 
@@ -68,18 +73,18 @@ Astroには、インテグレーションのセットアップを自動化する
 インテグレーションの追加後に`Cannot find package '[package-name]'`のような警告が表示された場合、パッケージマネージャーが[peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/)をインストールできていないかもしれません。こうした足りないパッケージをインストールするには、`npm install [package-name]`を実行してください。
 :::
 
-## インテグレーションを使う
+### 手動インストール
 
 Astroインテグレーションは、常に`astro.config.mjs`ファイルの`integrations`プロパティを通じて追加します。
 
 Astroプロジェクトにインテグレーションをインポートするには、3つの主要な方法があります。
-1. npmパッケージのインテグレーションをインストールする。
+1. [npmパッケージのインテグレーションをインストールする](#npmパッケージのインストール)。
 2. プロジェクト内のローカルファイルから独自のインテグレーションをインポートする。
 3. インテグレーションを設定ファイルに直接インラインで記述する。
 
     ```js
     // astro.config.mjs
-    import {defineConfig} from 'astro/config';
+    import { defineConfig } from 'astro/config';
     import installedIntegration from '@astrojs/vue';
     import localIntegration from './my-integration.js';
 
@@ -92,11 +97,52 @@ Astroプロジェクトにインテグレーションをインポートするに
         // 3. インラインオブジェクト
         {name: 'namespace:id', hooks: { /* ... */ }},
       ]
-    })
+    });
     ```
 
 [インテグレーションAPI](/ja/reference/integrations-reference/)のリファレンスで、インテグレーションを書くための様々な方法について参照してください。
 
+#### npmパッケージのインストール
+
+パッケージマネージャーを使用してnpmパッケージのインテグレーションをインストールし、`astro.config.mjs`を手動で更新します。
+
+たとえば、`@astrojs/sitemap`インテグレーションをインストールするには以下のようにします。
+
+1. 好みのパッケージマネージャーを使用してプロジェクトの依存関係にインテグレーションをインストールします。
+
+   <PackageManagerTabs>
+     <Fragment slot="npm">
+     ```shell
+     npm install @astrojs/sitemap
+     ```
+     </Fragment>
+     <Fragment slot="pnpm">
+     ```shell
+     pnpm add @astrojs/sitemap
+     ```
+     </Fragment>
+     <Fragment slot="yarn">
+     ```shell
+     yarn add @astrojs/sitemap
+     ```
+     </Fragment>
+   </PackageManagerTabs>
+
+2. `astro.config.mjs`にインテグレーションをインポートし、設定オプションとともに`integrations[]`配列に追加します。
+
+    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
+    import { defineConfig } from 'astro/config';
+    import sitemap from '@astrojs/sitemap';
+
+    export default defineConfig({
+      // ...
+      integrations: [sitemap()],
+      // ...
+    });
+    ```
+
+    インテグレーションごとに設定方法は異なる可能性があるため、各インテグレーションのドキュメントを読み、使用するインテグレーションの設定オプションを必要に応じて`astro.config.mjs`で適用してください。
+
 ### カスタムオプション
 
 インテグレーションは、ほとんどの場合は実際のインテグレーションオブジェクトを返すファクトリ関数として定義されます。これにより、ファクトリ関数に引数やオプションを渡して、プロジェクト用にインテグレーションをカスタマイズできます。
@@ -183,7 +229,7 @@ integrations: [
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
-  pnpm uninstall @astrojs/react
+  pnpm remove @astrojs/react
   ```
   </Fragment>
   <Fragment slot="yarn">
@@ -196,15 +242,15 @@ integrations: [
 続いて、`astro.config.*`ファイルからインテグレーションを削除します。
 
 ```js title="astro.config.mjs" del={3,7}
-import { defineConfig } from 'astro/config'
+import { defineConfig } from 'astro/config';
 
-import react from "@astrojs/react";
+import react from '@astrojs/react';
 
 export default defineConfig({
   integrations: [
     react()
   ]
-})
+});
 ```
 
 ## 他のインテグレーションを見つける