#12 自作関数
#12 自作関数前回、関数の引数を学んだおかげで、複数の文字列を描画できるようになりました。対象の行をコピペ後、特定の引数の値を変更するだけで描画処理を増やせましたよね。復習がてら、もう１行増やしてみましょう！
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
g.fillStyle = "#ff0000"; // 変数gの描画色を赤へ
g.fillText( "こんにちは世界", 40, 80 ); // 変数gへ文字列を描画
g.fillText( "さようなら皆さん", 40, 130 ); // 変数gへ文字列を描画
g.fillText( "私は元気です", 40, 180 ); // 変数gへ文字列を描画
} // 関数の終わり
９行目を追加し、文字列が３行描画されるようにしてみました。
もうこの作業は簡単ですね～。では次に、文字の色も行ごとに変更してみましょう。
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
g.fillStyle = "#ff0000"; // 変数gの描画色を赤へ
g.fillText( "こんにちは世界", 40, 80 ); // 変数gへ文字列を描画
g.fillStyle = "#00ff00"; // 変数gの描画色を緑へ
g.fillText( "さようなら皆さん", 40, 130 ); // 変数gへ文字列を描画
g.fillStyle = "#ffff00"; // 変数gの描画色を黄色へ
g.fillText( "私は元気です", 40, 180 ); // 変数gへ文字列を描画
} // 関数の終わり
こんな感じで、プログラムの枠組みさえ出来ていれば、あとはコピペでいくらでも処理を増やせるわけです。ただ、このまま増やしていくと、チョット見辛いですよね。そういった場合は、コメントの記述方法などを工夫すれば分かりやすくなります。
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
// 赤色で１行目に「こんにちは世界」
g.fillStyle = "#ff0000"; // 変数gの描画色を赤へ
g.fillText( "こんにちは世界", 40, 80 ); // 変数gへ文字列を描画
// 緑色で２行目に「さようなら皆さん」
g.fillStyle = "#00ff00"; // 変数gの描画色を緑へ
g.fillText( "さようなら皆さん", 40, 130 ); // 変数gへ文字列を描画
// 黄色で３行目に「私は元気です」
g.fillStyle = "#ffff00"; // 変数gの描画色を黄色へ
g.fillText( "私は元気です", 40, 180 ); // 変数gへ文字列を描画
} // 関数の終わり
こうやって記述すれば、描画文の１行ごとの単位が分かりやすいですし、更にコピペ作業が捗りますよね！
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
// 赤色で１行目に「こんにちは世界」
g.fillStyle = "#ff0000"; // 変数gの描画色を赤へ
g.fillText( "こんにちは世界", 40, 80 ); // 変数gへ文字列を描画
// 緑色で２行目に「さようなら皆さん」
g.fillStyle = "#00ff00"; // 変数gの描画色を緑へ
g.fillText( "さようなら皆さん", 40, 130 ); // 変数gへ文字列を描画
// 黄色で３行目に「私は元気です」
g.fillStyle = "#ffff00"; // 変数gの描画色を黄色へ
g.fillText( "私は元気です", 40, 180 ); // 変数gへ文字列を描画
// 水色で４行目に「田んぼの様子を見に行く」
g.fillStyle = "#00ffff"; // 変数gの描画色を水色へ
g.fillText( "田んぼの様子を見に行く", 40, 230 );// 変数gへ文字列を描画
} // 関数の終わり
コピペ作業自体は簡単なのですが、問題は、１つの文を描画するために、プログラムは４行も増えしてしまうことです。その原因として、色の変更処理と、文字列描画処理が別に必要、というのがあると思います。関数fillTextは、文字列の指定と、座標の指定を一度に出来る優れた関数ですが、これ１つで色の指定も出来ていればもっと便利なんですけどねぇ。
言語によっては、そういった感じの関数が別に用意されていたりするのですが、残念ながらJavaScriptには、というかWeb APIには存在しないようです。
無いものは諦める？ いえいえ、無ければ作れば良いのです！！ 関数というものは、Web API等によって与えられたものを使用する以外に、自作もすることが出来るのです。便利でしょ？
関数の作り方ですが、これは知識の話なので、まず先に書き方をお見せします。とりあえず、「こんにちは世界」だけを自作関数化してみますね。
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
mykansuu( "#ff0000", "こんにちは世界", 40, 80 ); // 赤色で１行目に「こんにちは世界」
function mykansuu( a, b, c, d )
{ // 自作関数の始まり
g.fillStyle = a; // 変数gの描画色を赤へ
g.fillText( b, c, d ); // 変数gへ文字列を描画
} // 自作関数の終わり
} // 関数の終わり
９～１３行目が、自作関数の定義部分です。これを７行目で呼び出しています。関数名は「mykansuu」ですが、これは当然、プログラマが自由に付けられる名前です。引数のa, b, c, dも同様です。引数が４つある理由は、今までの処理が、
・fillStyleで色指定（１つ）
・fillTextで文字列指定とx,y座標（計３つ）
で合わせて４つだからですね。これを自作関数で一度に受け取り、その中の処理で、２つにそれぞれ分けて設定している、というわけです。
関数の始まりと終わりに「{ }」が必要なのは以前に学びましたよね。そしてその括りの中へやりたいことを記述するわけです。このようにして自作関数を定義して使用することが出来ます。最後に、文章を４行表示するように戻しておきます。以前よりスッキリしたことがわかると思います。
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
mykansuu( "#ff0000", "こんにちは世界" , 40, 80 ); // 赤色で１行目に「こんにちは世界」
mykansuu( "#00ff00", "さようなら皆さん" , 40, 130 ); // 緑色で２行目に「さようなら皆さん」
mykansuu( "#ffff00", "私は元気です" , 40, 180 ); // 黄色で３行目に「私は元気です」
mykansuu( "#00ffff", "田んぼの様子を見に行く", 40, 230 ); // 水色で４行目に「田んぼの様子を見に行く」
function mykansuu( a, b, c, d )
{ // 自作関数の始まり
g.fillStyle = a; // 変数gの描画色を赤へ
g.fillText( b, c, d ); // 変数gへ文字列を描画
} // 自作関数の終わり
} // 関数の終わり