エンジニアに転職したら在宅勤務になったのでポモドーロ タイマー作った　その１

# 記事の内容
　４月１日から地方でエンジニアとして転職をしたら、コロナの影響でさっそく在宅勤務になってしまい、ずっと座りっぱなしも身体に悪いなーと思ったので、勉強がてら「ポモドーロタイマー」を作った。その中で初心者の中の初心者が学んだことを整理していく。先輩方が軽くレビューしてくれたので、その記録も残しながら記します。

# 学習初期の状態
- 転職のために`Ruby`,`Rails`を少しかじった程度
- JSはこの４月に初めて学んだ

## 学習教材
- progate 2日くらい
- JavaScript 本格入門　２週間くらいかけて読んだ

##  今回学んだこと
- 作るときは他の人が読みやすく、変更しやすいように記述すること
- マジックナンバー
- 三項演算子
- `let`と`const`
- `アロー関数`


## 作成開始や
見た目はhtmlとCSS使ってチョロっと（めちゃくちゃ苦労して）作った。



### コードを書くのに命名規則とかあるんやな
まずは、時間の設定をして

```javascript:timer.js
const WORK_TIME = 25 * 60; // ワークタイムは２５分
const BREAK_TIME = 5 * 60; // 休憩5分
const TEA_TIME = 30 * 60; // 途中で長い休憩もとるんや
const WORK_BREAK_SET =4; // 基本的に４セット
```

### まずはカウントダウン機能を作るで

## `let`の方が条件緩いし便利やないと？
『時間がだんだん減っていく』んやから処理をしてくれる関数を用意するんやな。
関数の定義は書籍では`var` を使ってたけど、今時は`let`を使うってprogateで学んだわ。それで、定義の方法は何種類かあるらしいけどprogateが押してた`アロー関数`で定義してみるわ。

```javascript
let Count_Down = () => {
  TIME--

  if (TIME < 0) {
  // セットおわり　休憩に入る
  }
}

```

先輩：「これでもいいけど、もう少し後から読む人のことも考えて書いた方がいいよ」

初：「具体的には？」

先輩：「`let`と`const`の違いは？」

初：「変数か定数か」

先輩：「そしたら関数はどちらでもないよ？」

初：「それは... そういう決まりだから？」

先輩：「初心者はこのお話を読んだ方が良いよ(https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1)
」

初：「おお。感動しました...」「再代入する可能性があるかないかが大切なんですね」
修正しよ

```javascript
const Count_Down = () => {
  TIME--

  if (TIME < 0) {
    // 切り替え
  }
}
```
## なんでもかんでもアローを使う野郎になるな？

先輩：「そもそもなんでアロー関数使ってんの？」

初：「名前がかっこいいからです！！」

先輩：「これも参考になるよ（https://qiita.com/suin/items/a44825d253d023e31e4d）」

初：「おお。８つ目の巻き上げとか僕でも理解できました。巻き上げできた方が良さそうなので、今回はアロー関数はやめておきます。（そしたらアロー関数使う機会なさそう..）」

またまた、修正して

```javascript
function Count_Down() {
  TIME--

  if (TIME < 0) {
    //切り替え
  }
}
```

初：「次は切り替えのところを実装していくぞ」
「切り替えというか、`TIME`がだんだん減って０になったら要らんから捨てるんやな」








初：`TIME`を減らすだけじゃなくてHTMLに渡して表示をせんとやな

```javascript
function Count_Show(time) {
  let minute = parseInt(time / 60);
  let second = parseInt(time % 60);
  minute_shower.innerHTML = minute;
  second_shower.innerHTML = second;
}
```

まあ、こんな感じやろう。

## 定義で満足するな？
続いて切り替えやな
モードが３つあって

- working
    - セット数を＋１して`time`を２５分にセット
- 長い休憩（teatime）
    - 現在のworkingセット数を０に戻す
    - `time`を１５分にセット
- 短い休憩（breaktime）
    - `time`を５分にセット

やから

