Skip to content

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

ma-san
ma-san(鈴木正行)

関数を使うことで複雑な処理が必要なプログラムの書き方が変わります。

関数とは#

関数は複数の文をまとめたもの。

関数を作ることを「定義」といい、関数のブロック内に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);

戻り値を返す関数や複数のデータをまとめるには#

実行結果の値を返すreturnを使う。

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

下記は消費税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);
}

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

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

るり
未来へ繋がるWebの可能性。
お客様のサービスを、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。