GajumaleRecruit Site

ニュース

イベントや勉強会の様子をお伝えしています。
ガジュマルの雰囲気を、是非感じてみてください。

勉強会
アプリ開発
JavaScript

勉強会「JavaScriptで作る時間管理術アプリ-後編-」

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

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

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

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

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

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

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

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

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