今回は動画学習サイト Udemy で３番目に視聴した動画のレビューを行いたいと思います。
Udemyに関しては関連記事の方を参照頂ければと思います。
目次
- 1 【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
- 2 どのくらいオススメするか？
- 3 セクション２：超初心者の方はここからスタート
- 4 セクション３：コード記述の効率化を学ぼう
- 5 セクション４：CSSの基礎から始めよう（Transition編）
- 6 セクション５：CSSを極めよう（Animation）
- 7 セクション６：JavaScriptの基礎を固めよう！
- 8 セクション７：JavaScriptのより実践的な記述について学ぼう！
- 9 セクション８：Webサイト作成（序）
- 10 セクション９： Webサイト作成（完）
- 11 セクション１０：インターネットに公開してみよう
- 12 まとめ
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
今回レビューする記事はこちらの動画になります。
値段
こちらは割引がないと9,600円する動画となります。
対象範囲
- スキルレベル→すべてのレベル
- 19.5時間の長丁場
講師の情報
まだ記事にしていませんが前回の講義の経験から動画の講師が本の著者も兼ねていることが多いことがわかったため、動画と本の講義が丸被りしていないか確認のため、著者として何の本を出しているかも記載させて頂きます。
この動画の講師である「CodeMafia」さんは「独習JavaScirptの新版」も出版していました。
独習JavaScript 新版 [ CodeMafia 外村 将大 ]
もしこの本をお持ちの方がいらっしゃるなら、本の目次／動画のカリキュラムを比較して購入しても問題ないか？３０日経つ前に動画を少し覗いてみて返金を行わなくて良いか？を判断することをオススメ致します。
出版の本について質問
私は本を持っていなかったので講義の内容と書籍の内容がどれくらい異なるかをUdemy上で講師である CodeMafia さんに質問してみました。
以上の事からこの動画というより、先生の別動画「 【JS】ガチで学びたい人のためのJavaScriptメカニズム 」の内容に＋αした内容でありそうという事から、書籍の購入は必須ではありませんが実務で携わっている方もしくはJavaScriptをもっとレベルアップしたい方なら買う価値があるという事だと思います。
ちなみに私はガチで学びたい人のための JavaScriptメカニズムも購入はしていますが、内容的にはJavaScript構文／文法／構成などをもう１段階レベルアップしたい人にオススメの動画でしたので全部見ていません。実際に実務に就いてる人向けの内容でした。興味があれば見てみてください。
他の動画
講師の方はその後、React動画も出しています。こちらも長丁場でオススメの為、是非チェックしてみてください
どのくらいオススメするか？
未経験者オススメ度：★★★☆☆
初級者（プログラミング経験１年前後）オススメ度：★★★★★
中級者 （プログラミング経験３年前後） オススメ度： ★★★★★
上級者 （プログラミング経験５年以上） オススメ度： ★★★☆☆
未経験者
正直この動画はボリュームがすごい分、未経験者から上級者に至るまでオススメ範囲が広いです。HTMLとは何か？CSSとは何か？JavaScriptとは何か？から説明しているので未経験でもまったくわからないといった事はないでしょう。
ただ、ある程度専門用語みたいなのは解説ありとはいえ存在するので事前に基礎中の基礎は他で身に着けておいた方が内容をスムーズに理解できると思います。
一応このコースの対象受講者に
・「【JS】初級者から中級者になるためのJavaScriptメカニズム」を修了した方
・ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
・他の先生のフロントエンドの入門編を終えたレベルの方
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
という条件もあります。
Progateも入門としては対象なので興味があれば下記記事を見てみてください
初級者／中級者
初級／中級者にはうってつけの内容です。講師が説明している通り初級Webフロントエンドエンジニアが実務中級クラスのエンジニアに昇格できるくらいのクオリティがあります。
というのもページ表示もあまりアニメーション技術を多用すると重くなってしまうのですが、その重さを少しでも抑えるためのパフォーマンス技術についても動画内で解説しています。中級者の方だとパフォーマンスも意識した開発を目指している頃だと思うのでその知識もカバーできるのは素晴らしいと思いますね。
上級者
上級者の方でもソースの構成や外部ライブラリに関する解説が多少あり、参考にできる部分はあるのではないかと考えてます。スマホ／スマホ横／タブレット／タブレット横／デスクトップ毎の表示に渡ってはそこまで細かく分けていない方もいらっしゃるのではないでしょうか？
とはいえ、さすがに初級／中級の方よりは得られる情報は少ないのでオススメ度は☆３にしています。
以降はセクション毎の感想をつづっています。
セクション２：超初心者の方はここからスタート
30分あります。基本文法の説明ですが初めての人向きにインライン要素／ブロック要素／詳細度の説明があり、講義の最後まで関わってくるのでこれに対する説明があるのは嬉しいですね。
セクション３：コード記述の効率化を学ぼう
11分です。VSCodeを使う上でclassなどの自動生成やVSCodeのショートカットなどの説明があります。おそらくこれくらいであればWeb検索でも見つかりそうな気がしますが、講義の中で先生がこういったショートカットを使った解説をしている事が多いので事前に抑えておくのはオススメです。
セクション４：CSSの基礎から始めよう（Transition編）
３時間５分とかなり長いセクションです。主にボタンに対してマウスを載せた時のアクションパターンをTransformプロパティをTransitionを使ったアニメーションを解説したりSassについての説明があります。特に下記のような３Dボタンの作成方法も解説されています。すごくないですか？これに一切JavaScriptは使われておらず、CSSのTransitionで実現されています。
セクション５：CSSを極めよう（Animation）
こちらも２時間５４分と長めのセクションです。Transtionとの違いやキーフレーム・Mixinを使ってAnimationの記載を簡略化したり下記のように読み込み時にスライドしたり、マウスを乗せた場合に拡大したり、昨今のWebサイトで見る技術を実装する内容が詰め込まれています。
この方法を覚えるだけでも実務に携われそうなくらい、技術力がアップした！と思いたくなりますよね！（下記技術にもJavaScriptが関わっていませんでした）
セクション６：JavaScriptの基礎を固めよう！
４時間９分！というこちらも長丁場の動画ですが、前半は基本的な事が多く、他学習サイトでも学べる内容が多いです。前半くらいならProgateでも補完可能です。
他学習サイトであるProgateに関しては以下を参照してください。
全体的に記載の方法がオブジェクト指向に近く、JavaやC#でも似た構文が多く、他言語技術がある方ならまだ取り組みやすいのかなと思いました。
基礎で一番大事な所はコールバック関数／DOM／thisとbindの操作ですね。
セクション７：JavaScriptのより実践的な記述について学ぼう！
２時間５２分です。ここで学ぶ技術も昨今のWebサイトで良く見かける技術が多いです。マウススクロールに応じて動くアニメーション／下記動画のようなモバイルメニュー表示／スライダー表示／画面読み込み中表示です。
これらの技術のいくつかは外部のライブラリを使うと便利ということも学べました。なぜこういった技術を使うか。も丁寧に解説されているのでわかりやすいです。
セクション８：Webサイト作成（序）
１時間４分です。このセクションは主にスマホ縦／スマホ横／タブレット縦／タブレット横／デスクトップで見た時の表示の違いについての解説があります。紹介動画でそこまで細かなパターンで分けて解説してくれる動画はそうそうないのでは？と思う程です。
また、モバイルファーストの記載もあります。このWordPressテーマのStorkもそうですが「モバイルファースト」という言葉はテーマ選定する時にも聞いたことがあると思いますがそれに関係した解説もあるので嬉しい内容でした。
Storkに関する解説は下記記事を参照してください。
セクション９： Webサイト作成（完）
実質ラストのセクションで４時間１分。ここまでの動画でトータル実に１９時間に近いボリュームになっています。しかもちゃんと手を動かしながらサイトを作る場合、再生速度が等倍では間に合いませんので大抵が0.5～0.75倍速になるので私の場合３０時間くらいの時間をこの動画一本にかけました。
内容は今まで作った部品をスマホ／デスクトップ等のパターンに分けて記載＋ヘッダー＋サイドメニューを追加といった内容になっていて、とても見栄えの良いWebサイトになっております。
※下記動画はスマホ向けメニューのものになっております。
セクション１０：インターネットに公開してみよう
一応最後にインターネットに公開する手順も解説されています。しかし、このWebサイトはあくまでトップメニューまでの講義であり、その中に関する作成はしておりません。
実際Web公開する時はサーバーサイドも含めた全てを作ってからの方がベターのため、こちらは参考くらいに聞いておくと良いと思います。
まとめ
今回の動画のボリュームはものすごく、1回目は10日間くらいかけて流し見／２回目3/14に本格的に動画を見ながら開発を始めて4/17に受講完了したので休みながらとはいえ、実に丸一カ月半月かかりました・・・。
今までのUdemy動画は元値22000円に対して大体10000円くらいと評価していましたが、この動画こそ元値9600円に対して22000円の価値があると思いました。どっちみちUdemyは割引を大体１～２週間の１回の頻度で行っているので元値で購入するといった事はありませんが、その値引き時には是非一度見てもらいたいです。
基本的にWebアプリケーションエンジニアとして実務に就く時は多くの場合、ReactやVue.jsなどのWebフレームワークもしくはサーバーサイドもある程度できないと未経験から実務につくのは難しいですが、この動画で覚えることは実務につく一つの足掛かりになるとは思います。
何かの参考になりましたら幸いです。
講師の方はその後、React動画も出しています。こちらも長丁場でオススメの為、是非チェックしてみてください
