本記事について
ジーズアカデミー Advent Calendar 2022の17日目（カレンダー2）の投稿です。
僕がジーズアカデミーでプログラミングを学んでいたときに作った課題をただ誇らしげに紹介する記事です。
3作品紹介しますが、どれもGitHub Pagesでデプロイ済みなので皆さんご自由に遊んでみてください！
自己紹介
G's ACADEMY FUKUOKA LAB6期生。それまでプログラミングはほぼ未経験。現在はエンジニアとして勤務。
作った課題たち
チーズアカデミー（HTML/CSS）
ソースコード：https://github.com/ykiyoshima/cheese-academy
ジーズアカデミーの初回課題としておなじみ「チーズアカデミー」。このときは基本に忠実に作りました笑
申し訳程度の魔改造要素として、右上の「Into the dark...」ボタンを押すとすべてのコンテンツの色が反転したり、右端で動いているチーズアイコンをクリックしたらチーズの亡霊がクイズを出したり（？）する機能を実装しています。
勇者ジーズの冒険（JavaScript じゃんけんアプリ）
ソースコード：https://github.com/ykiyoshima/janken-app
コマンドバトル制のゲーム。JavaScriptの乱数と条件分岐だけで作っています。
フィールド画面で操作キャラを1マス動かしたときに敵キャラがランダムな方向に1マス動くのも乱数と条件分岐ですし、バトル画面でコマンドを選択したとき、敵にダメージを与えるか、自分がダメージを食らうか、何も起きないかも乱数と条件分岐です。たまに攻撃が相手の急所に当たることもありますが、これも乱数と条件分岐です。
ちなみにフィールド画面からバトル画面への場面転換はz-indexを使ってフィールド画面の上にバトル画面のコンテンツを重ねることで実装しています。なかなかゴリ押しの効いたパワーコードですね笑
当時「最強のじゃんけんアプリを作る」と決意して本気で作った課題なので、よかったら皆さんに遊んでもらえると嬉しいです！
Web Drums（JavaScript メモパッドアプリ）
ソースコード：https://github.com/ykiyoshima/memopad-app
あなたのキーボードがドラムになるアプリ。録音、再生、リズム修正、テンポ変更、ローカルストレージへ録音データの保存ができます。
ここだけの話ですが、実は録音自体はしていません。録っているのは特定のキーを押したときのタイムスタンプです。
「Start Rec.」ボタンを押してメトロノームが8回鳴った後（9回目の音）を始点（0秒）として、そこから何秒経過したときにそのキーが押されたか、の情報を配列に格納しています。「Play Music」ボタンを押すと、その瞬間を始点（0秒）として配列に格納したタイムスタンプに達したとき、そのキーに対応するドラムの音を鳴らす、というカラクリです。
さらなる推しポイントは「リズム修正」機能です！
Web Drumsでは各ドラムパーツの音を重ねて録音することができるのですが、重ねると同じタイミングで鳴ってほしいところが少しズレてしまっていることが往々にしてあります笑
そこで「Fix Music」ボタンを押してください。プログラムでキーを押したタイミングのズレをいい感じに補正してくれます！
この機能を紐解くと、以下のような処理の合わせ技であると言えます。
- 設定したテンポから拍の基準リズムを計算し、配列に保存する
例えばBPM = 60（1秒に1回メトロノームが鳴るテンポ）の場合、テンポを設定した時点でrhythm = [0, 0.25, 0.5, 0.75, 1, ...]のように1秒間当たり4拍分の基準リズムを事前に作成しておきます。 - 録ったタイムスタンプと1.で作った基準リズムを比較し、タイムスタンプを最も数値が近い基準リズムに補正する
例えばBPM = 60で録ったタイムスタンプがrec = [0.04, 0.22, 0.53, 0.74, 0.99, ...]だった場合、それぞれの数値が基準リズムのどの値と最も近いかを繰り返し処理で判定します。
その結果、0.04 ≒ 0、0.22 ≒ 0.25、0.53 ≒ 0.5、...となるため、rec = [0, 0.25, 0.5, 0.75, 1, ...]のような感じで、録ったタイムスタンプの配列を基準リズムの数値で構成される配列に置き換えるわけです。
こうすることで、録音時の微妙な音のズレを解消する機能が実装できた、というお話でした。
難しい話はとにかく、まずは触ってみてください！操作方法は画面右上の？マークをクリックすると表示されます！
まとめ
とにかく楽しんでコード書きまくりましょう！好きこそものの上手なれです！