デベロッパーツールのエラーについて

実現したいこと

エラーの解決

発生している問題・エラーメッセージ

VSコードでjavascriptの練習中のものです。chromeにてデベロッパーツールで確認しながら行っているのですが
なぜか実装されません。HTMLへの読み込みや、出力に関しては正しくできています。
また、コードペンではきちんと実装されており、chatGPTでもコードのミスはないとの回答でした。

エラーの文章は
Uncaught TypeError: Cannot read properties of null (reading 'animate')
at main.js:15:7
クリックすると
「first.animate(keyframes, options);」というコードがピックアップされて
Uncaught TypeError: Cannot read properties of null (reading 'animate')というエラーが出ます。

「first.animate(keyframes, options);」のコードをコメントアウトすると、コメントアウトする前は何もエラーが出ていなかった、他のコードに同じようなエラーが出ます。

また常に「問題」のところにAudit usage of navigator.userAgent, navigator.appVersion, and navigator.platformというメッセージが出ています。ユーザーエージェント文字列の削減というものです。

そしてエラーの数がコードを触っていないのに増えていきます。
今日増えていたのは
「Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.」
というエラーです。

～追記～

HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>KISSA official website</title>
  <meta name="description" content="自家焙煎したこだわりのコーヒーと、思わず長居したくなるような居心地の良い空間を提供するカフェ「KISSA」のウェブサイトです。">
  <meta name="viewport" content="width=device-width">
  <script src="./js/toggle-menu.js"></script>
  <script src="./js/main.js"></script>
  <link href="./css/common.css" rel="stylesheet">
  <link href="./css/index.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
</head>

<body>

  <!-- headerここから -->
  <header class="header">
    <div class="header-inner">
      <a class="header-logo" href="./index.html">
        <img src="./images/common/logo-header.png" alt="KISSA">
      </a>
      <button class="toggle-menu-button"></button>
      <div class="header-site-menu">
        <nav class="site-menu">
          <ul>
            <li><a href="./concept.html">CONCEPT</a></li>
            <li><a href="./menu.html">MENU</a></li>
            <li><a href="./shop.html">SHOP</a></li>
            <li><a href="./access.html">ACCESS</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <!-- headerここまで -->

  <!-- mainここから -->
  <main class="main">
    <div class="first-view">
      <div class="first-view-text" id="firstText"> <!-- id属性をfirstからfirstTextに修正 -->
        <h1>Imagination will <br>take you everywhere.</h1>
        <p>コーヒーを待つ時間も、特別なひとときになる。</p>
      </div>
    </div>
    <div class="lead">
      <p>「想像力はあなたをどこにでも連れて行ってくれる」<br>注文を待つ間に広げた、一冊の本の中に見つけたことば。<br>ゆったり流れる時間の中で、想像をふくらませる楽しさを思い出す。<br>そんな時間を過ごすとき、おいしいコーヒーがあるとうれしい。</p>
      <div class="link-button-area">
        <a class="link-button" href="./concept.html">CONCEPT</a>
      </div>
    </div>
    <div class="recommended">
      <h2>RECOMMENDED</h2>
      <ul class="item-list">
        <li>
          <img id src="./images/index/img-item01.jpg" alt="カフェラテの商品画像">
          <dl>
            <dt>カフェラテ</dt>
            <dd>エスプレッソとミルク、この組み合わせに勝るものはなかなか見つかりません。ホッとしたいとき、やっぱりラテが欲しくなる。</dd>
          </dl>
          <p class="price">¥460</p>
        </li>
        <li>
          <img src="./images/index/img-item02.jpg" alt="レーズンバターサンドの商品画像">
          <dl>
            <dt>レーズンバターサンド</dt>
            <dd>コーヒーに合うお菓子を追求して生まれた当店の大人気メニュー。数量・季節ともに限定のため、見つけたらぜひお試しを。</dd>
          </dl>
          <p class="price">¥480</p>
        </li>
        <li>
          <img src="./images/index/img-item03.jpg" alt="アメリカーノの商品画像">
          <dl>
            <dt>アメリカーノ</dt>
            <dd>浅煎りの豆をこだわりの配合でブレンドした、スッキリと爽やかな飲み口の当店看板メニュー。ホットでもアイスでも。</dd>
          </dl>
          <p class="price">¥420</p>
        </li>
        <li>
          <img src="./images/index/img-item04.jpg" alt="レモネードの商品画像">
          <dl>
            <dt>レモネード</dt>
            <dd>瀬戸内海に浮かぶ小島で、オーナー自らが栽培したとっておきのレモンを、たっぷりと使った自慢のレモネードです。</dd>
          </dl>
          <p class="price">¥420</p>
        </li>
        <li>
          <img src="./images/index/img-item05.jpg" alt="ホットドッグ - チリの商品画像">
          <dl>
            <dt>ホットドッグ - チリ</dt>
            <dd>ちょっと小腹が空いたとき、あると嬉しいホットドッグ。特製チリソースとチーズをかければ、もう言葉はいりません。</dd>
          </dl>
          <p class="price">¥540</p>
        </li>
      </ul>
      <div class="link-button-area">
        <a class="link-button" href="./menu.html">MENU</a>
      </div>
    </div>
  </main>
  <!-- mainここまで -->

  <!-- footerここから -->
  <footer class="footer">
    <nav class="site-menu">
      <ul>
        <li><a href="./concept.html">CONCEPT</a></li>
        <li><a href="./menu.html">MENU</a></li>
        <li><a href="./shop.html">SHOP</a></li>
        <li><a href="./access.html">ACCESS</a></li>
      </ul>
    </nav>
    <a class="footer-logo" href="./index.html">
      <img src="./images/common/logo-footer.png" alt="KISSA">
    </a>
    <p class="footer-tel">TEL 01-2345-6789</p>
    <p class="footer-time">OPEN Fri-Sun 11:00-16:00</p>
    <p class="copyright"><small>&copy;Kissa</small></p>
  </footer>
  <!-- footerここまで -->

