はじめに
先日から参加した「JISOU」にて、
Reactを用いた初のアウトプット課題として、学習記録アプリ作成に取り組みました！
課題内容
１.Udemyの講座を受講
モダンJavaScriptの基礎から始める挫折しないためのReact入門
この講座では、JavaScriptとReactで同じアプリを作ることで、
いかにReactを使うとコードが簡潔になり、保守性が向上するのかが
直感的に分かりやすいカリキュラムとなっています。
２. 学習記録アプリの作成
viteで実行環境を構築し、
日々の学習の内容と学習時間を記録できるアプリを開発しました。
（Reactの学習を目的としているので、今回CSSは最低限にしています。）
実際に作成したアプリを動かしている様子は下記。
実装したソースコードはGitHubに残しました。↓
アプリの内容
- 学習内容と学習時間の登録ができる
（入力時は画面にフォームの内容が表示される） - 登録すると学習記録として、学習内容と学習時間が一覧で表示される
- 登録した学習時間の合計値を見ることができる
（今回、エンジニアとして必要な学習時間が1000時間と言われていることから、分母は1000時間にしています） - 入力フォームの値が未入力だったり初期値のままである場合は登録時にエラーメッセージが表示される
学んだこと・気づき
Reactの基礎的な内容（JSXやコンポーネント、useState等）を学んだ上で、
アウトプットとして実際に0からアプリ開発することで、
今までよりReactへの理解度が高くなったと思います。
また、GitHubにおいても、
久々にリポジトリ作成してブランチ作成してプルリクして〜という作業をしていたところ、
その際にエラーが出たりして、手を常に動かして開発してみることの重要性を感じました。
ーーー
開発時に参考にさせていただいた記事も今後の備忘録として下記に残します。
おわりに
今までインプット中心だった私ですが、
手を動かしてみることで得られる学びの方が格段に多いですね。
開発できた時の達成感もあるので「楽しい！」という気持ちが
自分のモチベアップにも繋がるなと思いました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