//yosakoi-2023
let hasData = async()=>{
   let response = await fetch("./assets/yosakoi2023.json");
   if(!response.ok){
        throw new Error("E");
   }
   let data = await response.json();
   return data;
};
(async()=>{
    let data = await hasData();
    var str = "<table class='table table-striped'>"
    str+= `<tr><th>チーム名</th><th>受付番号</th></tr>`;
    str+= data.map(d=>{
        return `<tr><td>${d.name}</td><td>${d.no}</td></tr>`;
    }).join("");
    str = str + "</table'>";
    document.getElementById("yosakoi-2023").innerHTML = str;
})();

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let angle = Math.PI / 90;
let angularVelocity = 0.01;
let angularAcceleration = 0;
let pivotX = canvas.width / 2;
let pivotY = 250;
let ballX = pivotX + Math.sin(angle) * 100;
let ballY = pivotY + Math.cos(angle) * 100;

function drawPendulum() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(pivotX, pivotY);
  ctx.lineTo(ballX, ballY);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(ballX, ballY, 20, 0, 2 * Math.PI);
  ctx.fill();
  angle += angularVelocity;
  angularVelocity += angularAcceleration;
  ballX = pivotX + Math.sin(angle) * 100;
  ballY = pivotY + Math.cos(angle) * 100;
  requestAnimationFrame(drawPendulum);
}

drawPendulum();

    <script class="js" src="./assets/main.js"></script>
    <script>
        [...document.querySelectorAll(".js")].forEach(elm=>{
            elm.setAttribute("src",elm.getAttribute("src") + "?" + (new Date).getTime());
        });
    </script>