</body>

</html>

javascript（js/main.js）
//見出しのアニメーション
const first = document.querySelector('#firstText');
console.log("確認");
const keyframes = {
    opacity: [0, 1],
    transform: ['0 50px', 0],
};

const options = {
    duration: 3000,
    easing: 'ease',
    fill: 'forwards',
};

first.animate(keyframes, options);

文章が分かりづらく申し訳ないのですが、１週間ほど悩んでいます。
よろしくお願いいたします。

int32_t

2023/07/23 23:42

コードを開示してください。

ami-y

2023/07/23 23:53

すみません。こちらです。 const first = document.querySelector('#firstText'); console.log("確認"); const keyframes = { opacity: [0, 1], transform: ['0 50px', 0], }; const options = { duration: 3000, easing: 'ease', fill: 'forwards', }; first.animate(keyframes, options);

int32_t

2023/07/24 00:00

JavaScriptだけでは原因はわかりません。HTMLも含めたすべてをコメントではなく質問文に追加してください。

ami-y

2023/07/24 00:09

初めての質問で使いこなせておらず、申し訳ありません。

int32_t

2023/07/24 00:15

質問文のJavaScriptコードが js/main.js ですか?

ami-y

2023/07/24 00:26

はい！こちらも編集しておきます。

m.ts10806

2023/07/24 00:31

本文全部codeになってしまっているので、そこもあわせてお願いします

行動規範の内容に同意します

回答1件

ベストアンサー

js
1  <script src="./js/main.js"></script>

ブラウザはHTML文書の先頭からタグを解釈していきます。この <script> が実行される時点では、まだ <div class="first-view-text" id="firstText"> は解釈されていないので、document.querySelector('#firstText') は null になってしまいます。

JavaScriptの実行を遅らせる必要があるので、

JavaScriptコード全体を document.addEventListener('DOMContentLoaded', () => { 〜 }); で囲むまたは
<script> を </body> の直前に移動するまたは
<scritp> に defer を付ける。<script defer src="./js/main.js"></script>

などで解決すると思います。