Udemyを使って、フロントエンドエンジニアになるためのロードマップを考えてみた

# はじめに
Udemyとは、動画形式で学ぶことができるオンライン学習プラットフォームです。多くの講座がハンズオン形式になっていて、研修にもよく利用されています。

https://www.udemy.com/ja/

個人的に、勉強する際にはよくUdemyを活用していますし、インプットするための勉強方法が多様化している今、あえてUdemyだけに絞ってざっくりではありますが、ロードマップを作ってみました。

今回は、数多くある講座の中から、このカリキュラムで学べば、フロントエンドエンジニアになるために**最低限のスキルが身につく**だろうと考えられる講座を選定してみました。

:::note warn
注意
※あくまで私の個人的な見解ですので、参考程度にお願いします。
※私はUdemyの回しものでもなんでもありません。
:::

# ロードマップ
簡易的ですが、以下のようなロードマップにしました。
```mermaid
graph TD;
    Web開発の基礎-->React;
    React-->Next.js;
    Next.js-->TypeScript;
    TypeScript-->フロントエンドのテスト;
```
Vue.jsではなく、Reactを選んだ理由は、現時点で公開されているUdemy内の講座の中で、個人的にReactの方が、良さそうな講座が多かったからです。
## まず最初に受けるべき講座
一番最初の講座は、こちらが圧倒的オススメです。**質と量ともに最強**です。
[【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）](https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/)

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

この講座では、Web開発の基礎を幅広く学べます。これ一本でフロントエンドからバックエンド、セキュリティ、そしてアプリのデプロイまで、網羅できます。

具体的な内容としては、
1. Web入門
1. HTMLの基礎
1. CSSの基礎
1. JavaScriptの基礎
1. DOMについて
1. API
1. Node.js
1. データベース
1. エラーハンドリング
1. ルーティング
1. 認証
1. 画像のアップロード
1. デプロイ

...と本当にたくさんのことが学べます。

こちらはフロントエンドに限らず、**Webエンジニアになりたい人は全員見て欲しい**くらいオススメです（僕も絶賛勉強中です）。
ただ、幅広く学べるだけあって**ボリュームもすごい**です。学び終えるまでに1ヶ月くらいはかかるんじゃないかなと思ってます（笑）。初学者は挫折してしまうこともあるかと思いますし、通してやっても一度で完全理解は無理です。ですが、本当に素晴らしい講座ですので、このコースを始めたら、変な寄り道をしないで、毎日やり続けること。そして**何度も振り返る**ことが重要です。

### こちらもオススメ
JavaScriptについてさらに深く学びたい人はこちらもオススメです。

[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)

https://www.udemy.com/course/javascript-essence/

JavaScriptについてなんとなく理解している方や、入門レベルには理解してるよ、という方にはピッタリの講座です。**JavaScriptの本質や動作原理**について深掘りしていて、フレームワークやライブラリを使って、**開発が複雑化してきた今だからこそ学ぶべき**講座です。

コースの最後にはそれらの技術や知識を集約して、なんと**独自のフレームワーク**を作成します。

## 次に学びたい講座

Web開発の基礎について幅広く学んだ後は、こちらがオススメです。

[モダンJavaScriptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner/)

https://www.udemy.com/course/modern_javascipt_react_beginner/

最初の講座では、Web開発を体系的に学べてはいます。しかし、フロントエンドのモダンな部分はカバーできていません。ここからは、**ReactやVue.jsなどの、モダンなフロントエンドを学んでいく**という流れになります。

この講座では、ReactやVueを使うために知っておきたいモダンJSの概念から学ぶことができ、そこが**オススメポイント**です。素のJSとReactの両方でTODOアプリを作ることで、違いを体感し、ReactやVueを**なぜ使うか**ということに対して、**納得感**を持ちながら学ぶことができます。

## Reactを学んだ後は

[Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発](https://www.udemy.com/course/nextjs-tailwind-css-django-rest-framework-react/)

https://www.udemy.com/course/nextjs-tailwind-css-django-rest-framework-react/

こちらの講座では、２つのプロジェクト作成を通して、Reactを用いて作られたフレームワークである**Next.js**について学べます。
また、
- スタイリングで有名なライブラリである**Tailwind Css**
- Pythonのフレームワークである**Django REST Framework**

といった、スタイリングやバックエンドとの連携など、**実務に近いレベル**で学習できることができるところがオススメポイントです。

この講座ではバックエンドがPythonで構築されていますが実務ではバックエンドにいろんな言語が来ることがあります。この講座を通してそれを学べるのがいいですね。

### Next.jsだけ学びたい方は
[【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
](https://www.udemy.com/course/nextjs-microblog-for-beginner/)

https://www.udemy.com/course/nextjs-microblog-for-beginner/

## Typescriptは必須
「TypeScriptって必要なの？」という意見もあるかと思いますが、**めちゃくちゃ大事**です。昨今のフロントエンド開発においては、**TypeScriptを採用しないなんて考えられない**ので押さえておく必要があります。
ということで、4つ目にはこちらがオススメです。

[【世界で7万人が受講】Understanding TypeScript 日本語版](https://www.udemy.com/course/understanding-typescript-jp/)

https://www.udemy.com/course/understanding-typescript-jp/

こちらは、TypeScriptの基礎をがっちりと固められる講座です。

講座の最後で、「Node.js + Express & TypeScript」や「React & TypeScript」というセクションが出てきます。1本目や2本目の講座で学んだ、Node.jsやReactとTypeScriptを**どのように連携させるのか**も学べるので、復習がてらオススメです。

## 最後はこちら
これまでの講座を受講したら、最後にフロントエンドのテストについて学びましょう。

[Reactソフトウェアテスト(Hooks+ReduxToolKit時代のモダンテスト手法)](https://www.udemy.com/course/reacthooksreduxtoolkit/)

https://www.udemy.com/course/reacthooksreduxtoolkit/

正直、テストに関しては、これだ！！というベストな講座が見つかりませんでしたが、上記を紹介します。アプリケーション開発において、フロントエンドといえば、実は**テストも非常に大事**です。

この講座では、React Testing Libraryについて解説しています。React Testing Libraryはよりユーザー挙動に近いテストを実行できるツールとしてReactも公式に採用を推奨しています。

また、講座内で結構難しいこともしていますが、最後の締めくくりに、今までの集大成として受講すると良いと思います。

# おわりに
独断と偏見で講座をいくつか選びましたが、他にもUdemyにはいい講座がたくさんありました。冒頭にも申し上げましたが、あくまで個人的なチョイスだと思ってください。

さらに注意点ですが、これらを全て終えると**必ずしもフロントエンドエンジニアになれるわけではない**ということを忘れないでください。というのも、エンジニアは他にもたくさん覚えるべきことはあります。

GitやGitHubもそうですし、インフラの最低限の知識、SEO、Webアクセシビリティなど、本当に広範な知識が必要です。

また、インプットだけでなく**アウトプットも非常に大事**です。今回ご紹介したような講座で得た知識を使いこなせるように、さらに**何か自分で作ってみる**ということも忘れないようにお願いします。

# おまけ

英語ができたらめっちゃ良さそう&日本語版が出たら嬉しい講座も見つけたので共有しておきます！

- [Next.js & React - The Complete Guide (incl. Two Paths!)](https://www.udemy.com/course/nextjs-react-the-complete-guide/)

https://www.udemy.com/course/nextjs-react-the-complete-guide/

- [React Testing Library and Jest: The Complete Guide](https://www.udemy.com/course/react-testing-library-and-jest/)

https://www.udemy.com/course/react-testing-library-and-jest/