【Udemy】おすすめフロントエンド講座【未経験からエンジニア】

こんにちはカレイドです。

最近はJavaScriptの著しい発展に伴って、フロントエンドのできる範囲が大幅に増え、需要が高まりつつあります。

筆者はフロントエンドに関する知識がほぼ０の地点から

独学4ヶ月でベンチャー企業のwebアプリとモバイルアプリを作成するレベルまで到達することができました。

今回はそんなフロントエンドの知識を体系的に学べる講座をHTML,CSS,JavaScriptに絞ったフロントエンド編をお送りします。

筆者の簡単な自己紹介です。

はじめに

筆者がご紹介する講座は英語がメインになっています。

英語とは言っても字幕を日本語にして勉強することが可能なので心配しなくて大丈夫です。

心配するどころかいくつかメリットが存在します。

その方法とメリットはこちらからどうぞ。

No1. 【HTML/CSS編】　確実な基礎を築いてモチベーションを高める講座

HTML/CSSは簡単に言えばみんながよくみているwebページのデザインと配置を構成するものです。

普段何気なくみているページは全てHTML/CSSで構成されています。

それを自分で作れるようになったらモチベーションが高まりますよね。今回はモダンなデザインを1から構築して、高度なテクニックまで紹介している講座をご紹介します。

Build Responsive Real World Websites with HTML5 and CSS3

まずはこちらから。

この講座は本当に０の初心者が始めるのにはうってつけです。Udemyには多数の講座がありますが、必要以上に長いせいで動画といえども挫折する可能性があるもの、内容はいいけれど古すぎて使い物にならないもの、などなど当たり障りが激しいです。

こちらの講座は私が実務で実際に経験した中において、必要十分な部分を最短で学べる構成になっています。

もっというと、最初はフォントだったり文字の行間なんていうものは細かい作業でもちろん大事ですが、初心者がまずWebを構築したいってなったらどちらかというとある程度慣れてからの方が自分の中でも感覚がつかみやすいと思うので適宜後回しにしてください。

また、講座内でfloatと呼ばれる（今はわからなくていいです）最近ではあまり使われないプロパティを学んだりしますが、古いサイトの改修とかに出会った場合、普通に使われていたりしますのでしっかりと抑えておくことをお勧めします。

多少の動きをつけるためにjqueryについても触れていますので、軽く押さえおくといいと思います。

HTML5 and CSS3の基礎を学び、モダンなWebサイトを作る

No2. 【HTML/CSS編】 さらに高度なCSSを身につけて汎用性を広げる講座

先ほど紹介した講座を終える頃には正直こういう風にWebサイトの表側はできているんだなーって感覚が掴めると同時に、例えばほかのサイトに入ったときに

カレイド

この表現ってCSSでどうやっているんだろう。こういうことできるプロパティってないのかな

みたいな簡単な疑問が浮かんでくるようになると思います。もちろんサイト内で検証をしてCSSパクればいいのでそんなに難しいことではないですが、やはりサイトを巡回していい表現を寄せ集めるにはもう少し効率がいい講座があります。

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

それがこちらです。割と高度なCSSに加えて大事な表現や、全体を通しての構成まで学ぶことができるのが特徴です。先ほどのサイト巡回型の場合どうしても全体としてのイメージストックがしづらいのが弱点です。

そのため、この講座ではよくある見た目のサイトを３つ教えてくれながら作るので自分の中で全体のサイト構成の表現幅が広がります。これ以降深く学ぶ場合はサイト巡回とかそれぞれの好みになるかとおもいますが、これ以上はインプットするより自分でアウトプットして使いこなしていく練習を優先させた方が時間効率的にいいと個人的には思います。

上級のCSSを学び効果的なアニメーションをつけたサイトを作成する

No3.【JavaScript編】Reactを用いてデータのやりとりを学ぼう。

さてここまで静的なWebサイトについて学ぶことができました。静的とは動かないということですね。条件分岐に従ってこのボタンを表示とかそういった特殊な処理を組み込むことはできません。

ここからは特定のパターンに応じて表示を変更させたり、ほかのwebサイトとのやりとりを学ぶことになります。

