以前、JavaScriptでポモドーロタイマーを作成しましたが、現在そのアプリをReactへリプレイスしています。React版でもユーザーが作業時間や休憩時間を設定できる機能を追加したのですが 実装までに苦戦したので、記録として残しておきます。ただ、今回紹介す…

前回まででTodoの追加・表示ができるようになったので 今回は以下2つの便利機能を実装していきます。 ①入力フォームの入力内容をクリア 現状では、Addボタンを押しても入力値がそのままなので Addと同時にフォーム内を空にする。②Todoを削除 終了したTodoを…

前回は見た目を整えるところまで行ったので、今回はTodoリストを追加するプログラムを実装していきます。 どのコンポーネントで何を管理するか Reactのプログラムを書く上で大事なのがStateの管理場所とその内容だと思います。今回は次のように設定します。A…

今回からReactの学習記録をスタートさせたいと思います。Reactを選んだ理由は、以前作成した「ポモドーロタイマー」を 最終的にReact/Reduxにリプレイスするためです。 そのためには、React自体の理解が必須です。 まずは、簡単なアプリの作成を通して理解を…

前回で一旦完成したポモドーロタイマーですがGitHub Pagesで公開したところ、効果音が発生するタイミングで次のようなエラーが出てしまいました。 ①「ファイルが見つかりません」という内容のエラー ※エラー内容をメモしておくのを忘れてしまいました....②Un…

ポモドーロタイマーvanilla JS編は前回の⑦で、機能自体はほぼ実装完了しました。前回の記事はこちら。naomi-homma.hatenablog.com 最後にhtml/CSSを整えていきます。完成品はこちらです。 (タイマー表示部分とユーザー編集部分) CSSによるスタイリングとhtml…

今回も前回に引き続き使いやすさを改善するために 以下2つの機能を実装していきます。 ①各ターン終了後に効果音を鳴らし、終了を知らせる②chromeタブにカウントダウンを表示させる ※画面を見ていなくても確認できるようにするため 参考までに前回の記事はこ…

今回は、ポモドーロタイマーの作業時間や休憩時間をユーザーが編集できるように編集部分の実装を行っていきます。イメージはこのような感じです。 設定時間の表示とユーザー編集部分 ユーザー編集部分の追加 編集できる内容は次の4つとしました。 ・作業時間…

今回は、前回実装した自動サイクル部分のリファクタリングと START、STOP、RESETボタンをクリックした際の動きを実装していきます。 前回の記事はこちら naomi-homma.hatenablog.com 自動サイクル部分のリファクタリング 前回のコードでは各ターン毎に関数を…

前回からの続きになります。前回は1秒ごとにカウントダウンを行い それをタイマー領域に描画するところまで実装しました。今回は、作業と休憩のサイクルを自動的に回す実装を行っていきます。イメージはこのような感じです。workから自動的にbreakに切り替わ…

前回要件定義を行ったので今回はそれに従い、まずはVanilla JSで基本の動きを実装しました。 ※最終的にはReact/Reduxにリプレイスしますが JavaScriptの勉強も兼ねてまずはVanilla JSで書くことにしました。 表示領域の作成とDOM操作 まずは、index.htmlの作…

ポモドーロタイマーの作成にあたり ・どのような機能が必要か？ ・表示画面に必要な項目は？ ・どのような機能を持たせたいか？ などを整理しました。 いわゆる要件定義というものを行いました。 そもそもポモドーロタイマーとは？ ポモドーロテクニックとい…