i18n(ja) Update guides/client-side-scripts.mdx

src/content/docs/ja/guides/client-side-scripts.mdx

@@ -8,6 +8,30 @@ i18nReady: true
 
 標準的なHTMLの`<script>`タグを使用すれば、React・Svelte・Vue等の[UIフレームワーク](/ja/core-concepts/framework-components/)を利用せずにインタラクティブ性をAstroコンポーネントへ追加できます。これによってブラウザ上で実行されるJavaScriptを送信してAstroコンポーネントに機能を追加できるようになります。
 
+## クライアントサイドスクリプト
+
+スクリプトは、イベントリスナーの追加やアナリティクスデータの送信、アニメーションの再生など、JavaScriptがウェブ上でできることすべてに使用できます。
+
+```astro
+<!-- src/components/ConfettiButton.astro -->
+<button data-confetti-button>Celebrate!</button>
+
+<script>
+  // npmモジュールをインポートする。
+  import confetti from 'canvas-confetti';
+
+  // ページ上のコンポーネントのDOMを探す。
+  const buttons = document.querySelectorAll('[data-confetti-button]');
+
+  // ボタンがクリックされたときにconfettiを発火するイベントリスナーを追加する。
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => confetti());
+  });
+</script>
+```
+
+デフォルトでは、Astroは`<script>`タグを処理してバンドルし、npmモジュールのインポートやTypeScriptの記述などをサポートします。
+
 ## Astroで`<script>`を使用する
 
 `.astro`ファイル内に単数(もしくは複数)の`<script>`タグを追加することによってクライアントサイドJavascriptを追加できます。
@@ -49,7 +73,7 @@ i18nReady: true
 ```
 
 :::note
-`type=module`や他の`src`以外の属性を`<script>`タグに追加すると、Astroのデフォルトのバンドル動作が無効化されて、`is:inline`ディレクティブを指定したときと同じように扱われます。
+Astroのデフォルトのバンドル動作は、いくつかの状況で無効になります。特に、`<script>`タグに`type="module"`や`src`以外の属性を追加すると、Astroはそのタグを`is:inline`ディレクティブがあるかのように扱います。スクリプトがJSX式で記述されている場合も同様です。
 :::
 
 📚 `<script>` タグで利用可能なディレクティブについてもっと知りたい場合は、[テンプレートディレクティブ](/ja/reference/directives-reference/#script--style-directives)を参照してください。
@@ -139,7 +163,7 @@ Webコンポーネント標準を使うことで独自の動作をするHTML要
       // ボタンがクリックされるごとにカウントを更新する。
 			heartButton.addEventListener('click', () => {
         count++;
-        countSpan.textContent = count;
+        countSpan.textContent = count.toString();
       });
 		}
   }