AstroでJavascriptをそのまま書きたいときの記述方法

Astroで素のJavascriptを扱いたいときの書き方を失念することが多いので書き留めておく。

バンドル化してheadに挿入

Scripts and Event Handling 🚀 Astro Documentation

script タグのみで記述すると、どこに書いてもバンドル化される。

<Layout>
  ...
</Layout>

<script>
  alert('js sample page');
</script>
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" />

<head>
  ...
  <script type="module" src="/_astro/hoisted.5f5565dc.js"></script>
</head>

書いた場所にそのまま挿入

is:inline か type を書くとそのまま挿入される。
Google Analyticsや広告タグなどの外部jsファイルを src で挿入するときも、この指定がないとバンドル化されるので注意が必要。

<Layout>
  ...
  <script is:inline>
    alert('js sample page');
  </script>
  <script type="text/javascript">
    alert('js sample page');
  </script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.slim.min.js" />
</Layout>

<body>
  ...
  <script>
    alert('js sample page');
  </script>
  <script type="text/javascript">
    alert('js sample page');
  </script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script>
</body>

Javascriptの記述にFrontMatterで定義した変数を使って挿入

Template Directives Reference 🚀 Astro Documentation

define:vars を使うと is:inline 扱いになるため点は注意。

---
const text = "hogehoge";
---
<Layout>
  ...
  <script define:vars={{ text }}>
    function sample() {
      alert(`Hey ${text}`);
    }
    sample();
  </script>
</Layout>

<body>
  ...
  <script>
    (function () {
      const text = "hogehoge";

      function sample() {
        alert(`Hey ${text}`);
      }
      sample();
    })();
  </script>
</body>

Javascript内に変数を使いつつbuild時に中身が変換されないように挿入

まずないだろうけど手段は問わず実現したい場合。普通はやらない。

---
const text = "hogehoge";
const jsText = `<script>
  function sample() {
    alert('Hey ${text}');
  }
  sample();
</script>`
---
<Layout>
  ...
  <Fragment set:html={jsText} />
</Layout>

<body>
  ...
  <script>
    function sample() {
      alert('Hey hogehoge');
    }
    sample();
  </script>
</body>