【プログラミング入門】【JavaScript】14日目(最終日) 関数の使い方

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

いよいよ14日目です！今回は関数について見ていきます！

かんすう？

「alert」命令や「if」命令みたいな「命令」の事を正しくは関数といいます！というのを覚えてますでしょうか？

「命令」の方が覚えやすいと思い今まで呼んできましたが正しくは「関数」といいます。

なので今回から正しく関数と呼びたいと思います。

話を戻します。

このJavaScript入門で学んでいるような最初から使える関数の事を標準関数(ひょうじゅんかんすう)とか組み込み関数(くみこみかんすう)とかって言ったりします。

そしてこの標準関数なんかを組み合わせて「自分だけのオリジナル関数」を作れるというワケです。

そうすれば同じ作業の繰り返しなんかを「自分だけのオリジナル関数」にまとめて好きな時に使えてとても便利になります！

そんなワケで今回は関数を自分で作ってみましょう！

なにやら難しそうですが、やる事はさきほども言いましたが標準関数などを組み合わせて、一つにまとめるだけです！

さっそく見てみましょう！

■14日目　プログラム１■

<script>

	/*jspgm14_1*/
	/*14日目　プログラム１*/

	alert("関数「my_func」は「おはよう」とalert表示します！");

	my_func();

	alert("関数「my_func」を実行しました！");


	/*オリジナル関数の部分*/
	function my_func(){
		alert("おはよう！");
	}

</script>

■実行結果■

■説明■

「おはよう!」とだけalert表示する関数「my_func」を作ってみました。

コメントにもあるように

function my_func(){
	alert("おはよう！");
}

こちらが今自分で作った新しい関数になります！

「my_func」というこちらの部分が名前になりますので元からある関数名などと一緒じゃなければ自分で好きな名前をつけて大丈夫です。

書き方

書き方は関数を表す「function」というのを書いて

function 関数名(){
	関数の内容を書く
}

{}カッコの中に関数の内容を書いていきます。

関数名のあとに謎の()カッコがありますがこちらも忘れずに書いてください。

いろいろギモンがあるかもですが、とりあえずはこのカタチで覚えてしまいましょう！

使い方

使う時は

my_func();

これだけで大丈夫です！

一度だけではなく使いたい時に何度でもこれを書けば「my_func」を実行してくれます。

逆に言うと「my_func()」を書かないと永遠に実行されません。

こんなのでいいの？と思われた方、いると思います。

大丈夫です！

これもりっぱな関数の使い方のひとつです！

もちろんまだ他にもいろいろ便利な使い方がありますが、今回のプログラミング入門では一番キホンの「命令をひとまとめにする」使い方だけを説明させて頂きます。

変数を宣言する場所によって扱い方が少し異なってきます。

まずはこれまで通りのやり方で変数を宣言して使ってみます。

■14日目　プログラム２■

<script>

	/*jspgm14_2*/
	/*14日目　プログラム２*/

	var tate = 0;
	var yoko = 0;

	alert("四角形の面積を計算します！");
	tate = prompt("縦の長さを入力してください");
	yoko = prompt("横の長さを入力してください");

	menseki();

	function menseki(){
		document.write("縦:" + tate + " 横:" + yoko + " の四角形の面積は");
		document.write("<br>" + Number(tate) * Number(yoko) + "です！");
	}

</script>

■実行結果■

■説明■

縦と横の長さを入力してもらい、それをもとに面積を計算するプログラムになります。

数字以外を入力するとちゃんと結果がでないのでご注意ください。

これまで通りの場所で宣言した変数の事を「グローバル変数」といいます。

意味としては「どこでも使える変数」みたいな意味になります。

プログラムの結果を見た感じ特に問題なさそうですよね！

ここから少し難しい内容になるので、わからない場合はなんとなく読み飛ばして「グローバル変数」を使った関数の使い方に慣れてきたらまた挑戦してみてね！

では「これまで通りの場所ではない場所」で宣言する変数とはどういう事なのでしょうか？

するどい方はお気づきかもしれませんが、関数の中などでも変数は宣言できます。

このような変数の事を「ローカル変数」と言います。

そしてここからが重要ですが

「ローカル変数」はその宣言した関数の中でしか使用できません！

プログラムで確認してみましょう！

■14日目　プログラム３■

<script>

	/*jspgm14_3*/
	/*14日目　プログラム３*/

	my_func();

	alert("my_funcの外にでました！");

	alert("my_funcの外 : suji = " + suji);

	function my_func(){
		var suji = 24;
		alert("my_funcの中 : suji = " + suji);
	}

</script>

■実行結果■

■説明■

