記事のアイキャッチ画像
2020-10-19
Category : Web制作の学習

【Udemy】Web制作のフロントエンドで実務的に役立つおすすめ動画6選

この記事をご覧になっている皆さんは、フロントエンドエンジニアを目指してUdemyでおすすめ動画を探す中で、下記のような悩みを持っていませんか?

○ WebフロントエンドエンジニアになりたくてUdemyで勉強したいと考えてるんだけど、おすすめの動画が知りたい…

○ 基礎は勉強したんだけど、Webフロントエンドエンジニアとしてもっと実務的な知識を取り入れたくてUdemyで動画を探している…

○ 実際に仕事や勉強で制作をしている中で、環境開発やコード共有など技術的に課題に感じている事があるから、Udemyで改めて学びたい…

この記事では、以下のようなより実務で活かせられる技術やノウハウを学習できるUdemy動画コースを紹介しています。

Web制作のフロントエンド業務をもっと実務レベルに底上げできるUdemy動画
① Web制作の実務に直結する技術
・コーディングをより素早く確実に!Emmet
・実務で欠かせないCSSの一歩上の書き方Sass
・Web制作に特化した楽にJavaScriptが書けるライブラリjQuery
② より高度なレベルのJavaScriptを学習したい人におすすめの動画
③ 現場でWeb開発をする際に必要になってくる技術や知識
Gitのような、現場で活きてくる技術を勉強できるおすすめ動画。

筆者の僕は、Web制作会社で現役で働きながらも、日々スキルアップのために精進しています。

僕はまだ、皆さんの目指しているようなプロ中のプロではないですが、少し先を歩む先輩として、同じ目線でアドバイスをする事はできます。

記事の途中では、ただUdemyのおすすめ動画を紹介するだけじゃなくて、知っておいた方が良い知識の種も置くようにしています。

そして、 紹介している動画の中には、僕自身が実際に購入して学習したものもある ので、きっと参考になるはず。

下記の目次から、皆さんが求めている技術やノウハウを説明している見出しに移動できますので、ぜひご参考にください!

INDEX
目次
 
1. HTML, CSSのコーディングスピードを格上げするEmmet技術
1-1. 動画紹介|HTMLやCSSをサクサク書こう! Emmet基礎講座
1-2. 動画は買わず日々制作する中でEmmetを馴染ませたい人へ
2. CSS記述をより高度に!Web制作では必須の技術SassのUdemyおすすめ動画
2-1. CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~
2-2. Sass動画コースの評価をピックアップ!
2-3. Sassを学習するために必要な環境を整える
3. JavaScriptを楽に書けるjQueryが学習できるUdemyおすすめ動画2選
3-1. 動画紹介|HTML, CSSを操作してWebページに動きをつける技術を身につけられるjQuery学習
3-2. 動画紹介|ブラウザとの通信や非同期処理など幅広いjQueryの知識を身につけられる
4. JavaScriptのメカニズムを学習する事で力を底上げできるUdemyおすすめ動画
4-1. 動画紹介|【JS】初級者から中級者になるためのJavaScriptメカニズム
4-2. JavaScriptメカニズム動画コースの評価をピックアップ!
5. チームでのWeb開発やソース共有には必須のGitが学習できるUdemyおすすめ動画
5-1. 動画紹介|Git: もう怖くないGit!チーム開発で必要なGitを完全マスター
5-2. Git完全マスター動画コースの評価をピックアップ!
6. まとめ|紹介してきたUdemy動画のリンク集

1. HTML, CSSのコーディングスピードを格上げするEmmet技術

Emmetはコーディングを短縮して記述する事ができるプラグインです。

例えば、下記のようなコードを書きたい場合でも…

たったこれだけの記述で書けてしまいます。

Emmetの良いところは、素早くコーディングできる事はもちろん、記述ミスを減らせられる点です。

閉じタグが抜けていてレイアウトが崩れたり…<a href=””>じゃなくて<a htef=””>と書いて属性名を間違えたりとか…

 そう言ったミスを短縮系の書き方で記述することで少しでも減らせられるのが魅力的! 

たった少し時間を掛けて覚えるだけで、今後の皆さんの生産性を上げられる知識なので、はじめに紹介させて頂きました。

このEmmet調べれば十分覚えられるのですが、HTML, CSSのEmmetでよく使うであろう書き方を、短時間の動画でまとめているコースもあるので、紹介しておきます!

1-1. 動画紹介|HTMLやCSSをサクサク書こう! Emmet基礎講座

▼価格
4,200円

▼動画の合計時間
約4時間

▼コース概要
HTML, CSSのコーディングでよく使われるEmmetの書き方を短時間でまとめて教えてくれる動画コース。

