cre8cre8
AskMe♥

cre8cre8なJavaScript入門
~関数を使ってグラフィカルなプログラムをつくろう~

前回の記事は繰り返し(for)について学びました。
今回は関数を学んでいきたいと思います。
ここが踏ん張りどころです。がんばってください。
と言っても、ここまでの講座記事を読んでいただいたみなさんは、もう関数を使っています。
そうです! function ... と書いていたあの部分です。
今回はこの関数(function)の解説と少しアニメーションを用いた簡単なゲームを作ってみましょう。

それでは、関数を使ったサンプルを組んでいきましょう。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <button id="clickRun">ボタン</button>
8
9    <script>
10      document.getElementById("clickRun").addEventListener("click", function() {
11        alert("Good morning!");
12      });
13    </script>
14  </body>
15</html>

addEventListenerfunction() { ... の部分が関数です!
どうですか?今まで使っていたでしょ?
そうです!特段意識することなく、使えるようになっていたのです!

では、一体、関数(function)とはなんなのか?
関数は処理をまとめて名前をつけることです。
いろいろ端折っていますが、ものすごく簡単にまとめるとそれだけです。

なぜ、関数が必要なのかというと、
例えば、上記のサンプルで使用した addEventListener みたいに、
「○○されたら、☓☓する」みたいな処理を作るときによく使用するからです。

他にも、コードが長くなった時に読みやすくするために関数を使用したり、
同じような処理を何度も書くのを回避するために使用しますが、
よく使うのは、上記の「○○されたら、☓☓する」ときなので、この記事もその解説を主にしますね。

ちなみに、上記のサンプルは以下のように書き換えることもできます。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <button id="clickRun">ボタン</button>
8
9    <script>
10      function pushButton() {
11        alert("Good morning!");
12      }
13
14      document.getElementById("clickRun").addEventListener("click", pushButton);
15    </script>
16  </body>
17</html>

こちらのほうがわかりやすいでしょうか?
上記のサンプルは、関数 pushButton を用意して、その関数を addEventListener に登録して、
ボタンクリック時に pushButton 関数に書いた内容を実行しています。

最初のサンプルとの違いを説明すると、難しい解説になるので、
こういう書き方もあるんだ。くらいの気持ちでいてください。

それでは、次に矢印キーを押したら、その方向に赤色のボックスが移動する
関数を使用したJavaScriptを組んでみましょう。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <style>
8      * {
9        margin: 0;
10        padding: 0;
11      }
12      #block {
13        width: 100px;
14        height: 100px;
15        background: #900;
16        position: absolute;
17        top: 0;
18        left: 0;
19      }
20    </style>
21    <div id="block"></div>
22
23    <script>
24      var block = document.getElementById("block");
25
26      // 初期値の座標はともに0(左上の座標となる)
27      var x = 0;
28      var y = 0;
29
30
31      window.addEventListener("keydown", function(e) {
32        var keycode = e.keyCode;
33
34        if (keycode == 39) { // 右矢印
35          x++;
36        } else if (keycode == 40) { // 下矢印
37          y++;
38        } else if (keycode == 37) { // 左矢印
39          x--;
40        } else if (keycode == 38) { // 上矢印
41          y--;
42        }
43
44        block.style.left = x + "px";
45        block.style.top = y + "px";
46      });
47    </script>
48  </body>
49</html>

addEventListener"keydown" はキーボードが押された時に走るイベントです。
その後の 関数 function(e)e には押されたキーボードに関するデータが入っています。
今回は何のキーが押されたかを判定したいので、キーコード(e.keyCode)を取得しています。

矢印キーのキーコードは、右が39、下が40、左が37、上が38となっていますので、
条件分岐でキーを判定後、座標を操作しています。

なお、座標は x,y で表しており、初回アクセス時は、ブラウザの左上 (0,0) で初期化しています。


(CSSでも position: absolute; top: 0; left: 0; で表示の調整をしています。)

学生のころにならった、 x,y と異なるところは、
y軸が+の方向にいくと下に、-の方向にいくと上に行く点です。
注意してくださいね。

今回は関数(function)について、簡単に説明してみました。
関数は学習しだすと、難しくてつまづくことが多いので、
楽しく学べるよう作りました。
この記事で関数に興味をもってもらえたらなら嬉しい限りです。

そして、この記事でcre8なJavaScript入門は完了としますね。
いつか体系的なJavaScriptの学習用記事を連載しようと思います。

それでは、たくみ先生の次回作をお楽しみに!! (打ち切りフラグぇ…)

≪ 前の記事
cre8なJavaScript入門
~for文(繰り返し)を使ってDQ風ゲームを改造してみよう~
次の記事 ≫
ほな、Less.js使って開発効率を上げてみまひょか〜
(俺得スクリプト付き)

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事