どうも、まさとらん（@0310lan）です。
みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？
お手軽な方法としては…、
・書籍やブログ記事を読む
・勉強会・セミナーへ参加する
・友人や先輩に直接聞く
・学習向けのWebサービスを利用する
・etc...
などが一般的でしょうか。
今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！
「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。
なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！
■「JavaScript」の基本を徹底的に学ぶ！
まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご紹介です。
【LevelUp Tuts】
（目次はコチラ）
この動画は、Web開発における多彩なチュートリアル動画を制作している「Level Up Tutorials」というサービスが無料で公開している動画で、非常に丁寧なコードを書きながら解説してくれる点に定評があります。
全14本(1本が10分未満)の動画構成で、お馴染みの「Hello World」の表示から、「Scriptタグ」の配置方法、コメントの書き方、変数の使い方、制御構文、簡単な関数の作り方を学習することができます。
ちなみに、今回ご紹介する動画すべてに言えることですが、海外動画を使った学習の大事なポイントは、英語を理解しようとするのではなく、
「コードがどのように書かれて、どんな結果が表示されるのか？」
という点にまずは集中することです。
ここが動画のメリットでもあるわけですが、最初はひたすら動画のコードがどのように変化するのかをじっくり見ておきましょう。
そして、
「こう書いたら、こういう結果になるのか…」
というのが分かったら、動画を止めて自分で同じコードを書いて実行します。(CodePenなどを使うと便利です)
このような作業を全14本の動画すべてに繰り返すことで、あっという間に簡単なJavaScriptコードが書けるようになるでしょう。
■「JavaScript」の応用技を学ぶ！
JavaScriptの基本を学んだら、次にぜひ見ておきたい動画がこれ！
【LearnCode.academy】
（目次はコチラ）
海外の個人ユーザーが制作しているチュートリアル動画ですが、幅広いジャンルを全26本の動画にまとめてくれています。(1本5〜20分程度)
ざっくりとした基本から始まり、Web開発に欠かせないDOM操作の扱いなどを、簡単なデモを作りながら学ぶことができます。
基本的な構文ばかり学習していると退屈ですが、DOM操作が出来るようになってくるとWebページが直接変化するので楽しくなってくると思います。
また、jQueryの基本〜応用も詳しく紹介しており、少し中級者向けの「Ajax」「スコープ」「クロージャ」「モジュール化」なども解説しているので、とても充実したチュートリアル動画と言えるでしょう。
■簡単な「デモアプリ」をひたすら作る！
ある程度、JavaScriptのプログラミングに慣れてきた段階で挑戦したい動画をご紹介しておきます。
【Adam Khoury】
（目次はコチラ）
個人ユーザーが作っている学習動画とは思えないクオリティと、圧倒的なコンテンツ量が魅力で、全106本の動画を通してJavaScriptで「何かを作る」という考え方が学べる動画になっているのが特徴的です。
動画の主な内容は、とにかく多彩なジャンルのサンプルデモをJavaScriptでプログラミングしていくというモノ。
この動画で作るサンプルデモとしては、以下のようなモノがあります。
・カスタムタイマー
・localStorageを利用したアプリ
・ローディング画面のサンプル
・パララックスエフェクト
・記憶ゲーム
・カスタム計算機
・時計
・フェードアニメーション
・シンタックスハイライター
・スムーズスクロール
・jsonを使ったフォトギャラリー
・カスタムビデオプレイヤー
・サウンドエフェクト
・etc...
上記以外にもまだまだサンプルがあり、全106本の動画を終える頃には、自分が作りたい簡単なWebアプリを「どのように作ったら良いか」ということが理解できていると思います。
また、同じユーザによる動画で「Canvas」について学習できるチュートリアルもあります。
【Canvas Bootcamp HTML5 and JavaScript】
（目次はコチラ）
Web上で自由なグラフィック描画が行えるようになった「Canvas」について、基本から応用技まで全21本の動画で体系的に学習できるようになっています。
「Canvas」をマスターすることで、Webゲームを作ったりシンプルなインタラクションを表現できるなど、強力な武器を手に入れることが出来るのでぜひ挑戦しておきたいところです。
■「Webゲーム」の開発から学ぶ！
しっかりと遊ぶことができる中規模のゲーム制作を通して、JavaScriptプログラミングを学習できる動画のご紹介！
【Max Wihlborg】
（目次はコチラ）
こちらのユーザーが制作する動画は、JavaScriptライブラリなどを一切使わずに、純粋なJavaScriptだけでゲームを制作するノウハウを惜しみなく公開しているのが特徴です。
ゲームをプログラミングすることで、グラフィックの描画手法、負荷を軽減する最適化の方法、効率の良い関数の書き方、画面遷移…など、あらゆる局面で役立つスキルを学べるようになるのが魅力です。
開発するWebゲームは、いずれも人気の高いモノばかりです。
・インベーダーゲーム
・CPU対戦可能なPongゲーム
・シューティング
・スネーク
・テトリス
・Flappy Bird
・etc…
ゼロの状態からプログラミングがスタートし、適度に解説も入るので非常に理解しやすい構成になっています。
１つずつの動画が30〜50分くらいありますが、まずはどんなコーディングをしているのかを最後まで視聴し、２回目以降で実際に自分でもプログラミングしながら学んでいくのが良いでしょう。
途中の「ゲームロジック」に関しては、その部分だけを抜き出して自分なりにカスタマイズしながら仕組みを確認すると理解しやすいでしょう。
■「JavaScript」の多彩な一面を学ぶ！
JavaScripｔでプログラミングが出来るようになってきたら、ちょっと違った使い方にも触れてみましょう！
【Derek Banas】
こちらのユーザーが作る動画は、とにかくジャンルが豊富であらゆるチュートリアルをカバーしているのが特徴です。
基本的な「JavaScript学習動画」もあるのですが、他にもこんなコンテンツが公開されています！
また、上記以外にも他のユーザーによる学習動画もあります！
これらの中でも、特にサーバーサイドで利用する「Node.js」や、Webアプリを開発する際に便利なフレームワークなどは一度トライしておくと、本格的なWebアプリの構築を強力に助けてくれるようになりますよ。
■ライブコーディングから学ぶ！
今までは、Web上にアーカイブされている動画ばかりでしたが、プログラミングしている画面を生放送で公開しているユーザーも海外では多数存在します。
生配信は、分かりやすい解説も無ければ、動画の編集もされてもいませんが、リアルな実情を覗き見ることができ、経験豊富なユーザーのノウハウも盗めるとして海外ではとても人気が高くなっています。
そんな背景もあって、今では専用のWebサービスも公開されています！
【Livecoding.tv】
このサービスは、プログラミングの生配信だけに特化しているのが特徴で、JavaScriptを含めて多彩な言語のコーディング風景をリアルタイムに閲覧することが出来るようになっています。
このような生配信を閲覧することによって、自分とはまったく違うコーディング手法や、素早くプログラムを組み立てる技術を発見したり、どのようなミスをしやすいのかを探ったり…など、他では得られない貴重な体験ができます。
特に、独学者には有効な方法で、自分が今まで正しいと思い込んでいた事実とまったく違う発見が多々あるので、ぜひ一度は閲覧することをオススメします。
「Livecoding.tv」では、「生配信」「アーカイブ」「プレイリスト」の３種類が選択できるようになっているので便利です。
特に「プレイリスト」はオススメで、様々なアーカイブの中から類似している動画をまとめて閲覧することが出来るようになります。
また、ゲームなどのライブストリーミング配信で知られる「Twitch」は、ゲームのプレイ動画ばかりと思われがちですが、実はプログラミングの様子を長時間に渡り生配信するユーザーも非常に多いことで知られています。
■paizaラーニングについて
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！
■まとめ
今回ご紹介した動画の内容を見て分かるように、海外ユーザーが作っている無料動画は非常に有益なコンテンツの１つになっています。
また「動画」でコーディング手法を教えてくれることによって、コードの書き方や考え方などが理解しやすく、なおかつ体系的に学べるのは非常に便利です。
これからJavaScriptを学ぼうと考えている人や、スキルアップを検討している人はぜひこのような動画を参考にしてみてください！
