こんにちは、フロントエンドの、のりこです。

きっとjs（javascript）は難しいと思ってらっしゃる方も多いと思います。
苦手、という意識はそうそう拭えるものではありませんが、普段どのように考えながらjsを書いているかを今回のネタにしてみたいと思います。

え？そんなことよりすぐに使える便利な小ネタを書いて欲しい？？？大丈夫、きっと便利な小ネタを自分で改変しようと思ったりしたときにちょっとは･･･かすかには･･･ちみっとくらいは･･････役に立つと思いますヨ？？

動きを簡単な日本語で表現する

例えばイベント日までのカウントダウンをページに表示するとしましょう(◎-◎)d
もちろん『カウントダウンを表示』という簡単な日本語で説明できていますが、このままではjsに置き換えることができません。カウントダウンと言うのがどういう計算で求められるのか、それを説明できないと、もちろんそのとおりの動きをするjsを書く事もできないわけです。

(1)今日の日付を調べる。
(2)目的の日付から今日の日付を引き算する。
(3)引き算した結果を出力する。

のように、具体的にjsに置き換えることができそうなカンジの説明文に落とし込みます。
jsでやるメリットがあるのは、計算や判定をさせる必要があったり、複数のページから読み込ませる必要がある共通素材だったり、手でいちいち書くのが大変な繰り返しの動作だったりだと考えます。

必要なオブジェクトを考える、調べる

カウントダウンの場合は日付を扱って計算させるので、日付がどのような形式で取得できてどうやって計算させるかをリファレンス等で調べます。
例えば、6月20日から見て5月10日が何日前かを計算するのに、人間なら、6月が20日分と5月が31日まであるので21日分、足したら41日･･･みたいなアナログな計算ができるのですが、jsさんは基本20-10みたいな単純計算しかしてくれないので、日付のオブジェクトのデータの持ちかたや扱いから理解しないと正しく計算してもらうことができません。
日付を扱うときにはnew Date()で日付オブジェクトを作成
getTime()を使うと見比べるのに便利そう
くらいの情報が得られれば ｸﾞｯｼﾞｮﾌﾞ（´ー）ｂです。

ここで変数さんのお話

中学校の数学で5-x=2のとき、xの値は3というようなのをやった記憶がありますでしょうか。
まさにこのときの x が変数と呼ばれるものです。
数学なのにどうしていきなりアルファベットが出てくるのか、しかもなぜaじゃなくてxなのか、みたいなことで数学が特に苦手なお友達がすご～く苦労していた思い出が頭をよぎります･･･。

jsにおいては、変数は、大雑把に言うと付箋紙みたいなものだと思ってもらえればいいです。
色々なことを忘れないようにメモしておきます。
付箋紙だと後々何のためのメモかわからなくなるので、簡単にタイトルをつけておけると言う感じです。

jsにもっと慣れてきたら、配列についても覚えるといいでしょう。
付箋紙のように一枚一枚切り離して使うのではなく、英単語帳みたいなものだと思ってください。

実際にjsを書いていく

まず、todayという変数に、現在の日付のオブジェクトを入れます。
new Date()の()内に何も入れない場合、現在の時刻が格納されます。

today = new Date();

count_dayの変数にはカウントダウンしたい日付を入れておきます。
特定の日付を入れる場合はこのように、年（4桁西暦）,月,日を()内に入れます。
()の中身を引数（ひきすう）と呼ぶので覚えておくと解説を読むときに便利だと思います。

count_day = new Date(2014,6,20);

今日の日付と目的の日付をそれぞれ格納できたので計算をします。
計算した結果はx_dayという、また別の変数に格納しています。

x_day = (count_day.getTime()-today.getTime())/(24*60*60*1000);

このままでは計算結果が出ただけですので、結果を表示しないといけません。

document.write(‘<p>あと’,Math.ceil(x_day),’日</p>’);

x_dayそのままだと小数点付きの数値が出てしまうため、Math.ceil()で小数点以下を繰り上げています。
Mathのつくものは数学関数といって色々あるのですが、小数点を繰り上げ・切捨て・四捨五入する
ceil()・floor()・round()の三つさえ覚えておけば事足ります。

一段階難しいおはなし

オブジェクトを理解するのはちょっと難しいと思うのですが、変数todayをalertやconsole.logで表示してみても「これはオブジェクトですよー」って言われるだけで実際に入っている日付をそのまま見ることができません。
ですが、月だけ引っ張り出す、とか日だけ引っ張り出すとかをできる柔軟な形でデータを持っているということです。なので、「todayは何月なの？ today.getMonth()」「todayは何時なの？ today.getHours()」 のように、知りたい情報にあわせて決まったコマンドで数値を取得することになります。

todayとcount_dayはオブジェクトでしたが、getTime()することにより1970年1月1日0時0分0秒（UTC）からの秒数（ミリ秒単位）を取得した上でそれぞれ計算をかけているので（出た数値がミリ秒なので24時間*60分*60秒*1000をした数値で割っています、これは日付を出す場合必ず割らないといけないので深い意味を考えず覚えておくといいでしょう。）計算によって導き出されたx_dayの中身は数値になります。

このような細かい命令の繰り返しでいろんなスクリプトを作っていきます。
jsを書いていくときのおおまかな流れのお話でした。