【フロントエンドエンジニア向け】今年お世話になった英語圏の動画学習サービスまとめ

# はじめに

こんにちは、[モチベーションクラウド](https://www.motivation-cloud.com)の開発にフリーのエンジニアとして参画している[@HayatoKamono](https://twitter.com/kamonohayato)です。

この記事は、「[モチベーションクラウド Advent Calendar 2018](https://qiita.com/advent-calendar/2018/mcs)」22日目の記事となります。

# 概要

Webのフロントエンド分野と言えば、技術の移り変わりが激しいことでも有名で、この目まぐるしく移り変わる技術の変化に対応していかなければ、あっという間に置いてきぼりを喰らってしまいます。

React? Vue? Next? Nuxt? RxJS? Functional Programming? Elm? Ramda.js? GraphQL? Firebase? PWA?

そんな次から次へと新しい技術へのキャッチアップを余儀なくされるフロントエンドエンジニアにオススメなのが、日本ではまだ情報量が充実していない比較的新しい技術に関する情報も一足早く体系化し、まとまった動画コンテンツとして提供してくれている英語圏のエンジニア向け学習サービスです。

英語圏のサービスなので配信される動画コンテンツも英語ではありますが、たいていのサービスでは、英語字幕が付くので、リスニングに自信の無い方であっても、英語がそこそこ読めさえすれば、これらのサービスの価値は得られると思いますし、また、英語の学習にもなって一石二鳥です。

というわけで、この記事では、普段から私が利用している英語圏の学習サービスをご紹介致します。

## Frontend Masters
<a href="https://frontendmasters.com/"><img width="1181" alt="Frontend Masters" src="https://qiita-image-store.s3.amazonaws.com/0/269173/80a44561-58d8-086b-9f31-73c1b6b05d0a.png"></a>
<a href="https://frontendmasters.com/">Frontend Masters</a>

このサイトでは、名だたるTech企業の第一線で活躍している現役エンジニアが定期的にワークショップを行い、それらの映像がオンラインでライブ配信されます。このサイトのサービス利用者はライブ配信されるワークショップにリアルタイムでオンライン参加することも出来ますし、後日、編集された映像の配信を待って視聴することも出来ます。

「Frontend Masters」という名前がサイトについているだけあって、フロントエンド技術に関するコンテンツが主となりますが、フロントエンドエンジニアを対象にしたバックエンドやインフラ関連のコンテンツも提供されています。

講師もカンファレスに登壇しているような人ばかりでレベルも高く、全体的にコンテンツのクオリティーも高くて、オススメのサービスです。

- 月額: $39
- 字幕： 英語
- 再生速度: 0.8 ~ 2.0倍速
- モバイルアプリ対応： 有り

# egghead
<a href="https://egghead.io/"><img width="1313" alt="スクリーンショット 2018-12-22 21.56.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/532678cb-f7fa-093a-62dc-5288312a9a7c.png"></a>
<a href="https://egghead.io/">egghead.io</a>

このサービスもフロントエンドエンジニアをメインターゲットとしている、フロントエンド技術に関する動画コンテンツが主コンテンツの月額サービスですが、フロントエンド以外の技術に関する動画コンテンツも配信しています。

先に紹介した「Frontend Masters」より講師のレベルにバラツキがあったり、講師に納品されたコンテンツの質をサービス運営側がレビューしていなかったり、コンテンツのフォーマットも講師によってバラバラで統一されていないので、その辺が利用していてストレスに感じるところがあります。

ただ、このサイトの特徴としては、１本１本の動画が短めで消化しやすいので、何か気になるコンテンツがあったら気軽に観るといった使い方がしやすいです。

私はこのサイトをメインの学習サービスとして利用する気にはならないですが、他のサービスに比べて更新頻度が高いため、サブの学習サービスとして利用しています。

たまに「解約しようかな」と思うことはありますが、そんな時に限って、気になるコンテンツが配信されるので、解約のタイミングを逃してしまいます。。。

- 月額: $40
- 字幕： 英語
- 再生速度: 1.0倍速
- モバイルアプリ対応： 無し

# Pluralsight
<a href="https://www.pluralsight.com/"><img width="1596" alt="スクリーンショット 2018-12-22 21.58.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/64704b34-e81e-ae5c-4489-06e81dc5940f.png"></a>
<a href="https://www.pluralsight.com/">Pluralsight</a>

「Pluralsight」はフロントエンドエンジニアやエンジニア全般だけをターゲットにしたサービスではなく、ITスキルに関する幅広いコンテンツを提供しているサービスで、デザイナー向けや映像クリエイター向けのコンテンツも配信されています。

プログラミングに関するコンテンツで言えば、言語はJavaScriptだけではなく、PythonやJavaなどの言語もカバーされていますし、また、アジャイル開発に関するコンテンツやプロジェクトマネージメントに関するコンテンツもカバーされています。

サービス運営側が講師から納品されるコンテンツの質をレビューしていると思われ、コンテンツの質も一定以上の期待出来ます。また、コンテンツのフォーマットにも一貫性があり、講師によって動画コンテンツの構成が大きく異なるということもありません。

金額は他のサービスと比べると低めに設定されているものの、コンテンツの量は膨大でお得感があります。また、前述の通り、質も高めです。

- 月額: $29
- 字幕： 英語
- 再生速度: 0.5 ~ 2.0倍速
- モバイルアプリ対応： 有り

# Udemy
<a href="https://www.udemy.com/"><img width="1448" alt="Udemy" src="https://qiita-image-store.s3.amazonaws.com/0/269173/55ff32d8-7f9a-87c3-a706-a20a302b3094.png"></a>
<a href="https://www.udemy.com/">Udemy</a>

最後にご紹介するのは日本でも有名な「Udemy」です。

Udemyはこれまでご紹介したサービスと違って、月額サービスではなく、コンテンツを単品購入する形式のサービスですが、Udemyはキャンペーンを度々行なっており、キャンペーン期間中になると普段１万円以上の教材コンテンツも書籍くらいの金額になったりするので、そういう時に気になる教材コンテンツをちょくちょく買ってしまいます。

日本語のコンテンツは滅多に買わないので分からないですが、英語の教材コンテンツに関して言えば、ユーザーの評価が高く、購入者数も多いものであれば、コンテンツの質は高いことが多いので買って後悔することはあまりありません。

- 単品購入： 金額はコンテンツによる
- 字幕： 英語、自動翻訳の日本語字幕
- 再生速度: 0.5 ~ 2.0倍速
- モバイルアプリ対応： 有り

# まとめ

比較的新しい技術となると、日本ではそれらに関する記事がポツポツと投稿されているだけで、体系だったコンテンツとして提供されていなことが多いです。そういう時に、英語圏の学習サービスで提供されている体系化されたまとまったコンテンツを利用すると、学習効率も高く、助かります。

英語の学習にもなり、一石二鳥なので、もし今回ご紹介した月額サービスの中で、利用したことがないサービスがあれば、まずはフリートライアルからお試しアレ！


# 番外編
今年に限らず、私がメインで利用している英語圏の動画学習サービスは以上の通りですが、他にも単発で利用したものがあるので、それらも番外編としてご紹介いたします。

## Vue関連

元々、私はReactを使っていましたが、今年の７月からフリーのエンジニアとしてジョインしたモチベーションクラウドの開発プロジェクトではフロントエンドのフレームワークにVueを使っているため、上記で紹介したサービスの他にも、以下の３つのVueに特化したコースやサービスにも登録し、Vueの知見を得られるように努めました。

### Advanced Vue Component Design
<a href="https://adamwathan.me/advanced-vue-component-design/"><img width="753" alt="スクリーンショット 2018-12-23 0.17.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/417a8a49-8ec0-7b56-5952-8874750eee76.png"></a>
<a href="https://adamwathan.me/advanced-vue-component-design/">Advanced Vue Component Design</a>

参考になった！

### Vue Mastery
<a href="https://www.vuemastery.com/"><img width="1285" alt="スクリーンショット 2018-12-22 22.02.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/1ae8112d-7bd1-81ed-7529-8786bd075d87.png"></a>
<a href="https://www.vuemastery.com/">Vue Mastery</a>

そこそこ得るものはあった。月額制。解約済み！

### Vue School
<a href="https://vueschool.io/courses/the-vuejs-master-class"><img width="1264" alt="スクリーンショット 2018-12-23 0.13.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/6f8eb721-3417-2d2a-d8b3-f4d499b9c274.png"></a>
<a href="https://vueschool.io/courses/the-vuejs-master-class">Vue School</a>

買ったは良いが、あまり観ていない！

## テスト関連
<a href="https://testingjavascript.com/"><img width="746" alt="スクリーンショット 2018-12-23 0.35.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/eca7a3d0-055e-53ad-ae51-f68cb3614107.png"></a>
<a href="https://testingjavascript.com/">Testing Javascript - Pro Testing course</a>

「Frontend Masters」や「egghead」でもコンテンツを提供しているPaypalのKent C DoddsによるJavaScriptとReactのテストに特化したコース。

良い！

# GraphQL関連
GraphQLはUdemyのコースや「Frontend Masters」で配信されているコンテンツでも学習したが、それらとは別にボリュームのある以下のコースも購入して学習しました。

<a href="https://advancedreact.com/"><img width="1096" alt="スクリーンショット 2018-12-23 0.47.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/07e144c2-3975-55a1-8cca-6411b2c40011.png"></a>
<a href="https://advancedreact.com/">Fullstack Advanced React & Graph QL</a>


# CSS Grid
今年は先延ばしにしていた「CSS Grid」も以下のコースで学習しました。

<a href="http://www.gridcritters.com/"><img width="1226" alt="スクリーンショット 2018-12-23 0.23.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/794b45e6-233b-0c99-f81f-c2b1f8471e29.png"></a>
<a href="http://www.gridcritters.com/">Grid Critters</a>

元々、以下の「Flexbox Zombies」というFlexboxをゲーム感覚で遊びながらも、しっかりと完全に理解するというコンセプトの無料で提供されているコースを以前利用したことがあって、これが非常に良かったため、「Grid Critters」は有料でしたが課金しました！

<a href="https://mastery.games/p/flexbox-zombies"><img width="1112" alt="スクリーンショット 2018-12-23 0.26.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/269173/3a5579e6-6eb8-183d-6261-f97990093a9f.png"></a>
<a href="https://mastery.games/p/flexbox-zombies">Flexbox Zombies</a>