Zenn
🎉

音楽理論初学者向けに作ったダイアトニックコードのカンペ的アプリ「Diatonic Cheat(ダイアトニック・チート)」

2023/10/22に公開
PWA
React
個人開発
音楽
音楽理論
tech

はじめに

HTML + CSS + JavaScriptで作った音楽理論の初心者向けに作ったダイアトニックコードをキーを選んで表示させることができるWebアプリをReact.jsで作り直したものです。
音楽をやっていない人や音楽理論をマスターした人には全く需要の無いアプリだと思いますが、ゲームの移植やリマスターみたいな事をしたくなったのでやりました。
PCやタブレット、スマホにダウンロードしてPWAとして使うこともできます。(GitHub Pagesにデプロイしているせいか、PWAとして使うとネットに繋がっていなくても使用できます。)
ちなみに、Diatonic Cheat(ダイアトニック・チート)というタイトルは、「ダイアトニックコードのチートシート」を略しただけです。
Diatonic Cheat
動画

使い方

  • まず、キーの部分をクリックして(またはタッチして)

  • 任意のキーを選択すると

  • そのキーのダイアトニックコードが表示されます(画像ではF)。

  • ちなみにスマホだと表示が縦になります。

仕様技術

  • React.js
  • TypeScript
    React.jsを使って制作したことによって以前作ったアプリをPWAとして使えるようになったので利便性が増しました。
    ちなみに、前回・前々回と同じくlocalStorageを活用して一度選んだキーを記憶して
    一度アプリを落とした後でも再度開くとすでにそのキーが選ばれた状態で表示されます。

まとめ

今回は機能もそのままなので半日足らずで完成させることができました。
ゲームの移植版みたいな感じだなと作っていて思いました。
React.jsで作ることで従来よりもコードがスッキリしてコードの見通しが良くなりました。
多分TypeScriptで作る必要は無かったけれど、慣れるためにこれからも使っていきます。
もう二つほどHTML + CSS + JavaScriptのWebアプリがあるので、そっちもReact.jsで移植版を作ろうと思います。

オノまとめ
Event Schedule Image Generator

Discussion