【Udemy】HTML/CSS/JavaScript等でWeb制作に役立つおすすめ講座6選

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

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

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

冨岡司のAboutページへ移動する

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

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

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

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

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

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

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

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

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

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

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

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

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

1-1. 講座紹介｜HTMLやCSSをサクサク書こう！ Emmet基礎講座

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

エディターの拡張機能を使う（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おすすめ講座２選

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5-1. 講座紹介｜Git： もう怖くないGit！チーム開発で必要なGitを完全マスター

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pick Up News

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

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