▼作成者
CCF アカデミー 様

この動画コースでは、実際のサイトデザインを0から作り進めながら学習することができるので、ただ知識を入れるだけでなく、記憶に残しやすいです。

評価も4.6と非常に高く、HTML, CSSの基礎を学習した人が生産性をあげるために受講するケースが多いですね。

実際の動画では、右下に講師が実際に写っていて、本当に先生に教えてもらっているような感覚になれるのも、また良いところ。

気になった方はぜひ一度チェックしてみましょう!

1-2. 動画は買わず日々制作する中でEmmetを馴染ませたい人へ

そんな人にはEmmetのチートシートをご紹介しておきます。

よく使われるEmmetや知りたい情報は自分で探さないといけないですが、「この記述、Emmetでできるんじゃないか…?」と察しがいい人は、制作する中で身につけられるはず。

Emmetチートシートを見てみる

どうせなら初めによく使われるEmmetの知識を一気に入れてしまいたい!という人は動画を確認してみましょう。

2. CSS記述をより高度に!Web制作では必須の技術SassのUdemyおすすめ動画

現場でWeb制作をする上で、Sassの理解は必須です。

Sassを理解できているかどうかは、 制作スピード・保守性/可読性/再利用性・プロジェクトへの参加しやすさ全てに関わってきます。 

Sassの魅力を箇条書きにすると下記の通りです。

Sass4つの魅力
① CSSを短縮して記述したりjsのようにプログラムを組むこともできる
② 変数や関数を使ってCSSをパーツ化して再利用可能にする
③ CSSファイルを機能別に分けることによって管理がしやすくなる

④ Sassの特別な書き方によって、自分以外のプロジェクトメンバーがみても読みやすい

僕の今関わっている案件でも、もちろんSassを使っています。上記で述べて通り、Sassを使う恩恵は大きいので理解しておくべき技術です。

 そして意外と簡単に覚えることができるんです。Sassを現場で使えるようにするために覚えることは下記の4点だけ。 

① ネスト(入れ子)の書き方
② 他ファイルのインポート方法
③ コンパイル(SassをCSSに変換するやり方)
④ 変数や関数といったプログラミング的な処理ができるという事実

基本は最初の3点を覚えてしまえば、もう現場で使えてしまえます。

④に関してはいきなり全ての関数などの機能を覚える必要はありません。必要なタイミングで少しずつ幅を広げていけば問題ないです。

とは言っても、 特にコンパイルで躓いたり、結局便利な関数を使わなかったり、スムーズに勉強できないものです。(実際僕はそうでした…) 

Sassの扱い方をプロの人から教えてもらえるなら、その後すぐに実務でSassを使うことができます。

Sass関連のUdemy動画を探し回りましたが、一番体系的に無駄なく知識を入れられるのは下記のコースでした。

2-1. CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

▼価格
10,200円

▼動画の合計時間
約5時間

▼コース概要
Sassに特化した動画コース。コンパイルの仕方からSass開発の実践まで、Sassが確実に使えるようになれる。

▼作成者
宮崎 聡史 様

評価も高く「ベストセラー」マークもついており、安定の人気コースです。

コース内容もすべて確認しましたが、5時間では十分すぎる知識を入れられるものでした。

2-2. Sass動画コースの評価をピックアップ!

うん…本当に高評価ばかりでした。ユーザー評価に対してもなかなかの割合で返答していて、すごく頼れる講師だな…と感じました。

ぜひ下記画像リンクから動画ページに移動して、コースの詳細をご覧になってみてください!

一つ残念な点はGulpによる環境構築のようですね…。

GulpとはSassをコンパイルするために使う技術なんですが、最近書き方が変わったおかげで、学びにくくなっているんですよね…。

という訳で、他の記事を紹介しつつSassの学習環境を整える方法もザッと説明しておきます。

2-3. Sassを学習するために必要な環境を整える

Sassの環境構築の2つの方法
① エディターの拡張機能を使う(VS Code, Atom)
② Gulpの現在のヴァージョンになんとか対応して環境を整える

エディターの拡張機能を使う(VS Code, Atom)

紹介している動画ではGulpを使っていますが、実は個人で学習・開発するだけならエディターの拡張機能を使ったほうがシンプルです。

Sass Compilerのような拡張機能があって、ボタン一つでコンパイル(SassをCSSに変換)できてしまいます。

VS Codeを使うなら下記の記事を見れば実装できます。

VS CodeでScssを書くための環境構築方法

動画コースで使用されているエディターAtomを使うなら下記の記事をご参考に。

