独学でプログラミングを習得したい人にとって強い味方なのがUdemy。スクールに通うよりも安くて、自分のペースで繰り返し学習を進められるのがいいですよね。
ただ、動画の数が多すぎてどれを選んだらいいか分からないという人も多いと思います。
そこでこの記事では、フロントエンドエンジニアやWebデザイナーを目指す人向けに、現役のフロントエンドエンジニアで新人の教育経験もある僕が厳選した動画を紹介していきます。
Udemyで講座を購入する前に押さえておきたいポイント
ポイント①：セールでほぼ全ての講座が1400円前後で購入できる
Udemyの講座のほとんどは価格が大体10,000~24,000円前後ですが、月に何回かあるセール時に購入すれば、ほぼ全ての講座が格安で購入できます。
↑この講座も通常価格が24,000円なのに、セール期間なら1,250円で購入できますね。
ポイント②：購入から30日以内なら返金可能
Udemyでは、購入した講座が「自分が思ってたのと違うな…」と感じたら、30日以内なら返金してもらうことも可能です。
コースの返金方法に書かれているように、購入履歴から返金リクエストのページに飛ぶことができます。
実際に返金対応をしてもらったことがありますが、3つぐらいの質問に回答するだけで、すんなり返金してもらえたので逆に驚きました。
価格が安い上に返金もスムーズとなると安心して購入できますね！
目的別のUdemyおすすめ動画
それでは本題のおすすめ動画を紹介していきます。
初心者レベルの人向け
Web系のエンジニアになりたい、Webデザイナーを目指したいと思われるなら、HTMLとCSS、JavaScriptは必須の知識です。
HTMLやCSS、JavaScriptが初めて、あるいは経験が浅い人におすすめの動画は「フロントエンドエンジニアになりたい人の Webプログラミング入門」です。
HTMLやCSSの基本から分かりやすく解説している動画です。
コードを書くのに使うエディタ（VSCode）の導入や初期設定の方法についても紹介されているので、プログラミングが完全に初めての人でも安心して学習を始められます。
この講座1本で、
といったフロントエンド周りのことが一通り学習できるので、非常にコスパがいいですよ。
次はWebデザイナーを目指している人向けの動画の紹介です。
フロントエンドエンジニアを目指している人は、後で紹介するJavaScriptのフレームワークで紹介している動画も合わせてご覧ください。
Webデザイナーを目指している人向け
Webデザイナーを目指すなら、HTML/CSSやJavaScript以外にも、
- 画像制作のスキル
- Webサイトのグラフィックデザイン能力
などが必要とされます。
しかし、画像制作でよく使われるPhotoshopは機能も多く、一人で学習しようと思うと何から手を付けたらいいか分からないものです。
そんな方には「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース」の動画がおすすめです。
この動画は以下の4つの動画をひとつに凝縮した内容になっています。
この4つの動画を別々に購入すると38,400円もかかるのでかなりお得です。
総レッスン数422、トータルで約42時間とかなりのボリュームがありますが、Webデザイナーに必要なことが網羅されています。
副業・フリーランスを目指している人向け
副業で稼ぎたい人や、すぐにフリーランスになりたい人は、フロントエンドの開発をやるよりも、Web制作を学ぶことをおすすめします。
Web制作のほうが学習のハードルは低く、副業やフリーランスで稼ぎやすいからです。
そして、「Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座」の動画をおすすめします。
この動画では、プログラミングやWebデザインのことだけでなく、副業やフリーランスで稼ごうと思ったら必須の
などが学べます。
また、Webデザインでよく使われるPhotoshopは値段が高いのですが、この動画ではSketchというソフトが使用されています。PhotoshopよりもSketchのほうが使用料金が安く、30日間無料で使えるので、始めやすいというのもメリットです。
フレームワーク別おすすめ動画
実際の開発現場では「フレームワーク」が使われます。フレームワークとは骨組みのようなもので、フロントエンドエンジニアがそこに肉付けをしていくイメージです。要は、フレームワークを使うと開発期間の短縮ができるんですね。
現在、JavaScriptには以下の3大フレームワークがあります。
- Vue.js
- React
- Angular
この中でも、フロントエンドでよく使われるのはVue.jsとReactで、初心者におすすめなのはVue.jsです。
理由としては、ReactやAngularはコーディングルールがしっかりしているため、初学者には少しハードルが高いためです（個人的にはReactが好きですが）。
どれを学んだらいいか分からない場合は、とりあえずVue.jsを学習しましょう。
Vue.jsなら「超Vue.js 2 完全パック」
この動画では、Vue.jsやフロントエンドエンジニアとして必要な以下の知識を網羅してくれています。
動画は17.5時間と少し長いですが、それだけ学習できることも非常に多いです。
もし、自分でアプリケーションを作りたい！と考える人は、この動画の内容を写経した上でオリジナルで作るのが最短コースと言えるでしょう。
Reactなら「挫折しないためのReact入門」
この動画は、まだReactに触れたことがない人やReactの学習で挫折した人向けに作られています。
学習できる内容としては以下の通り。
Reactを使うにあたって必要なJavaScriptの知識に特に焦点が当てられており、とにかく挫折しないように配慮されているので、初心者に最適です。
この動画を受講した後に、本格的なWebアプリ開発が学べる「フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門」や、次で紹介するReact Nativeの学習動画で学びましょう。
React Nativeなら「React Native, Firebase, Expo でアプリ開発」
React Nativeはスマホアプリを作るときに使われるフレームワークです。通常、スマホアプリを作るときは、
- iOSはSwift
- AndroidはKotlin
という言語で、それぞれ別々に作る必要がありますが、React NativeであればiOSとAndroidの両方のアプリを同一のソースコードで開発できます。
また、React Nativeは開発方法がReactとほとんど同じなので、React Nativeの学習の前にまずはReactから学びましょう。
ある程度Reactの学習ができている人におすすめの講座は「2021年版 React Native, Firebase, Expo でアプリ開発をゼロから始めよう！」です。
この動画では、開発環境の構築～Firebaseを使ったアプリのリリースまで一通り学習できます。
プログラミングだけでなく、Figmaというデザインツールを使ったUIデザインの基本も学習できます。
初めてアプリ開発に挑戦する方でも問題なく進めていけるようになっているので、知識がなくても大丈夫です。
JavaScriptと合わせてGitも勉強しておくべし
実際の開発現場では「Git」と呼ばれるバージョン管理ツールを使用していることがほとんどです。
これからフロントエンドエンジニアになりたい人にはGitの学習は必須ですが、副業やフリーランスで稼いでいきたい人も学んでおくことをおすすめします。
自分で開発や制作したコードをGitで管理しておけば、不具合が見つかったときでもすぐに元の状態に戻せるからです。
不具合への対応ができないと、クライアントからの信用はガタ落ちして仕事をもらえなくなります…
Gitの学習には「もう怖くないGit！チーム開発で必要なGitを完全マスター」がおすすめです。
Gitの仕組みについて分かりやすく解説されているだけでなく、実際にGitをインストールして手を動かしながら学習できます。
Gitを使った開発手順の流れも学習できるので、チーム開発に必要な知識も習得できます。
まとめ｜プログラミングを独学するならUdemyを使い倒そう
この記事では、フロントエンドについて学習したい人向けにUdemyのおすすめ動画を紹介してきました。
紹介した7つの動画をまとめます。
プログラミングのスキルは一生モノです。一度身につけさえすれば、転職もしやすくリモートでも働けるので人生の選択肢が増えます。
学習は大変ですがUdemyを使い倒して学習を進めていきましょう。
なお、JavaScriptを独学で勉強したい人向けの学習ステップを以下の記事にまとめているので、合わせてご覧ください！
