Diatonic Cheat-SYABLOG

はじめに

以前作ったHTML + CSS + JavaScriptで作った音楽理論の初心者向けに作った

選択したキーのダイアトニックコードを表示させることができるWebアプリを、React.jsで作り直したものです。

音楽をやっていない人や音楽理論をマスターした人には全く需要の無いアプリだと思いますが、ゲームの移植やリマスターみたいな事をしたくなったのでやりました。

PCやタブレット、スマホにダウンロードしてPWAとして使うこともできます。
GitHub Pagesにデプロイしているおかげか、PWAとして使うとネットに繋がっていなくても使用できます。

ちなみに、Diatonic Cheat(ダイアトニック・チート)というタイトルは、
「ダイアトニックコードのチートシート」を略しただけです。

こちらからどうぞ→Diatonic Cheat

React.jsを使って制作したことによって以前作ったアプリをPWAとして使えるようになったので利便性が増しました。

ちなみに、localStorageを活用して一度選んだキーを記憶して

一度アプリを落とした後でも再度開くとすでにそのキーが選ばれた状態で表示されます。

今回は機能もそのままなので半日足らずで完成させることができました。

ゲームの移植版みたいな感じだなと作っていて思いました。

React.jsで作ることで従来よりもコードがスッキリしてコードの見通しが良くなりました。

TypeScriptを使う必要は無かったけれど、2023年当時は慣れるための習作的な感じで作っていました。

もう二つほどHTML + CSS + JavaScriptのWebアプリのReact.js移植版を作ったので後日紹介します。