【Tone.js】和音鍵盤に四和音（セブンス、シックスス）を追加する

Tone.jsの続きです。前回はようやく三和音（トライトーン）の別のコードを増やしました。今回は四和音（セブンスコードとシックスス）にトライ。それではいきましょう！

【目次】

前回のおさらい
四和音追加のための下準備
三和音の構成音まとめ
四和音を追加
- 四和音追加の第一歩！メジャーセブンス（M7）
- 他の四和音も追加する
四和音の構成音まとめ
最後に

※参考：前回記事
【Tone.js】和音鍵盤に三和音（トライアド・コード）を追加する - クモのようにコツコツと

※参考：Tone.jsを習得するためにやった事まとめ qiita.com

前回のおさらい

前回の最後の形はこちら。

See the Pen tone.js-12cord- 15 by イイダリョウ (@i_ryo) on CodePen.

メジャー、マイナー以外の三和音を追加。詳しくは記事を参照。

※参考：前回記事
【Tone.js】和音鍵盤に三和音（トライアド・コード）を追加する - クモのようにコツコツと

四和音追加のための下準備

三和音の「（トライアド）」を削除

dtタグの「三和音（トライアド）」の部分、このあとこうする予定だった。

三和音（トライアド）
四和音（セブンス）
五和音（ナインス）

しかし、コードについて調べているとこれに当てはまらない形のコードも多いことがわかった。見た目もコンパクトになるので、「（トライアド）」の文字は今のうちに取ってしまおう。

<form name="code_types" class="">
    <dl>
        <dt>三和音</dt>
        <!--中略-->
    </dl>
</form>

メジャーコードを「(M)」に

メジャーコードは「M」、マイナーコードを「m」と表記したが、メジャーコードは無印で表記されることが多い（無印だとわかりにくいので大文字Mにした）

この先、四和音以上の和音でのコード表記はメジャーコード無印が前提になることがわかった。無印にするわけにはいかないが、それと同じ意味だよ、ということで今のうちにカッコ付き表記「(M)」に直したい。

HTML

<label><input type="radio" id="code_M" name="code_type" value="メジャー(M)" onchange="codeTypeSelect()" checked>(M)</label>

HTMLの「三和音」のラジオボタンのところの文字を「(M)」にする。

JSコード

//コードタイプ
var codeTypes = [
    {'codeName': '(M)',
        'codeKeys': [1,5,8]},
    // 中略
];

JSの変数codeTypesのcodeNameも(M)に

構成音を表示

この先、だんだんコードの種類が増えていくと、どんな構成音なのかが音を聴いただけではわかりにくくなってくる。今のうちに構成音を表示するようにしたい。

HTMLコード

<p id="code_type_text"></p>
<p id="code_keys_text"></p>

#code_type_textの下に#code_keys_textを追加。

JSコード

const codeKeysText = document.querySelector('#code_keys_text');

まず変数codeKeysTextで#code_keys_textのDOMを取得する。

コードタイプ設定に反映

//コードタイプ設定
  function codeTypeSelect() {
    for(let i = 0; i < codeType.length; i++){
      if(codeType[i].checked) {
        const CodeTypeValue = codeType[i].value;
        codeTypeText.innerHTML = CodeTypeValue;
        const CodeKyesValue = codeTypes[i].codeKeys; //追記
        codeKeysText.innerHTML = '構成音:' +  CodeKyesValue;  //追記
        return chords[i];
      }
    }
  }

変数CodeKyesValueでcodeTypesのi番目のcodeKeysを取得
codeKeysTextのタグの中身を「構成音：」とCodeKyesValueにする

なお、これまでfor文の条件の中は変数iはvarで宣言していたが、letに変更した。（その方がブロック外との干渉が起こりにくい）

※参考：JavaScriptの変数宣言はletにすべきか『入門JavaScriptプログラミング』から解説：CodeZine（コードジン）

できあがったものがこちら

