はじめに

以前作った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