アクセスありがとうございます!次は「とあるエンジニアのエソラゴト」で検索して頂けると嬉しいです!
エソラ
エソラ

どうも、当ブログ(とあるエンジニアのエソラゴト)を運営している、エンジニアのエソラ(@ya6madev)です。
普段はSIer企業でDXとかAI開発をしながら、自社サービスの開発をしています。

目次

未経験からフロントエンドエンジニアになりたい人が多い

近年のエンジニア人気によって、未経験からエンジニアになりたい人が多いようです。

エソラ
エソラ

フロントエンドエンジニアとは、フロントエンド(ブラウザに表示される画面に関わる要素)を開発するエンジニアのことです。

チェックポイント

フロントエンドエンジニアになるには、HTMLやCSS、JavaScriptの知識が最低限必要になります。

未経験からフロントエンドエンジニアになるための学習はハードルが高い

エソラ
エソラ

とは言え、「未経験の方がフロントエンドエンジニアになるために、分厚い技術書をウンウン言いながら読み、技術スキルを身につける」には気の遠くなるような時間と気力が必要です。

未経験の方が技術書から独力で勉強するのはなかなか難しいようです。

エソラ
エソラ

ということで最近では、プログラミングスクールに通って、フロントエンドエンジニアになるために勉強をする方も多いようです。

しかし、プログラミングスクールの学費は数十万かかるようで、非常に高い投資となります。

技術書よりも手軽に学べて、プログラミングスクールよりも安い金額でフロントエンドエンジニアになるために学習する方法はないの?

エンくん
エンくん
エソラ
エソラ

なんとあります。
その学習方法はと言うと、Udemyという動画学習プラットフォームを利用することです。

Udemyを利用して学習することで、未経験でも楽に学習することが出来ると思います。

Udemyとは?

Udemyとは動画学習プラットフォームです。

Udemy公式ページ
セール中!まもなく終了! Udemyの公式ページはこちらから→Udemy
エソラ
エソラ

以下に、Udemyについて詳しく解説した記事がありますので、気になる方はご参照下さい。

エソラ
エソラ

以下では、未経験からフロントエンドエンジニアになるためにおすすめな講座について、詳しい解説をしていきます。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

概要

以下の情報は2021年3月現在の情報です。(Udemy公式のページから内容を引用しています。)

