初心者による初心者のためのゲームアプリ作成 14

Java Script 関数

本格的なゲームアプリを作成する場合、ソースコードは、数百行いや数千行、数万行になることがあります。そのような長いコードが記述されていると読みづらかったり、エラーを探しにくかったりという弊害がでてきます。そのため、「関数」という機能単位でコードを切り分けて、それらを複数組み合わせることでプログラムを構築していきます。



関数とは、ある一連の処理をひとまとめにしたものをいいます。機能ごとに処理をまとめることで上記に書いた弊害がなくなり、また、よく使う処理を関数にしておけば、必要な場面で同じ処理を何度も実行することが可能となります。

関数は、処理をするために必要な情報である「引数」を受け取ります。そして、処理が終了すると「戻り値」と呼ばれる処理結果が返ってきます。ただし、「引数」と「戻り値」は必須ではなく、省略することも可能です。

関数の書き方は、まずは、引数・戻り値ともに省略した場合は、

関数の定義(引数・戻り値なし)

function 関数名() {

処理;

}

関数の呼び出し

関数名();

注意しなければならないのは、関数は、作っただけでは実行されません。まずは関数として名前を付けたものを作っておいて、その関数を呼び出す命令を記述することで初めて関数内の処理が実行されます。つまり、定義と呼び出しの、二段階の手順を踏まなければ関数は動かないということです。それでは、やってみましょうか。Monacaにログインし、最小限のテンプレートのプロジェクトを開き、そのindex.htmlファイルの<script></script>タグ内を下記のように編集してください。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<meta http-equiv=”Content-Security-Policy” content=”default-src * data: gap: content: https://ssl.gstatic.com; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval'”>
<script src=”components/loader.js”></script>
<link rel=”stylesheet” href=”components/loader.css”>
<link rel=”stylesheet” href=”css/style.css”>
<script>
// 関数を作る
function sayHello() {
document.writeln(“いい天気ですね。”);
}

//関数を実行
sayHello();
</script>
</head>
<body>
<br />

</body>
</html>

編集したら、保存をクリックしてみて下さい。プレビュー画面に、「いい天気ですね。」と表示されたでしょうか。sayHello()関数の定義と実行、解りましたでしょうか。では、次は引数がある関数を試してみます。

関数の定義(引数がある場合)

function 関数名(引数を入れる変数名) {

処理;

}

関数の呼び出し

関数名(関数に渡す引数);

関数は、引数を受け取るとそれを変数に代入します。その変数を宣言しているのがfunction文の丸かっこないです。そのときは、varをつける必要はありません。また、関数は以下のようにカンマ区切りで複数していすることもできます。

関数の定義(複数引数の場合)

function 関数名(引数を入れる変数名1,引数を入れる変数名2,引数を入れる変数名3,・・・・) {

処理;

}

関数名(関数に渡す引数1,関数に渡す引数2,関数に渡す引数3,・・・・);

では、また、Monacaで試してみましょう。先ほど書いたプログラムの<script></script>タグ内を下記のように編集してください。

<script>
// 関数を作る
function sayHello(name) {
document.writeln(name + “さん、いい天気ですね。”);
}

//関数を実行
sayHello(“上杉謙信”);
</script>

編集したら、保存をクリックしてみて下さい。どうですか。プレビュー画面に、「上杉謙信さん、いい天気ですね。」と表示されましたでしょうか。sayHello()関数を呼び出すときに、名前データーを引数として渡すと、sayHello()関数は名前データーを変数nameに代入し、それから関数内の処理を実行するという流れです。そして、最後に、戻り値がある関数を試してみます。

関数の定義(戻り値あり)

finction 関数名() {

処理;

return 戻り値;

}

関数の呼び出し

var 戻り値を入れる変数名 = 関数名();

returnという文が戻り値を呼び出し元に渡す命令です。呼び出し元は、戻り値を受け取ったらそれを変数に代入しなければならないので、イコールを使って変数へ値を代入する式を記述します。では、先ほど書いたプログラムに追記して試してみましょうか。<script></script>タグ内を下記のように編集してください。

<script>
// 関数を作る
function sayHello(name) {
document.writeln(name + “さん、いい天気ですね。”);
}

// 関数を実行
sayHello(“上杉謙信”);

// 戻り値を返す関数
function calc() {                ②
var num = 1 + 2 + 3 + 4 + 5;
return num;
}

// 関数を実行し、戻り値を受け取る
var result = calc();                                                         ①
document.writeln(“<br>”);
document.writeln(“結果は” + result + “です。”);
</script>

編集したら、保存をクリックしてみて下さい。プレビュー画面に、「上杉謙信さん、いい天気ですね。 結果は15です。 」と表示されましたでしょうか。

そうなんです、戻り値がある場合の流れは少し複雑なので注意してください。順を追ってみますと、①でcalc関数を呼び出す処理が実行されて、②に飛びます。calc関数内では、1から5までの数値の加算した結果を求めて、変数numに代入し、その値を戻り値として返却しています。するとまた、①に戻ってきて、戻り値である15という値を変数resultに代入しています。ちょっと、考えちゃいますよね。

次回は、「イベント」という仕組みを記述したいと思います。ありがとうございました。



 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です