More than 3 years have passed since last update.

コード(和音)を五線譜上に表示するWebアプリを作った(TypeScript+React+Redux)

Last updated at 2021-09-30Posted at 2021-09-30

作成物

コード名を入力すると五線譜上に音符が表示される。
入力欄の左の音符記号ボタンを押すとト音とへ音の切り替えが可能。

ピアノの楽譜を作る際にギター譜に載っているコードをアルペジオにして(分解して)左手にあてると楽に楽譜が作れそうだと考えた。
しかし音楽理論が分からずコードも全然知らない、かつ検索しても見やすいコードのサイトが見当たらなかったため作成した。

TypeScript+Reactを学習していて、ちょうど状態管理方法としてReduxなるものが使われていると知ったため。

入力したコード名と一致するデータが存在すれば音符記号を表示させる。記号1つに対してcssを1つ割り当てることによってコードにおける音ごとの表示を可能にした。

画像を使うと楽に作れると思ったが、画像を使ってしまうとプログラマーとして負けた気持ちになると何故か思ってしまったため、画像は使用していない。
ト音記号とへ音記号と音符と♯と♭は文字を使用し、五線譜はcanvasで描画している。

Webアプリでは主にボタンを押した後に結果を表示させるような気がするが(偏見)、ボタンを押す手間がもったいないため、入力した時点で一致するコードが存在する場合に表示するようにした。

最初はト音でしか考えていなかったが、ピアノの左手にあてるのであればへ音が必要だと気が付き、ボタンで切り替えられるようにした。

今回初めてReduxを使ったのでまず概念を理解するのに苦労した。
React + Redux + TypescriptでサンプルWebアプリ - Qiita
この記事をかなり参考にさせていただいた。

約170個あるコードのそれぞれの音と記号に対する位置調整。170*1コードあたり大体4個の記号≒680個の位置調整を行っている。

取り掛かるまでは全くと言っていいほやる気がど出なかったが、始めてみれば特に問題なかった。やはり実際に始めることは大切だと感じた。
初めてWebアプリを作ってみたが、大体想像していたようなものが作成でき良かった。
便利そうなため可能であればReduxを使っていきたい。