【超簡単!】AtomでSass(SCSS)をコンパイルできるようにしてみた

Gulpの現在のヴァージョンになんとか対応して環境を整える

個人で学習・開発をするだけならエディターの拡張機能だけで構わないのですが…そのうちGulpやwebpackといった開発環境の技術も学ぶタイミングもきます。

その時に備えて一緒に学びたい人は、この機会にチャレンジしてみましょう!

Gulpの導入からからSassのコンパイルまでの概要が学べる記事

2020年最新のGulpの書き方と周辺知識がインプットできる記事

3. JavaScriptを楽に書けるjQueryが学習できるUdemyおすすめ動画2選

jQueryは、JavaScriptでできる事をより簡単な書き方で記述できるJavaScriptのライブラリです。

もちろん「JavaScriptでできる事」なんて沢山あります。ですので、jQueryを使ってできる事も多くあります。

これから、jQueryの学習動画を2つの目的に分けて一つずつ厳選して紹介していきます。

① HTML, CSSを操作してWebページに動きをつける技術を身につけられる動画
② ブラウザとの通信や非同期処理などもカバーできるより深いjQuery学習動画

3-1. 動画紹介|HTML, CSSを操作してWebページに動きをつける技術を身につけられるjQuery学習

▼価格
7,200円

▼動画の合計時間
約6時間

▼コース概要
jQueryを使ってHTML, CSSを操作して、動きのあるデザインに仕上げられる技術を身につけられる。
▼作成者
村守 康 様

この動画コースでは、カルーセルやアコーディオンメニュー、プルダウンメニューといったWeb制作でよく使われるパーツを実践的に学ぶ事ができます。

評価も4.3と高く、ベストセラーに認定されている安心の動画コース。

しかし評価にある通り、教材の元となるjQueryを使ったサイトが古く、使われているページが存在しないこともあるようですね…。

とは言っても、jQueryを学ぶことを目標におけば、その欠点を補えるほど、講座がわかりやすいことも伝わります。

Web制作に動きをつけるためのjQueryに特化したUdemy動画がいい…そんな方にはおすすめです!

3-2. 動画紹介|ブラウザとの通信や非同期処理など幅広いjQueryの知識を身につけられる

▼価格
10,200円

▼動画の合計時間
約9時間

▼コース概要
jQueryの基本的な書き方から、Ajax、プラグインまで幅広い知識をカバーできる動画。

▼作成者
柳井 政和 様

この動画では、講座が3段階に分けられています。

「速習jQuery」でjQueryの読み込み方や基本的な書き方を学んで、「詳細jQuery」ではもっと深い知識を学べ、最後の「実例jQuery」で実際の演習を通してjQueryに慣れることができます。

しかし、「実例jQuery」で作れるのは電卓といったWebアプリケーションで、Webページ制作はできません。

評価も基本はいいですが、単発の知識を入れられるだけ…という意見もあるようですね。

○ jQueryを使う目的が明確になっていて、「コース内容」に学びたいセクションがある

○ 今後jQueryを使う場面が多いから、困った時の手助けツールとしてこの動画を購入したい

上記のような目的が明確な人は、一度ご覧になってみてください。

4. JavaScriptのメカニズムを学習する事で力を底上げできるUdemyおすすめ動画

皆さんはJavaScriptをどのくらい理解できていますか?もちろん、ご自身が創りたいもの、関わっているプロジェクトで必要な知識だけを理解できて入れば問題はありません。

しかし、フロントエンドを扱うならJavaScriptをより深く理解することで、制作の質が上がってきます。

JavaScriptを勉強したばかりの人に問いかけたい
① letとconstの違いを説明できるか
② 同期処理と非同期処理の仕組みを理解できているか
③ JavaScriptのスコープを理解できているか

「エラーが起きて、Googleで検索して、なかなか参考になるものが見つからなくて、誰かに聞いたりして…」
こんな事が頻繁に起きているなら、はじめにJavaScriptの仕組みを理解してみると、快適にコーディングができるはず。

Googleで検索して学んだ方が、調べる力が身につくと言いますが、躓かないでプログラミングできるに越した事はありません。

これから紹介する動画を聞いていると、 JavaScriptを理解できるだけじゃなくて少しずつプログラマーの考え方が身についている肌感があります。 

ローディング画面を作成したいならこの処理群は同期処理で扱わないといけない…
変数でエラーが起きている…スコープを間違えているんじゃないか…

下記の動画では、何故そうなっているかのメカニズムを教えてくれるので、非常に勉強になります。

4-1. 動画紹介|【JS】初級者から中級者になるためのJavaScriptメカニズム

▼価格
8,400円

▼動画の合計時間
約20時間

