paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開!

f:id:paiza:20160325125058j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、「JavaScript」をどのような方法で学習されているでしょうか?

お手軽な方法としては…、

・書籍やブログ記事を読む
・勉強会・セミナーへ参加する
・友人や先輩に直接聞く
・学習向けのWebサービスを利用する
・etc...

などが一般的でしょうか。

今回は、上記のリストに加えて、もう1つ有効な方法である「海外の無料動画」についてご紹介しようと思います!

「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。

なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください!

■「JavaScript」の基本を徹底的に学ぶ!

まずは、JavaScriptを「どのように書いたら良いのか?」を丁寧に教えてくれる動画のご紹介です。

LevelUp Tuts


(目次はコチラ

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

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

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

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

という点にまずは集中することです。
f:id:paiza:20160325125340j:plain

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

そして、

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

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

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

■「JavaScript」の応用技を学ぶ!

JavaScriptの基本を学んだら、次にぜひ見ておきたい動画がこれ!

LearnCode.academy


(目次はコチラ

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

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

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

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

■簡単な「デモアプリ」をひたすら作る!

ある程度、JavaScriptのプログラミングに慣れてきた段階で挑戦したい動画をご紹介しておきます。

Adam Khoury


(目次はコチラ

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

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

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

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

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

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

Canvas Bootcamp HTML5 and JavaScript


(目次はコチラ

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

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

■「Webゲーム」の開発から学ぶ!

しっかりと遊ぶことができる中規模のゲーム制作を通して、JavaScriptプログラミングを学習できる動画のご紹介!

Max Wihlborg


(目次はコチラ

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

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

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

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

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

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

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

■「JavaScript」の多彩な一面を学ぶ!

JavaScriptでプログラミングが出来るようになってきたら、ちょっと違った使い方にも触れてみましょう!

Derek Banas

f:id:paiza:20160325125836j:plain

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

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

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

「Angular.js」のチュートリアル(全4本)

「jQuery」のチュートリアル(全9本)

「MongoDB」のチュートリアル(全4本)

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

「React.js」のチュートリアル(全14本)

「Meteor」のチュートリアル(全22本)

「Gulp」のチュートリアル(全11本)

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

■ライブコーディングから学ぶ!

今までは、Web上にアーカイブされている動画ばかりでしたが、プログラミングしている画面を生放送で公開しているユーザーも海外では多数存在します。

生配信は、分かりやすい解説も無ければ、動画の編集もされてもいませんが、リアルな実情を覗き見ることができ、経験豊富なユーザーのノウハウも盗めるとして海外ではとても人気が高くなっています。

そんな背景もあって、今では専用のWebサービスも公開されています!

Livecoding.tv

f:id:paiza:20160325130249j:plain

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

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

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

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

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

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

Twitch

f:id:paiza:20160325130434j:plain

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

例えば…、

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

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

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

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介した動画の内容を見て分かるように、海外ユーザーが作っている無料動画は非常に有益なコンテンツの1つになっています。

また「動画」でコーディング手法を教えてくれることによって、コードの書き方や考え方などが理解しやすく、なおかつ体系的に学べるのは非常に便利です。

これからJavaScriptを学ぼうと考えている人や、スキルアップを検討している人はぜひこのような動画を参考にしてみてください!


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編