はじめに
以下でポストしている内容を、試した際の手順のメモです。
関連する参照先の情報
今回試した内容は、以下のリポジトリで公開されているものを使っています。
●stamefusa/joycon-roulette-reader
https://github.com/stamefusa/joycon-roulette-reader/tree/main
上記を公開された方は、以下の記事の内容も作られたりしています。
●すべては運次第、自動でマークシートを塗る装置 (1/2) :: デイリーポータルZ
https://dailyportalz.jp/kiji/jidou-de-marksheet
（「人生ゲーム for Nintendo Switch専用ルーレットコントローラー」を知ってから、『買ってモノづくり活動に使うかどうか』を長らく考え中だったのですが、以下の記事を見たのをきかっけに今回の購入を決めたのがありました）
↓こちらは、その関連ポストです。
過去に自分が扱った内容
Joy-Con を JavaScript実装のコードなどから扱う場合、HIDデバイスとして値の取得などを行ったり、というのが必要になります。
それに関連する内容で、直近では以下の内容を Node.js のパッケージを使って試していました。
●node-hid を使って Joy-Con のボタン押下を Node.js で検出（とりあえず A・Bボタン） - Qiita
https://qiita.com/youtoy/items/06637ac47f10919a28f6
また過去には、WebHID というブラウザの API を使って、Joy-Con とブラウザ上の処理（JavaScript の処理）をつなげたり、さらに ＋α を加えたものを試したりしていました。
【余談】 Joy-Con と別のデバイスの連携（ブラウザの WebHID で仲介）
少し話がずれるかもしれないですが、いくつか、Joy-Con ＋ WebHID ＋α の組み合わせの、過去の試作事例を掲載してみます。物理デバイスをあれこれ連携させるのは楽しいです！
■ micro:bit につないだフルカラーLEDテープの制御（micro:bit とブラウザは Web Serial API で通信）
■ toio の制御（toio とブラウザは Web Bluetooth API で通信）
【余談】複数台の利用
これも余談になりますが、WebHID ＋ Joy-Con については、複数台の Joy-Con を扱うこともできたりします。
試した手順など
余談が多くなりましたが、ここから試した手順の話です。
なお、「git のクローンでソースを持ってくるとか、TypeScript の環境がある前提」ではない手順でやってみています（自分の今の環境以外で、環境があまりない状態からシンプルに試すこともありそうだったので）。ただ、Node.js は導入済み、という環境を前提にしています。
ビルドまで
まずは以下のページのメニューから、ZIPファイルによるダウンロードを行い、それを解凍しました。
●stamefusa/joycon-roulette-reader
https://github.com/stamefusa/joycon-roulette-reader/tree/main
以下のようなファイル一式を得ることができます
ビルド手順
ビルドについては、環境がそろっていればリポジトリで書かれている npm run build && npm start を実行するだけ、と思われます。
一方そうではない場合、例えば TypeScript の環境ができてない場合は、このコマンドを実行しても以下のエラーがでます。
上記は tsc コマンド絡みのものです。
ここを、以下のローカルインストールを追加したりなどする手順で進めてみました。パッケージのインストールと依存関係のインストールをして、ビルド＆実行を進める、という流れです。
npm install typescript @types/node
npm install
npm run build
npm start
これで、コード関連の準備は整いました。 npm start までの一連のコマンドでエラーが出ずなければ、ビルド周りの手順は完了です。
Joy-Con と合わせて使う
上記の手順をそのまま進めた場合、 npm start を実行した後は、以下のような表示になると思います。
ブラウザで http://localhost:3000 にアクセスするという情報とともに info: Finding JoyCon-R verbose: [] という出力が出ています。
後者の出力内容は、PC と Joy-Con（R）がペアリングできてない時に、Joy-Con が見つからない（Joy-Con から情報を取得できない）という状態のもののようです。
そのため、Joy-Con と PC をペアリングして、さらにペアリング済みの Joy-Con（R） を「人生ゲーム for Nintendo Switch専用ルーレットコントローラー」にセットします。
Joy-Con のペアリング
Joy-Con と PC をペアリングする方法は、検索すると色々情報が出てくると思いますので、それが書かれた記事の例のみ掲載します（Web検索して出てきたものを、少し内容は確認しつつも、適当に選んで掲載しています）。
●【レポ】SwitchのJoy-ConはMacで使える！アプリ起動や制御、マクロ実行も - iPhone Mania
https://iphone-mania.jp/news-476539/
●Joy-ConをSteamで使う - ぺんだこ日記
https://pendako-nikki.com/joy-con-how-to-use-with-windows11/
ペアリングができた状態での表示
Joy-Con（R）と PC のペアリングができていて、なおかつその Joy-Con が「人生ゲーム for Nintendo Switch専用ルーレットコントローラー」に接続されていれば、以下のような表示になると思います。
その後、少し待つと Joy-Con が軽く振動して、なおかつターミナルのほうには verbose: Roulette is ready という表示が出てきます。
これで、Joy-Con・ルーレットコントローラーの準備は完了です。
ルーレットを回した結果をブラウザに表示
ルーレットを回した結果をブラウザに表示してみます。
上記のセットアップを全て終えた状態で、 http://localhost:3000 にアクセスしましょう。そうすると、以下のように数字の 1 が表示された状態になります。
ここでルーレットコントローラーを回すと、その途中や停止後に、数字の表示が変わっていくと思います。例えば 9 が止まった時の状態は以下になりました。
この時にターミナルのほうを見てみると、以下のように停止した数字が何か、というのが出力されます。
これで、今回の内容は完了です。
余談
ここからは余談になりますが、このプログラムのフロントエンド側を書きかえて使うと、表示を手軽に変えられます。例えば、ちょっとしたお試しの 1ステップ目として、p5.js の描画に置きかえるというのを試してみました。
さらに、「フロントエンド側での Web Serial API を使った通信処理」と「MakeCode による micro:bit でのシリアル通信の受信処理・LED上での数字表示」の実装を混ぜ込んだものも試してみました。
その他、今回使ったサンプルで得られている結果の、バックエンドからフロントエンドの間での通信部分自体に手を加えて、受信側を完全に自作したものも作れると面白そうです。そうすると、受信側デバイスの種類や、そこでできることも広がりそうな気がします。
さらに、Joy-Con との接続・Joy-Con からのデータ受信処理まわり一式をブラウザの WebHID で実装しなおせば、HTMLファイルとブラウザのみで今回の内容を実現することもできて、作品のデモをする時の取り扱いを簡単にできそうです。Joy-Con を HIDデバイスとして扱う際のやりとり、データフォーマットを実装してくれているので、その情報をもとにすると色々と独自実装も進められそうです。