キー別ダイアトニックコード一覧

概要

12キー × 8スケール/モードのダイアトニックコードを、表で一覧できるツールです。コードをタップすると、構成音を指板上で確認できるモーダルが開きます。理論の表と、実際の運指を、ワンタップで行き来できる構造にしました。

用途

コード理論を学ぶ・参照するためのリファレンスです。

使用技術

• — PHP / バニラJavaScript
• — CSS（スティッキーポジション・モーダル）

工夫点

技術面

12キー × 8モード分の全データ（約768セル）を、サーバーから取得するのではなくJSの定数として直接埋め込んでいます。ページが開いたあとは追加のリクエストが発生しないので、操作の反応が速いです。指板表示は、ギター指板ビジュアライザーの部品を再利用しています。

使いやすさ

キー名（C、Eb、F#など）を入力欄に打つと、その行だけがハイライトされて絞り込めます。横スクロール時もキー列がスティッキーで残るので、長い表でも迷子になりません。