ゼロからはじめるプログラミング講座の第三十七回です。まず前回の時間を表示する時計もどきですが表示する桁数がバラバラで見栄えが悪いので改良しましょう。

数値を0詰めしよう。

前回の時計のようなものです。

setInterval(function (){
  var date = new Date()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  var msecond = date.getMilliseconds()
  var now = hour + "時" + minute + "分" + second + "秒" + msecond
  document.querySelector("#p1").innerText = now
},1000/60);

時間の桁数を整えます。ifで条件分けするだけの簡単な処理です。

1つだけ新しいメソッドが出てくるので確認してください。

function zeroplus(time,num){
  var string = time.toString() // 文字列へ変換して返す
  var diff = num - string.length // 基準になる桁数-文字数
  if(diff == 1){
    string = "0" + string // 0を足す
    return string
  }else if (diff == 2){
    string = "00" + string // 00を足す
    return string
  }
  return string
}

setInterval(function (){
  var date = new Date()
  var hour = zeroplus(date.getHours(),2)
  var minute = zeroplus(date.getMinutes(),2)
  var second = zeroplus(date.getSeconds(),2)
  var msecond = zeroplus(date.getMilliseconds(),3)
  var now = hour + "時" + minute + "分" + second + "秒" + msecond
  document.querySelector("#p1").innerText = now
},1000/60);

新しく出てきたのは.toString()のメソッドです。文字列に変換するメソッドです。よく使うので覚えておきましょう。0埋めの方法ですがもっとスマートな方法があります。

興味のある方は「javascript 0埋め」などで検索してみてください。

setTimeoutで遅延実行してみよう。

setIntervalの仲間のようなもので同じ書き方をします。

setTimeout(関数,遅らせる時間)

setTimeout(function(){
  console.log("2秒後に表示")
},2000)

setIntervalと同じように一定時間後に処理が開始されましたね。

setIntervalは無限に繰り返すのに対してsetTimeoutは一度きりです。

非同期処理に注意しよう。

今まで触れてこなかったのですがsetIntervalとsetTimeoutだけは非同期処理です。

非同期処理とは

処理を擬似的に並列にする、実行順が保証されない処理のことです。

同期処理は処理の実行順が約束されています。例えば以下のコードでは

console.log(1)
console.log(2)
console.log(3)

コードが上から順番に処理されていき今までの知識通りの結果が得られると思います。

しかし非同期の処理では予想外の結果になります。確認してみましょう。

console.log(1)
setTimeout(function(){
  console.log(2)
},1000)
console.log(3)

1→3→2とコードの順番を無視してしまいました。

1が表示され、その1秒後に2が表示され、3が表示されるという風にはなりません。

setTimeoutの処理は待たずに先に進むと考えてもらっても良いのですが重要なのはJavaScriptでは並列処理が起こらないということに注意してください。

並列処理とは例えば音楽プレイヤーで音楽を聞きながらブラウザでインターネットを使うみたいなことです。JavaScriptでは同時に複数の処理をすることはありません。

このおかげで処理の順番が保証されています。非同期処理は特殊で処理を別のところに登録することで擬似的に並列処理を行っています。

今はしっくり来ないかもしれないですが待つような処理、非同期処理は実行順に気をつけるということを覚えておいてください。

var cnt = 0
setTimeout(function(){
  cnt++ // cntを1にする
},0) // 遅延時間を0にしても
console.log(cnt) // 1にはならない

練習問題を解いてみよう。

正解するとこうなります。

解答例はこうです。（マウスオーバーで表示）

var num = 999 * 999
console.log(num.toString().length)

お疲れ様でした。文字列にはlengthプロパティがありますが数値には無いのでtoStringで文字列に直す方法があります。次回はイベント・クリックの解説をします。

次も頑張って記事を作るのでチャレンジしてください！