概要

楽曲のコード進行をディグリーネーム（度数表記）に変換して表示するアプリケーションを作りました。
フレームワークは Nuxt.js を使用しました。
この記事はアプリケーションの制作動機と設計について書かれています。

どんなアプリケーションか？

　chord2degree
　楽曲のコード進行をディグリーネーム（度数表記）に変換して表示するアプリケーションです。

　GitHubのリポジトリ

なぜ、作ったのか？

コード弾きのために度数表記の譜面を作成したかった。
邦楽に典型的なパート区分（AメロやBメロなど）に対応した譜面を作成したかった。

どんな作りか？

データ設計

　楽譜のデータ構造は以下です。

// score[ part{id, name, bars[[note, note],[note, note, ...] ...]} ...]
const Score = [
  {
   id, // partのid
   name, // partの名前(AメロやBメロ等)
   // パートの中の小節
   bars: [[note, note], [note, note, ...] ...]
  },
  ...
]

// 具体例
const Score = [
  {
    id: 1,
    name: 'A',
    bars: [
      ['Em', 'D'],
      ['C', 'G'],
      ['C', 'G'],
      ['A#dim', 'B'],
      ['Em', 'D'],
      ['C', 'G'],
      ['C', 'G'],
      ['D', 'G', 'N.C']
    ] 
  }
]

コンポーネント設計

　主要なコンポーネントは以下の四つです。（楽譜・パート・小節・音符です。）

Score
tonic
Part
tonic
name (...AメロやBメロなどの区分)
Bar
tonic
degreeName
Note

　主音(tonic)とディグリーネーム(degreeName)は、各コンポーネントが保有するようにしました。
　主音は、各コンポーネント（Note以外）がデータオブジェクトで管理します。
　ディグリーネームは、Bar（小節）が算出プロパティで管理します。

度数表記への変換

　コード表記から度数表記への変換は、音楽理論のライブラリである tonal を使用しました。
　tonal には、コード進行の他にも音符やスケールなどの音楽理論に関するモジュールがあります。
　今回は progression を使用しました。

import { Progression } from "@tonaljs/tonal";

Progression.toRomanNumerals("C", ["CMaj7", "Dm7", "G7"]);
// => "IMaj7", "IIm7", "V7"]

その他

　その他には以下のような技術を使いました。

CSSフレームワーク：　Bulma
ホスティング：　Netlify

　スマートフォンではレイアウトが崩れます。また印刷時にもレイアウトが崩れます。
　もし印刷される場合は Awesome Screenshot（chrome拡張機能）などを使用して下さい。