どうも、まさとらん（@0310lan）です！
今回は、JavaScriptをベースにしたWeb開発手法のトレンドを無料で学習できる海外のYouTube動画コースをご紹介します！
フロントエンドからバックエンドまでクオリティの高い動画コースを厳選しており、GitやFirebaseなどの予備知識も含めて多彩なコースをまとめました。
英語だから…と言って見ないのは非常にもったいないレベルの動画ばかりなので、ソースコードの動きをよく見ながらぜひ挑戦してみてください。
なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください！
■Web開発の基礎を学ぶ
まずはWeb開発を始める前に抑えておきたい基本的な知識を学習できる動画コースから見ていきましょう！
主に、HTML / CSS / JavaScriptの3点を重点的に学べるもの厳選してご紹介します。
【 HTML＆CSSの基本コース 】
（目次はこちら）
Webの基本であるHTML＆CSSを手を動かしながら学習できるスタイルの動画コースです。
基本的な文法から始まり、実際によく使うWebデザインをゼロから組み立てていくのですが、その過程を学ぶことで実践的なHTMLの記述やCSSのテクニックを学べるようになっているのが特徴です。
このコースは全45本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- HTML＆CSSの基本的な使い方
- フレックスボックスの基礎
- グリッドレイアウト
- マテリアルデザイン
- レスポンシブレイアウト
- ランディングページの作り方
- ログインフォームの作り方
- メニューのレイアウト
- Bootstrapの基礎
- パララックス効果の基礎
- CSSフレームワークの使い方
- Webアニメーション
など
この動画で解説されているコードの書き方をマスターすれば、基本的なWebサイトは構築できるようになります。
【 JavaScriptの基本コース 】
（目次はこちら）
素のJavaScriptを実戦形式で学習できる動画コースで、基本文法からWeb開発でよく使う技術的な部分まで幅広くまとめています。
初心者の方でも十分に開発できる小さなミニアプリをいくつか作ります。JavaScriptの特徴や概念を楽しみながら学ぶことができるように工夫されているので、少し難しい技術的な部分も実際に作っていきなら学べるようになっています。
このコースは全43本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- DOM操作の基本
- ブックリストアプリの作り方
- リストのフィルター機能
- 単位換算アプリ
- 非同期処理（Promise, async&await）
- Fetch API
- PDFビューアー
- オートコンプリート機能
- スライドショー＆ギャラリー
- タイピングゲーム
- パスワードジェネレータ
など
また、ゼロからJavaScriptの基本構文だけを学習したい方は以下のコースがオススメです。
■フレームワークの基本を学ぶ
この章ではWeb開発を効率よく進めるためのフレームワークについて学習できる動画コースをご紹介します。
Web業界としては定番のReact, Vue, Angularを中心に、分かりやすい動画を厳選しましたので参考にしてみてください。
【 React&Reduxの基本コース 】
（目次はこちら）
Reactによるビューの構築からReduxを活用した状態管理を作るまでをていねいに解説した動画コースです。
慣れない概念がいくつか登場するので最初は分かりづらいかもしれませんが、動画内ではスライド資料などを駆使して直感的に理解できるように構成されているのも特徴的です。
このコースは全44本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- 導入の方法
- React&Reduxの概念
- React Dev Toolsの使い方
- コンポーネントについて
- イベント処理
- state&ライフサイクルの基本
- React＆Reduxの連携
- フォームの作り方
- SPAの作り方
- TODOアプリの作り方
- サーバとの連携方法
など
【 Vue.jsの基本コース 】
（目次はこちら）
Reactよりも手軽に使えて学習コストが低めのフレームワークとして人気のVue.jsを学習できるコースになります。
基本となるディレクティブの使い方からサーバとの通信手法までを基本的なテクニックを使いながら学習できるのが特徴です。Vue.jsは毎年のように進化を続けていますが、基本となる部分はそれほど変わらないので最初に学ぶ動画としては参考になるでしょう。
このコースは全9本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- 導入の方法
- ディレクティブの基本
- コンポーネントについて
- Routerの基本
- Vue CLIの基礎
- サーバとの連携方法
など
また、1時間ほどの動画で基本から応用までを一気に学習できる動画コースもあるので時間がない方はチェックしてみてください。
＜参考リンク＞
【 Angularの基本コース 】
（目次はこちら）
Web開発に必要なものが全部入りのフレームワークとして知られているAngularについて学習できる動画コースです。
Angularについては体系的にまとまったリソースがまだまだ少ないので、この動画コースでゼロから学べるのは魅力的です。初心者の方は導入やセットアップの段階で挫けそうになりますが、そのあたりも含めてスライド資料で学べるように工夫されています。
このコースは全59本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- 導入の方法
- 新機能について
- コンポーネントについて
- データバインディング
- ディレクティブ
- ルーティング
- フォームの作り方
- サーバとの連携方法
など
また、AngularはTypeScriptをベースにしているので、最初は以下のようなTypeScriptの基本を学べるコースをチェックしてからのほうがよいでしょう。
＜参考リンク＞
■サーバサイドについて学ぶ
本章では、サーバ側で処理をおこなうNode.jsを中心にフルスタックなWeb開発を学びたい人、クラウドサービスの活用、ITセキュリティなどを分かりやすく学習できる動画を厳選してみたので参考にしてみてください。
【 Node.jsの基本コース 】
（目次はこちら）
JavaScriptをサーバ側でも利用できるNode.jsを使ったプログラミング技術を学習できる動画コースになります。
Node.jsの基礎的な部分を学習するだけでなく、さまざまなミニプロジェクトや機能を構築していくことで実践的な使い方を身につけられるのが特徴です。開発する機能も実際にWeb開発でよく使われるものばかりなので非常に便利です。
このコースは全26本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- Node.jsの基礎構文、概念
- 認証機能の作り方
- スクレイピング技術
- 画像アップローダーの作り方
- 決済機能
- メール送信、通知機能
- reCAPTCHAの実装
- RESTful APIの構築
- URL短縮サービス機能
など
また、Node.jsの基本的な構文だけをおさらいしたい人や、完全にゼロから学びたい人に最適な動画コースもあります。
【 Git＆GitHub 】
（目次はこちら）
プログラムのバージョン管理ツールとして利用されているGit、およびソースコードのホスティングサービスであるGitHubを一緒に学習できる動画コースです。
Gitの基本的な使い方からGitHubを連携する手法などを簡潔にまとめており、実際に手を動かしながら各種コマンドなどを勉強できるのが特徴です。最終的にGitを活用したWeb開発ができるようになります。
このコースは全12本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- 導入の方法
- Gitの概念
- Gitの各種コマンド
- GitHubの導入
- リポジトリについて
- マージ、フォークなどの使い方
など
【 Firebaseの基本コース 】
（目次はこちら）
Googleが提供するバックエンドを手軽に構築できるサービスとして知られているFirebaseの基本的な使い方を学習できる動画コースです。
ホスティング、データベース、認証機能、アナリティクスなどさまざまな機能を使いこなせるように基礎知識をていねいに解説してくれます。また開発者なら知っておくべきノウハウや便利なTipsなども収録されています。
このコースは全12本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- Firebaseの導入、使い方
- Rulesの構築方法
- ホスティング機能の基本
- データフィルタリング
- プッシュ通知機能の使い方
- ユーザー認証機能作り方
- アナリティクスの基本
- 100個の技術的Tips
など
また、インフラの構築を自分でやってみたい人にはAWSやDockerなどの学習コースもあるのでぜひ参考にしてみてください！
＜参考リンク＞
【 ITセキュリティの基本コース 】
（目次はこちら）
少し高度な内容になりますが、Web開発をするうえで避けては通れないのがITセキュリティについての知識でしょう。
Webにはさまざまな脆弱性が存在しており、その内容は日々進化しているわけですが基本的なセキュリティ知識をざっくり確認するのにちょうどよい動画になっています。ほぼすべての動画がセキュリティ関連のイベント登壇を収録したもので、実際にプロのエンジニアがどのようにハッキングするのかを実践しながら説明してくれるのが特徴です。
このコースは全34本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- サーバレスアプリのハック手法
- 脆弱性のサンプル
- 各種ハッキング攻撃の特徴
- Node.jsアプリのハック手法
- HTTPヘッダーのメタデータ
- PDFの危険性
- Web攻撃の最新トレンド
■さまざまな成果物を作ってみよう！
この章では、Web開発の知識を活用してさまざまなミニアプリやWebアプリなどの成果物を作れる動画コースをご紹介します。開発したあとは、自分の作品としていろいろカスタマイズしてポートフォリオのように公開してもおもしろいでしょう。
【 JavaScriptによるミニプロジェクト集 】
（目次はこちら）
素のJavaScriptを使ってユニークなツールを開発するためのチュートリアル動画をまとめたコースになっています。
イメージギャラリー、ドラムキット、タスク管理など、さまざまなジャンルにおけるミニプロジェクトを楽しみながら開発できるように構成されています。もちろん、作ったツールは自分で改造しながら便利ツールとして活用していけるでしょう。
このコースは全30本の動画で構成されており、学べる内容としては以下のとおりです。
＜主な学習内容＞
- ドラムキット
- アナログ時計
- イメージギャラリー
- 検索ボックス
- タスク管理
- HTML5動画プレイヤー
- スピーチシンセ
- カウントダウンタイマー
- モグラ叩きゲーム
【 Ben Awadチャンネル 】
ソフトウェアエンジニアがさまざまなプロジェクトの開発手法を動画で提供している個人チャンネルです。
おもしろいのは有名なWebサービスのクローンアプリを開発するチュートリアル動画をいくつか提供している点です。たとえば、GoogleドキュメントのようなエディタやAribnbのようなWebサービスをどのようにしたら開発できるのかを解説しています。
＜主なクローンアプリ＞
他にも、TODOアプリ、計算機、ネットショップ、Androidアプリなどの開発手法が解説されているので、ご興味ある方はぜひチェックしてみてください！
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は、YouTubeによるWeb開発手法の勉強ができる動画コースを厳選してご紹介しました。
YouTubeには今回ご紹介できなかった良質なコースが他にも豊富に公開されています。Webデザインの学習、ゲーム開発、IoT開発など、いずれの動画も有料コンテンツとして提供されていてもおかしくないクオリティです。
新しい技術の習得や自分のスキルアップを考えている方は、本記事を参考にぜひ動画を視聴してみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