プログラムと実行結果を見比べると、プログラムの途中、「my_funcの外に出ました！」というメッセージまでは確認できますが、そのあとの「alert」関数が実行されていないのが確認できたかと思います。

変数「suji」は関数「my_func」の中の「ローカル変数」になります。

なので関数「my_func」の中では問題なく変数「suji」の内容を表示できましたが、「my_func」の外の「suji」はコンピューターの側からは謎の存在になりますのでそれを含む最後の「alert」関数が実行できなかったというワケです。

同じ名前の変数の場合は？

では別々の場所で同じ名前の変数を宣言した場合はどうでしょう？

こちらもプログラムで確認してみます。

■14日目　プログラム４■

<script>

	/*jspgm14_4*/
	/*14日目　プログラム４*/

	var suji = 100;

	alert("最初に宣言した「suji」 = " + suji);

	my_func();

	alert("最初に宣言した「suji」 = " + suji);

	function my_func(){
		var suji = 24;
		alert("my_funcの中 : suji = " + suji);
	}

</script>

■実行結果■

■説明■

同じ名前の変数「suji」をプログラムの最初と関数「my_func」の２ヶ所で宣言してみました。

変数「suji」の値に注目してみると、最初「100」から始まり、「my_func」内で「24」になって、また「100」に戻りました。

ちょっとわかりづらいですが、最初の変数「suji」と関数「my_func」の中の変数「suji」は

別のものになります！

途中の「my_func」内で「suji」の内容が変更されたワケではなく、最初の変数「suji」と関数「my_func」の中の変数「suji」は最初から別のものになります！

繰り返しますが

「グローバル変数」・・・全ての場所で使えます。

「ローカル変数」・・・宣言した関数の中でだけ使えます。

そしてグローバル変数とローカル変数が同じ名前だった場合は、そのローカル変数を宣言した関数内ではローカル変数が優先されます。

関数「my_func」の中で宣言した変数「suji」にご注目ください！

■14日目　プログラム５■

<script>

	/*jspgm14_5*/
	/*14日目　プログラム５*/

	document.write("my_funcを実行「一回目」<br>");

	my_func();

	document.write("<br>");

	document.write("my_funcを実行「二回目」<br>");

	my_func();

	function my_func(){
		var suji = 100;

		suji++;

		document.write("suji = " + suji + "<br>");
	}

</script>

■実行結果■

■説明■

関数「my_func」を２回呼び出してます。変数「suji」は２回とも「101」を表示しました。

プログラムをよく読めばあたりまえの話なのですが、関数「my_func」を呼び出すたびに「my_func」内のローカル変数「suji」は宣言されて、初期化されます。

これは言い換えると今回の場合では関数「my_func」が終わった時点で「my_func」内のローカル変数「suji」は一度なくなってしまうという事です。

もうめんどくさいので全てグローバル変数にすればいいじゃん！と思った方、いると思います。

もちろん最初はそれでも良いかと思います。

しかしながら、少しマトモ？なプログラムを組み始めればわかるかと思いますが、変数を甘くみてはいけません。

あまりの変数の多さに絶望します。

早いウチからローカル変数とグローバル変数にきちんと分けるクセをつけておく事をオススメします。

では最後に自作関数を組み合わせてみましょう！

■14日目　プログラム６■

<script>

	/*jspgm14_6*/
	/*14日目　プログラム６*/

	var suji = 0;

	alert("あいさつプログラムです！\n(1)朝(2)昼(3)晩のどれかを\n選んでね！");
	
	suji = prompt("1:朝 2:昼 3:晩のどれかを入力してください！");

	aisatu();

	function aisatu(){
		switch(Number(suji){
			case 1:
				ohayou();
				break;
			case 2:
				konnitiha();
				break;
			case 3:
				konbanha();
				break;
			default:
				alert("1,2,3のどれかを入力してください！");
				break;
		}
	}

	function ohayou(){
		alert("おはよう！");
	}

	function konnitiha(){
		alert("こんにちは！");
	}

	function konbanha(){
		alert("こんばんは！");
	}

</script>

■実行結果■

■説明■

このように関数同志を組み合わせてより複雑な関数を作る事もできます！

いろいろと組み合わせて試してみてください！

これにて「JavaScriptでプログラミング入門」を終了したいと思います！

最後までお付き合いいただいた方は感謝です！

よろしければ

「おまけ１　超簡単ホームページ入門」

「おまけ２　JavaScriptテクニック集」

こちらを学習になった上でぜひ応用編である

「JavaScriptでタイピングゲーム」

こちらに挑戦してみてください！

このサイトを通して少しでもプログラミングの楽しさを感じていただけたら幸いです！