Astroサイトに動きを加えたり、便利なプラグインを利用したりするにはJavaScriptを使うことになります。
ここでは、Astroを使って作成したWebサイトでJavaScriptを扱う方法を4つのパターンに分けて説明します。
Astroコンポーネント内で直接JavaScriptを書く
ボタンのクリックイベントなど一番シンプルな方法がこちら。特定のコンポーネント(ページ)内だけで完結する簡単な処理に向いています。
1.HTML要素を用意
.astro ファイルのテンプレート部分（--- の下）に、操作したいHTML要素を記述します（例: ボタンに id を付ける）。
<button id="my-alert-button" class="bg-blue-500 text-white p-2 rounded">アラート表示</button>
2.<script> タグを追加
同じ .astro ファイルのテンプレート部分（通常、ファイルの最後の方）に <script> タグを追加します。
3.イベント処理を記述
<script> タグの中に、要素を取得してイベントリスナーを追加するJavaScriptコードを書きます。
<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)。
// 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 属性に 相対パス を指定して読み込みます。
<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 して使います。
<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 ディレクティブを追加 します。
<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/ に配置し、読み込み方を区別するのがポイントです。