React初心者が学習歴1カ月でTODOアプリを開発できた話：勉強迷子だった自分がWebアプリを作れるようになるまでの記録

✅ この記事を読んでほしい想定読者

• プログラミングを始めてみたけど何からやればいいか分からない
• 勉強が続かない、やる気が維持できない
• Reactって難しそうで手が出せていない
• 実際に成果物を作ってみたいけど自信がない
• 将来Webフロントエンドの仕事に就きたい

1. はじめに：モチベが続かなかった自分へ

■自己紹介（学習歴・バックグラウンド）

組み込みエンジニア3年目で、仕事で少しHTML/CSS, JavaScriptを使用して画面を作った程度。プログラミングの基礎は割と出来ている状態です。
とにかく完成させるのが遅く、一つ一つの仕事に時間がかかるそんな人間です。
自己紹介は⇩でもやってます(^▽^)/

このアプリを作れるようになるまでは「最初はReactどころかJavaScriptも感覚で書いていた」状態でした。

■なぜReactに挑戦しようと思ったのか？

モダンなWebアプリ開発が出来るようになりたいというのと、やはり自分が書いたコードがすぐに反映されるフロントエンド開発は組み込み開発と比べて憧れだったからです。

■読者へのメッセージ

こんな私でも1カ月で出来るようになったので、プログラミングが好きな方は正しい勉強方法をすれば一瞬で上達します！！

2. 1カ月でやったこと

• 学習スケジュールのざっくりした流れ

  • 1～2週目：UdemyでReact基礎, TypeScript基礎の動画教材をそれぞれ1教材だけ見る
  • 2～3週目：インプットは程々にして、まずはデザインなどは拘らずシンプルなTODOアプリをReactで作ってみました。ここでCI/CDやデプロイなども経験し、React Testing Libraryを使用したテストも実装しました。
  • 3週目：React × TypeScriptでもう一度、TODOアプリを次はデザインに拘って作成しました。ここで React Hook Form や cakra ui v2 を使用して追加の機能を段階的に実装していきました。

• 学習時間

  • 平日2～3時間／休日6時間以上
  • もちろん作業ができない日もありましたよ！

• TODOアプリを作りながらやったこと

  • 分からない時はReact公式ドキュメントを読む
  • 5分考えて分からないことはAIに聞く

3. 初めてのReact：右も左も分からなかった話

• 初めて書いたReactコードの感想（「意味不明だった」）
• JSXって何？コンポーネント, useStateって何？状態管理って？
• Reactってどういう特徴・メリットがあるの？どんな仕組み？わからん！！

実際にReactを書くことに慣れ理解が進むほど、JavaScriptを書いていた身としては、革新的すぎて嬉しさが込み上げた。

4. TODOアプリを作った！：できるようになったこと

完成したTODOアプリ

TODO登録、編集＆保存、削除ができるアプリを作成しました。

• 主に学んだこと・できるようになったこと

  • コンポーネント分割
    機能ごとにコンポーネント化した方が良いかどうかの判断ができるようになりました。
  • 状態管理・Hooks（useState, useEffect）
    ステートの扱い方と、ステートとレンダリングの関係を理解することができました。このアプリを通してステート化が必要な状態の切り出し、無駄なレンダリングをしない実装が出来るようになりました。
  • propsの受け渡し
    最初はpropsってなに？という状態から親コンポーネントから子コンポーネントに適切なpropsを渡せる実装が出来るようになりました。
  • 最低限のCSS
    ReactでのCSSの扱い方とchakra ui のようなCSSフレームワークを使えるようになりました。CSSフレームワークは公式ドキュメントをしっかり読むことが大事！！

5. 学習で意識したこと・やってよかったこと

• インプットよりアウトプット重視（※これが一番重要）
• 最初から完璧を目指さない（とりあえず動かす）
• エラーを怖がらない（※これも大事なんですよね～）
• 小さくても「動くもの」を作るモチベ
• SNSやコミュニティを活用（XやQiitaでのアウトプットなど）

とりあえず、最初は簡単かつ完璧を目指さないモノから作ることが大事と学びました。
そして段階的に理解を進めることが重要で、インプットは程々にしてアウトプットとしてコードをガリガリ書いてどんどん開発を進めることが成長の鍵ですね✨

★個人的な開発のコツ

考えすぎても、モチベが下がってしんどいので今の時代はAIに聞いちゃいましょう～。
もし思いつかない場合はさっさとAIに聞いて、解決すること！
→ 後で自分なりに理解すること。これが回りまわって効率の良い学習になっていると思います！！
※ただ、聞きすぎは良くない（笑）

6. しんどかったこと・乗り越えた方法

• 理解できない用語ばかりで挫折しかけた
• 「自分だけ進歩が遅い」と感じて焦った
• モチベが切れそうになったときに支えになったこと（同じように頑張る仲間がいることでやる気が出る）

速く成長したいと焦りがちですが、立ち止まってAIと公式ドキュメントを行ったり来たりすることが大事ですね！！

7. 今後の目標と伝えたいこと

• これからやってみたいこと（個人開発、API連携、TypeScript、Next.jsなど）
• Reactでアプリを作れたことで得た自信
• 「できるようになるまで続ける」が一番大事
• 読者へのメッセージ：「あなたもまずは小さな1歩から」

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