コース内容Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。
コース時間9時間
評価4.4 (6141件の評価)
受講者数29101人の受講生
講師たにぐち まこと(ともすた)
公式HPはこちら→ともすた
対象者・Web制作を学びたい方
・アプリ制作等でHTMLと CSSおよび、JavaScriptの知識が必要な方
引用元:『[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

おすすめポイント

エソラ
エソラ

この講座のおすすめポイントを一言で言うと、未経験からでも無理なく学習が出来て、フロントエンド周りのスキルについてもまんべんなく学習が出来るという点です。

この講座一つで現場で活躍が出来るようになるかと言うと違うと思いますが、未経験者の第一歩としては非常におすすめであると思います。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

では、以下からもっと詳しくおすすめポイントについて、説明をしていきます。

未経験からでも無理なく、HTML、CSS、JavaScriptの基礎を学べる

エソラ
エソラ

この講座は「PCの操作Webブラウザーの操作、Webブラウザーの操作」が出来れば、未経験からでも無理なく、HTML、CSS、JavaScriptの基礎を学べます。

Udemyのレビューを見ても、講師の方の説明が「丁寧で分かりやすかった」との声が多数あります。

またこの講座は1セクション毎に、実際に手を動かしながら画面のパーツを開発していくハンズオン形式の講座になっています。

そのため、ダラダラと文法の解説をする座学形式とは違いますので、眠くなりにくいと思います。

また動画学習のため、分からない箇所があっても巻き戻したり、一時停止をすれば、もう一度解説が聞けます。

そのため、対面で行う講義よりも自分のペースで学習が出来ると思います。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

スマートフォン時代に必須のレスポンシブデザインも学べる

レスポンシブデザインの必要性

エソラ
エソラ

同じサイトでもPCとスマートフォンで画面を表示した際に、ボタンやテキスト等の見え方が違って見えることはありませんか?

あるね〜
あれなんなの?

エンくん
エンくん
エソラ
エソラ

あれはレスポンシブデザインで画面が実装されているんだよ!

チェックポイント

近年、PCだけではなく、スマートフォン、タブレットなど、多数のデバイスで画面にアクセスがされることから、どんなデバイスでアクセスされても画面のレイアウトが崩れないようにレスポンシブデザインで画面を実装することが多いです。

てか、今の時代、レスポンシブデザインで実装されていない画面なんてないのかも知れないくらい重要な技術スキルです。

エソラ
エソラ

この講座ではHTML、CSS、JavaScriptについて基礎的な内容を学んだ後に、上記のレスポンシブデザインも学べるようになっています。

この内容を学べば、未経験のエンジニアの方でも見栄えの良い、かっこいい画面デザインが開発できるね!

エンくん
エンくん
\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

Bootstrapについて学べる

またこの中でCSSフレームワークである、 Bootstrapも学ぶことが出来ます。

エソラ
エソラ

CSSフレームワークは色々な種類があり、流行り廃りはありますが、Bootstrapは今でもよく使われるCSSフレームワークであると思います。

自分自身もフロントエンドの開発をする時によくBootstrapを使用しています。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

JavaScriptの応用的な技術である「イベント、Ajax、jQuery、Vue」についても学べる

ここまででモダンできれいな画面レイアウトを開発することが出来るようになったと思います。

しかし、実際に世の中で目にする画面はもっと複雑なことが出来ます。

エソラ
エソラ

例えば、ボタンを押したらレイアウトが自動的に変わったり、ボタンを押したらデータを取得して、画面に表示したりと言った内容です。

そういうことがやりたいとなった時は、JavaScriptについてもっと深く学ぶ必要があります。

ということで、講座の後半からはJavaScriptをもう少し深いところまで学習していきます。

具体的には、「イベント、Ajax、jQuery、Vue」についてです。

エソラ
エソラ

イベントとは、ざっくりと言ってしまうと、ボタンが押されたらテキストの色が黒色から赤色に変わると言ったような、「Aしたら、Bする」という内容を記述する方法です。

これが理解出来るとあなたの開発した画面はただのハリボテではなく、動的に動作する画面に変わります。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

Ajax

エソラ
エソラ

Ajaxとは、ざっくりと言ってしまうと、非同期でデータを取得する仕組みです。

少し専門的になりますが、非同期でデータを取得出来るので、他の処理を待たずに、一直線にデータを取得することが出来ます。

そのため、画面の速度を出すために使用されることが多く、フロントエンドエンジニアとして、現場で開発をするために必須のスキルと言えます。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

jQuery

jQueryとは、「write less、do more」というキャッチフレーズで有名なJavaScriptのライブラリーです。

エソラ
エソラ

このライブラリを使用すると、動的な画面を作成するために必要な処理が数行で簡単に書けてしまいます。

おそらく最近では以前と比べて、現場でjQueryを利用する機会はグッと減ったと思いますが、規模の小さい画面を開発する際には、まだまだ使うことが出来ると思います。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

Vue

最後にVueです。

エソラ
エソラ

VueとはJavaScriptのライブラリであり、SPA(シングルページアプリケーション)を開発することが出来ます。

前述のjQueryはセレクタ等の操作が主な機能ですが、Vueはインタラクティブなページを開発したり、データの状態管理が出来るので、現場ではこちらの方がよく使われます。

この辺のJavaScript応用技術については、触りだけ紹介するという内容になっていますが、少しでも知っていると今後に生きてくると思います。

\30日間返金保証付き!フロントエンドに入門するならまずはこの講座!/

また著者の書籍もありますので、こちらも一緒に購入すると動画の内容を体系的に見れるので、効率的に勉强が出来るかも知れません。

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

概要

以下の情報は2021年3月現在の情報です。(Udemy公式のページから内容を引用しています。)

コース内容基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。
コース時間19.5時間
評価4.5(2816件の評価)
受講者数14797人の受講生
講師【Code Mafia】 WEBプログラミング学習
公式HPはこちら→LeapIn
対象者・「【JS】初級者から中級者になるためのJavaScriptメカニズム」を修了した方
・ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
・他の先生のフロントエンドの入門編を終えたレベルの方
・自分で本格的なWEBサイトを作ってみたい方
・CSS、JavaScriptの実践的な基礎を効率的に学びたい方
・CSS、JavaScriptを今後仕事で使う予定の方
・CSS、JavaScriptのコードの整理方法について学びたい方
・CSS、JavaScriptのアニメーションを学びたい方
・CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
・CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
引用元:『【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
\30日間返金保証付き!一歩先のフロントエンドを学ぶならこの講座!/

おすすめポイント

エソラ
エソラ

この講座は概要にもある通り、CSSやJavaScriptについて入門レベルから現場に出れるプロレベルにまで一気にステップアップさせてくれる講座内容となっています。

具体的には、サイトを作成していき、最終的にはインターネットに公開するところまでやります。

内容を見ると中級者向けであり、「難しそう」と思うと思いますが、講師の方の噛み砕いた説明が非常に分かりやすく、何度も見返すうちにどんどんと理解が深まると思います。

エソラ
エソラ

特に、「画面を開発する際にどのような考え方を持ちながら、実際に作業していくのか」、また「効率的に開発するにはどういったツールを使ったら良いか」という点がよく分かると思います。

動画の時間が長くきついと感じる方もいると思います。

チェックポイント

しかし、この講座をやり切った先には必ず現場で使えるレベルの知識が身につき、手が動くようになると思います。

\30日間返金保証付き!一歩先のフロントエンドを学ぶならこの講座!/

では、以下からもっと詳しくおすすめポイントについて、説明をしていきます。

高度なCSVの使い方を学ぶことで、業務で使用出来るレベルのかっこいい画面を開発出来るようになる

エソラ
エソラ

ここではただの装飾ではなく、ユーザーの操作に合わせてボタンにエフェクトをかけたり、アニメーションを付ける方法について学べます。

CSVの基本的な文法だけでは、かっこいい画面を開発することは出来ないので、こういった小技をたくさん知っていると、他のフロントエンジニア志望者と差を付けることが出来ます。

エソラ
エソラ

また、ここではCSVの発展型であるSassを使います。

大規模な画面になるとCSVのコード量は非常に多くなり、そのためソースコードの管理もしづらくなります。

そこでSassを使って、作業効率とコード量を減らすのです。

というわけでSassは現場に出ると必須で学んでおくべき技術スキルとなります。

チェックポイント

CSVの文法を覚えただけでなく、もう少しかっこ良く、効率的にCSVを書きたいという方には非常におすすめの内容となっています。

\30日間返金保証付き!一歩先のフロントエンドを学ぶならこの講座!/

高度なJavaScriptの使い方を学ぶことで、より使い勝手の良い画面を開発出来るようになる

エソラ
エソラ

ここではコールバック関数とか、アロー関数とかより発展的なJavaScriptの文法について学ぶことが出来ます。

ここまでJavaScriptの文法を学んでおけば、現場に出たとしても「全く見たことがないという実装の仕方」には出会う確率がだいぶ低くなると思います。

エソラ
エソラ

またユーザーが画面を操作した時の挙動を感知して、便利な機能を提供するようなやり方もここで学べます。

例えば、画面のスクロールの動きに合わせて、アニメーションを動かしたり、画面のデータ取得の待ち時間にページローダーを表示したりするようなことが学べます。

チェックポイント

ユーザーが使いやすい画面を開発するためには、画面のデザインだけでなく、出来るだけ便利でイライラしないような仕組みが必要となります。

そのために、どういったことを考えて実践していけば良いのかという中級者が考えるべき内容について学ぶことが出来ます。

\30日間返金保証付き!一歩先のフロントエンドを学ぶならこの講座!/

モダンJavaSciptの基礎から始める挫折しないためのReact入門

モダンJavaSciptの基礎から始める挫折しないためのReact入門

概要

以下の情報は2021年3月現在の情報です。(Udemy公式のページから内容を引用しています。)

コース内容Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。
コース時間6時間
評価4.7(583件の評価)
受講者数2300人の受講生
講師じゃけぇ (Takumi Okada)
公式HPはこちら→25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ
対象者・Reactを習得したい人
・Reactの学習を1度挫折した人
・近代JavaScriptを学びつつフレームワークやライブラリも習得したい人
・モダンフロントエンドも知っておきたいサーバーサイドエンジニア
引用元:『モダンJavaSciptの基礎から始める挫折しないためのReact入門
\30日間返金保証付き!Reactに入門するならこの講座!/

おすすめポイント

エソラ
エソラ

Reactを学びたい人にとって一番最初に受講するのにぴったりな講座であると思います。

Reactとは、UIを開発することに特化したJavaScriptのライブラリです。

SPAの画面を開発したい場合、ReactはVueと並んで最有力の選択肢となります。

\30日間返金保証付き!Reactに入門するならこの講座!/

では、以下からもっと詳しくおすすめポイントについて、説明をしていきます。

Reactの便利さを体感出来る面白い学習構成

この講座では無理なくReactを学ぶために、モダンなJavaScriptの使い方を確認しながら、実際にTODOアプリを開発していきます。

そして、Reactを使わずにJavaScriptでTODOアプリを開発した後に、Reactを使って同じTODOアプリを開発します。

エソラ
エソラ

そうすることで、「Reactを使うとどういうところが便利なのかということを体感しながらReactを学べる」という点がこの講座の最大の特徴であると思います。

\30日間返金保証付き!Reactに入門するならこの講座!/

超Vue.js 2 完全パック (Vue Router, Vuex含む)

超Vue.js 2 完全パック (Vue Router, Vuex含む)

概要

以下の情報は2021年3月現在の情報です。(Udemy公式のページから内容を引用しています。)

コース内容Vue.jsを、基礎から、Vue CLI、Vue Router、Vuexを使った実践的な内容まで網羅的に学びますので、ぜひこの講座で学んでみてください。ReactやAngularエンジニアの方もぜひ!
コース時間17.5時間
評価4.3(2589件の評価)
受講者数10799人の受講生
講師よしぴー (Yoshipi)
対象者・ モダンなJavaScriptフレームワークに興味があるフロントエンドエンジニア
・AngularやReactの経験があり、Vueにも興味がある方
・Progateを一通り終え、実際に実務で使える技術を学びたい方
・本で学ぶよりも動画で学ぶ方が好きな方
・jQueryやRuby on Rails以外のWebアプリケーション開発の方法を学びたい方
・新しいことを学ぶのが好きな方
引用元:『超Vue.js 2 完全パック (Vue Router, Vuex含む)
\30日間返金保証付き!Vue.jsを完全理解するなら、この講座!/

おすすめポイント

エソラ
エソラ

この講座は、完全パックという講座名が表す通り、Vueに関して非常に網羅的に学ぶことが出来ます。

Vueとは前述した通り、UIを開発する上で非常に便利なJavaScriptライブラリです。

この講座で学ぶとVueの知識はもちろん、モダンなUI開発についての周辺知識についても学べると思います。

\30日間返金保証付き!Vue.jsを完全理解するなら、この講座!/

では、以下からもっと詳しくおすすめポイントについて、説明をしていきます。

Vueについて網羅的に学べる

この講座で解説されている内容は以下の通り多岐にわたります。

  1. Vue.jsの基礎テンプレート構文
  2. 条件付きレンダリング」と「リストレンダリング
  3. Vueインスタンスとその内部構造
  4. Vue CLIを使った実践的な開発をはじめる方法
  5. コンポーネントの知識
  6. Vue.jsを使ったフォームの作成方法
  7. カスタムディレクティブで自由にディレクティブを作る方法
  8. フィルター」と「ミックスイン
  9. トランジション」と「アニメーション
  10. Vue Routerシングルページアプリケーション(SPA)を作成
  11. Vuexを使って大規模なプロジェクトに備える
  12. Netlifyを使ってデプロイする方法
  13. ボーナス:axiosを使ってサーバーにhttp通信をする方法
  14. ボーナス:SPA上でのログイン認証の方法

講師の方も言っているのですが、ここまで網羅的に詳しくVueについて解説をしている動画は他にはないと思います。

エソラ
エソラ

ここまで網羅的にまとめられているので、初心者から脱して中級者になってからも、辞書的に使うことも出来ると思います。

もちろん、Vueが全くの初心者の人でも最初はVueの基本的な内容から、だんだんとステップアップして深く学んでいくので、心配はいりません。

この講座を進めていくと認証機能付きの掲示板アプリが開発出来るようになります。

\30日間返金保証付き!Vue.jsを完全理解するなら、この講座!/

認証機能と言った中級者向けの機能が開発出来るようになる

エソラ
エソラ

この講座にはボーナスレクチャーがあり、そこではFirebaseを利用した認証機能の実装について学べます。

認証機能とはログイン、ログアウトといったユーザーを認証するための機能です。

またFirebaseとは、Googleが提供しているWebアプリケーション用のバックエンドサービスです。

チェックポイント

実際に開発をするとかなり難しい認証機能について、Firebaseを利用して認証機能を開発する現場は多くなっているようです。

現場に入る前にVueとFirebaseを利用した認証機能の実装を経験するのは非常に有益なことであると思います。

\30日間返金保証付き!Vue.jsを完全理解するなら、この講座!/

Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

概要

以下の情報は2021年3月現在の情報です。(Udemy公式のページから内容を引用しています。)

コース内容Gitの基本コマンド、ブランチやマージ、コンフリクトの解消方法、リベース、GitHubを利用した開発フローなど、チーム開発に必要なGitの全てが含まれています。仕組みを図解で理解した上でハンズオンで実践するので、もうGitは怖くありません。
コース時間5.5時間
評価4.4(4584件の評価)
受講者数25084人の受講生
講師山浦 清透
公式HPはこちら→独学エンジニア
対象者・Gitやバージョン管理に興味があるエンジニアやデザイナー
・Gitをされたことがないけどこれから使おうとされている方(インターン生も!)
・commitやpush、pullはできるけどもっとGitを使いこなしたい方
・Gitを用いてのチーム開発に携わるマネージャーやディレクター
引用元:『Git: もう怖くないGit!チーム開発で必要なGitを完全マスター
\30日間返金保証付き!Gitを学んで現場で活躍したいなら!/

おすすめポイント

エソラ
エソラ

この講座のおすすめポイントを一言で言うと、未経験からでも無理なくGitについての知識を習得出来るところです。

Gitとはソースコード等のリソースのバージョン管理システムです。

バージョン管理システムを利用すると、リソースをバージョン管理出来るので、安全に開発を行うことが出来ます。

チェックポイント

Gitの別種類でSVNと言うバージョン管理システムもありますが、今どきの現場ではGitを使用することの方が多いと思います。

\30日間返金保証付き!Gitを学んで現場で活躍したいなら!/

では、以下からもっと詳しくおすすめポイントについて、説明をしていきます。

Gitのコマンドを一通り全て学べるので、チーム開発が出来るようになる。

エソラ
エソラ

この講座は動画でGitの概要はもちろんのこと、Gitのコマンドの使い方も一通り学べます。

また、GitHubの使い方も学ぶことが出来ます。

エソラ
エソラ

Gitのコマンドを学ぶと、現場に入っても難なくチーム開発が出来るようになると思います。

逆に言うと、Gitの使い方が分からないと、チーム開発を円滑に行うことが出来ません。

またGitHub Flowを使った高度なチーム開発についても体験が出来るようになります。

チェックポイント

現場に着任して、困ったことが起きないように、今のうちからGitについて学んでおくことを強くおすすめします。

\30日間返金保証付き!Gitを学んで現場で活躍したいなら!/

未経験からフロントエンドエンジニアになる方法まとめ

エソラ
エソラ

ここまで、未経験の方がフロントエンドエンジニアになるために、コスパ良く学習をするならUdemyがおすすめな理由をまとめました。

改めて今回紹介した講座をフロントエンドについての知識レベル別におすすめを書くなら以下となります。

フロントエンドの知識が全くないという初心者向け

セール中!まもなく終了!

この講座の購入はこちらから→[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

フロントエンドの知識がある程度ついてきた中級者向け

セール中!まもなく終了!

この講座の購入はこちらから→【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

UI開発に特化したJavaScriptライブラリの使い方を学びたい人向け

セール中!まもなく終了!

この講座の購入はこちらから→モダンJavaSciptの基礎から始める挫折しないためのReact入門

セール中!まもなく終了!

この講座の購入はこちらから→超Vue.js 2 完全パック (Vue Router, Vuex含む)

現場に出る前にチーム開発に必要なスキルの基礎を学びたい人向け

セール中!まもなく終了!

この講座の購入はこちらから→Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

エソラ
エソラ

Udemyでコスパ良く勉强して、読んでくれたあなたが一日でもはやく現場で活躍出来るフロントエンドエンジニアになることを応援しています。

ここまでお読み頂き、ありがとうございました。

もし、「面白かった」、「参考になった」という方がいましたら、以下のソーシャルボタンからシェア頂けると泣いて喜びます!!

エソラ
エソラ
またブログランキングにも参加しています。
よろしければ、ポチッとお願いしまーす!

それでは、良いエンジニアライフをお過ごし下さい!

最新情報をチェックしよう!