[JavaScript]関数を使ったプログラム

関数を作ることを「定義」といい、関数のブロック内にJavaScriptの文をかいていきます。ブロック内ではこの書き方はこれまでのプログラムとあまり変わらないので、プログラムの一部を切り抜いて名前をつけるイメージです。

また、関数を自分で作るメリットとして構造を管理しやすくなる、何度も呼び出しができる、ということからプログラムを効率よく書いていくということにもつながっていきます。

let mailText = () => {
  console.log('PT企画の高橋です。');
  console.log('請求書を送ります。');
};
mailText();

mailTextに関数定義されたコンソールログを出力するためにmailTextと呼び出しています。
関数定義を行った上で「呼び出す」という処理が必要です。

let mailText = (recv) => {
  console.log(recv + '様');
  console.log('PT企画の高橋です。');
  console.log('請求書を送ります。');
};
mailText('佐藤');
mailText('鈴木');

mailTextの中に引数「recv」を設定することでmailTextに設定した文字列を引き渡し、関数を呼び出したときに処理するようになっています。
シンプルなプログラムであれば関数はややこしくなりがちですが、プログラムは総じてややこしいからこそプログラム上で処理を行い、効率化を図る必要があります。

関数はプログラムを書く上で必須となり、この関数の書き方一つで複雑なプログラムにもなればわかりやすい、便利なプログラムにもなります。

一昔前（ES5と呼ばれた時代のJavaScript）では「function文」や「function式」が主流でもありましたが、ES2015と呼ばれるバージョンではアロー関数式を覚えたほうがわかりやすくもあります。
色々なWebサイトではfunctionを好んで多様するJavaScriptのサンプルコードもあるため、混乱するかもしれませんが動作としては広義の意味としてほぼ一緒と捉えてもいいです。

// アロー関数式
let mailText0 = (recv) => {
  console.log(recv + '様');
};
mailText0('アロー');

// function文
function mailText1(recv){
  console.log(recv + '様');
}
mailText1('文');

// function式
let mailText2 = function(recv){
  console.log(recv + '様');
}
mailText2('式');

テンプレート文字列を利用することで複数行の文章を表示させたいときによく使う機能です。
'ここに文章を書く。
ここに文章を書く。'
また、このテンプレート文字列とあわせて任意の文字列を差し込みたい場合に「${変数名}」のように記述していくことで自由度の高い文章を表示することが可能になっていきます。

ただし、このテンプレート文字列の注意どころとしてはインデントのスペースや改行なども自動で反映されるため、テンプレート文字列の箇所はインデントをつめています。

また、関数の中で作った変数は「ローカル変数」と呼びます。このローカル変数は関数の中でしか使えません。

let mailTemplate = (myname, salary) => {
  let msg = `${myname}さん
経理の高橋です。
今月の給料は${salary}円です。`;
  console.log(msg);
};
mailTemplate('鈴木', 5);

なお、テンプレート文字列も使えない時代がありました。その場合は演算子を使うことで文字列や引数を連結していたため、下記のような書きぶりがされている場合は古いJavaScriptという認識をしてもらっても問題ありません。
テンプレート文字列とはことなり改行なども記述が必要となります。
改行は「\n」となり、特殊文字（エスケープシーケンス）と呼ばれます。

let mailTemplate = (myname, salary) => {
let msg = myname + 'さん\n'
+ '経理の高橋です。\n'
+ '今月の請求額は' + salary + '円です。';
console.log(msg);
};
mailTemplate('鈴木', 5);

一つの関数ですべての処理を実行することは不可能、とは言いませんが汎用性も低く、メンテナンスも困難になります。
そのため、複数の関数を横断して処理を行う、ということがプログラムを書く上では必須となってきます。

下記は消費税10%を乗せた場合の計算となります。

let salesTax = (salary) => {
    return salary * 1.10;
};
console.log(salesTax(300000));

これだけ見るともっとシンプルに計算式を書けると思うかもしれませんが、関数同士の連携を行う必要がプログラムでは大量に発生します。シンプルな計算式は汎用性が低くなるため、固有のプログラムであれば良いのですが様々な可能性を考慮する場合はオススメしません。

複数のデータをまとめた上でプログラムを書いていく必要があるため、下記のようにオブジェクトを使ってデータをまとめておくと便利です。

let data = { name: '鈴木', salary: 300000, tax: true };
console.log(data['name']);
console.log(data['salary']);

複数のデータを配列にまとめることも可能で、2番目の配列を呼び出したい、というプログラムを含むと下記のような書きぶりになります。

let data = [
    { name: '鈴木', salary: 300000, tax: true },
    { name: '佐藤', salary: 250000, tax: false },
];
console.log(data[1]['name']);
console.log(data[1]['salary']);

様々な関数と変数の組み合わせとなりますが、基本的な部分に関しては新しい情報はありません。

// メールを作る関数
let mailTemplate = (recv, salary) => {
  let msg = `${recv}様
経理の高橋です。
今月の給料は${salary}円です。`;
  console.log(msg);
};
// 消費税を追加する関数
let salesTax = (salary) => {
  return salary * 1.10;
};

// 送付先データ
let data = [
  { name: '鈴木', salary: 300000, tax: true },
  { name: '佐藤', salary: 250000, tax: false },
];
// メール作成実行
for (let rec of data) {
  let salary = rec['salary'];
  if (rec['tax']) {
    salary = salesTax(salary);
  }
  mailTemplate(rec['name'], salary);
}

機能としては「繰り返し文」「複数の関数定義」「変数」「テンプレート文字列」「データをまとめる」「戻り値」などが使われています。