😊
Astroチュートリアルメモ その3-3【JavaScript】
ヘッダーをハンバーガーメニュー化するにあたり、JavaScriptを記述する。
JavaScriptの記述は<script>内に直接jsを書く方法と、<script>内でjsファイルをインポートする方法がある。
AstroはJavaScriptを全て無くしてしまってビルドする（例外は指定できる）というのが売りとみたけど、addEventListenerとか動くのね。
どこかでイベントハンドラは動くようなことが書いてあるのかしら。
後々ちゃんとドキュメントを読まないといけない。
<script>に直接書く
src/pages/index.astro
<script>
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});
</script>
jsを普通にHtml内に書くのと同じように、bodyの最後などで<script> </script>内に書くだけ。
チュートリアルではハンバーガーメニューのアイコンに対してクリックイベントを発生させている。toggleで開いたり閉じたり。
jsファイルをインポートする
src/scripts/menu.js
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});
別にjsファイルを作成しておく。
それをimportするだけ。
src/pages/index.astro
<script>
import "../scripts/menu.js";
</script>
Reactだと、仮想domの影響とかでネイティブなJavaScriptを使うことは少ないが、AstroはJavaScriptを直接書くというのが特徴の1つなのかなという印象。
昔のjsを触っていた経験があるので、querySelectorを直接書けた方が直感的だなとは感じる。
次の記事
Discussion