素の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;
})

以下でも行けた。この場合、配列なのでキーが0からauto incrementされる。

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

🙄今回は1つ目のパターンで、キーを明示的に指定できる方を採用します。

さらにtimeの値から””を取り除くのにif文。

mapメソッドとfilterメソッドを知ったのでそっちで記載しました。

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に慣れてきた感があります。

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

コメントを残す