1 はじめに
今回はTypeScriptの基礎を習得し、更にUI系のライブラリの
一つであるChakura UIを学んだので下記記事で開発した
学習記録アプリをJS⇒TSに置き換え、Chakra UIによるUIの調整を始め、
記録の編集機能を追加した
2 改良ポイント
UIライブラリとしてChakra UIを導入した。
その為、第1に記録一覧の画面のUIを味気ないものから
ちょこっと彩りがあるように修正した。
また、今回登録した記録を編集する機能を追加した。
これにより、CRUD機能全てが搭載された。
(改良前)
(改良後)
次に新機能としてモーダル画面を追加し、
登録/編集時にモーダルを表示するようにした
(新規登録時)
(編集時)
このモーダルは登録/保存をする際にReact-Hook-Formによって
学習内容が入力されているか？
時間は入力されている or 0以上の数字が入っているか？(数字以外のものが入っていないか)
というチェックが走るようになっている。
チェックに引っかかった場合、登録/更新が止められる
3 工夫点
今回、モーダル画面は登録と編集画面で共通部分が多いので
コンポーネント化した。
これにより、登録モードなのか、編集モードなのかをpropsの一部として
与えることによって
・タイトル部分
・登録/保存ボタンの名称、機能切り替え
を一つのプログラムで実装ができた。
4 苦労した点
今回、時間の入力はChakra UIのNumberInputで行おうとした。
React-Hook-Formを導入するまでは数値を変えた際、
画面とStateの反映ができたが、React-Hook-Formを導入すると
画面の反映だけが行われなくなってしまった。
下記がReferenceであり、他にも調査したがChakra UI v3自体が
まだ新しいのか、Chakra UIのNumberInput自体があまり使われていないのか
解決方法が無かったため、今回はInputに変更した。
5 最後に
今回、TypeScriptとChakra UIを用いて学習記録アプリを
完成させた。
TypeScriptによってコンパイラ言語と同じく型の保障が出来たため、
コーディングの時点でバグを未然に防ぐことができたので非常に頼もしく感じた。
また、Chakra UIは癖はあるが、簡単にモーダル画面などWebアプリで定番の機能が
作れたので、是非とも今後ほかの機能も試していきたい。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