Recruit Site

時間管理術のひとつであるポモドーロ・テクニック実現する、
タイマーアプリを作る勉強会の第二弾を開催しました。

■概要
気軽に作れるようにJavaScriptにて作成
7月に開催した勉強会の続きとして、アラートと共に音を鳴らす処理を実装

■ポモドーロ・テクニックとは
集中力を高め、効率的に仕事をするテクニックで、短めの作業と短い休憩を繰り返す方法
具体的には「25分の作業＋5分の休憩」を1ポモドーロとし、
4ポモドーロ（2時間）ごとに30分間の休憩、これを繰り返す

■前回のおさらい～JavaScriptで学んだこと～
　・JavaScriptのタイマー機能として使用される関数について
　・setTimeout関数……関数が実行されてから関数内で指定した時間の分だけ時間が経過した後に、特定の動作をさせたい場合に使う
　・setInterval関数……指定した時間ごとに何度も動作させたい場合に使う
ポモドーロは時間を区切るものなので、setInterval関数を使って実装している
　・関数の書き方
　　setTimeout／setInterval　(　引数１　,　引数2　)
　　　引数1：実行するプログラムを記述
　　　引数2：実行を開始するまでの時間（ミリ秒単位）

■非同期処理について
　複数の処理を同時に行うことができる書き方で、他の処理が完了後に走る
　setTimeoutは0秒後に処理を行うように設定しても、他の処理が先に走ってしまう
　→非同期の処理を考える際は、処理の順番を制御するための書き方をする必要がある
　
　非同期処理を同期的に書く方法として、以下のものがある
　　・コールバック関数
　　・Promise構文
　　・async/await構文

■コールバック関数
　関数の引数に渡された関数のこと
　　JavaScriptは引数に関数を入れることができる
　　呼び出される関数（引数）と呼び出す関数（引数として別関数をセットする）を用いて処理を記述することで、
　　呼び出す側でセットした関数が一次的に呼び出される側の引数に保存され、順番通りに処理を進めることができる

■Promise構文
　コールバック関数でネストが深くなってしまうことを解決するために生み出された構文
　3つの要素で構成されている
　　・処理（確定していない値をとりあえず渡しておける）
　　・処理が成功した時の値
　　・処理が失敗した時の値

■async/await構文
　Promise構文の見づらさを解決するために生み出された構文
　Promiseの書き方を取り入れながらの記述が可能
　何回も記述せずに、纏めて書くことができる構文

■音を入れる方法
　１．HTML上にaudio要素を書いていく
　　・JavaScriptで要素を取得できるよう、idを設定しておく
　　・preload属性でいつ鳴らすか設定できる
　　・audio要素の中にsourceを指定し、鳴らすファイルを記述する
　２．JavaScriptで音を鳴らす
　　　document.getElementById(“timeUp”).play();