See the Pen tone.js-12cord- 16 by イイダリョウ (@i_ryo) on CodePen.

和音ボタンを切り替えると構成音が見えて、前よりわかりやすくなった！

ちなみに、構成音は単純にルート音からの鍵盤数（半音）で数える方式にした。

三和音の構成音まとめ

構成音が見やすくなったのであらためて三和音（トライアド）の特徴をまとめる。

コード名	略称	構成音	備考
メジャー	(M)	1,5,8	ルート音から第二音が長三度、第三音が完全五度
マイナー	m	1,4,8	メジャースケールの第二音を半音下げる（短三度）
オーギュメント	aug	1,5,9	メジャーコードの第三音を半音上げる（増五度）
ディミニッシュ	dim	1,4,7	マイナーコードの第三音を半音下げる（減五度）
サスペンデッド4th	sus4	1,6,8	メジャーコードの第二音を半音上げる（完全四度）

1オクターブの音程はC（ド）からの白鍵（8音階）を一度、二度、三度と数える。

一度、四度、五度には「完全」が付く。それ以外の鍵盤には「長」と「短」がつく。C（ド）からの白鍵はこうなる。

ド：完全一度
レ：長二度
ミ：長三度
ファ：完全四度
ソ：完全五度
ラ：長六度
シ：長七度

※参考：１３. 音程一覧表（基本版） / 誰でもわかる！音楽理論

完全音程か半音上げると増音程、半音下がると減音程という。

※参考：１４. 「完全」の中で使われる減音程と増音程 / 誰でもわかる！音楽理論

長音程から半音上げると増音程、半音下げると減音程。減音程から半音あげると長音程、半音下げると減音程。

※参考：１５. 「短・長」の中で使われる減音程と増音程 / 誰でもわかる！音楽理論

増：← 完全 →：減
増：← 短：長 →：減

うーむ、ここらへんのルールはややこしさしか感じない。西洋音楽の8音階の世界での呼び方だがとても広く使われている言葉なので意味を知っておく必要がある（個人的には全て半音ずつの12音階で考える方がシンプルに感じる）

四和音を追加

四和音追加の第一歩！メジャーセブンス（M7）

下準備が終わったので四和音を追加していく。こちらの記事を参考にする。（前回も参考にしたわかりやすい講座！）

※参考：3-3. セブンス・コードの種類と押さえ方を知ろう | ポップスのピアノ伴奏を作ろう！

まずセブンス系のコードを一つ目の「メジャーセブンス（M7）」を追加してみる。

HTMLコード

   <dl>
        <dt>四和音</dt>
        <dd>
            <label><input type="radio" id="code_M7" name="code_type" value="メジャーセブンス(M7)" onchange="codeTypeSelect()">M7</label>
        </dd>
    </dl>

三和音のdlタグの下にdlタグを追加
dtタグを「四和音」とする
ddタグのidはcode_M7、valueをメジャーセブンス(M7)、中身は「M7」とする

JSコード

//コードタイプ
var codeTypes = [
        //三和音
            //（中略）
        //四和音
    {'codeName': 'M7',
        'codeKeys': [1,5,8,12]},
];

変数codeTypesにcodeName、M7を追加。codeKeysは1,5,8,12

メジャーセブン数はメジャーコード1,5,8に四音目12を加えたコード。例えばCメジャーの場合「ド、ミ、ソ」がCメジャーセブンスは「ド、ミ、ソ、シ」と白鍵一つ飛ばしに4つ目の音が加わる（ルート音から数えると12番目の鍵盤）

できたもの

See the Pen tone.js-12cord- 16 by イイダリョウ (@i_ryo) on CodePen.

メジャー「(M)」とメジャーセブンス「M7」を切り替えると「M7」の方がより豊かな響きになる！明るいながらも素敵な余韻があるというか。

他の四和音も追加する

このまま他の四和音を追加してみる。

増やしたものがこちら！

