時計を作ってみよう（javaScript)

１．時計の表示

今回の授業は、デジタル時計を作るというものでした。

「一秒ごとに何かが起きるというjavascriptの機能を使う」と先生は説明されました。（子供向けにこのような説明の仕方をされるところが面白いですね）

まず、一定時間ごとに処理をするというsetIntervalを使った関数を作ります。

// １秒毎に処理をする
setInterval(function(){
    console.log("Hello!!");
},1000);

時間はミリ秒で指定します。ここでは１秒ごとに処理をしたいので、１秒＝１０００ミリ秒で指定します。

console.logで確かめると、一秒ごとにHello,Hello,と表示されるので、処理されていることが確かめられました。

時計の処理の関数を作って、この中に入れます。（console.logをshowClock();に書き換える）

function showClock(){
    console.log("時計の処理!!")
    // 日付オブジェクト
    var dObj = new Date();
    // 時間を取得する
    var hours = dObj.getHours();//日付から時間をgetする
    console.log(hours);
    var minutes = dObj.getMinutes();//日付から分をgetする
    console.log(minutes);
    var seconds = dObj.getSeconds();//日付から秒をgetする
    console.log(seconds);
}

new Date();で、今現在の日付のデータを取得し、その中に含まれている時間、分、秒を取り出しています。それぞれconsole.logで

10
11
05

のように表示されます。これではわかりにくいので、横並びに表示されるようにします。

    // デジタル時計
    var str = hours + minutes + seconds;//数値として加算されてしまうので間違い
    console.log(str);
    var str = hours + ":" + minutes + ":" + seconds;
    console.log(str);
    var str = hours + "時" + minutes + "分" + seconds + "秒";
    console.log(str);

単に＋でつなぐと、数値として扱われるために、加算されて一つの数値となってしまいます。

そこで、間に文字列を挟むことで、

10:11:05

あるいは

10時11分05秒

と表示させることができました。

２．日付の表示

次は日付です。

    // 年月日を取得する
    var year = dObj.getYear() + 1900;
    console.log(year);
    var month = dObj.getMonth() + 1;
    console.log(month);
    var date = dObj.getDate();
    console.log(date);

これもさっきと同じように、dObjから年、月、日のデータをそれぞれ取り出します。

ここで注意が必要なのは、getYearでは1900マイナスの年が取り出されるので（１９００年台に始まったコンピュータの世界で、下２桁で処理をしていた為と考えられるそうです）、1900をプラスしたのが現在の年になること（代わりにgetFullYearとすると2018で出すことができるようになっている）、月は１月から配列として扱うのが都合がよいので（月は国によって呼び方が異なるから。日本では１月、２月だが、January、 February・・だったり）、１月は０というデータとして与えられるから１を加えること、日付はそのまま（多分これはどこの国でも１日、２日だから）となることです。

これを横並びで表示させるには、時計のときと同じように

    // デジタル日付
    var str2 = year + "年" + month + "月" + date + "日";
    console.log(str2)

となります。

2018年8月25日

と表示されました。

３．曜日の表示

最後に曜日です。

    // 曜日
    var arr = ["日", "月", "火", "水", "木", "金", "土"];
    var day = dObj.getDay();//日付から曜日をゲットする
    console.log(day);
    console.log(arr[day] + "曜日")

まず、曜日の配列を作ります。次に日付のデータから曜日をゲットします。曜日は、日曜日を０として土曜日まで、0,1,2,3,4,5,6という数字で与えられます。今日は土曜日なので6と出ました。

そこで、曜日の配列から、その数値を添字としたものを取り出せば、

土曜日

と今日の曜日が表示させることができました。

４．【感想】

この日の授業は盛りだくさんの、ぼーっとしている暇のないとても濃い授業でした。どうして年は１９００を引かれた値になっているのだろうかとか、コンピュータの起源と歴史にまつわる話が出てきたり、なぜ月のデータは０から始まっているのか、考えてみたら日本では１月２月・・だけど英語圏や他の国では違うよね、日本でも睦月、如月・・と呼んでいたとか、いろいろ興味深い話題もいろいろ出てきました。

それにしても、この日の授業はゲームのように画像が動いたりするのでもなく、ただコンソール画面に表示される数字や文字を見ながら、「おぉー！」とか「わー！」とか盛り上がっているという、なんとまあプログラマーさん（の卵たち）でしょうかと思いました。（知らない人が見たら一体何が面白いの何を喜んでいるのという感じでしょう。）みんな打ち込むのもすごく速くなっているし。

先生方、よくここまで子どもたちを育てられましたね・・と少し感動を覚えた私でした。