Astroでsrc内のJavaScriptを使うように変更してみた

こんにちは、ネットソリューション事業部の山下です。
以前の記事「Astroで静的HTML納品データを作る」では、JavaScriptファイルをpublic内に格納して運用していました。

しかし、この方法だとJavaScriptをモジュール化して機能ごとに分けたり、将来的な拡張性を考えた開発がしにくくなります。
そこで今回は、JavaScriptファイルをsrc/scripts内に格納して運用する方法を模索し、その手順を解説します。

なぜsrc内に置きたいのか？

通常、Astroのビルドではpublicフォルダ内のデータはそのままコピーされるだけです。
そのため、JavaScriptのモジュール化や適切なファイル分割が難しくができず、将来的なメンテナンスや拡張性に課題がありました。

今回のテーマは、静的HTML納品データとしての扱いやすさを保ちつつ、開発の柔軟性を向上させることです。
また、納品データとしての要件も考慮し、ビルド後のJavaScriptは minify しない・変数名のマングルをしない（変数名を短縮・変更せず、そのままの形で出力する）というルールを設けています。

JavaScriptファイルが作成されない問題

当初の検証が不足していたため、Astroのテンプレートからsrc内のJavaScriptを読み込む、ビルド時にファイル化されずにHTML内にべた書きされてしまいました。
今回の記事では、この問題を解決し、JavaScriptファイルをsrc/scripts内で管理する方法を解説します。

開発時とビルド時でソースを出しわける

前回の記事「Astroで静的HTML納品データを作る」と同様に、開発時とビルド時で HTML に記述する JavaScript のパスを変更します。
具体的には、以下のようにisDevを利用して処理を切り替えます。

---
// Astro の環境変数を使用して、開発モードかどうかを判定
const isDev = import.meta.env.MODE === "development";
---
  {
    isDev ? (
      <script src="/src/scripts/main.js" /> // 開発時
    ) : (
      <script src="/assets/js/main.js" /> // ビルド時
    )
  }

• import.meta.env.MODE を使い、開発環境（development）かどうかを判定
• 開発時 → src/scripts/main.js を直接読み込む
• ビルド時 → assets/js/main.js（別タスクでビルドしたJavaScript）を読み込む

JavaScriptコンパイルタスク

Astroビルド時にsrc内のJavaScriptをビルドしないように変更しましたので、JavaScriptをビルドする別タスクを作成します。

AstroプロジェクトにはViteがすでに入っているため、これを活用してJavaScriptをビルドします。
まず、プロジェクトのルートディレクトリにvite.config.jsを作成し、以下のように設定します。

import { defineConfig } from 'vite';

// Vite のビルド設定を定義
export default defineConfig({
  build: {
    minify: false, // JSの圧縮を無効化（納品データとして可読性を保つため）
    outDir: 'dist/assets/js', // ビルド後の出力先（Astroのビルド後に読み込むJS用）
    target: 'es2020', // ES2020 以降の構文を利用可能に設定
    terserOptions: {
      mangle: false, // 変数名の変更（難読化）を無効にする
    },
    rollupOptions: {
      input: 'src/scripts/main.js', // エントリーポイント（メインのJSファイル）
      output: {
        chunkFileNames: '[name].js', // 動的に分割されたファイルの命名ルール
        entryFileNames: '[name].js', // エントリーファイルの命名ルール
        assetFileNames: '[name].[ext]', // アセット（CSSや画像）の命名ルール
      }
    },
    emptyOutDir: false, // ビルド時に既存のJSファイルを削除しない
  },
  publicDir: false // publicフォルダの内容をビルド対象から除外
});

ポイント

publicDir: false を設定し、Viteのデフォルト動作（publicフォルダのコピー）を無効化
→Astro のビルド時に public フォルダはすでにコピーされるため、Vite 側では不要

emptyOutDir: false を設定し、Vite のデフォルト動作（出力フォルダの削除）を無効化
→Astro のビルド後に JavaScript を追加するため、dist/assets/js の内容を保持

package.jsonにタスクを追加

Astroのビルドが完了した後に、今回作成したJavaScriptのビルドや他の処理を行うため、package.jsonに下記のようにタスクを追加しました。（一部抜粋）

"scripts": {
  "postbuild": "npm run sass-compile && npm run js && npm run optimize-images && npm run prettier",
  "js": "vite build"
},

今回は、Astroプロジェクト内での一風変わったJavaScriptの取り扱い方について解説しました。
今回このような環境にできたのでJavaScriptのモジュール化やファイル分割などを学んでいきたいと思っています。（そこはまだなんだ）