i18n(ja): Update tutorial/6-islands

src/content/docs/ja/tutorial/6-islands/1.mdx

@@ -12,7 +12,8 @@ import Spoiler from '~/components/Spoiler.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 Preactコンポーネントを使い、ランダムに選択されたメッセージでサイト訪問者に挨拶しましょう！
 
@@ -24,21 +25,37 @@ Preactコンポーネントを使い、ランダムに選択されたメッセ
 
 ## AstroプロジェクトにPreactを追加する
 
+<Steps>
 1. 動作中であれば開発サーバーを停止し、ターミナルを使用できるようにします（キーボードショートカットは<kbd>Ctrl + C</kbd>です）。
 
 2. 以下のコマンドを実行して、AstroプロジェクトでPreactコンポーネントを使用できるようにします。
 
-    ```shell
-    npx astro add preact
-    ```
-
-2. コマンドラインの指示に従って、プロジェクトにPreactを追加します。
-
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+        ```sh
+        npx astro add preact
+        ```
+      </Fragment>
+      <Fragment slot="pnpm">
+        ```sh
+        pnpm astro add preact
+        ```
+      </Fragment>
+      <Fragment slot="yarn">
+        ```sh
+        yarn astro add preact
+        ```
+      </Fragment>
+    </PackageManagerTabs>
+
+3. コマンドラインの指示に従って、プロジェクトにPreactを追加します。
+</Steps>
 
 ## Preactの挨拶用バナーを追加する
 
 このコンポーネントは、挨拶用メッセージの配列をpropとして受け取り、その中からランダムに1つを選んでウェルカムメッセージとして表示します。ユーザーはボタンをクリックして新しいメッセージをランダムに受け取れます。
 
+<Steps>
 1. `src/components/`に`Greeting.jsx`という名前の新しいファイルを作成します。
 
     `.jsx`というファイル拡張子が使われていることに注意してください。このファイルはAstroではなくPreactで書きます。
@@ -70,7 +87,7 @@ Preactコンポーネントを使い、ランダムに選択されたメッセ
     ```astro title="src/pages/index.astro" ins={3,8}
     ---
     import BaseLayout from '../layouts/BaseLayout.astro';
-    import Greeting from '../components/Greeting.jsx';
+    import Greeting from '../components/Greeting';
     const pageTitle = "Home Page";
     ---
     <BaseLayout pageTitle={pageTitle}>
@@ -114,6 +131,7 @@ Preactコンポーネントを使い、ランダムに選択されたメッセ
         <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
       </BaseLayout>
       ```
+</Steps>
 
 <Box icon="question-mark">
 
@@ -166,7 +184,7 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
 
 以下のコンポーネントのそれぞれについて、ブラウザに送信される内容を選択してください。
 
-1. `<ReactCounter client:load/>`
+1. `<ReactCounter client:load />`
 
     <MultipleChoice>
       <Option>

src/content/docs/ja/tutorial/6-islands/2.mdx

@@ -11,8 +11,7 @@ import Checklist from '~/components/Checklist.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 インタラクティブな要素のためにAstroアイランドを作成できるようになりましたが、素のJavaScriptとCSSだけでもかなりのことができます！
 
@@ -25,6 +24,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ## テーマを切り替えるアイコンを追加してスタイルを設定する
 
+<Steps>
 1. `src/components/ThemeIcon.astro`に新しいファイルを作成し、次のコードを貼り付けます。
 
     ```astro title="src/components/ThemeIcon.astro"
@@ -44,7 +44,6 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
       }
       .sun { fill: black; }
       .moon { fill: transparent; }
-
 
       :global(.dark) .sun { fill: transparent; }
       :global(.dark) .moon { fill: white; }
@@ -69,11 +68,13 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     ```
 
 3. ブラウザのプレビューで`http://localhost:4321`にアクセスし、すべてのページにアイコンが表示されていることを確認します。クリックしてみても構いませんが、まだこれをインタラクティブにするためのスクリプトを書いていないため、何も起こりません。
+</Steps>
 
 ## ダークテーマのためのCSSスタイルを追加する
 
 ダークモードで使用するための代替色を選択します。
 
+<Steps>
 1. `src/styles/global.css`にダークスタイルを定義します。独自のものを使ってもいいですし、以下をコピーして貼り付けても構いません。
 
     ```css title="src/styles/global.css"
@@ -86,11 +87,13 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
       color: #fff;
     }
     ```
+</Steps>
 
 ## クライアントサイドのインタラクティブな機能を追加する
 
 Astroコンポーネントにインタラクティブな機能を追加するには、`<script>`タグを使用します。以下のスクリプトは、`localStorage`から現在のテーマをチェックあるいは設定し、またアイコンがクリックされたときにテーマを切り替えます。
 
+<Steps>
 1. `src/components/ThemeIcon.astro`の`<style>`タグの後ろに、以下の`<script>`タグを追加します。
 
     ```astro title="src/components/ThemeIcon.astro" ins={9-37}
@@ -134,7 +137,7 @@ Astroコンポーネントにインタラクティブな機能を追加するに
     ```
 
 2. ブラウザのプレビューで`http://localhost:4321`を開き、テーマアイコンをクリックします。ライトモードとダークモードが切り替わることを確認してください。
-
+</Steps>
 
 
 <Box icon="question-mark">

src/content/docs/ja/tutorial/6-islands/3.mdx

@@ -55,7 +55,7 @@ const textCase = "uppercase";
 
 ## 次のステップ
 
-[このプロジェクトをコンテンツコレクションへと移行するガイド](/ja/guides/content-collections/#ファイルベースのルーティングからの移行)を読み進めてみましょう。
+[このプロジェクトにビュートランジションを追加](/ja/tutorials/add-view-transitions/)するか、[コンテンツコレクションを追加してブログ投稿を管理](/ja/tutorials/add-content-collections/)して、チュートリアルを拡張しましょう。
 
 [新しいAstroプロジェクトを開始する](/ja/getting-started/)
 
@@ -70,4 +70,4 @@ Astroブログのチュートリアル完了おめでとうございます！達
 <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
   <Button link='https://twitter.com/intent/tweet?text=Astroブログの作成方法を学び終えました！https://docs.astro.build/ をチェックしてみてください！%0A%20%40astrodotbuild'>Twitterで共有</Button>
   <Button link='https://www.reddit.com/submit?url=https://docs.astro.build/&title=Astroブログの作成方法を学び終えました！'>Redditで共有</Button>
-</div>
+</div>