代表的な例はAmazonを考えてみましょう。みなさんはamazonをクリックしたら最初にどんなアプリパーが表示されていますか？おそらくほとんどの人はAmazonにログインしっぱなしなので、自分の名前、注文した履歴が表示できるとおもいます。

しかしながら、初めてAmazonを使った人はログインされていないので違うアプリバーが表示されます。こういったことを制御するのがjavascriptの役目になります。また、最後に紹介しますが注文履歴などは人によって異なるためjavascriptがデータサーバーへ指令を送ってその人の情報に基づいた情報を取得することになります。最近ではフロントエンドであってもこういう最低限のデータのやりかた、指令の送り方は知っておいた方がほかのエンジニアとのやりとりが円滑に進みます。

なので、フロントエンド志望の人でも簡単なデータのやりとりぐらいはできるようになりましょう。

こちらの記事ではJavaScriptの簡単な基礎知識が学べるようになっていますので本当の初心者の方はここから入るといいかなと思います。

さて、ここではReactと呼ばれるJavascriptの一種を勉強していただきます。実はこの派生系にVue,とAngularの三択がありますが、日本ではReactとVueの二択が主流です。

なのでどちらを選択するかは個人の好みですが、未経験から勉強する場合、個人的な難易度はどちらも同じだと思います。

しかしながら、海外講座を基準に考えた場合海外ではVueよりもReactが圧倒的に人気でその分質の高い講座も多いです。そのため筆者はReactをお勧めさせていただきます。

動画一つでほぼ網羅的に学べるので

React - The Complete Guide (incl Hooks, React Router, Redux)

私は趣味的にこの人のほかの講座も作っているのですが本当にわかりやすくて好きです。しかも段階的に学ぶことができるので、とても効率がよい。

ただ、Reactを学ぶ上でどうしてもデザイン面は疎かになりがちなので先ほど最初に上の方で基本的な技術を身につけてもらったという感じです。

なので、講座を通してアプリを作り上げていきますが、もっとデザインよくしたい〜みたいなよくが出てきたら学んだCSSの知識を使ってアレンジしてみるのもモチベを維持する一つの秘訣かなと思います。

No4.【応用編】Firebaseを使って疑似Slackを作成してみる講座

これは一つのWebアプリを総括的にまとめたものでかなり上級者向けの講座になります。最近よくDMで難易度の高い講座ってありますか？と聞かれたりするので一つピックアップしてみました。

Build a Slack Chat App with React, Redux, and Firebase

これは私が学び始めてしばらくしてから取った講座ですが、終えるまでに結構時間がかかったのと深く考えさせられる講座です。

まだReactを勉強していない方や、初心者の方には少し難しいお話になりますが、プログラミングははっきり言ってしまえば泥臭ければ誰でも勉強すればある程度のランクまでは引き上げることができます。

では、そこから先はどうするかというと経験による最適なアプリの拡張パターンを自分の中で構成したり、よりよい実装方法を経験していくことになります。

Reduxまで学んだ人はどこまでReduxで管理するかの線引きなど、どのようにアプリを分割してコンポーネントに分割するかといった正解のない問題について考えることができるようになっていると思います。

そこで少し負荷の高い講座を紹介したので、自分で作成しながらなぜ作者がこのようなアプリの分割方法を選択したのかを学びながらやると深い経験を積むことができると思います。

そしてもうひとつこの講座ではフロントエンド講座でありながらバックエンドとしてFirebaseを採用することで、最小限の労力でフルスタックのアプリを構築しています。なので新しいことを同時に学ぶことになると思いますが挑戦だと思って頑張りましょう。結構急な坂道ですが上り切った後に振り返るとバックエンドの簡単な知識も手に入れていることになりますよ。

React+FirebaseでSlackアプリの構築

まとめ　フロントエンドの急速な需要にいち早く参戦しよう

いかがでしたでしょうか。

今回は最近トレンドかつ、Udemyの豊富なフロントエンド講座についてご紹介させていただきました。

自分がプログラミングを始めた当初（軽く触ってたとき）はJavaScriptってそこまで有名ではない印象でした。しかし2019年になっていざ言語を学ぼうとしたときには急速な需要に包まれていました。

まだまだフロントエンドエンジニアが足りないと言われている時代に新しくプログラミングを学び活躍する選択肢もアリかもしれませんね。