paiza開発日誌

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

これさえ見れば脱・JavaScript初心者!海外のYouTube動画を一挙大公開

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

今回は、基本的なJavaScriptプログラミングが出来るようになった人向けに、さらなるステップアップを目指せる「YouTubeチャンネル」を厳選してまとめてみました!

海外のプログラミング系YouTube動画は、有料でもおかしくない「質」の高さと豊富なコンテンツ量に魅力があり、確実にレベルアップが期待できるのでぜひ参考にしてみてください。

JavaScriptの勘所を勉強できるYouTubeチャンネル!

Fun Fun Function

f:id:paiza:20171011142327j:plain
プログラミング動画とは思えない超ハイテンションなノリで、JavaScriptを学ぶうえで欠かせない勘所を分かりやすく教えてくれるのがコチラのチャンネル!

Spotify」の開発にも携わっていたというプログラマーの彼は、得意のJavaScript言語を分かりやすく伝えることに情熱を注いでおり、それは動画を見れば物凄く伝わってきます。


例えば、以下の動画は「オブジェクト」の構造や作り方を全7回にわたり徹底解説してくれます!


(全7回の目次はコチラ


動画の前半にプロローグとして概要の説明があり、そのあとに実際のプログラミング手法を学習できるようになっています。
f:id:paiza:20171011142400j:plain
スマホからでもコードが見やすいように大きく拡大されており、必要最小限のシンプルなサンプル例で解説してくれるので理解しやすいのが特徴です。

このシリーズを見れば、オブジェクトにおける「this」「Prototype」「Class」など重要なポイントをスッキリと勉強できるはず!


他にも、「ES2015(ES6)」の新機能を学習できるシリーズや、関数型プログラミングとしてのJavaScript活用法など面白い動画が頻繁にアップされているのでぜひチェックしてみてください!


<参考>

■フロントエンド全般を勉強できるYouTubeチャンネル!

The Net Ninja

f:id:paiza:20171011142507j:plain
「Ninja(忍者)」というネーミングが印象的なこちらのチャンネルは、良質なチュートリアル動画を定期的に公開していることで知られています。

WebサイトやWebアプリなどを今すぐ自分で作ってみたい!…という人には最適な動画ばかりで、人気のJavaScriptフレームワークも丁寧に解説しています。


例えば、以下の動画は「Vue.js」の基本から応用までを全44回の超ボリュームで解説しています!


(全44回の目次はコチラ

最初に「Vue.jsとは?」から解説が始まり、実際のコーディング手法や機能の解説・イベント処理・コンポーネント・HTTPリクエスト処理・Mixin・ルーティング・Firebase連携…などなど。

このシリーズを視聴するだけで、「Vue.js」を使った独自のWebアプリを作ることができるようになるでしょう。


他にも、React・Angular・NodeJS・MongoDB…など、実践的なチュートリアル動画が定期的に公開されています!
f:id:paiza:20171011142634j:plain
以下に、ほんの一部ですが動画リンクを掲載しておきますので、ぜひ参考にしてみてください!


<参考>

■実践的なJavaScriptを勉強できるYouTubeチャンネル!

Wes Bos

f:id:paiza:20171011143747j:plain
彼が作成するプログラミング系の動画コースはとても人気があり、特にYouTubeでも公開されている「JavaScript30」は必見です!

ライブラリに頼らず標準のJavaScriptで30個の小さなWebアプリを作成する動画で、これを見れば実践的なプログラミングスキルを身につけられます。


(目次はコチラ


このコースで作成するミニアプリはとても多彩で面白いものばかり!
f:id:paiza:20171011143815j:plain
例えば、次のようなミニアプリを作成しながら勉強できます!

  • ドラムキット
  • アナログ時計
  • イメージギャラリー
  • 検索ボックス
  • タスク管理
  • スケッチアプリ
  • HTML5動画プレイヤー
  • スピーチシンセ

…など、いずれもユニークで、作っていてワクワクするので、プログラミングが楽しくなること間違いなし!

ちなみに、YouTubeで公開されているのは現時点で24回まで。すべて視聴したい場合は公式サイトから無料で閲覧できるので覚えておきましょう。

彼のチャンネルには、他にも「Redux」の基本チュートリアル(全20回)などもあるので、ご興味のある方は要チェックです!


<参考>

■Webの最新技術を学べるYouTubeチャンネル!

Udacity

f:id:paiza:20171011143944j:plain
こちらは、日本でも利用者が増えてきたオンライン学習プラットフォーム「Udacity」が公開しているYouTubeチャンネルです。

どちらかと言えば公式サイトの方が有名ですが、YouTubeチャンネルに公開されているのは無料で視聴できるので意外と人気があります。


JavaScript系で個人的にオススメなのは、Googleのエンジニアが直接教えてくれるコースで、例えば以下の動画は全210回というボリュームで「HTML5ゲーム」の開発手法を学べます!


(全210回の目次はコチラ

内容はかなり本格的な構成になっており、ゲームを高速に動作させるための画像の扱い方やレンダリング手法、ステージの構築法、読み込みの高速化、アニメーション手法、イベント処理の効率化、敵キャラの構築、物理演算、サウンド構築…などなど。

独学で実践的なWebゲームの開発手法を学習したい人にはピッタリのコースでしょう。


また、うれしいことに日本語字幕が付いている動画がほとんどなので、英語が苦手な人でも安心して学習できます。
f:id:paiza:20171011144033j:plain
他にも、Googleが提供しているオススメのコースとしては次のようなモノがあるので、ぜひ参考にしてみてください!


<参考>

■「p5.js」を学習できるYouTubeチャンネル!

The Coding Train

f:id:paiza:20171011144201j:plain
Processingのような描画に特化したプログラミングをJavaScriptでも可能にした「p5.js」ライブラリの多彩なチュートリアル動画を公開しているのがコチラ!

見ているだけで楽しくなる陽気なオジサンが、軽快な口調でコードの書き方やテクニックを惜しみなく解説してくれるのが特徴的です。


例えば、以下の動画は全32回の動画で「p5.js」の基本的な使い方をマスターできるように構成されています!


(全32回の目次はコチラ

グラフィックの描画やアニメーションなどの基本を学習できるのですが、JavaScriptについての基礎知識も同時に学べるように工夫されています。


さらに、「p5.js」以外にもニューラルネットワークをゼロから学習できるシリーズも公開されていて面白いです。

■Webの最新トレンドを学べるYouTubeチャンネル!

Google Developers
f:id:paiza:20171011144403j:plain
すでにご存知の人も多いと思いますが、Googleが公開しているエンジニア向けのYouTubeチャンネルで、JavaScriptに特化しているわけではないのですが、とにかく最新のWeb技術や動向などが頻繁に公開されているので情報収集には欠かせません。

実はGoogleが公開しているチャンネルは他にも複数あるのですが、初めての人はこのチャンネルだけをチェックするだけでもWebの最新技術が押さえられると思います。


例えば、毎年開催されている「Google I/O」の基調講演やセッションの内容はほぼすべて公開されています!

(全158本の目次はコチラ

GCP・Firebase・Analytics…など、Google関連サービスの最新動向はもちろんですが、他にもAMP・PWA・VR / AR・IoT・AI…など、さまざまなWeb技術を活用したセッションもあるので、いずれも大変勉強になります。(しかも、一部は日本語化されてます)


また、他にもオススメとして…人気の「Googleアシスタント」における基礎知識や活用法などを勉強できる動画もあります。

【 Gogoleアシスタント向けのアプリ開発


IoT開発に興味ある人は、「Android Things」を使ったテクニックも参考になるでしょう!

【 IoT向けプラットフォーム「Android Things」の活用 】


ちなみに、どうしても英語がダメな人は日本向けのチャンネルも存在しているので参考にしてみてください!

Google Developers Japan

f:id:paiza:20171011144529j:plain
本家に比べると更新頻度は低いですが、最新のWeb技術を日本語で勉強できるのは非常に素晴らしいと思います。


<参考>

■おまけ

今回は、中級者以上のJavaScriptプログラミングを目指すYouTubeチャンネルをご紹介しましたが、次の記事では初心者向けのチャンネルを厳選しています!

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

paiza.hatenablog.com

JavaScriptの基本文法から「Ajax・スコープ・クロージャ・モジュール化」などの知識、Canvasを使った描画、ミニゲームの作り方…など、体系的にまとめているので不安のある方はぜひチェックしてみてください!


また、YouTube以外にもオンラインでプログラミングを学習できるコースは多数存在しており、それらを一括で横断検索できるサービスもあります。

Coorsy

f:id:paiza:20171011144634j:plain
学習したいキーワードを入力するだけで、関連するオンラインコースがリストアップされます。

「有料・無料」を選択することも可能なので、さらに知識を深めたい方はぜひ挑戦してみてください!

JavaScript講座は完全無料!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は、10/10(火)から【全編無料】となりましたので、ぜひごらんください!

■まとめ

今回ご紹介したYouTubeチャンネルは、今も頻繁に動画が更新されているので、今後も新しい学習コースが追加されていくと思います。

特に、JavaScript言語はアップデートによる変化が多く、また関連するフレームワークも更新頻度が高いので、これらのチャンネルをチェックしながら定期的に知識を深めていくといいでしょう。

ぜひ、みなさんもJavaScriptによるWeb開発を学習して、オリジナルのWebサイトやアプリを作ってみましょう!





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

詳しくはこちら

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

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