素のJSでタイマー機能を作ってみた③ firebaseからデータを取得して時間の処理

はじめに

前回に引き続き続きを作っていきます。

素のJSでタイマー機能を作ってみた② firebase実装

✅参考

バレたらまずそうなfirebaseのAPIキーをどう扱うか．

Firebase Hostingに静的サイトをデプロイする手順のメモ

削除はコンソールからできなくてコマンドで対応するとのこと。

firebase hosting:disable

メイン

✅合計時間の計算

※最初forEachを使っていましたが、mapメソッドとfilterメソッドを使ってだいぶ短く記載できました。

すべてのデータからtimeの値だけピックアップ

以下は連想配列(※JSの場合オブジェクトと同義)で扱う。

Object.keys(allDB).forEach((key) => {
  ttlTimeDB[key] = allDB[key].time;
})

let array = [];
Object.keys(allDB).forEach((key) => {
  array.push(allDB[key].time);
})

let timeDB = allDB.map(key => key.time);
timeDB = timeDB.filter(value => value !== "");

🙄便利すぎる～～！！

✅値の取得

上記で取得したデータは〇時間〇分となっているので、時間と分を切り分けて計算できるようにしていきます。

timeDB = timeDB.map(value => {
  let array = value.split( /時間|分/ );
  array.pop(); // [ '2', '30', '' ]になっているので最後の要素を取得して削除
  return array;
});

以下出力結果

[
  [ '3', '4' ],
  [ '2', '30' ],
  [ '4', '25' ],
  [ '3', '46' ],
  [ '2', '20' ],
  [ '1', '0' ]
]

🙄だいぶJS使いこなせてきた感。

そのあと時間と分数を個別に足し算⇒繰り上げ処理で以下の感じ。

timeDB.forEach((value,index)=> {
  ttlH += Number(timeDB[index].shift()); // 先頭の要素を取得し削除
});

timeDB.forEach((value,index)=> {
  ttlM += Number(timeDB[index].shift()); // 先頭の要素を取得し削除
});

if (ttlM >= 60 ){
  carryH = (Math.floor(ttlM / 60));
  ttlH += carryH;
  ttlM -= (carryH*60)
}

確認

🙄やっとここまで来ました。。。

おわりに

関数内で定義する変数は関数内のみで使うもののみにする。

関数内で定義した変数はほかの関数で同名の変数を定義しても問題ない。

👆みたいな気付きは実際に開発しないとわからないですね。。。

徐々に素のJSに慣れてきた感があります。

次は詳細表示&編集機能を実装⇒ログイン機能実装ができたらと思います◎