初心者向け。React.js製の超簡単なストップウォッチ
819 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はReact.js製のストップウォッチの作り方の解説です。
目次
仕様とデモ
最初が↓で「Stop、Reset」はボタンが薄くなっていて押すことができない感じになっています。(実際は押せます)
「Start」、「Stop」、「Reset」を押した時で押すことができるボタンを切り替えます。
↓は「Start」ボタンを押した時です。
↓は「Stop」ボタンを押した時です。
↓は「Reset」ボタンを押した時です。
アプリを作ったサイトはここから見ることができます。
それでは解説します。
Reactを自分のパソコンにインストールしないといけないですがここにやり方の解説をしています。
CSSを記述する場所
cssはindex.cssに書きます。
↓にあります。
index.cssのコードは↓にします。
コンポーネントの切り分け
今回のストップウォッチですがコンポーネントの切り分けはこうします。
全体をAPP.jsに記述してボタンの部分をButton.jsxに記述をします。
HOOKSを使うときは一番上のコンポーネントで使わないといけないので最初に考えていたコンポーネントの切り分け方を変えて今回解説しているコンポーネントの切り分けにしています。
Button.jsxはまだ作ってないのでsrcディレクトリの下にcomponentsディレクトリを作ってその下に置きます。
App.js
App.jsを↓にします、その際にButton.jsxも読み込んだ状態にするのでButton.jsxの最初の状態のコードも載せます。
「00:00.000」と書いてある部分を変える事ができるようにする
まずは「00:00.000」と書いてある部分が変化できるようにしますがuseStateで行い初期値を「’00:00.000’」にします。
App.jsのコードを↓にします。
時間の取得をして「00:00.000」の部分を変化させますがまずは「Start」ボタンを押した時です。
どうやって実装するかが分からない場合はこの記事を参考にするといいです。
13行目の意味が分からなかったらおまじないみたいな感じで覚えていいと思います。
14行目が分の取得で15行目が秒の取得で16行目がミリ秒の取得で18行目で取得した値を表示しています。
そしてcountUp関数が一定時間ごとに行うことができるようにsetTimeoutを使います。
App.jsのコードを↓にします。
22行目を「timeoutId」と置いていますがあとで使うために置いてます。
それでは「Start」ボタンを押すとストップウォッチが動くようにします。
ストップウォッチが動くようにする
App.jsとButton.jsxのコードを↓にします。
それで「Start」ボタンを押すとストップウォッチが動きます。
次は「Stop」ボタンと「Reset」ボタンを押すと作動するようにします。
「Stop」ボタンと「Reset」ボタンが動く様にする
StopですがtimeoutIdを消さないといけないのでclearTimeout()を使います。
Resetは00:00.000が変化しているのを最初の状態に戻します。
App.jsとButton.jsを↓にします。
これで「Start」ボタン、「Stop」ボタン、「Reset」ボタンは実装できましたがStartボタンを押してからStopボタンを押して再びStartボタンを押すとStartボタンを押してからの時間がリセットされるので00:00.000になります。
Stopボタンを押すまでの時間を保存しておかないといけないのでApp.jsのコードを↓にします。
これで一連の動作はできるようになりましたがStartボタンを押した時にStartボタンやResetボタンを押せたりStopボタンを押した時にStopボタンを押せたりResetボタンを押した時にResetボタンを押せるのはストップウォッチとしては不自然ですよね。
だから↓みたいにしてボタンを押せない感じをだします。(実際は押すことができます)
ボタンを押せない感じにする
まず状態ですが↓にします。
そして状態に応じてボタンのclassNameを切り替えます。
Reactはclassnamesライブラリを使うのを推奨しているみたいですが私は使い方が分からなかったので 記述でやっています。
App.jsとButton.jsのコードを↓にします。
Button.jsxの7行目、8行目、9行目に「?」や「:」がありますが「三項演算子」と言います。
これで完成です。
最後に全てのコードを載せます。(index.cssは変更していないので載せません)