タイピング風に文字を表示する

<h2 class="catch-container" id="typing-text"></h2>

.catch-container {
  font-size: 3rem;                    /* 文字の大きさを大きく（見出し用） */
  color: #000;                        /* 文字色は黒 */
  white-space: nowrap;               /* 途中で改行しないようにする */
  overflow: hidden;                  /* はみ出した部分は隠す（演出用） */
  border-right: 2px solid #000;      /* 黒い縦棒（カーソル風） */
}

const text = "ここにキャッチコピーが入ります"; //表示したいキャッチコピー
const target = document.getElementById("typing-text"); //id="typing-text"というタグを見つける
let index = 0; //今、何文字目かを数えるための数字

function typeChar() {
  if (index < text.length) { // もし、今の文字の位置（index）が、全部の文字数より少ないあいだだけ、文字を1つずつ表示
    target.textContent += text[index]; //1文字ずつ追加する
    index++;  // 次の文字へ進む
    setTimeout(typeChar, 100); // 文字を出すスピード（ミリ秒）0.1秒ごとに繰り返す
  } else { // そうでなければ
    target.style.borderRight = "none"; //終わったらカーソルを消す
  }
}

window.onload = typeChar; //ページが表示されたタイミングで、typeChar() を自動でスタート