【Udemy】動画「【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)」を受講した評判/スキルによるオススメ度

今回は動画学習サイト Udemy で4番目に視聴した動画のレビューを行いたいと思います。

Udemyに関しては関連記事の方を参照頂ければと思います。

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

今回レビューする記事はこちらの動画になります。画像をクリック頂くと直接商品のページに飛ぶことができます。

値段

こちらは割引がないと9,600円する動画となります。

対象範囲

  • スキルレベル→すべてのレベル
  • 19.5時間の長丁場

講師の情報

まだ記事にしていませんが前回の講義の経験から動画の講師が本の著者も兼ねていることが多いことがわかったため、動画と本の講義が丸被りしていないか確認のため、著者として何の本を出しているかも記載させて頂きます。

この動画の講師である「CodeMafia」さんは独習JavaScirptの新版」も出版していました。


独習JavaScript 新版 [ CodeMafia 外村 将大 ]

もしこの本をお持ちの方がいらっしゃるなら、本の目次/動画のカリキュラムを比較して購入しても問題ないか?30日経つ前に動画を少し覗いてみて返金を行わなくて良いか?を判断することをオススメ致します。

出版の本について質問

私は本を持っていなかったので講義の内容と書籍の内容がどれくらい異なるかをUdemy上で講師である CodeMafia さんに質問してみました。

先生が出版している「独習JavaScript新版(2021/11/15発売)」の書籍も気になっているのですが、この講義・及び先生の他講義である「【JS】ガチで学びたい人のためのJavaScriptメカニズム」の内容も習い終えた上で書籍も見てみた方が良いオススメ点があれば教えてください。もし、動画内容をきちんと覚えれば書籍の方は見る必要がないのであればその旨もご教示頂けると幸いです。
購入の参考にしたいと考えています。
よろしくお願い致します。

本書は基本的にはJavaScriptメカニズムと同じようにコードがどのように動くのかについて詳しく説明しています。
ただ、もちろん一部補足しているところや異なる技術について説明を追加しているところもあります。
また、練習問題なども新規で追加しているため、復習になると思いますね。

書店にお立ち寄りの際に見てみていただけると嬉しく思いますね。

以上の事からこの動画というより、先生の別動画「 【JS】ガチで学びたい人のためのJavaScriptメカニズム 」の内容に+αした内容でありそうという事から、書籍の購入は必須ではありません実務で携わっている方もしくはJavaScriptをもっとレベルアップしたい方なら買う価値があるという事だと思います。

ちなみに私はガチで学びたい人のための JavaScriptメカニズムも購入はしていますが、内容的にはJavaScript構文/文法/構成などをもう1段階レベルアップしたい人にオススメの動画でしたので全部見ていません。実際に実務に就いてる人向けの内容でした。興味があれば見てみてください。

セクション2:超初心者の方はここからスタート

30分あります。基本文法の説明ですが初めての人向きにインライン要素/ブロック要素/詳細度の説明があり、講義の最後まで関わってくるのでこれに対する説明があるのは嬉しいですね。

セクション3:コード記述の効率化を学ぼう

11分です。VSCodeを使う上でclassなどの自動生成やVSCodeのショートカットなどの説明があります。おそらくこれくらいであればWeb検索でも見つかりそうな気がしますが、講義の中で先生がこういったショートカットを使った解説をしている事が多いので事前に抑えておくのはオススメです。

セクション4:CSSの基礎から始めよう(Transition編)

3時間5分とかなり長いセクションです。主にボタンに対してマウスを載せた時のアクションパターンをTransformプロパティをTransitionを使ったアニメーションを解説したりSassについての説明があります。特に下記のような3Dボタンの作成方法も解説されています。すごくないですか?これに一切JavaScriptは使われておらず、CSSのTransitionで実現されています。

セクション5:CSSを極めよう(Animation)

こちらも2時間54分と長めのセクションです。Transtionとの違いやキーフレーム・Mixinを使ってAnimationの記載を簡略化したり下記のように読み込み時にスライドしたり、マウスを乗せた場合に拡大したり、昨今のWebサイトで見る技術を実装する内容が詰め込まれています。

