VexFlow 調号

VexFlow 使い方に戻る。

概要

　調号とは、五線譜の音部記号の次に記述される符号で、拍子記号がある場合は、音部記号と拍子記号の間に記述します。調号はシャープ＃(これは実際には情報技術用語のハッシュです。シャープは縦の線がまっすぐになります。このように ♯。ですが、便宜上、ここでもシャープとして扱います。） あるいはフラット♭をまとめて記述することで、構成されます。＃や♭は適当に配置されるものではなく、＃や♭が増えて配置される法則があります。

　＃はファ→ド→ソ→レ→ラ→ミ→シの順に増えます。♭はシ→ミ→ラ→レ→ソ→ド→ファの順に増えます。※音部記号がト音記号の場合です。この調号によってキーというものが決まります。以下、特段、ことわりがなければ、ドが C を表す場合を想定して記述します。

　音階とは、ドレミファソラシド(日本名でハニホヘトイロハ)の間隔のように、全音、全音、半音、全音、全音、全音、半音になっています。1オクターブは12分割できて、その内の７つを選ぶ場合に自然に聞こえる間隔になっています。ドから始まる音階は長調になります。明るい音階です。逆に自然に聞こえる間隔ですが、ラか始まる音階、ラシドレミファソラ(日本名でイロハニホヘトイ)は暗い音階で短調と呼ばれています。短調の間隔は全音、半音、全音、全音、半音、全音、全音となっています。どこから始めるかだけの違いで、長調と短調が存在しています。

　シャープもフラットもない調号のない音階はハ(Do-C)長調(C Major)で、イ(La-A)短調(A Minor)のどちらかです。主にどこから始めるかだけで調子は変わります。それに似合う和音をつけると、あからさまに長調と短調の違いが発生します。より長調と短調の違いがくっきりします。その意味でどこから始めるかだけのモノですが、曲としては伴奏に和音が採用されれば、長調と短調はしっかり分けられます。

　では、＃をひとつつけるとどうなるか。ド レ ミ ファ# ソ ラ シ ドですから、全音、全音、全音、半音、全音、全音、半音となります。この構成で長調になる音階はソから始まる音階ト長調(G Major)です。短調になるのはミから始まる音階ホ短調(E Minor)です。

　調号は、このように全音、全音、半音、全音、全音、全音、半音になる調子の始まりの音の名前によって名前が付いています。半音12音でオクターブになるため、11種類あります。＃がひとつ増えるごとの名前とフラットが一つ増えるごとの名前があるということです。＃５個は ♭７個と同じ調子、＃６個は ♭６個と同じ調子、＃７個は ♭５個と同じ調子です。かすかにどっちよりの調子で使われるかによって名前だけが変わる感じです。

　仕組みはわかったと思いますが、直感的に調号の名前を導き出すのには、時間がかかると思います。覚え方は最後の＃の位置の半音上の名前が調号の名前です。半音上に＃がついていれば、それも含めた名前です。＃６個と＃７個のときだけ更に半音上の名前になる感じです。♭のときは最後の♭の位置をファと仮定してファミレドと数えて下がったドに対応するところの音の名前が調号の名前になります。♭がついてるところになることが多く、その場合は♭の分も含めて表現した名前になります。♭が２個以上になると全てそのようになります。日本語だと＃は嬰(えい)、♭は変(へん)をつけます。

　ここまでの基礎的なことをわかった上でなら調号は使いやすくなったと思います。さっそく描いてみましょう。ト音記号以外につけるときもややこしいですが、できるようになると思います。

シャープ系 ＃

<div id="yonet202302_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('D').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('A').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('E').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('B').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();

  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('F#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();

  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>

　13行目にあるようなaddKeySignature()関数の引数に調号名を入れると、それにあわせた、シャープやフラットが描画されます。調号名称にシャープとフラットの7種類づつは重複はなく表せます。あえて言うなら、短調で表現もあるので、その表現を使えば2種類の名前が一つの状態をあらわしています。短調の名称は、すべてマイナーを意味する m を付けることで表現できます。まずは上記にシャープの7種類の調号を表記しました左上から左へ、右端にいったらひとつさがって一番左から右へという順番で、G→D→A→E→B→F#→C#という名称です。

　次にフラットでの表記です。

フラット系 ♭

<div id="yonet202302_Output02"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output02', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('F').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('Bb').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('Eb').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('Ab').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('Db').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();

  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('Gb').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();

  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('Cb').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>

　指定する値は次のような順になります。F→Bb→Eb→Ab→Db→Gb→Cbです。短調の表記指定するときも合わせて表にすると以下のようになります。

指定する値のまとめ

■シャープ系

♯の数	長調名	長調表記	短調名	短調表記
1	ト長調	G	ホ短調	Em
2	二長調	D	ロ短調	Bm
3	イ長調	A	嬰へ短調	F#m
4	ホ長調	E	嬰ハ短調	C#m
5	ロ長調	B	嬰ト短調	G#m
6	嬰へ長調	F#	嬰二短調	D#m
7	嬰ハ長調	C#	嬰イ短調	A#m

　

VexFlow 使い方に戻る。