Astro で、JavaScript が動作しないときは is:inline を使う

Astro でビルドしたが、スクリプトが動かないとき、ターミナルを見ると以下のような警告が出ることがある。

まずは、Astro でのクライアントサイドスクリプトの処理方法を確認する。

属性

Astro では、クライアントサイドの JavaScript を正しく動作させるために、スクリプトに特別な属性を追加する必要がある場合がある。

それは、is:inline 属性である。

Astro では、UI フレームワーク（React、Svelte、Vue など）を使用せずに、標準の HTML script タグを使用して Astro コンポーネントにインタラクティビティを追加できます。これにより、JavaScript をブラウザで実行し、Astro コンポーネントに機能を追加することができます。

デフォルトでは、Astro は script タグを処理してバンドルし、npm モジュールのインポート、TypeScript の記述などをサポートしている。

しかし、is ディレクティブを追加することで、Astro がスクリプトを処理しないようにすることができる。

この場合、スクリプトはそのまま HTML にレンダリングされ、ローカルインポートは解決されず、動作しなくなる。また、コンポーネント内にある場合、コンポーネントが使用されるたびにスクリプトが繰り返される。

Astro がスクリプトを処理しないようにするには、is ディレクティブを追加する。

CDN からのスクリプト読み込み

しかし、Astro では、is スクリプト内でのインポートは通常の ES モジュールインポートとして処理されず、クライアントサイドでエラーになることがある。そんなケースでは、cdn を直接読み込ませてもよい。

スクリプトの順序を修正

それでもなお、is 属性が HTML に反映されないことがある。これは Astro のビルドプロセスの仕様で、is 属性はビルド時に処理されるだけで、最終的な HTML には含まれない。

このようなケースでは、スクリプトの順序を修正し、Swiper のライブラリが先に読み込まれるようにする。