初めてのスクリプトをブラウザに送信する

クライアントサイドのインタラクションを必要とするような、モバイルの画面サイズでリンクを開閉するハンバーガーメニューを追加しましょう！

ここで学ぶことは…

• ハンバーガーメニューコンポーネントを作成する
• サイト訪問者がナビゲーションメニューを開閉できるように<script>を書く
• JavaScriptを.jsファイルに移動する

ハンバーガーコンポーネントを作成する

セクションタイトル： ハンバーガーコンポーネントを作成する

モバイルメニューを開閉する<Hamburger />コンポーネントを作成します。

1. src/components/にHamburger.astroという名前のファイルを作成します。

2. 以下のコードをコンポーネントにコピーします。これは、モバイルでナビゲーションリンクを開閉する3行の「ハンバーガー」メニューを表わします。（あとでglobal.cssに新しいCSSスタイルを追加します。）

   src/components/Hamburger.astro

   ---
   ---
   <div class="hamburger">
     <span class="line"></span>
     <span class="line"></span>
     <span class="line"></span>
   </div>

3. Header.astroの<Navigation />コンポーネントの直前に、新しい<Hamburger />コンポーネントを配置します。

   コードを表示

   src/components/Header.astro

   ---
   import Hamburger from './Hamburger.astro';
   import Navigation from './Navigation.astro';
   ---
   <header>
     <nav>
       <Hamburger />
       <Navigation />
     </nav>
   </header>

4. 以下のハンバーガーコンポーネント用スタイルを追加します。

   src/styles/global.css

   /* ナビゲーションのスタイル */
   .hamburger {
     padding-right: 20px;
     cursor: pointer;
   }
   
   .hamburger .line {
     display: block;
     width: 40px;
     height: 5px;
     margin-bottom: 10px;
     background-color: #ff9776;
   }
   
   .nav-links {
     width: 100%;
     top: 5rem;
     left: 48px;
     background-color: #ff9776;
     display: none;
     margin: 0;
   }
   
   .nav-links a {
     display: block;
     text-align: center;
     padding: 10px 0;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: bold;
     text-transform: uppercase;
   }
   
   .nav-links a:hover, a:focus {
     background-color: #ff9776;
   }
   
   .expanded {
     display: unset;
   }
   
   @media screen and (min-width: 636px) {
     .nav-links {
       margin-left: 5em;
       display: block;
       position: static;
       width: auto;
       background: none;
     }
   
     .nav-links a {
       display: inline-block;
       padding: 15px 20px;
     }
   
     .hamburger {
       display: none;
     }
   }

初めてのスクリプトタグを書く

セクションタイトル： 初めてのスクリプトタグを書く

ヘッダーはまだインタラクティブではありません。ハンバーガーメニューへのクリックに応じてナビゲーションリンクを表示したり非表示にしたりするように、ユーザーの入力に応答することができないからです。

<script>タグを追加すると、クライアントサイドのJavaScriptがユーザーのイベントを「待ち受け（Listen）」、それに応答します。

1. index.astroの</body>閉じタグの直前に、以下の<script>タグを追加します。

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburger').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
     </script>
   </body>

2. ブラウザのプレビューを複数のサイズで開き、このページのナビゲーションメニューがスクリーンサイズに対してレスポンシブであり、またユーザーの入力に反応することを確認します。

.jsファイルをインポートする

セクションタイトル： .jsファイルをインポートする

各ページにJavaScriptを直接書く代わりに、<script>タグの内容をプロジェクト内の.jsファイルに移動しましょう。

1. （新しく/scripts/フォルダを作成した上で）src/scripts/menu.jsを作成し、JavaScriptをそこに移動します。

   src/scripts/menu.js

   document.querySelector('.hamburger').addEventListener('click', () => {
     document.querySelector('.nav-links').classList.toggle('expanded');
   });

2. index.astroの<script>タグの内容を以下のファイルインポートに置き換えます。

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburger').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
   
       import "../scripts/menu.js";
     </script>
   </body>

3. ブラウザのプレビューを再度小さいサイズで開き、ハンバーガーメニューがナビゲーションリンクを開閉することを確認します。

4. 他のabout.astroとblog.astroの2ページにも同じ<script>とインポートを追加し、両ページにレスポンシブでインタラクティブなヘッダーがあることを確認します。

   src/pages/about.astro & src/pages/blog.astro

     <Footer />
     <script>
       import "../scripts/menu.js";
     </script>
   </body>

要点

これまでにも、サイトの一部を作成するためにJavaScriptを使用してきました。

• ページタイトルと見出しの動的な定義
• 概要ページでのスキルリストのマッピング
• HTML要素の条件に応じた表示

これらの命令はすべてビルド時に実行され、サイトの静的HTMLを作成したあと、コードは「捨てられます」。

<script>タグ内のJavaScriptはブラウザに送信され、ユーザーの操作に応じてページの更新や入力の切り替えなどを実行します。

確認テスト

セクションタイトル： 確認テスト

1. Astroは、コンポーネントのフロントマターに書かれたJavaScriptをいつ実行しますか？

   1. AstroはJavaScriptを実行しない。

   2. ビルド時。

   3. サイト訪問者がボタンをクリックしたとき。

   確認する

2. Astroでは任意でJavaScriptをブラウザに送信できますが、その目的は何ですか？

   1. ユーザーがページリンクをクリックできるようにするため。

   2. 読み込み時間を短縮するため。

   3. クライアントサイドのインタラクティブ機能。

   確認する

3. クライアントサイドのJavaScriptがユーザーのブラウザに送信されるのは、それがどこに書かれた・インポートされたときですか？

   1. <script>タグ内。

   2. .astroファイルのコードフェンスの間。

   3. global.css内。

   確認する

チェックリスト

セクションタイトル： チェックリスト

• <script>タグ内のJavaScriptによりクライアントサイドのインタラクティブ機能を追加できる。
• <script>タグ内に.jsファイルをインポートできる。

参考

セクションタイトル： 参考

Astroにおけるクライアントサイドスクリプト