【完走賞ゲット-20】JavaScript の addEventListener で複数イベントを一度に追加する話（p5.js Web Editor上で Joy-Con と gamecontroller.js を用いた処理で利用） #JavaScript

はじめに

こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 20日目の記事です。

この記事の内容は、JavaScript の addEventListener で複数イベントを一度に追加する話です。この記事の内容をやろうと思ったきっかけは、以下の内容の一部が関係しています。

●【完走賞ゲット-11】gamecontroller.js を p5.js Web Editor上で使ってみる（DualShock 4 との組み合わせ） - Qiita
　https://qiita.com/youtoy/items/1cf1fe244d992456140f

具体的には、gamecontroller.js を使う処理の中で、利用するコントローラーのボタン 1つに対して 1つ以上の EventListener を登録する感じに見える部分がありました。その部分の処理を多数のボタンに対応させようとすると、addEventListener の処理部分が面倒なことになりそうと思い、それに対して良い対処法はないかと思ったことです。

調べて出てきた内容

そして、検索して出てきた記事などの情報で、以下が気になりました。

●【JavaScript】addEventListenerで複数イベントを一度に追加する賢い方法 | PisukeCode - Web開発まとめ
　https://pisuke-code.com/js-addeventlistener-multi-events/

gamecontroller.js を用いた処理でも、上記を参考にした処理を使ってみることにしました。

今回使うコントローラー

上で掲載していた Qiita の記事では、DualShock 4 を使っていましたが、今回は Joy-Con を使います。

まずは、Joy-Con を PC とペアリングし、以下のサイトで、Gamepad API で反応するイベントを調べ、今回試すボタンを選びます。

とりあえず、以下のボタン 6つを使ってみることにしました。

  "button0", // A
  "button1", // X
  "button2", // B
  "button3", // Y
  "button7", // R
  "button8", // ZR

自分が試した処理の内容

上記の記事の情報を元に、EventListener の処理をまとめて行う方法を、p5.js　Web Editor上で Joy-Con と gamecontroller.js を組み合わせた内容で試してみました。
具体的には、以下のようなプログラムを作りました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gamecontroller.js@1.5.0/dist/gamecontroller.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script src="sketch.js"></script>
  </body>
</html>

const buttonList = [
  "button0", // A
  "button1", // X
  "button2", // B
  "button3", // Y
  "button7", // R
  "button8", // ZR
];

function setup() {
  createCanvas(400, 400);

  gameControl.on("connect", (gamepad) => {
    console.log("A new gamepad was connected!");

    buttonList.forEach((elem) => {
      gamepad.before(elem, () => {
        console.log(`${elem} pressed...`);
      });
    });
  });
}

function draw() {
  background(220);
}

そして、ログ出力を見てみると、Joy-Con上の 6つのボタンを押した際、意図した出力が得られているのを確認できました。