この方法を覚えるだけでも実務に携われそうなくらい、技術力がアップした!と思いたくなりますよね!(下記技術にもJavaScriptが関わっていませんでした

セクション6:JavaScriptの基礎を固めよう!

4時間9分!というこちらも長丁場の動画ですが、前半は基本的な事が多く、他学習サイトでも学べる内容が多いです。前半くらいならProgateでも補完可能です。

他学習サイトであるProgateに関しては以下を参照してください。

全体的に記載の方法がオブジェクト指向に近く、JavaやC#でも似た構文が多く、他言語技術がある方ならまだ取り組みやすいのかなと思いました。

基礎で一番大事な所はコールバック関数/DOM/thisとbindの操作ですね。

セクション7:JavaScriptのより実践的な記述について学ぼう!

2時間52分です。ここで学ぶ技術も昨今のWebサイトで良く見かける技術が多いです。マウススクロールに応じて動くアニメーション/下記動画のようなモバイルメニュー表示/スライダー表示/画面読み込み中表示です。

これらの技術のいくつかは外部のライブラリを使うと便利ということも学べました。なぜこういった技術を使うか。も丁寧に解説されているのでわかりやすいです。

セクション8:Webサイト作成(序)

1時間4分です。このセクションは主にスマホ縦/スマホ横/タブレット縦/タブレット横/デスクトップで見た時の表示の違いについての解説があります。紹介動画でそこまで細かなパターンで分けて解説してくれる動画はそうそうないのでは?と思う程です。

また、モバイルファーストの記載もあります。このWordPressテーマのStorkもそうですが「モバイルファースト」という言葉はテーマ選定する時にも聞いたことがあると思いますがそれに関係した解説もあるので嬉しい内容でした。

Storkに関する解説は下記記事を参照してください。

セクション9: Webサイト作成(完)

実質ラストのセクションで4時間1分。ここまでの動画でトータル実に19時間に近いボリュームになっています。しかもちゃんと手を動かしながらサイトを作る場合、再生速度が等倍では間に合いませんので大抵が0.5~0.75倍速になるので私の場合30時間くらいの時間をこの動画一本にかけました

内容は今まで作った部品をスマホ/デスクトップ等のパターンに分けて記載ヘッダー+サイドメニューを追加といった内容になっていて、とても見栄えの良いWebサイトになっております。

※下記動画はスマホ向けメニューのものになっております。

セクション10:インターネットに公開してみよう

一応最後にインターネットに公開する手順も解説されています。しかし、このWebサイトはあくまでトップメニューまでの講義であり、その中に関する作成はしておりません。

実際Web公開する時はサーバーサイドも含めた全てを作ってからの方がベターのため、こちらは参考くらいに聞いておくと良いと思います。

どのくらいオススメするか?

未経験者オススメ度:★★★☆☆

初級者(プログラミング経験1年前後)オススメ度:★★★★★

中級者 (プログラミング経験3年前後) オススメ度: ★★★★★

上級者 (プログラミング経験5年以上) オススメ度: ★★★☆☆

未経験者

正直この動画はボリュームがすごい分、未経験者から上級者に至るまでオススメ範囲が広いです。HTMLとは何か?CSSとは何か?JavaScriptとは何か?から説明しているので未経験でもまったくわからないといった事はないでしょう。

ただ、ある程度専門用語みたいなのは解説ありとはいえ存在するので事前に基礎中の基礎は他で身に着けておいた方が内容をスムーズに理解できると思います。

一応このコースの対象受講者に

・「【JS】初級者から中級者になるためのJavaScriptメカニズム」を修了した方

・ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方

・他の先生のフロントエンドの入門編を終えたレベルの方

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

という条件もあります。

Progateも入門としては対象なので興味があれば下記記事を見てみてください

初級者/中級者

初級/中級者にはうってつけの内容です。講師が説明している通り初級Webフロントエンドエンジニアが実務中級クラスのエンジニアに昇格できるくらいのクオリティがあります。

というのもページ表示もあまりアニメーション技術を多用すると重くなってしまうのですが、その重さを少しでも抑えるためのパフォーマンス技術についても動画内で解説しています。中級者の方だとパフォーマンスも意識した開発を目指している頃だと思うのでその知識もカバーできるのは素晴らしいと思いますね。

上級者

上級者の方でもソースの構成や外部ライブラリに関する解説が多少あり、参考にできる部分はあるのではないかと考えてます。スマホ/スマホ横/タブレット/タブレット横/デスクトップ毎の表示に渡ってはそこまで細かく分けていない方もいらっしゃるのではないでしょうか?

とはいえ、さすがに初級/中級の方よりは得られる情報は少ないのでオススメ度は☆3にしています。

まとめ

今回の動画のボリュームはものすごく、1回目は10日間くらいかけて流し見/2回目3/14に本格的に動画を見ながら開発を始めて4/17に受講完了したので休みながらとはいえ、実に丸一カ月半月かかりました・・・。

今までのUdemy動画は元値22000円に対して大体10000円くらいと評価していましたが、この動画こそ元値9600円に対して22000円の価値があると思いました。どっちみちUdemyは割引を大体1~2週間の1回の頻度で行っているので元値で購入するといった事はありませんが、その値引き時には是非一度見てもらいたいです。

基本的にWebアプリケーションエンジニアとして実務に就く時は多くの場合、ReactやVue.jsなどのWebフレームワークもしくはサーバーサイドもある程度できないと未経験から実務につくのは難しいですが、この動画で覚えることは実務につく一つの足掛かりになるとは思います。

何かの参考になりましたら幸いです。他にUdemyでどんなコースがあるかを見たい場合は以下のリンクからどうぞ。