はじめに
Udemyとは、動画形式で学ぶことができるオンライン学習プラットフォームです。多くの講座がハンズオン形式になっていて、研修にもよく利用されています。
個人的に、勉強する際にはよくUdemyを活用していますし、インプットするための勉強方法が多様化している今、あえてUdemyだけに絞ってざっくりではありますが、ロードマップを作ってみました。
今回は、数多くある講座の中から、このカリキュラムで学べば、フロントエンドエンジニアになるために最低限のスキルが身につくだろうと考えられる講座を選定してみました。
注意
※あくまで私の個人的な見解ですので、参考程度にお願いします。
※私はUdemyの回しものでもなんでもありません。
ロードマップ
簡易的ですが、以下のようなロードマップにしました。
Vue.jsではなく、Reactを選んだ理由は、現時点で公開されているUdemy内の講座の中で、個人的にReactの方が、良さそうな講座が多かったからです。
まず最初に受けるべき講座
一番最初の講座は、こちらが圧倒的オススメです。質と量ともに最強です。
【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
この講座では、Web開発の基礎を幅広く学べます。これ一本でフロントエンドからバックエンド、セキュリティ、そしてアプリのデプロイまで、網羅できます。
具体的な内容としては、
- Web入門
- HTMLの基礎
- CSSの基礎
- JavaScriptの基礎
- DOMについて
- API
- Node.js
- データベース
- エラーハンドリング
- ルーティング
- 認証
- 画像のアップロード
- デプロイ
...と本当にたくさんのことが学べます。
こちらはフロントエンドに限らず、Webエンジニアになりたい人は全員見て欲しいくらいオススメです（僕も絶賛勉強中です）。
ただ、幅広く学べるだけあってボリュームもすごいです。学び終えるまでに1ヶ月くらいはかかるんじゃないかなと思ってます（笑）。初学者は挫折してしまうこともあるかと思いますし、通してやっても一度で完全理解は無理です。ですが、本当に素晴らしい講座ですので、このコースを始めたら、変な寄り道をしないで、毎日やり続けること。そして何度も振り返ることが重要です。
こちらもオススメ
JavaScriptについてさらに深く学びたい人はこちらもオススメです。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
JavaScriptについてなんとなく理解している方や、入門レベルには理解してるよ、という方にはピッタリの講座です。JavaScriptの本質や動作原理について深掘りしていて、フレームワークやライブラリを使って、開発が複雑化してきた今だからこそ学ぶべき講座です。
コースの最後にはそれらの技術や知識を集約して、なんと独自のフレームワークを作成します。
次に学びたい講座
Web開発の基礎について幅広く学んだ後は、こちらがオススメです。
モダンJavaScriptの基礎から始める挫折しないためのReact入門
最初の講座では、Web開発を体系的に学べてはいます。しかし、フロントエンドのモダンな部分はカバーできていません。ここからは、ReactやVue.jsなどの、モダンなフロントエンドを学んでいくという流れになります。
この講座では、ReactやVueを使うために知っておきたいモダンJSの概念から学ぶことができ、そこがオススメポイントです。素のJSとReactの両方でTODOアプリを作ることで、違いを体感し、ReactやVueをなぜ使うかということに対して、納得感を持ちながら学ぶことができます。
Reactを学んだ後は
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
こちらの講座では、２つのプロジェクト作成を通して、Reactを用いて作られたフレームワークであるNext.jsについて学べます。
また、
- スタイリングで有名なライブラリであるTailwind Css
- PythonのフレームワークであるDjango REST Framework
といった、スタイリングやバックエンドとの連携など、実務に近いレベルで学習できることができるところがオススメポイントです。
この講座ではバックエンドがPythonで構築されていますが実務ではバックエンドにいろんな言語が来ることがあります。この講座を通してそれを学べるのがいいですね。
Next.jsだけ学びたい方は
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
Typescriptは必須
「TypeScriptって必要なの？」という意見もあるかと思いますが、めちゃくちゃ大事です。昨今のフロントエンド開発においては、TypeScriptを採用しないなんて考えられないので押さえておく必要があります。
ということで、4つ目にはこちらがオススメです。
【世界で7万人が受講】Understanding TypeScript 日本語版
こちらは、TypeScriptの基礎をがっちりと固められる講座です。
講座の最後で、「Node.js + Express & TypeScript」や「React & TypeScript」というセクションが出てきます。1本目や2本目の講座で学んだ、Node.jsやReactとTypeScriptをどのように連携させるのかも学べるので、復習がてらオススメです。
最後はこちら
これまでの講座を受講したら、最後にフロントエンドのテストについて学びましょう。
Reactソフトウェアテスト(Hooks+ReduxToolKit時代のモダンテスト手法)
正直、テストに関しては、これだ！！というベストな講座が見つかりませんでしたが、上記を紹介します。アプリケーション開発において、フロントエンドといえば、実はテストも非常に大事です。
この講座では、React Testing Libraryについて解説しています。React Testing Libraryはよりユーザー挙動に近いテストを実行できるツールとしてReactも公式に採用を推奨しています。
また、講座内で結構難しいこともしていますが、最後の締めくくりに、今までの集大成として受講すると良いと思います。
おわりに
独断と偏見で講座をいくつか選びましたが、他にもUdemyにはいい講座がたくさんありました。冒頭にも申し上げましたが、あくまで個人的なチョイスだと思ってください。
さらに注意点ですが、これらを全て終えると必ずしもフロントエンドエンジニアになれるわけではないということを忘れないでください。というのも、エンジニアは他にもたくさん覚えるべきことはあります。
GitやGitHubもそうですし、インフラの最低限の知識、SEO、Webアクセシビリティなど、本当に広範な知識が必要です。
また、インプットだけでなくアウトプットも非常に大事です。今回ご紹介したような講座で得た知識を使いこなせるように、さらに何か自分で作ってみるということも忘れないようにお願いします。
おまけ
英語ができたらめっちゃ良さそう&日本語版が出たら嬉しい講座も見つけたので共有しておきます！