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 のライブラリが先に読み込まれるようにする。
