🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-

前回の続き　→ [🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-](https://qiita.com/mmaumtjgj/items/0a9e73058727b101579b)

完成した作品は　→　[こちら🐕](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)


## イメージ図
[![Image from Gyazo](https://i.gyazo.com/b00f5e6ed310d50ec66066525ea1bbc8.gif)](https://gyazo.com/b00f5e6ed310d50ec66066525ea1bbc8)

## タイマーを表示
タブを完成させたところで、タイマータブの中身を作っていく。
最初に出てくるポメと「タイマーを設定しよう！」は簡単なHTMLとCSSなので今回は省略。

[こちらの記事](https://qiita.com/mmaumtjgj/items/ef7bf1116988bfeedd84)でモーダルとフォームは完成しているので、フォームの内容をローカルストレージに反映させる処理を行う。

ローカルストレージに保存する内容は、後で実際にカウントを進めるため。細かく設定していく

## ローカルストレージに値を保存する
保存する内容は以下。例：25分/5分/2回繰り返す
| key | value例 | 説明 |
|:-:|:-:|:-:|
| work_time  | 25分  | 集中する時間（分）  |
| work_second  |  1500秒 | 集中する時間（秒換算）  |
|  constant_work_second |  1500秒 | 集中時間終了通知用  |
|  interval | 5分  | 休憩する時間（分）  |
| interval_second  |300秒   | 休憩する時間（秒換算）  |
| constant_interval_second  |  300秒 | 休憩時間終了通知用  |
|  repeat_time | 2回  |  何回繰り返すのか |
|  one_roop_second | 1800秒  |  １ループするあたりの総秒数 |
| total_second  |  3600秒 | ループを含めた総秒数  |
| elapsed_time  | 開始時点では0秒  | 経過時間（秒）  |

上記の内容を関数にしてローカルストレージに保存する。
```popup.js
//フォームからタイマーを取得する関数名をつけました
function get_timer_form(){
    let repeat_time = parseInt(document.forms.timerForm.repeat_time.value, 10);//くり返し回数
    chrome.storage.local.set({repeat_time: repeat_time});

    let work_time = parseInt(document.forms.timerForm.work_time.value, 10);//集中時間(分)
    chrome.storage.local.set({work_time: work_time});

    let interval = parseInt(document.forms.timerForm.interval.value, 10);//休憩時間(分)
    chrome.storage.local.set({interval: interval});

    let work_second = work_time * 60; //ONタイムの秒換算
    chrome.storage.local.set({work_second: work_second});
    chrome.storage.local.set({constant_work_second: work_second});//dialog用

    let interval_second = interval * 60; //OFFタイムの秒換算
    chrome.storage.local.set({interval_second: interval_second});
    chrome.storage.local.set({constant_interval_second: interval_second});//dialog用

    let one_roop_second  =  work_second + interval_second; //１ループあたりの秒数
    chrome.storage.local.set({one_roop_second: one_roop_second});

    let total_second = one_roop_second * repeat_time; //総ループの合計秒数
    chrome.storage.local.set({total_second: total_second});

    let elapsed_time = 0; //秒数を入れる経過時間
    chrome.storage.local.set({elapsed_time: elapsed_time});
}
```
### **``parseInt(document.forms.timerForm.repeat_time.value, 10)``**
#### ◆parseInt()
``parseInt``とは、文字列の整数を数値型の整数に変換する関数。
使い方は``parseInt(文字列, 基数)``
基数とは、2進数や16進数の2や16の部分のこと。
ここでは１０と記載されているので１０進数を指している。

#### ◆document.forms.timerForm.repeat_time.value
``document.forms``とは``<form>タグ``内要素の取得をするもの。
使い方は``document.forms.formの名前.部品の名前``
HTMLにてnameを指定する必要がある。popupのhtmlにて作成したフォームが以下。
```html
<form class="row" name="timerForm">
  <div class="col-6 mb-3">
    <label class="form-label">繰り返し(回)</label>
    <input type="number" class="form-control" name="repeat_time" id="repeat_time_value" required>
  </div>
　　　<!--省略-->
</form>
```
``document.forms.timerForm.repeat_time.value``は``timerForm``という名前のフォームの``repeat_time``という名前の値を取ってくるということになる。

**``parseInt(document.forms.timerForm.repeat_time.value, 10)``** は数値化したフォームの内容を取ってくる、という意味になる。

## 保存した値をviewに出す
```popuo.js
function timer_display(){
    chrome.storage.local.get(['repeat_time', 'work_time','interval','work_second'], function(v){
        let min = v.work_time
        let sec = v.work_second % 60;
        view_timer.innerHTML = String(min).padStart(2,"0") + ":" + String(sec).padStart(2,"0");

        if (v.repeat_time > 1) {
            timerDetails.innerHTML = `${v.repeat_time}回 ${v.work_time}分集中 / ${v.interval}分休憩を繰り返す`;
        }else{
            timerDetails.innerHTML = `${v.work_time}分集中 / ${v.interval}分休憩`;
        }

        startBtn.innerHTML = "<button class='btn btn-outline-info d-flex flex-column align-items-center m-2'>START</button>";
        stopBtn.innerHTML = "<button class='btn btn-outline-warning d-flex flex-column align-items-center m-2'>STOP</button>";
        resetBtn.innerHTML = "<button class='btn btn-outline-secondary d-flex flex-column align-items-center m-2'>RESET</button>";

        noTimer.style.display = 'none';
    })
}
```
### ``chrome.storage.local.get(['repeat_time', 'work_time','interval','work_second'], function(v)``
タイマーをスタートさせるまではただの数字を表示させるだけでいいので、ストレージから``repeat_time``/``work_time``/``interval``/``work_second``だけ取り出しました。

``function(v)``の``v``はvalueのvという意味で使いました。

### ``String(min).padStart(2,"0") + ":" + String(sec).padStart(2,"0");``
このコードはタイマーの表記が「25:00」「07:09」という風に、１桁でも2桁の数字で表せるようにしています。

``padStart()``は頭ゼロをつけるメソッドです。
使い方は``文字列.padStart(文字列の長さ[,埋める文字]);``
上記は、「minを文字列化して、２桁表記かつ１桁であれば０をつける + : + secを文字列化して、２桁表記かつ１桁であれば０をつける」という意味になります。

## 「設定」ボタンを押すと表示させる
「設定」ボタンを押した際にフォームの取得とその値の表示をさせる。

```popup.js
//設定ボタンにmakeTimerBtnというidをつけている
makeTimerBtn.onclick = function() {
    //タイマー内容を取得
    get_timer_form();

    //タイマーを作成したら、タイマーとボタンを表示
    timer_display();
};
```
現状popup.jsはざっくりこうなっている。中身は省略。
```popup.js
//色々定義
const ~~
let ~~
//がいっぱい

//タブの切り替え
document.addEventListener('DOMContentLoaded', function(){省略}, false);

//「タイマーを設定する▷」を押した時
makeTimerBtn.onclick = function() {省略};

//フォームから時間内容を取得
function get_timer_form(){省略}

//タイマーを作成したら、タイマーとボタンを表示
function timer_display(){省略}
```
## 拡張機能の記事リンク
[🔰JS初心者が作るGoogle extension V3 ①](https://qiita.com/mmaumtjgj/items/6538fd8814d93e9d7fa6)
[🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-](https://qiita.com/mmaumtjgj/items/ef7bf1116988bfeedd84)
[🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-](https://qiita.com/mmaumtjgj/items/0a9e73058727b101579b)
[🔰JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-](https://qiita.com/mmaumtjgj/items/6e1a978656580dab59d7)
[🔰JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-](https://qiita.com/mmaumtjgj/items/d15df85bcb9dcf31d87d)
[🔰JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)
[🔰JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-](https://qiita.com/mmaumtjgj/items/abd7f4f3f63624dec6f9)
[🔰JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-](https://qiita.com/mmaumtjgj/items/6b638388e7c39b2863f4)
[🔰JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/2c2e117d31db69adb825)
[🔰JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/5e80fa8fca2fa51b7445)
[🔰JS初心者が作るGoogle extension V3 ⑪ -content.jsの処理-](https://qiita.com/mmaumtjgj/items/cae1ae8e2869e8414567)

## 参考記事
[文字列を整数に変換！JavaScriptのparseInt( )の使い方【初心者向け】](https://magazine.techacademy.jp/magazine/15335)
[JavaScript 頭ゼロをつける(padStart)](https://itsakura.com/js-padstart)