第9回【JavaScriptの関数(function)】


まずは動画を見てください!
昔々、数学の授業で関数っていうのを習った様な気がしますが・・・そんな数学なんて知らなくておOKです。

関数の使い方

関数というのは、何度も使うような処理の塊を一纏めにしてサブルーチン化する時に使います(正確にはそれだけではありませんが...)
田中と山根の例でやってみます。
	let myName   = "山根";
	let myHeight = 180;
	let myWeight = 54;
	let myBMI = myWeight / (myHeight/100)**2 ;
	
	document.write(myName + "、おはよう<BR>");
	document.write("身長は"+myHeight+"cm<BR>");
	document.write("体重は"+myWeight+"kg<BR>");
	document.write("あなたのBMIは"+myBMI+"です。<BR>");
	document.write(myName + "、さようなら<BR>");
	
	myName   = "山根";
	myHeight = 187;
	myWeight = 58;
	myBMI = myWeight / (myHeight/100)**2 ;
	
	document.write(myName + "、おはよう<BR>");
	document.write("身長は"+myHeight+"cm<BR>");
	document.write("体重は"+myWeight+"kg<BR>");
	document.write("あなたのBMIは"+myBMI+"です。<BR>");
	document.write(myName + "、さようなら<BR>");
関数を使う前は、document.writeの部分は全く同じで無駄が多い。
関数を使うと以下の様になる。
	let myName   = "山根";
	let myHeight = 180;
	let myWeight = 54;
	let myBMI = myWeight / (myHeight/100)**2 ;
	
	printBMI();
	
	myName   = "山根";
	myHeight = 187;
	myWeight = 58;
	myBMI = myWeight / (myHeight/100)**2 ;
	
	printBMI();
	
	function printBMI()
	{
		document.write(myName + "、おはよう<BR>");
		document.write("身長は"+myHeight+"cm<BR>");
		document.write("体重は"+myWeight+"kg<BR>");
		document.write("あなたのBMIは"+myBMI+"です。<BR>");
		document.write(myName + "、さようなら<BR>");
	}
document.writeの部分を関数printBMIとして定義。
それを2回呼び出しています。
(2回なのでそこまで差は感じませんが、何度もやる処理だと全然違います)


関数の定義の仕方
	function 関数名(引数...)
	{
		処理...
	}
functionと書いてから関数名と()に引数の受け皿を書きます。
関数名は変数名の付け方と同じで解りやすいように付けましょう。
引数はこの後説明します。

では、なんで関数と呼ばれるのか?
	y = f(x)
こういう数式を見たことあるでしょうか?
xの値によってyの値が変わる、このfが関数と呼ばれます。
例えば、BMIを求める関数を作ります。
	function calcBMI(weight,height)
	{
		return weight / (height/100)**2;
	}
体重と身長を受けとり、returnで計算した結果を返します。

	function printBMI()
	{
		document.write(myName + "、おはよう<BR>");
		document.write("身長は"+myHeight+"cm<BR>");
		document.write("体重は"+myWeight+"kg<BR>");
		document.write("あなたのBMIは"+myBMI+"です。<BR>");
		document.write(myName + "、さようなら<BR>");
	}
	function calcBMI(height,weight)
	{
		return weight / (height/100)**2;
	}
	
	let myName   = "山根";
	let myHeight = 180;
	let myWeight = 54;
	let myBMI = calcBMI(myHeight,myWeight);
	
	printBMI();
	
	myName   = "山根";
	myHeight = 187;
	myWeight = 58;
	myBMI = myBMI = calcBMI(myHeight,myWeight);
	
	printBMI();

名前も引数として渡すと以下の様にできる。
	function printBMI(name,height,weight)
	{
		let bmi= calcBMI(height,weight);
		document.write(name + "、おはよう<BR>");
		document.write("身長は"+height+"cm<BR>");
		document.write("体重は"+weight+"kg<BR>");
		document.write("あなたのBMIは"+myBMI+"です。<BR>");
		document.write(name + "、さようなら<BR>");
	}
	function calcBMI(height,weight)
	{
		return weight / (height/100)**2;
	}
	printBMI("山根",180,54);
	printBMI("田中",187,58);
	printBMI("小杉",170,110);
だいぶスッキリして、小杉も増えました(笑)


関数の中で定義したletの変数は、関数の外では使えません。
もちろん受け取った引数も関数の外では使えない事に注意しましょう。

関数は使いこなせばとてもスッキリしたプログラムが書けます。
というか、使いこなせる様にならないといけません!

	function printBMI(name,height,weight)
	{
		let bmi= weight / (height/100)**2;
		document.write(name + "、おはよう<BR>");
		document.write("身長は"+height+"cm<BR>");
		document.write("体重は"+weight+"kg<BR>");
		document.write("あなたのBMIは"+myBMI+"です。<BR>");
		document.write(name + "、さようなら<BR>");
	}
	printBMI("山根",180,54);
	printBMI("田中",187,58);
	printBMI("小杉",170,110);
calcBMIはprintBMIからしか使わないので、関数である必要もないのでまとめると、この様になり、さらにスッキリしました。

今回は短いですが、内容はとても重要なのでしっかり使えるようにしましょう!
次回に続く...


akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)