【超初心者】React、FastAPIの勉強で役に立ったコンテンツ紹介

皆さん、こんにちは。

いきなり業務で「ReactとFastAPIを使ったWebアプリを作る案件に入って」と言われました。
私はPythonが少し経験がある程度で、JavaScriptはほぼやったことがない状態でした。
その中で、業務をしながら勉強をしたことで、だいぶコードが読めるようになってきたので
自分の中で役に立ったコンテンツ（Udemy、Youtube）を紹介したいと思います。

今回実施したこと
Reactの勉強
- Udemy「【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門」
- 新・日本一わかりやすいReact入門【基礎編】
FastAPI（Flask）の勉強
- 設計を理解しながらWebアプリを開発！【はじめてのWeb開発】【Flask】
- Python初学者のネクストステップ！FastAPIによるWeb API開発講座
まとめ

今回実施したこと

今回、業務と並行して勉強するときにどういうことをしていたか、
参考として記載したいと思います。興味がなければ読み飛ばしてもOKです。

プログラミングを習得するには講座を受けたり、参考書に書かれているコードを書くだけでは
なかなか上達しないと思います。というか、内容はすぐ忘れます…
何のために学ぶのか？何を作りたいのか？といった、
目的とアウトプットを意識して勉強することで、知識が身についていきます。
最終的に作るもの（アウトプット）を決めて、そこから必要な機能を洗い出し、
機能を実装するための勉強をするというサイクルを繰り返すのがいいんじゃないかなと思います。
結局、エラーまみれで苦労した方が頭に残りやすいんですよね…
そのため、自分で何かアプリを作るなど簡単な開発経験を積むといいと思います。

今回は業務でどういうアプリを作るかは前提にあったので、それに対して必要なことを勉強していました。
勤務時間が終わってから、以下のようなサイクルを繰り返していました。

業務でわからない処理を調べる
インターネットで検索したり、ChatGPTに聞いたりしていました。
※ChatGPTは間違える可能性があるので、あくまで参考程度に。
手を動かしながら、基礎知識を身に着ける
主にUdemyやYoutubeで講義を聴いたり、コードを書きながら学びました。

上記のように学んでいく中で、この処理は業務に役立つかも！というのはメモして、
次の日の業務に組み込み、また新たな疑問が出てきたら調べて次の日の業務に反映する…
そういうサイクルを回していきました。
最初は本当にReactがわけわからなかったのですが、
まだ勉強して2週間ぐらいですが、だいぶコードが読めるようになりました。

業務というアウトプットがすでに用意されていて、かつ、
仕事だと何が何でもやらなくちゃいけないので、早くスキルアップができると思います。
ただし、プライベートの時間も業務に必要な勉強をしないといけないし、
わからないことだらけだと、仕事で焦って、精神的にもつらいので、
周りにサポートしてもらえるような環境はあった方がいいと思います。

では、私が勉強してよかったものを紹介します。

Reactの勉強

Udemy「【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門」

「JavaScriptへの理解なくしてReactの習得はなし得ません。」と書いてあるように
実際にJavaScriptがわからない状態でReactを見たときに訳が分かりませんでした。
そんなときに見つけたときの動画で、JavaScriptだけでなく、
htmlやCSSも書くので、こういう風に実装するんだというのが理解できます。

これからReactを勉強する全ての人におくるReact入門コース決定版！
Reactの勉強に苦戦する多くの人と話してきました。
そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。
JavaScriptへの理解なくしてReactの習得はなし得ません。
そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。
https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=ST11MT91624A

また、一度JavaScriptで書いたものをReactでリファクタリングすることで、
どうしてReactが人気なのかも実感できます。
一通り経験したことで、業務でコードが少しずつ読み取れるようになりました。

この動画はReactのバージョンアップに対応してフルリニューアルしていますので、
講座の内容が古いということもないので、安心して学べました。

新・日本一わかりやすいReact入門【基礎編】

こちらはYoutubeチャンネル「トラハック」で公開されているReact入門になります。
Udemyとは違って何かアプリを作るのではなく、
コンポーネントの状態管理、UseStateなど、
Reactに必要かつ重要な知識をわかりやすく解説している動画になります。
以下のように再生リストでまとまっていて、1本の動画で約20分、合計9本の構成です。
新・日本一わかりやすいReact入門【基礎編】

動画自体は3年前と古いですが、入門としてすごくわかりやすかったです。

FastAPI（Flask）の勉強

設計を理解しながらWebアプリを開発！【はじめてのWeb開発】【Flask】

いや Flaskじゃん、FastAPIじゃないのかよ…ってなるのですが、
Webアプリの開発をするための基礎知識が身に着く動画になっています。
設計を理解しながらWebアプリを開発！【はじめてのWeb開発】【Flask】

実際の業務に必要なDBの操作や、パスワードのハッシュ化など
Webアプリに必要な機能を一通り学べるところがよかったですね。
また、画面遷移図やシーケンス図、フローチャートを使いながら、
最終的に作るもの（アウトプット）を意識しながら進めていくので業務にも役立つと思いました。

Python初学者のネクストステップ！FastAPIによるWeb API開発講座

先ほどのFlaskで、だいたいWebアプリについて学んでいたら、
こちらの動画のFastAPIが理解しやすくなっているかと思います。
FastAPIの基礎知識を学べ、最終的にStreamlitというPythonのライブラリを使って
会議室を予約するAPIとWeb画面を作ります。
Python初学者のネクストステップ！FastAPIによるWeb API開発講座

一通りFastAPIについて学べるのと、今後、Pythonを使う人なら
学んでいると得をするStreamlitも体験できるので業務に役立つと思います。
実際、私も業務で何かデモを見せるときはStreamlitを使っていて、
周りの人も使っていますね。学んで損はないと思います！

まとめ

今回は私が業務でいきなりReactとFastAPIを使うことになり、
急いで学ぶために使ったコンテンツを紹介しました。

実際にスキルを身に着けるには、
動画で得た内容を実際に使ってみる（アウトプットする）ことが重要なので、
私もそこを意識しながら、継続的に学んでいきたいと思います。

今回の情報が何かのお役に立てれば幸いです。

業務をきっかけにReactに興味が出てきたので、またいいのがあれば共有したいと思います。
ここまで読んでいただき、ありがとうございました。