記事の内容
４月１日から地方でエンジニアとして転職をしたら、コロナの影響でさっそく在宅勤務になってしまい、ずっと座りっぱなしも身体に悪いなーと思ったので、勉強がてら「ポモドーロタイマー」を作った。その中で初心者の中の初心者が学んだことを整理していく。先輩方が軽くレビューしてくれたので、その記録も残しながら記します。
学習初期の状態
- 転職のために
Ruby,Railsを少しかじった程度 - JSはこの４月に初めて学んだ
学習教材
- progate 2日くらい
- JavaScript 本格入門 ２週間くらいかけて読んだ
今回学んだこと
- 作るときは他の人が読みやすく、変更しやすいように記述すること
- マジックナンバー
- 三項演算子
-
letとconst アロー関数
作成開始や
見た目はhtmlとCSS使ってチョロっと（めちゃくちゃ苦労して）作った。
コードを書くのに命名規則とかあるんやな
まずは、時間の設定をして
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が押してたアロー関数で定義してみるわ。
let Count_Down = () => {
TIME--
if (TIME < 0) {
// セットおわり 休憩に入る
}
}
先輩：「これでもいいけど、もう少し後から読む人のことも考えて書いた方がいいよ」
初：「具体的には？」
先輩：「letとconstの違いは？」
初：「変数か定数か」
先輩：「そしたら関数はどちらでもないよ？」
初：「それは... そういう決まりだから？」
先輩：「初心者はこのお話を読んだ方が良いよ(https://qiita.com/Yametaro/items/17f5a0434afa9b88c3b1)
」
初：「おお。感動しました...」「再代入する可能性があるかないかが大切なんですね」
修正しよ
const Count_Down = () => {
TIME--
if (TIME < 0) {
// 切り替え
}
}
なんでもかんでもアローを使う野郎になるな？
先輩：「そもそもなんでアロー関数使ってんの？」
初：「名前がかっこいいからです！！」
先輩：「これも参考になるよ（https://qiita.com/suin/items/a44825d253d023e31e4d）」
初：「おお。８つ目の巻き上げとか僕でも理解できました。巻き上げできた方が良さそうなので、今回はアロー関数はやめておきます。（そしたらアロー関数使う機会なさそう..）」
またまた、修正して
function Count_Down() {
TIME--
if (TIME < 0) {
//切り替え
}
}
初：「次は切り替えのところを実装していくぞ」
「切り替えというか、TIMEがだんだん減って０になったら要らんから捨てるんやな」
初：TIMEを減らすだけじゃなくてHTMLに渡して表示をせんとやな
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を５分にセット
-
やから
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を使うんや
というわけでこんな感じやな。
setInterval(Count_Down(),1000)
初：「これでいいやろ！！天才や！」
先輩：「ダメやで。」
初：「ほ？ なんでですか？」
先輩：「他の人が読む時にこの１０００が何を意味してるかわからんやん？それにこれと全く同じ値を他の場所に記述したら、どこかの値を例えば２０００にするときに、全部変えるべきなのかそうでないのかがわからんやん？」
初：「なるほど」
先輩：「こういうのをマジックナンバーって言ってプログラムを書く際には避けるべきとされてるから、名前をつけて定数として扱う方が良いね！！」
初：「WORK_TIMEとかなんとなく最初に決めてメモ感覚で記述してましたし、僕はそんなに長いコードを書いたり、変更を加えることがなかったですけど、たしかに。『読み手とか保守のことを考えながら書いていく』のが大切なんすね。修正しますわ。」
CLOCK_TIME = 1000;
setInterval(Count_Down(), CLOCK_TIME);
世の中いろんな演算があるんやな
よっしゃ。次はボタンの装飾をするで。
- タイマーが動いていれば
- 全体は緑色
- 『STOP』を表示
- 止まっていれば
- 全体は赤
- 『START』を表示
こんな感じで実装しとくか。動いとるかどうかはis_idleで判断しよう。trueやったら動いてないってことやな
const text;
const background_color;
if (is_idle) {
text = 'START';
background_color = 'red';
}
else {
text = 'STOP';
background_color = 'green';
};
先輩： 「良さそうやな。ちなみにこんな書き方もできる」
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)
-
不安な人は
ml(ミリリットル)とかmm（ミリメートル）をイメージすれば良いと思う。1000分の１ ↩