▼コース概要
JavaScriptを扱っている人にぜひ理解してほしいメカニズム。それらが詰まった喋る辞書さながらの動画コース。

▼作成者
【Code Mafia】 WEBプログラミング学習 様

安い…安すぎます。今後JavaScript開発の質を底上げしてくれる力を持っているのに10,000円以内で買えてしまいます。

僕はもちろん購入していて、少しずつ0から学習し始めているのと同時に、困った時の辞書として活用しています。

Udemyの動画で評価が4.6なんてとても高い方ですよ。実際にその評価を見てみましょう。

4-2. JavaScriptメカニズム動画コースの評価をピックアップ!

評価の大元としては、JavaScriptのメカニズムが理解できるから「わからんくて躓く…」という事態を防げる。といった具合でしょうか。

適切な判断材料を提供したいので、低評価コメントも載せておきました。

テストコードを試すだけに終わっているのが残念…という事ですが、このボリュームの知識を実践で紹介するには時間が足りないのでしょう。

JavaScriptのメカニズムの知識を提供することに時間を振っている動画なので、僕としては問題ないかな…と考えてます。

 一気に全部見ようとしないで辞書のように利用すると、この動画を無駄なく使えますよ。 

下記画像のように、動画を購入したあと、コース内容の全てのプルダウンを開いてから検索すると、知りたい内容だけ学習できます。

この動画は今回の記事でも特におすすめなので、是非ご検討ください!

5. チームでのWeb開発やソース共有には必須のGitが学習できるUdemyおすすめ動画

○ マージするとコンフリクトが起きそうで怖い…

○ エラーが起きたらどうしたらいいか分からない…

○ コマンドがいろいろあって分かりづらい…
こんな風にGitが分かりづらく感じたり、怖く感じたりすることがあると思います。

何でそういう風に感じるか考えたら、Gitが裏側で何をしているのか、実際コマンドを実行した時に何が起きているのか、分かっていなかったからです。

この動画コースでは、Gitの仕組みの部分を図を用いてしっかりと理解していきます。

その上でハンズオンで実践していきます。理解した上で実践することで開発現場で困ることのない確かな力を最短で身につけていきます。
当動画コースの「セクション1:GitとGithubってなに?1.はじめに、コースについて」より

上記は、これから紹介する動画の冒頭のプレビュー動画で講師が伝えていることです。

僕はこのセリフを聞いて終始頷いていました。やっぱり何となくでしか理解できていなかったんですよ…Gitについて。

そんなGitをぎゅっと凝縮した5時間50分で学習できるおすすめのUdemy動画コースがあるので、ご紹介します。

5-1. 動画紹介|Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

▼価格
10,800円

▼動画の合計時間
約6時間

▼コース概要
Gitに抵抗を感じている人に対しても丁寧に、かつ無駄なく解説してくれる動画。ハンズオン形式で教えてくれるので現場ですぐに使える即戦力があります。

▼作成者
山浦 清透 様

この動画で学習できる事は、冒頭でお伝えした通りです。

山浦 清透 様の冒頭の動画紹介、本当に分かりやすいです…実際の講座動画でも終始伝え方でお上手で、大変聞きやすかったです。

まずは、 プレビューで閲覧できる「はじめに、コースについて(視聴時間2:46)」という動画を見る事をおすすめします。 

5-2. Git完全マスター動画コースの評価をピックアップ!

良い評価は、見れば沢山でてくるので、中立的なコメントも取り上げておきました。

「仕事で使う場合は、さらに複雑ですが、」とあるように、動画コースで学習できるのは、基礎の範囲です。

またこちらが入力する間にも動画は進んでいて、少しスピーディな印象もあるようですね。

僕は無理なく学習できるちょうど良いスピードに感じましたが、もし早く感じる方は、動画の再生スピードを下げると良いですよ。

以上のように評価もよくベストセラー認定もされている良質動画なので、この機会にGitの何となく理解から脱却しましょう!

6. まとめ|紹介してきたUdemy動画のリンク集

これまで合計6つのUdemy動画コースを紹介してきましたが、どれも比較検討して選んだものです。

それらの中からご自身のスキルアップに役立つ動画があれば、ぜひ一度プレビュー動画を見たり詳細を確認してみてください。

最後に、紹介してきたリンク集を並べておきます。またページ下部の「INDEX」ボタンを押せば目次に移動できるので、見返したい方はご活用ください。

それでは、皆さんにとって良い判断材料になれれば幸いです!

Pick Up News

CodeCampはどんなプログラミングスクール?評判や口コミなどを解説!

初心者でも安心!Webコーディングが勉強できる学習サイト3選

INDEX