See the Pen tone.js-12cord- 17 by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

   <dl>
        <dt>四和音</dt>
        <dd>
            <label><input type="radio" id="code_M7" name="code_type" value="メジャーセブンス(M7)" onchange="codeTypeSelect()">M7</label>
            <label><input type="radio" id="code_7" name="code_type" value="セブンス(7)" onchange="codeTypeSelect()">7</label>
            <label><input type="radio" id="code_mM7" name="code_type" value="マイナー・メジャー・セブンス(mM7)" onchange="codeTypeSelect()">mM7</label>
            <label><input type="radio" id="code_m7" name="code_type" value="マイナーセブンス(m7)" onchange="codeTypeSelect()">m7</label>
            <label><input type="radio" id="code_m7-5" name="code_type" value="マイナー・セブン・フラット・ファイブ(m7(-5))" onchange="codeTypeSelect()">m7(-5)</label>
            <label><input type="radio" id="code_dim7" name="code_type" value="ディミニッシュ・セブンス(dim7)" onchange="codeTypeSelect()">dim7</label>
            <label><input type="radio" id="code_augM7" name="code_type" value="オーグメント・メジャー・セブンス(augM7)" onchange="codeTypeSelect()">augM7</label>
            <label><input type="radio" id="code_aug7" name="code_type" value="オーギュメント・セブンス(aug7)" onchange="codeTypeSelect()">aug7</label>
            <label><input type="radio" id="code_M7sus4" name="code_type" value="メジャー・セブンス・サスペンデッド4th(M7sus4)" onchange="codeTypeSelect()">M7sus4</label>
            <label><input type="radio" id="code_7sus4" name="code_type" value="セブンス・サスペンデッド4th(7sus4)" onchange="codeTypeSelect()">7sus4</label>
            <label><input type="radio" id="code_6" name="code_type" value="シックスス(6)" onchange="codeTypeSelect()">6</label>
            <label><input type="radio" id="code_m6" name="code_type" value="マイナー・シックスス(m6)" onchange="codeTypeSelect()">m6</label>
        </dd>
    </dl>

JSコード

//コードタイプ
var codeTypes = [
        //三和音
        //（中略） 
        //四和音
    {'codeName': 'M7',
        'codeKeys': [1,5,8,12]},
    {'codeName': '7',
        'codeKeys': [1,5,8,11]}, 
    {'codeName': 'mM7',
        'codeKeys': [1,4,8,12]},
    {'codeName': 'm7',
        'codeKeys': [1,4,8,11]},
    {'codeName': 'm7(-5)',
        'codeKeys': [1,4,7,11]},
    {'codeName': 'dim7',
        'codeKeys': [1,4,7,10]},
    {'codeName': 'augM7',
        'codeKeys': [1,5,9,12]}, 
    {'codeName': 'aug7',
        'codeKeys': [1,5,9,11]}, 
    {'codeName': 'M7sus4',
        'codeKeys': [1,6,8,12]}, 
    {'codeName': '7sus4',
        'codeKeys': [1,6,8,11]}, 
    {'codeName': '6',
        'codeKeys': [1,5,8,10]}, 
    {'codeName': 'm6',
        'codeKeys': [1,4,8,10]}, 
];

四和音の構成音まとめ

基本のセブンスコード

先ほどの記事を軸に作成！

※参考：3-3. セブンス・コードの種類と押さえ方を知ろう | ポップスのピアノ伴奏を作ろう！

三和音（トライアド）の三度はメジャーが基準（無印）でマイナーに「m」を付けるが、四和音の七度はマイナーが基準（無印）でメジャーに「M」を付ける。ここがややこしいところ…w

三和音の三度：メジャーが基準（無印）、マイナーに「m」を付ける
四和音の七度：マイナーが基準（無印）、メジャーに「M」を付ける

上記の法則に従うとこのようなコード名になる。

