関数
同じ処理をまとめて何度も使える形にしたもの。 単調な処理を効率化するために使われる。
関数は基本的にはインプット（引数）に対して処理を行いアウトプット（返り値）を出すという仕組みを意識しましょう。 引数と返り値がないこともあります。
関数宣言
関数を使用するにはまず宣言を行います。引数には複数の値を入れることもできます。
関数呼び出し
関数は宣言しただけでは利用できません。 関数を定義した後に呼び出すことで利用できます。 関数名（）で呼び出しを行うことができ、返り値が出力されます。
function 関数名(引数) {
処理
return 返り値;
}
function text(number1, number2) {
const value = number1 + number2;
return value;
}
console.log(text(2, 4)); //関数の呼び出し
第一引数(number1)に「2」, 第二引数(number2)に「4」を入れtext関数に値を渡しています。 text関数は number1 と number2 を足した値を returnして実行した関数に値（value(返り値)）を渡します。
返り値を使用して別の値を算出することもできます。
function text(number1, number2) {
const value = number1 + number2;
return value;
}
const sum = text(2, 4); // sumにvalueの値を代入
console.log(sum * 2); // 12
正常に処理がされている場合は12と出力されます
アロー関数
関数を作成するための、よりシンプルで簡潔な構文がもう1つあります。「アロー関数」と呼ばれる関数です。
const text = (number1, number2) => {
const value = number1 + number2;
return value;
}
console.log(text(2, 4));
関数、関数式、アロー関数はどれもよく使うので覚えておきましょう。
コールバック関数とは
関数の引数に入れられた関数のことです。コールバック関数は、関数の中で関数を実行するために使用します。 次の例の場合、priceIncludingTax関数をvegetable関数に渡しているのでpriceIncludingTax関数がコールバック関数になります。
function vegetable(name, price, func) {
const pit = func(price); // priceIncludingTax(price)の実行
console.log(name + 'の税込価格は' + pit + 'です');
}
// 関数式
const priceIncludingTax = function (price) { // 税込み価格の計算
const tax = 1.1;
return Math.floor(price * tax);//Math.floor小数点を切り捨てて整数にする
}
vegetable('苺', 200, priceIncludingTax); // priceIncludingTaxがコールバック関数
スコープとは
定義した変数や定数を参照できる範囲をスコープと呼びます。 スコープにはグローバルスコープ、ローカルスコープの2種類があります。 以下のように変数に再代入するプログラムを記述してみてください。
const globalConst = 'globalConst';
let globalLet = 'globalLet';
function dummyFunc() {
const localConst = 'localConst';
let localLet = 'localLet';
}
dummyFunc();
console.log(globalConst);
console.log(globalLet);
// 値の更新
globalLet = 'updateGlobalLet';
console.log(globalLet);
console.log(localConst);
console.log(localLet);
正常に処理されている場合は、「globalLet」値更新、中身確認後のlocalConstをconsoleタブに出力する処理でエラーが出てしまいます。 処理が止まってしまう原因は「localConst」と「localLet」がローカルスコープ（dummyFunc）内で定義された定数と変数なのでローカルスコープ外での参照ができないためです。 ローカルスコープ内の変数や定数を参照するには先ほど紹介したコールバック関数や戻り値を使用する必要があります。 例1）
const globalConst = 'globalConst';
let globalLet = 'globalLet';
function dummyFunc() {
const localConst = 'localConst';
let localLet = 'localLet';
return {localConst, localLet}
}
// 分割代入という記法を使用しています。オブジェクトの章で解説します。
const {localConst, localLet} = dummyFunc();
console.log(globalConst);
console.log(globalLet);
// 値の更新
globalLet = 'updateGlobalLet';
console.log(globalLet);
console.log(localConst);
console.log(localLet);
例2）
const globalConst = 'globalConst';
let globalLet = 'globalLet';
例2）
const globalConst = 'globalConst';
let globalLet = 'globalLet';
function dummyFunc(callback) {
const localConst = 'localConst';
let localLet = 'localLet';
callback(localConst, localLet)
}
console.log(globalConst);
console.log(globalLet);
// 値の更新
globalLet = 'updateGlobalLet';
console.log(globalLet);
function callLog(a, b) {
console.log(a);
console.log(b);
}
dummyFunc(callLog)
関数実行例
処理をそのまま書いてJavaScriptのプログラムを実行してしまえば良いのでは？と思われる方もいると思います。では、複数回同じ処理を実行したい場合はどのようになるでしょう？同じ処理を実行したい回数分プログラムを記述する必要があります。1つのファイルのソースコードの長さが非常に長くなり同じ内容を記述しているので非常に冗長になります。関数はそのような無駄を排除しさらに、関数の中に記述した処理がどのような処理を行うのか関数名から汲み取りやすくなり、初めてソースコードを見る人に対して親切です。プログラムは極力機能ごとに関数化を行うように意識しましょう。実際の関数の例として、自動販売機の商品を購入する機能を模した関数を実行してみましょう。buy関数を作成します。main.js
const items = [
{
name: "水",
price: 100,
},
{
name: "リンゴジュース",
price: 130,
},
{
name: "コーヒー",
price: 150,
},
{
name: "モンスター",
price: 200,
},
{
name: "レッドブル(大)",
price: 250,
},
];
const buy = function(pay, itemName) {
const findItem = items.find((i) => i.name == itemName);
if (!findItem) return console.log("その商品は存在しません。");
if (pay < findItem.price) return console.log("お金が足りません。");
const change = pay - findItem.price;
console.log(findItem.name + "をお買い上げありがとうございます。");
if (change <= 0) {
return console.log("お釣りはありません。");
}
console.log("お釣りは" + change + "円になります。");
}
以下4つの実行処理をコンソールタブで実行してみてください。 buy(100, '水'); buy(200, 'リンゴジュース'); buy(30, 'コーヒー'); buy(130, 'オレンジジュース');
export / import
export / import を使用する際はWebサーバ上で確認する必要があるため今回は使用方法のみ理解していただければ大丈夫です。
export
変数や関数名の前に記述することで、exportを記述した関数や変数を別のファイルで呼び出すことができます。 export.js
export function popup(input) {
console.log(input);
}
import
exportを記述した他のファイルを呼び出すことができます import.js
import { popup } from './export.js'; // export.jsファイルの呼び出しpopupメソッド呼び出し
popup('hello');
問題
以下の問題に答えて下さい。
100点満点のテストでA君は80点、B君は15点、C君は55点を取りました。0~30点未満の人には、「〇〇君もう少し頑張りましょう」、30~70点未満の人には「〇〇君普通です」、70~100点までの人には「〇〇君良くできました」と画面に出力してください。関数の引数を活用して記載しましょう。