Astro.js Javascriptの読み込み方と使い方

Astroサイトに動きを加えたり、便利なプラグインを利用したりするにはJavaScriptを使うことになります。

ここでは、Astroを使って作成したWebサイトでJavaScriptを扱う方法を4つのパターンに分けて説明します。

## Astroコンポーネント内で直接JavaScriptを書く

ボタンのクリックイベントなど一番シンプルな方法がこちら。特定のコンポーネント(ページ)内だけで完結する簡単な処理に向いています。

### 1.HTML要素を用意
`.astro` ファイルのテンプレート部分（`---` の下）に、操作したいHTML要素を記述します（例: ボタンに `id` を付ける）。

```astro
<button id="my-alert-button" class="bg-blue-500 text-white p-2 rounded">アラート表示</button>
```

### 2.`<script>` タグを追加
同じ `.astro` ファイルのテンプレート部分（通常、ファイルの最後の方）に `<script>` タグを追加します。

### 3.イベント処理を記述
`<script>` タグの中に、要素を取得してイベントリスナーを追加するJavaScriptコードを書きます。

```astro
<script>
  const button = document.getElementById('my-alert-button');
  if (button) { // 要素が存在するか確認
    button.addEventListener('click', () => {
      alert('ボタンがクリックされました！');
    });
  }
</script>
```
**注意:** この `<script>` タグ内のコードは **ブラウザ** で実行されます。DOM操作 (`document.getElementById` など) はここに書きます。コンポーネントのフロントマター (`---` 内) は **サーバー** で実行されるため、DOM操作は書けません。

## `src/` (assets) 内のJSファイルを読み込む

複数のページやコンポーネントで使い回したい自作のJavaScriptコードは、`src/` ディレクトリにファイルとして保存し、それを読み込むのがおすすめです。

### 1.JSファイルを作成
`src/` ディレクトリ内（例: `src/scripts/`）にJSファイルを作成します (例: `src/scripts/interactive.js`)。

```javascript
// src/scripts/interactive.js
export function setupCounter(buttonElement) {
  let counter = 0;
  const setCounter = (count) => {
    counter = count;
    buttonElement.textContent = `カウント: ${counter}`;
  };
  buttonElement.addEventListener('click', () => setCounter(counter + 1));
  setCounter(0); // 初期化
}

console.log('interactive.js が読み込まれました');
```
### 2.`<script>` タグで読み込む
使いたい `.astro` ファイルのテンプレート部分で、`<script>` タグの `src` 属性に **相対パス** を指定して読み込みます。

```astro
<button id="counter-button">カウント: 0</button>

<script type="module"> // type="module" を付けると import/export が使える
  import { setupCounter } from '../scripts/interactive.js'; // 相対パスで指定

  const counterButton = document.getElementById('counter-button');
  if (counterButton) {
    setupCounter(counterButton);
  }
</script>
```
`src/` 内のJSファイルはAstroによって処理・バンドルされるため、`import`/`export` 構文などが使えます（`<script type="module">` が必要）。

## NPMパッケージでプラグインのJSファイルを読み込む

### 1.インストール
ターミナルで `npm install プラグイン名` (または `pnpm`/`yarn`) を実行します。

### 2.インポートして使用
`.astro` ファイル内の `<script type="module">` タグ、または `src/` 内のJSファイルで `import` して使います。

```astro
<script type="module">
  import Alpine from 'alpinejs'; // npm install alpinejs したライブラリをインポート
  // Alpine.js を初期化するなどの処理...
  window.Alpine = Alpine; // グローバルに公開する場合 (ライブラリによる)
  Alpine.start();
  console.log('Alpine.js が初期化されました');
</script>
```

## ダウンロードしたJSファイルを読み込む

### 1.ファイルを `public/` に配置
ダウンロードしたプラグインのJSファイルを、プロジェクトの **`public/` ディレクトリ** 内に配置します (例: `public/js/plugin.js`)。

### 2.`<script>` タグで読み込み (`is:inline` が必須)
`.astro` ファイルのテンプレート部分（通常は `<body>` 終了タグ前）で、`<script>` タグの `src` 属性に **`/` から始まるルート相対パス** を指定し、**必ず `is:inline` ディレクティブを追加** します。

```html
<body>
  {/* ... ページコンテンツ ... */}

  {/* public/js/plugin.js を読み込む場合 */}
  <script src="/js/plugin.js" is:inline></script>

  {/* CDNから読み込む場合も同様 */}
  {/* <script src="https://cdn.example.com/plugin.js" is:inline></script> */}
</body>
```
**重要:** `public/` 内のファイルやCDNから読み込む `<script>` には **`is:inline` が必須** です。

これを付けないと、Astroがファイルを処理しようとしてエラーになるか、意図通りに動作しません。`is:inline` は「このスクリプトはそのままHTMLに出力して」という指示になります。

自作コードは `src/` に、外部から持ってきた処理不要なファイルは `public/` に配置し、読み込み方を区別するのがポイントです。