こんにちは！
昨日会社のヒーターでコートの袖を焦がしそうになった新人森田です。
わたあめみたいなにおいがしました。
暖かくなるのはいつなんでしょうか。

jQueryを使ってWebサイト作りたいなあとずっと思っていたんですが、前回Bootstrapでついに使うことが出来ました。
でも便利すぎたおかげで、ちゃんと使えるようになったわけではありません。
これは勉強するしかないなと思い立ちました。
ら、師匠がJavascript基礎講座を開いてくださいました。

教わりながら簡単なJavascriptを作ってみたので、
今回はその作り方を振り返りながら頭の中を整理してみたいと思います。

データのルール

関数と変数

Javascriptにはそれ自体が動作をもっている関数と、動作をもっていない変数があります。
変数はscssでも使ったことがあるし何となく使い方も分かるような気がします。
関数にはさらに“input = 引数（ヒキスウ）”と“output = 戻り値、返り値”というのがあって、引数を与えて出てきた戻り値を色々と処理するわけです。

文系に進んで数学から逃げてきたと思いきや、まさかここで関数と出会うことになるとは。。
というか、そもそもプログラミングが数学っぽいものだったりしますね。
Javascriptを多少なりとも理解することで数学を克服したと思うことにします。

データ型

扱うデータの型は５種類です。
それぞれ記述の仕方によって区別されます。

• 1　　：int,integer,number（整数）
• ‘…’    ：string（文字列）
• […]　：データの順番が保持される配列
• {…}   ：データを格納するオブジェクト
• 真偽値：true,false

これらのデータ型を使い分けていきます。

jQueryを使ってみる

予備知識がすごくアバウトですが、あとは実際に書きながら覚えていきましょう。
今回はjQueryを使って「マウスを追いかけて動く目」をつくってみます。

最初に顔のベース画像を用意します。
ティムバートン作品を意識してみました。

 html,cssを書く

Webページ上にデータがないと動かせないので、htmlとcssを使って簡単なページを作ります。
この時のポイントは、目が動く範囲のdivを作っておいて、その中に黒目の部分を入れるということです。

こんな感じです。ついでに口も作っておきました。
目や口はpositionで位置を調整してあります。
円形に可動範囲を限定しようとすると難しい処理が必要とのことで、ちょっと目ん玉飛び出しますがご了承ください。

jQueryを前提としているため、htmlファイルには自分で書くjsファイルの他にjQueryのjsファイルにもリンクが必要です。

jsを書く　１

準備が整ったところでjsファイルをいじりましょう。
今までノータッチだった未知の領域に一歩踏み出しちゃいます。
“main.js”と名付けて作業を始めます。

htmlと同じようにざっくりした部分から詳細設定を書き込んでいきます。

まずは実行タイミングを決めます。
青い文字は自分の覚え書き的なものですが結構主張しちゃっててすみません。

“$()”の()内に引数を入力します。
ここでは引数が“function”＝無名関数というもので、“function(){}”の()に仮引数、{}には関数の中身を書き込むという形式になっています。
jsさんなかなか複雑です。

上の段落の記述で.readyと同じようにページ読み込みのタイミングでjsが実行されます。
そのオブジェクトの中に、次にどういう動きをするかを設定します。
また、それが正しく動作しているかを“console.log”を使って確認をします。

下の段落は、
「body内でマウスを動かすとtestという文字列が表示される」
という動作を定義してあります。

bodyのwidthとheightが100%なので、body＝画面となり、画面内でマウスを動かすと動かした分“test”が表示され続けることになります。

というわけで１つめはクリアです。

jsを書く　２

次はマウス（ポインタ）の位置に応じて目を動かしてみます。

目を動かすということは目のcssを変更するということです。
目のcssがどこにあるかをコンピューターに指示するためには、
目に割り当てたclassをセレクタに入れて、あらかじめjQuery化（jQueryが処理しやすい変数に変換）しておくことで動作がスムーズになります。
なのでページ読み込みと同時に“var”を使って変数定義しておきましょう。
これをしなくても動作はしますが、いちいちコンピューターがclassを探すことになって重くなる要因となります。

また、マウスの位置を取るには“mousemove”というイベントを使用します。
“mousemove”のイベントオブジェクトに格納されている“clientX”“clientY”を使うことでマウスの座標を知ることが出来ます。
そしてイベントオブジェクトには変数の名前を付けます。
“e”などに略されることが多く、今回はそれにならってfunctionの引数に“e”を書き込み、“e.clientX”という風に使います。

では“e.clientX”を使って左右の動きを付けてみます。

画面の中央に配置した顔を基準にしてどこが左でどこが右かというと、次のように考えます。
ウインドウ幅の半分の座標を中心として定義して、その増減で左右を認識させます。
後で上下の動きをつける時にも使うので、ウインドウ幅も最初に変数にしておくといいかも知れません。

“center_x”を定義したら、if文を使って「中心より左ならこう」「中心より右ならこう」と動くための条件を分けます。
ここでは(e.clientX >= center_x)という条件を使っています。
分かりやすく書くと「e.clientX ≧ center_x」つまり「中心より右」ということです。
それ以外を“else”として２つに条件分岐しています。

条件が決まったら、どういう動作をするかを書きます。
if文の中はどういう意味かというと、
変数化しておいた“$leftEye”“$rightEye”のcssを
「マウスが中心より右だったら左から70pxの位置に」
「マウスが中心より左だったら左から0pxの位置に」
変更する、という定義です。

なんでcssの値がこうなるかというと、

目のエリアが100×100px、目の大きさが30×30pxということを考慮して計算した結果の値なのです。

これでx座標（左右）の設定が出来ました。
xをyに変換して同様に書けば上下の設定も完了です。

たとえばマウスを画面の左上に動かしてみると、こんな顔になります。

目が飛び出てるとギャグっぽくてこれはこれでありかも。

もし思った通りに動作しなかったら、プログラムエラーが出ていないかを確認してみてください。
アラートさんは常に冷静に何が足りないかを教えてくれます。

jsを書く　３

ここまでで、マウスの位置に応じて目が左上、左下、右上、右下に飛び出るというプログラムが書けました。
せっかくだからマウスが顔の範囲に入ってきたら目を真ん中に表示させてみます。

if文の中にもう１つ条件分岐を書き込みます。

“else if”を使って、「e.clientX≧center_xより150px少ない値」＆「e.clientX≦center_xより150px多い値」の両方の条件を満たした場合の動きをつくります。
±150pxの理由は、顔のwidthが300pxで、中心線から考えると150pxずつ幅があるからです。
この時にcssを左から35pxに変更することで目が中心に来ます。

上下も同様に、顔のheightが400pxということを踏まえてcenter_yから+200px、-200pxで条件と動きを設定します。

これで、上図の青い範囲内にマウスが来た時に目がそれぞれの真ん中の位置にくるようになりました。

まとめ

慣れないjs構文を書くと、
文字列にすべきところにコーテーションがなくてエラー
閉じ括弧忘れてエラー
スペルミスしてエラー
と、初歩的なミスばっかりしてたような気がします。

でも実際動いてくれるのを見ると楽しい！
思い通りに使えるようになったらもっと楽しいんだろうなと思います。

今回作ったJavascriptは下記のリンクで実際に動かせますので動作確認したい方はどうぞ！
上図の青い範囲が重なっている部分（顔の範囲内）にマウスが来た時だけする動きがあったりしちゃうかも？

http://nnnzzz000.github.io/move-eye/

これからはjsももっと読んだり書いたりしていこうと思います！押忍！