【LevelUp Tuts】

（目次はコチラ）

この動画は、Web開発における多彩なチュートリアル動画を制作している「Level Up Tutorials」というサービスが無料で公開している動画で、非常に丁寧なコードを書きながら解説してくれる点に定評があります。

全14本(1本が10分未満)の動画構成で、お馴染みの「Hello World」の表示から、「Scriptタグ」の配置方法、コメントの書き方、変数の使い方、制御構文、簡単な関数の作り方を学習することができます。

ちなみに、今回ご紹介する動画すべてに言えることですが、海外動画を使った学習の大事なポイントは、英語を理解しようとするのではなく、

「コードがどのように書かれて、どんな結果が表示されるのか？」

という点にまずは集中することです。

ここが動画のメリットでもあるわけですが、最初はひたすら動画のコードがどのように変化するのかをじっくり見ておきましょう。

そして、

「こう書いたら、こういう結果になるのか…」

というのが分かったら、動画を止めて自分で同じコードを書いて実行します。(CodePenなどを使うと便利です)

このような作業を全14本の動画すべてに繰り返すことで、あっという間に簡単なJavaScriptコードが書けるようになるでしょう。

【LearnCode.academy】

（目次はコチラ）

海外の個人ユーザーが制作しているチュートリアル動画ですが、幅広いジャンルを全26本の動画にまとめてくれています。(1本5〜20分程度)

ざっくりとした基本から始まり、Web開発に欠かせないDOM操作の扱いなどを、簡単なデモを作りながら学ぶことができます。

基本的な構文ばかり学習していると退屈ですが、DOM操作が出来るようになってくるとWebページが直接変化するので楽しくなってくると思います。

また、jQueryの基本〜応用も詳しく紹介しており、少し中級者向けの「Ajax」「スコープ」「クロージャ」「モジュール化」なども解説しているので、とても充実したチュートリアル動画と言えるでしょう。

【Adam Khoury】

（目次はコチラ）

個人ユーザーが作っている学習動画とは思えないクオリティと、圧倒的なコンテンツ量が魅力で、全106本の動画を通してJavaScriptで「何かを作る」という考え方が学べる動画になっているのが特徴的です。

動画の主な内容は、とにかく多彩なジャンルのサンプルデモをJavaScriptでプログラミングしていくというモノ。

この動画で作るサンプルデモとしては、以下のようなモノがあります。

・カスタムタイマー
・localStorageを利用したアプリ
・ローディング画面のサンプル
・パララックスエフェクト
・記憶ゲーム
・カスタム計算機
・時計
・フェードアニメーション
・シンタックスハイライター
・スムーズスクロール
・jsonを使ったフォトギャラリー
・カスタムビデオプレイヤー
・サウンドエフェクト
・etc...

上記以外にもまだまだサンプルがあり、全106本の動画を終える頃には、自分が作りたい簡単なWebアプリを「どのように作ったら良いか」ということが理解できていると思います。

また、同じユーザによる動画で「Canvas」について学習できるチュートリアルもあります。

【Canvas Bootcamp HTML5 and JavaScript】

（目次はコチラ）

Web上で自由なグラフィック描画が行えるようになった「Canvas」について、基本から応用技まで全21本の動画で体系的に学習できるようになっています。

「Canvas」をマスターすることで、Webゲームを作ったりシンプルなインタラクションを表現できるなど、強力な武器を手に入れることが出来るのでぜひ挑戦しておきたいところです。

【Max Wihlborg】

（目次はコチラ）

こちらのユーザーが制作する動画は、JavaScriptライブラリなどを一切使わずに、純粋なJavaScriptだけでゲームを制作するノウハウを惜しみなく公開しているのが特徴です。

ゲームをプログラミングすることで、グラフィックの描画手法、負荷を軽減する最適化の方法、効率の良い関数の書き方、画面遷移…など、あらゆる局面で役立つスキルを学べるようになるのが魅力です。

開発するWebゲームは、いずれも人気の高いモノばかりです。

・インベーダーゲーム
・CPU対戦可能なPongゲーム
・シューティング
・スネーク
・テトリス
・Flappy Bird
・etc…

ゼロの状態からプログラミングがスタートし、適度に解説も入るので非常に理解しやすい構成になっています。

１つずつの動画が30〜50分くらいありますが、まずはどんなコーディングをしているのかを最後まで視聴し、２回目以降で実際に自分でもプログラミングしながら学んでいくのが良いでしょう。

途中の「ゲームロジック」に関しては、その部分だけを抜き出して自分なりにカスタマイズしながら仕組みを確認すると理解しやすいでしょう。

【Derek Banas】

こちらのユーザーが作る動画は、とにかくジャンルが豊富であらゆるチュートリアルをカバーしているのが特徴です。

基本的な「JavaScript学習動画」もあるのですが、他にもこんなコンテンツが公開されています！

・「Node.js」のチュートリアル(全12本)

・「Angular.js」のチュートリアル（全4本）

・「jQuery」のチュートリアル（全9本）

・「MongoDB」のチュートリアル（全4本）

また、上記以外にも他のユーザーによる学習動画もあります！

・「React.js」のチュートリアル（全14本）

・「Meteor」のチュートリアル（全22本）

・「Gulp」のチュートリアル（全11本）

これらの中でも、特にサーバーサイドで利用する「Node.js」や、Webアプリを開発する際に便利なフレームワークなどは一度トライしておくと、本格的なWebアプリの構築を強力に助けてくれるようになりますよ。

【Livecoding.tv】

このサービスは、プログラミングの生配信だけに特化しているのが特徴で、JavaScriptを含めて多彩な言語のコーディング風景をリアルタイムに閲覧することが出来るようになっています。

このような生配信を閲覧することによって、自分とはまったく違うコーディング手法や、素早くプログラムを組み立てる技術を発見したり、どのようなミスをしやすいのかを探ったり…など、他では得られない貴重な体験ができます。

特に、独学者には有効な方法で、自分が今まで正しいと思い込んでいた事実とまったく違う発見が多々あるので、ぜひ一度は閲覧することをオススメします。

「Livecoding.tv」では、「生配信」「アーカイブ」「プレイリスト」の３種類が選択できるようになっているので便利です。

特に「プレイリスト」はオススメで、様々なアーカイブの中から類似している動画をまとめて閲覧することが出来るようになります。

また、ゲームなどのライブストリーミング配信で知られる「Twitch」は、ゲームのプレイ動画ばかりと思われがちですが、実はプログラミングの様子を長時間に渡り生配信するユーザーも非常に多いことで知られています。

【Twitch】

「Twitch」も、生配信を丸ごとアーカイブしているので、後から何度でも見直すことが可能です。

例えば…、

・「Twitchステータス」を取得するサンプルデモ制作風景

・シンプルなアクションゲームのデモ制作風景

などは、経験豊富なユーザーが配信しているので、参考になる部分も多いと思います。