コード名	略称	構成音	備考
メジャーセブンス	M7	1,5,8,12	メジャーコード(1,5,8)にメジャーセブンス(12)を加える
セブンス	7	1,5,8,11	メジャーコード(1,5,8)にマイナーセブンス(11)を加える
マイナー・メジャー・セブンス	mM7	1,4,8,12	マイナーコード(1,4,8)にメジャーセブンス(12)を加える
マイナーセブンス	m7	1,4,8,11	マイナーコード(1,4,8)にマイナーセブンス(11)を加える

デミニッシュ（dim）系のセブンスコード

前回の記事で触れた特殊な三和音（dim、aug、sus4）にもセブンスを追加してみた。なお、順番はdimを頭にした方が理解しやすかったため、三和音（トライアド）の方もこの順番に入れ替えた。

デミニッシュ（dim）系のセブンスコードはこの二つ

コード名	略称	構成音	備考
マイナー・セブン・フラット・ファイブ	m7(-5)	1,4,7,11	マイナーセブンス(1,4,8,11)の五度の音を半音下げ(7)
ディミニッシュ・セブンス	dim7	1,4,7,10	マイナー・セブン・フラット・ファイブ(1,4,7,11)の七度の音をさらに半音下げ(10)

このコードは特殊。m7(-5)はマイナーセブンスの五度の音を半音下げることで七度との距離が鍵盤数5つになる。そして1,4,7はトライアドのdimと同じになる。

dim7は七度をさらに半音下げる。全ての音が鍵盤4つ分の距離になる。音程としては「六度」なのだが、論理的には「減七度（ダブルフラット）」という意味になる。

※参考：コードの「dim7」は、なぜルートから数えて長六度の音程を「... - Yahoo!知恵袋

オーグメント（aug）系のセブンスコード

コード名	略称	構成音	備考
オーグメント・メジャー・セブンス	augM7	1,5,9,12	オーグメント(1,5,9)にメジャーセブンス(12)を加える
オーギュメント・セブンス	aug7	1,5,9,11	オーグメント(1,5,9)にマイナーセブンス(11)を加える

メジャーコードの第三音（五度）を半音上げしたオーグメント。ここにメジャーセブンスを加えるとaugM7、マイナーセブンスを加えるとaug7になる。

サスペンデッド4th（sus4）系のセブンスコード

コード名	略称	構成音	備考
メジャー・セブンス・サスペンデッド4th	M7sus4	1,6,8,12	sus4(1,6,8)にメジャーセブンス(12)を加える
セブンス・サスペンデッド4th	7sus4	1,6,8,11	sus4(1,6,8)にマイナーセブンス(11)を加える

メジャーコードの第二音（三度）を半音上げしたsus4コード。ここにメジャーセブンスを加えるとM7sus4、マイナーセブンスを加えると7sus4になる。M7sus4はあまり使われない響きっぽい。

※参考：sus4コードについて、詳しく教えください。 - 楽器・演奏締切済み| 【OKWAVE】

シックスス（六度の四和音）

最後にセブンスじゃなくてシックスス（六度）の四和音。ルートCでいうところの「ラ」の音。

コード名	略称	構成音	備考
シックスス	6	1,5,8,10
マイナー・シックス	m6	1,4,8,10

メジャーコード(1,5,8)にシックスス(10)を加えると無印の「6」、マイナーコード(1,4,8)にシックスス(10)を加える「m6」。セブンスと同じ法則。

※参考：【誰でも分かる！】シックスコード（6、m6）の使い方 | 音楽理論はいらない!?

以上の構成音を意識しながら音を鳴らしてみるとその通りの響きになっている！

最後に

f:id:idr_zz:20191208133352j:plain

ということで、四和音（セブンスとシックスス）を追加しました。これまで「セブンス(7)」とか「メジャー・マイナーセブンス(mM7)」とか曖昧なイメージだったので、コードの勉強になりました！和音は配色にも似た数学的な世界で面白いです。次回は1オクターブを超えた2オクターブ目の和音「テンションコード」の世界にトライします。それではまた！

※参考：Tone.jsを習得するためにやった事まとめ qiita.com