2018-12-30
ドットインストール「JavaScriptでストップウォッチを作ろう」をやった
https://dotinstall.com/lessons/stop_watch_js_v4
- button という HTML 要素がある。
- JavaScript は文と式からなる。文は「処理を実行するステップ」、式は「値を生成し、変数に代入できるもの」であり、評価値を返す。
- 文を式として扱うことはできないが、式を文として扱うことはできる（式文と呼ぶ）。
- 文の末尾にはセミコロン不要。（if 文など。ブロックの終わりで文が終わることが明白だからかな？）
- function という語から始まるコードのうち、単に関数を宣言するのは function「文」、無名関数を変数に代入して関数リテラルをつくったりするのは function「式」。
参考：[文と式 * JavaScript Primer #jsprimer](https://jsprimer.net/basic/statement- expression/)
- JS コード全体を 1 つの関数として括り、即時実行する。これによって変数のスコープがこの関数内に限られ、ライブラリなど他所から呼び出したコードと変数名が競合することを避けることができる。これを即時関数という。
function(){...}()と書くと function 文として認識され、ブロックが終わった時点で文が区切られてしまう。(function(){...})()と書くと function 式として認識され、途中で区切られず、即時関数として期待される挙動をしてくれる。
参考：即時関数(function(){ ... })()の別の書き方いろいろ: Architect
Note
- setTimeout は一定時間経過後に特定の処理を 1 回だけ行う。setInterval は一定時間おきに特定の処理を繰り返す。
- 一定時間おきに特定の処理を繰り返したい場合、以下の 2 つの方法がある。
- setInterval を利用する。この場合、処理開始時点から一定時間経過後に次の処理が開始されてしまうため、1 つの処理がインターバル以上の時間を要してしまうと、実行すべき処理がどんどん積みあがってしまう。
- setTimeOut を再帰的に呼び出すことでも一定時間おきの繰り返し処理を実現できる。こちらは処理終了時点から一定時間経過後に次の処理を開始する。そのため、1 つの処理に長い時間がかかった場合、次の処理は呼び出されず、実行すべき処理がどんどん積みあがることはない。こっちの方がベターですね。
参考：JavaScript で setTimeout を使う方法【初心者向け】 | TechAcademy マガジン
- 演算子”/“は小数を返す。商の整数部分のみ得たい場合は Math.floor(X / Y)
- 桁数を固定するには、0 を先頭にくっつけてから下 X 桁を取り出す方法が便利。1 桁だったら～とかいちいち判定処理してたら重そうだもんな。
- スタートボタンを押して経過秒数を表示させる場合、① 開始時刻を取得する関数、② 一定時間経過後に経過時刻を取得する関数（再帰で呼び出して繰り返す）、③ 取得したミリ秒を固定ケタ数の分/秒/ミリ秒に変換して表示する関数、の 3 つくらいに分ける。これくらいの粒度で関数を切り出していくのだなあ。（どれだけ共通してつかうかとかによるだろうけど。）
- setTimeout や setInterval の返り値は 1 とか 2 とかになる。これを timeoutID などとして変数に入れておき、clearTimeout(timeoutID)とすると、タイマーを解除して、タイマーにより予定されていた処理を取り消すことができる。
参考：window.clearTimeout - Web API | MDN
- 上下中央に文字を配置するには、height と line-height を同じ値にするなど。
- 不具合の修正、地道だけどおもしろいな。
- Atom の Ctrl+D めっちゃ便利！次にでてくる同じワードをマルチ選択。
- 横並びの各要素に間隔を空けたい場合は、隣接セレクタで margin-left を指定するなど。いや、flexbox の justify-content: space-between;でよろしくやってくれる。flexbox 最高だなあ。
- class の着脱は className より classList の方がぐっと便利な感じがする。
- めっちゃ冗長なコード書いて何とも思ってなかった…。DRY! DRY!