こんにちは、こばやしよしのり @yoshiii514 です。
僕は20歳からプログラミングをはじめました。その当時は、Microsoft Visual Basic と Microsoft SQL Server の組わせで開発することが多かったです。主に会計システムや生産管理システムを設計・開発しました。
2011年頃にWeb業界へ転職をして、Webデザイン・HTML・CSS・JavaScript・PHP・Rubyなどを学びました。そして、現在はフリーランスとして活動しています。
React を学びながら、TennisFull を React で構築しつつ、フリーランスでも React 案件を獲得するためにチャレンジしています。
僕は、オンライン学習サイトを活用してReactを学び続けています。現在の学習環境は、プログラミング本を購入するよりも、もっと効率的に学ぶ環境が整っていますので、オンライン学習サイトを活用した勉強法を紹介します。
【目 次】
React は難しい、だからオンライン学習サイトで独学マスターする勉強法が最適
React は難しいと言われる
React は難しいと言われる原因1 : ルールの理解が必要
直感的に使いやすい、jQueryと比べると、Reactはルールを理解しないと使えないです。
Reactは、使用するためのルールがあります。ルールを理解しないまま、Reactを使うと「難しい」という感覚になります。こういった、プログラム言語とは別に、ルールを設けて、骨組みや構造上で共通の認識を作る考え方がフレームワークです。
フレームワークにルールの制約があることで、だれが使っても同じ認識で理解することができます。
ルールを理解することで、チーム内で効率的に作業が可能になり、多国籍間（日本ー米国など）でも生産性が向上します。
React は難しいと言われる原因2 : 環境面が複雑、ライブラリが多い
実際の開発では、React が単体で使用されることはありません。Yarn、JSX、Webpack、SASS、Reduxなど、たくさんのライブラリやツールを活用します。
特に Windows環境は、エラーになり正常に動かないことが多いです。Windows環境は、文字コードやオープンソースへの取り組みの影響で、対応が遅れます。React を学ぶなら Apple MacBook を用意すべきです。
React を独学でマスターするための勉強法
僕は早く技術を身に着けて、早く収益を上げるのが好きです。React の資格勉強ではありませんので、すべてを理解する必要もないと思っています。限られた時間で、効率よく結果を出す方法はないかと、いつも考えています。
僕の過去の失敗も踏まえて、React に重点をおきつつ、独学でマスターするための勉強法を紹介したいと思います。
独学での勉強法1 : 優しい基礎講座に時間をかけない
僕は、初めてプログラミングをするときや、新しいことを学ぶときに、優しい基礎講座を選びません。基礎的な講座に時間をかけすぎると挫折する原因になります。
僕の場合は、横から別の出来事が入ってきたりするので、あまり勉強に時間をかけていると、成果物がなかなか仕上がりません。成果物がないと、収益もでないので、モチベーションも下がり、そのうちに学ぶことをやめてしまいます。
もし、優しい基礎講座で学ぶ必要があるときも、１時間で終える！ ぐらいの気持ちで、どんどん次の講座に進むことを意識しています。
独学での勉強法2 : インプット学習に時間をかけすぎない
僕は、講座のすべての章を最初からインプット学習（ハンズオン学習）する方法では、挫折します。
僕は、自分が作りたいサービスに必要なことだけが学べれば良い と思っています。もしくは、フリーランスで対応する案件に必要なことだけを学びたいです。
例えば、会員管理に必要な機能、Googleマップに情報をマッピングさせる方法、Reactでのコンポーネント化の方法などです。
僕は、最初にオンライン学習で聞き流しをして、サーッと講座の構成を理解します。そして、必要だと思えるところだけを重点的に学習します。あとは、自分でサービスを作りながら、案件をこなしながら、必要なところを学習できれば良いと思っています。
特に React は、最低限のルールがありますので、そこだけは重点的に学習します。
独学での勉強法3 : 学習前に事例を調査する
そもそも React でどのようなアプリケーションが作れるのか？といった事例を理解しておくことは、とても重要です。
事例から、デザインを真似たり、動きを模倣します。そして、それを実現するための方法を調査します。
事例としてよく掲載されたいるのは、次のサービスです。
Facebook
Airbnb
Netflix
次のように、Reactを使用しているWebサイトおよびアプリケーションをコレクションしているサイトもあります。
Made with React
React を独学するために、オンライン学習サイトを活用する理由
僕は、React を独学で学ぶためには、オンライン学習サイトの活用が最適だと思っています。
僕は、Udemy
を中心に学習しましたので、独学にはオンライン学習サイトが最適だと思うことをリストアップします。
- とにかく繰り返し学習に最適
- 1.2倍速、1.5倍速、2倍速での再生が可能なので、時間を無駄にしない
- 学びたい章だけをピックアップして再生するのが簡単
- 英語圏の講座の完成度が高く、英語での解説でも十分に理解できる
- 実践向きの講座もある
- スマホアプリ版だと、講座のダウンロードができるので、移動中でも学習できる
本で学習したり、Webページを見て学習するのはとても効率が悪いので、上記のように、オンライン学習サイトを活用したほうが、とても効率が良いです。
React が学べるオンライン学習サイトの比較［Schoo、ドットインストール、Udemy］
Schoo（スクー）
Schoo はオンライン形式で生放送の授業ようなコミュニティです。大人向けの講座が多いです。授業中に質問することもできます。無料会員登録で生放送は受講できます。プレミアム生放送や録画授業を受講する場合は、プレミアム会員 980円/月（税込）への登録が必要。
Schoo は初学者向けの講座が多く、React の講座も初学者向け（特にプログラミング初めて向け）です。
僕の場合は、学習に時間がかかりすぎると挫折する要因になるため、Schoo で学習してみて、途中で物足りないと感じたので、別の講座を探しました。
［React 講座］
ドットインストール
ドットインストールは、初心者向けのプログラミング学習サイト。無料会員でもたくさんの講座を受講できます。プレミアム会員 980円/月（税込）になると、中上級者向けの講座などが受講できます。
React の文法に慣れるという意味では、学習しても良いと思います。ただ、これだけでは足りませんので、次々に学習をすすめたほうが良いです。実践では React と色んなツールやライブラリを活用して開発しますので、そういった側面から考えれば、ドットインストールで学習している時間を Udemｙ で実践的な学習教材に当てたほうが効率が良いと思います。
［React 講座］
Udemy（ユーデミー）
世界中の人たちが学習動画を公開しています。React だけでも英語圏を含めるとたくさんの講座があります。
React の実務経験がある方の講座や、実践的な講座もありますので、早い段階で Udemy での学習に切り替えたほうが良いです。
Udemy は会員登録は無料ですが、1講座コースごとに購入する必要があります。
講座の金額帯は、バラバラです。20,000円前後の講座もあれば、無料に近い講座もあります。Udemy では、特別セール期間が頻繁にあります ので、結局は1,000円から3,000円ぐらいで購入できることが多いです。僕が購入しているReactの講座も、1,000円から3,500円ぐらいの価格帯のときに購入した講座です。
［React 講座（一部）］
React + Redux を使用したモダンフロントエンド開発
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
オンライン学習で実践に則した React が学べる、Udemy おすすめ講座
Udemy で実際に購入して学んだ、「僕が薦める」おすすめの React 講座です。
定価欄には、その講座の定価を掲載していますが、Udemy では頻繁にセールが開催されています。「Udemyで現在の価格を確認する」ボタンを押すと、その講座のセールを確認することができます。
Udemy おすすめ講座1 : 最短で学ぶReactとReduxの基礎から実践まで
| 定価 | 24,000円 | 充実度 | ★★★★☆ |
|---|---|---|---|
| コース時間 | 6.5時間 | わかりやすさ | ★★★☆☆ |
| 言語 | 日本語 | 実践的 | ★★★★★ |
Googleマップ検索APIと楽天ホテル検索APIを活用して、Webサービスを作る講座です。
Reactで開発するためのライブラリやツールの使い方も学びます。
実践レベルに近い講座であるために、難易度が高く、この講座を学習したあとは、他の講座が易しく思えます。
1度学習しただけでは、わかりにくいので、何度も学習することをおすすめします。
講座が少し古いですが、yarnでバージョンをしっかり指定して導入すれば、問題なく学習できます。
APIの仕様も少し変更されていて、そのままでは使用できないことがありますが、そこは学習だと思って、臨機応変に対応してください。
「わかりやすさ」では、少し難がありますが、それでも十分に価値のある講座です。
Udemyおすすめ講座2 : フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
| 定価 | 24,000円 | 充実度 | ★★★☆☆ |
|---|---|---|---|
| コース時間 | 7時間 | わかりやすさ | ★★★★☆ |
| 言語 | 日本語 | 実践的 | ★★★★☆ |
前半は、最低限の必要な要素の解説です。Reactの開発環境から、JSXやpropsといった基礎要素の解説から始まります。Reactの初心者にとっては入りやすい講座です。
後半からは実際にAPIからデータを取得して、イベント一覧を表示し、新規作成も実施して、徐々に実践的になります。
解説スピードがゆっくりで、なおかつ丁寧ですので、初めての人でも学習しやすい講座です。
各セクションの終わりに、 git diff —cashed で、変更点の差分を表示して、振り返り学習する方法もわかりやすくて良いです。
Udemyおすすめ講座3 : The Complete React Developer Course (w/ Hooks and Redux)
| 定価 | 12,000円 | 充実度 | ★★★★★ |
|---|---|---|---|
| コース時間 | 39時間 | わかりやすさ | ★★★★★ |
| 言語 | 英語 | 実践的 | ★★★★★ |
英語で解説された講座です。英語のため最初は抵抗がありますが、受講をはじめると講座のクオリティの高さに驚きます。日本語圏の講座よりも、英語圏の講座のほうが圧倒的に説明が丁寧で、わかりやすく、動画も綺麗です。
Babel、JSX、ES6（ES2015）といった、Reactを学ぶ上で必要な要素をしっかりと解説してくれた上で、Reactの基本を積み上げて、徐々に実践的な内容の講座に移っていく講座ストーリーも素晴らしいです。
英語が話せない人でも、プログラミング自体がほとんど英語ですので、動画解説に沿って手を動かせば、学習できますし、理解もできます。それに、英語の勉強にもなるので、とてもおすすめです！
「React需要やフリーランス案件の単価・年収、求人と仕事内容」 の調査で、英語圏のリモートワークでのReactエンジニアの年収は、平均1200万円以上でした。ぜひ、英語圏の案件獲得にもチャレンジしたいです。
英語だからと臆することなく、優れた講座で学ぶことをおすすめします。
まとめ：Reactをオンライン学習サイトで独学マスターする勉強法
- 優しい基礎講座やインプット学習に時間をかけすぎない。
- Udemy
を中心とした実践に強いオンライン学習に重点をおく。 - オンライン学習サイトの機能（繰り返し、倍速、ダウンロード）を有効に使う。
また、Reactで業務未経験でもフリーランスとして案件にチャレンジすることができます。いくつかの案件紹介会社（エージェント）に登録して、数をあたる必要があります。どのような案件があるのかを直接に知ることによって、Reactの学習もしやすくなります。
フリーランスエンジニアのエージェントについては、次の記事で書いていますので、参考にしてください。
最後まで、読んで頂きありがとうございます。
質問はTwitterから受け付けますので、お気軽にどうぞ。
よっしー｜Twitter
