はじめに
Reactを勉強し始めて1週間強が経ち基本的な記法にも慣れてきたので、今回は学習記録アプリを作りました。
僕が始めてReactを用いて1から作った始めてのアプリになります！ (機能のみの実装でデザインの調整はしていません)
開発したもの
以下の画像のような、学習内容と学習時間を入力し記録できるアプリです。
機能
- 学習内容と時間の記録と表示
- 現在の入力内容の確認
- 合計の勉強時間の表示
- (バリデーション)
開発について
まずReactのためのJavaScriptの記法をUdemyで学び、その後にコースの一貫としてReactで簡単なTODOアプリの開発を行いました。受講後すぐにこのアプリを作成したので、ほとんど詰まることなく学習した内容を確認するように、機能の実装を行えました。所要時間としては1時間半程度でした。
少し詰まったところ
開発する中で少し詰まったところや知らなかったことを紹介します。
登録ボタンを押した後、inputの要素が初期化されないバグ
-
症状
登録ボタン(buttonタグ)のonClickで処理する関数の最後でsetTitle(""), setTime(0)のような初期化処理を加えたが、登録ボタンを押したら登録した内容が表示されるが、input要素の初期化されないバグが生じた。また、入力されている内容は正しく初期化されている。 -
原因
inputタグの中でvalue={title}のようにuseStateで管理するものとinputタグで入力された内容が結びつけられていなかったため。
ここで感じた疑問
- useStateで管理していた値とinputのvalueが結びつけられていなかったのに、なぜ登録自体はできたのか？
-
理由
僕のvalue属性に関して誤解していたためでした -
詳しく
value属性はinputタグの中の内容を示すものと誤解していましたが、正しくはそのタグの初期値を表す属性ということです。
useStateで初期化処理を加えただけでは足りず、value属性を設定することでクリックされたときに空文字や0が初期値として設定させることが必要でした。
登録自体に関しては、inputタグのonChange属性でリアルタイムにuseStateで更新されるようになっているので、登録ボタンを押すと現在の内容で登録されるのは当たり前の挙動です。
処理を「そういう記法だから」ということにせず、実装しながら機能の処理をしっかり説明できるように心掛けたいです...
最後に
今回の簡単なアプリの開発を通じて、やる前は簡単な機能と感じていましたが、実際に手を動かしてみて1行ずつコードを書いていく大変さを実感しました。今後の開発を通じて、基本的な機能の実装は当然のようにできるようになり、自分なりの機能を考えて実装する楽しさを感じていけるように、技術力をつけて行きたいです！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