フロントエンド技術を学ぼう 2-1.独学のやり方

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第11回はPart II: Learning Front-End Devから、
1項のSelf Directed Learningを紹介します。

独学のやり方の説明です。

Sponsored Link

独学のやり方

このセクションでは、無料と有料の学習リソースに焦点を当てています。ここでいう学習リソースとは、個人が自分で学習のペースや内容を調整可能な、ビデオトレーニングや書籍などのことです。

有料の学習リソースには[$]で印をつけて紹介します。

動画学習サービスの紹介

私は正しい判断力と献身の気持ちを持っている人であれば、誰でもフロントエンドデベロッパーになる方法を教えることが出来ると考えています。ですから、必要なものはWebに接続されたコンピュータ書籍やオンラインビデオトレーニングに必要なお金だけです。

以下にいくつか技術に焦点を当てた、動画学習サービスを紹介しています。私は基本的にこれらのコンテンツをオススメしています。

サービス名 学習可能な技術 備考
codecademy.com HTML&CSS、JavaScript、Webサイト、SQL、コマンドライン操作、Python、Ruby、Java、Git、PHP、Watson API 基本無料で利用可能。プロプラン(有料)にて、学習計画、小テスト実践学習チャットサポートが受けられる。
codeschool.com HTML&CSS、JavaScript、NoSQL、SQL、ELIXIR、PHP、Golang、iOS、.NET、正規表現、Git、Ruby、Chrome デベロッパーツール、R 無料会員では限られたコースの基礎学習しか出来ないが、有料会員になることで、全てのコースとスクリーンキャストが使用可能になる。
egghead.io HTML5、CSS、JavaScript、SQL JavaScript関連の学習に特化しており、スクリーンキャスト主体。ある程度フロントエンドの基礎知識がある人向けの内容。無料会員では限られたコースしか学べないが、有料会員で全てのコースを学べる。
eventedmind.com HTML、コマンドライン操作、Git、Nginx、Ansible、JavaScript、コンピュータサイエンス バックエンド寄りの学習が出来る。スクリーンキャスト主体。無料会員では限られたコースの基礎学習しか出来ないが、有料会員になることで全てのコースを見ることが出来る。
Frontend Masters HTML5&CSS3、JavaScript、Webサイトパフォーマンス、Webデザイン、フロントエンドエンジニアリング全貌、テスト、Chrome デベロッパーツール、アクセシビリティ、Elm 録画したビデオ講義を視聴するタイプ。無料会員ではプレビュービデオしか見られないが、有料会員になることで全ての講義リアルタイム講義(質疑応答含む)iOSアプリでのモバイル視聴が可能になる。
Freecodecamp HTML5、CSS3、JavaScript、Database、Git 完全無料のインタラクティブなスライド学習サイト。一本道の学習なので、確実にHTML5、CSS3、JavaScript、Database、Git&GitHub、Node.js、React.js、D3.jsを学べる。
Khan Academy HTML&CSS、JavaScript 完全無料の学習サイト。数学やアートなど広い範囲の学習が可能。
laracasts.com JavaScript、PHP、テスト、開発ツール PHPのLaravelを中心としたフロントエンド学習サイト。無料会員では導入部分のビデオしか視聴出来ないが、有料会員になることで、全てのコース視聴可能になる。
lynda.com HTML、CSS、JavaScript、その他多数 LinkedInが提供しているビデオ学習サイト。フロントエンドに留まらず、コンピュータを使用するスキル全般(CADや音楽など)を扱っている。無料会員では紹介動画のみ視聴可能。[クオリティにばらつきがあるので注意]
mijingo.com HTML5、CSS3、JavaScript、テスト、Git、CMS、Python、コマンドライン操作、デザイン 学習ビデオを単体購入するタイプのサイト。
pluralsight.com HTML5、CSS3、JavaScript、その他多数 IT、開発、クリエイティブ系のビデオ学習サイト。10日間の無料期間の後、有料会員になる必要あり。[クオリティにばらつきがあるので注意]
Treehouse HTML5、CSS3、JavaScript、その他多数 ビデオ学習とインタラクティブ学習が可能なサイト。利用するためにはクレジットカード登録が必要(無料期間7日間付き)。
tutsplus.com HTML5、CSS3、JavaScript、その他多数 ビデオ学習サイト。未登録ではイントロ動画のみ視聴可能。利用するためにはクレジットカード登録が必要(無料期間10日間付き)。
Udacity HTML5、CSS3、JavaScript、その他多数 ビデオ学習とインタラクティブ学習が可能なサイト。未登録では限られた動画のみ視聴可能。[クオリティにばらつきがあるので注意]

以下、もじゃげコメント

英語で学習することに問題がないのであれば、まずFreecodecamp(無料)で一通りの技術を学んだ後に、codecademy.com(無料アカウント)で復習。 その後は好みの学習サイトで学んでいくと良いと思います。

日本語の動画学習サービス

有料のサービスになりますが、Udemyは日本語でも視聴可能な動画学習サービスです。 ここもHTML5CSS3JavaScript、その他多数学習可能なビデオ学習のサイトです。

ログイン後、学習コースのカテゴリを選択して、Language日本語を選択すると、日本語で学習可能なビデオが表示されます。