😊

Astroチュートリアルメモ その3-3【JavaScript】

2022/11/04に公開約1,100字

ヘッダーをハンバーガーメニュー化するにあたり、JavaScriptを記述する。

JavaScriptの記述は<script>内に直接jsを書く方法と、<script>内でjsファイルをインポートする方法がある。

https://docs.astro.build/en/tutorial/3-components/4/

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を直接書けた方が直感的だなとは感じる。

次の記事

https://zenn.dev/k_neko3/articles/a6447f95172b2a

Discussion

ログインするとコメントできます