```javascript
function Timer_Setter(is_working) {
  if(is_working) {
    NOW_SET++;
    TIME = WORK_TIME;
  }
  else {
    if (NOW_SET >= WORK_BREAK_SET) {
      TIME = TEA_TIME;
      SET = 0;
    }
    else {
      TIME = BREAK_TIME;
    }
  }
}

```

初：「最初の条件分岐の`is_working`が真偽値を返すっていうのがなかなか高度やな()」

先輩：「それやとタイマーが動かんくない？」
初：「何を言ってるんですか。さっき`Count_Down`を定義したばかりですよ！！」

先輩：「想像してみ。初くんは教師で、帰りのHRで前日に徹夜で作成した数学のプリントを教卓の上に置く。次の日にそのプリントを提出する生徒が何人おると思う？」

初：「いませんね」

先輩：「そう。準備するだけじゃダメなんだよね。きちんと実行するように指示を出さないと。」

初：「なるほど。そらそうだ。コンピュータは打ち込んだプログラム通りにしか動かないんでしたね。定義することで頭がいっぱいでした。」

`Count_Down`を実行やな。

でも一回実行するだけだと時間が１減るだけやから１秒ごとに繰り返し実行するんや。
`setInterval(func,desc)`を使うぞ。

`func`は`Count_Down`を引用して、
ああ、関数と呼び出して実行するときは`()`を添えるんやった。

ほんで次の引数`desc`は`反復する時間`を指定しておくんやな。単位は`ミリ秒`らしい。

`ミリ`は（一応数学科やし）大丈夫や（）。[^1]

## 読み手と修正のために`const`を使うんや

というわけでこんな感じやな。


```javascript
setInterval(Count_Down(),1000)
```

初：「これでいいやろ！！天才や！」

先輩：「ダメやで。」

初：「ほ？　なんでですか？」

先輩：「他の人が読む時にこの`１０００`が何を意味してるかわからんやん？それにこれと全く同じ値を他の場所に記述したら、どこかの値を例えば２０００にするときに、全部変えるべきなのかそうでないのかがわからんやん？」

初：「なるほど」

先輩：「こういうのを**マジックナンバー**って言ってプログラムを書く際には避けるべきとされてるから、名前をつけて定数として扱う方が良いね！！」

初：「`WORK_TIME`とかなんとなく最初に決めてメモ感覚で記述してましたし、僕は**そんなに長いコードを書いたり、変更を加えることがなかったですけど**、たしかに。**『読み手とか保守のことを考えながら書いていく』**のが大切なんすね。修正しますわ。」

```javascript
CLOCK_TIME = 1000;
setInterval(Count_Down(), CLOCK_TIME);
```

## 世の中いろんな演算があるんやな
よっしゃ。次はボタンの装飾をするで。

- タイマーが動いていれば 
    - 全体は緑色 
    - 『STOP』を表示
- 止まっていれば
    - 全体は赤
    - 『START』を表示

こんな感じで実装しとくか。動いとるかどうかは`is_idle`で判断しよう。trueやったら動いてないってことやな

```javascript
const text;
const background_color;

if (is_idle) {
  text = 'START';
  background_color = 'red';
}
else {
  text = 'STOP';
  background_color = 'green';
};

```


先輩：　「良さそうやな。ちなみにこんな書き方もできる」

```javascript
const text = is_idle ? 'START' : 'CLEAR';
const background_color = is_idle ? 'red' : 'green';
```

初：「おお。２行になってすっきりや。よーわからんけど」

先輩：「これは**三項演算子**っていって『`if` `else`の条件分岐をすっきり』書くことができるよ」

初：「なるほど。右辺の最初の`is_idle`を条件としてtrueならSTART,elseならCLEARを代入するんやな。」

「あとはこれをHTMLに渡してあげて...」
「モードの切り替えと初期化の機能を添えれば完成やな！！」

（その２へ）



## 参考サイト　（大変お世話になりました！）
（https://qiita.com/suin/items/a44825d253d023e31e4d）
(https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1)

##

[^1]: 不安な人は`ml(ミリリットル)`とか`mm（ミリメートル）`をイメージすれば良いと思う。1000分の１