- Reactを勉強したいけど、何から学べば良いか分からない方
- Javascriptを勉強して、更にステップアップしたい方
- Reactの分かりやすい教材が見つからない方
- フロントエンドエンジニアを目指している方
今回はReactを学びたい方向けにオススメの教材を紹介していきます。AirbnbやNetflixなど様々な有名企業のサービスで使用されているReactについて理解を深めていきましょう！！
Contents
React（リアクト）について簡単に解説していきます。
ReactとはFacebook社が開発した『Javascript』の『ライブラリ』です。これだけだと分かりづらいかと思いますので、順番に説明していきます。
まず『Javascript』とはフロントエンド言語の1種で、静的サイトに動きをつけるために使われる言語です。
例えばWebサイトで頻繁に見かけるアコーディオンメニューやクリックすると色が変わるボタンなどの実装など幅広く使用されています。
最近ではフロントエンドだけでなく、サーバーサイド言語としても使用できるようになり非常に人気が高まっています。
次に『ライブラリ』ですが、プログラミング言語の便利な機能だけを集めたものと表現されます。ここでは「Javascriptをより使いやすいようにするもの」ぐらいの認識で問題ありません。
次にReactの特徴について解説していきます。Reactを語る上で重要なものをピックアップしておきました。
実際にコードを書いてみないと実感できない部分があると思いますので、こんな特徴があるんだな程度で良いと思います。
特徴① Javascriptと比べてコードが分かりやすい！
1つ目の特徴は『コードが分かりやすい』ということです。バニラJS（純粋なJavascript）で書いたコードとReactを使ったコードを見比べると分かりやすいかと思います。
また同じJavascriptのライブラリであるjQueryと比べてもReactは圧倒的に分かりやすいコードで書くことができます。
バニラJSやjQueryのコードはどうしても長くなりやすく、後から見返した場合に分かりづらく保守性が良くありません。
このような問題があるため、最近では多くの企業がjQueryではなくReactを採用しています。
特徴② Reactはコンポーネント指向を使っている！
Reactの特徴として『コンポーネント指向』が挙げられます。
コンポーネント指向とはアプリケーションやwebサイトを構成する部品を1つのパーツとしてみなし、それらを再利用するという考えです。
コンポーネント指向の良いところは何度も同じコードを書く必要がない点です。コンポーネントという型を使うことで、時間短縮や保守性に優れたアプリケーションの開発が可能になります。
特徴③ ReactはSPAを作れる！
Reactを使えばSPA（シングルページアプリケーション）の開発も可能です。
SPAとは1つのページで複数の機能や表示を実現できるWebアプリケーションを指します。
これまでのWebアプリケーションやWebサイトでは、ページ遷移やコンテンツの切り替え時にページの読み込みが発生して、一瞬画面が白くなることがありました。
このようなWebアプリケーションをMPA（マルチページアプリケーション）と呼びます。
MPAでは読み込みに長い時間かかり、ユーザーにストレスを与えてしまうケースがあります。
SPAではページやコンテンツの切り替え時に、変更した箇所だけサーバからデータが返ってくるので、画面の描画が非常に高速です。
Reactを使うとSPAを実現でき、よりUI（ユーザーインターフェイス）が高いWebアプリケーションの開発が可能になります。
ここからはReactを学ぶことができる教材について紹介していきます。
紙の参考書でもReactを学ぶこともできますが、僕は断然動画教材のUdemyをおすすめします。
理由としては下記点が挙げられます。
- 動画なので操作手順が分かりやすい
- 動画作成者にいつでも質問することができる
- 通勤、通学中でも動画を見れる
そんなUdemyのReact講座の中でも実際に受講して良かったものだけを紹介していきます！！
この講座は現役フリーランスエンジニアのじゃけえさんが講師を務める講座で、Reactを初めて触る方にフォーカスしたものとなっています。
おすすめポイント① Javascriptの解説もしてくれる
他のReact講座と比べて良いと感じるのが、『Javascriptについても丁寧に解説してくれる』点です。
Reactを理解する上でJavascriptについての理解は必須です。しかし1からJavascriptについて学び直すのは大変で時間もかかります。
この講座はReactを使う上で必須な知識に絞って解説してくれているので、Javascript初心者でも簡単にReactを使えるようになります。
また講座では『タスク管理アプリ』を純粋なJavascriptとReactを使ったパターンで制作していきます。そのためどれだけReactが分かりやすく便利なものなのか理解しやすいです。
このような簡単なアプリでも純粋なJavascriptでコードを書くと非常に分かりづらくなってしまいます。
おすすめポイント② 開発環境の構築必要なし
またこの講座ではReactを使用するために、複雑な開発環境を構築する必要はありません。Codesandboxを使ってWeb上でコードを書いていきます。
Codesandboxはブラウザで立ち上げるだけでReactを実行するためのファイルや環境を自動で作ってくれるので、プログラミング初心者でも簡単に始められます。
そのためReactを学ぶ前の開発環境構築で挫折する心配もありません！！
おすすめポイント③ 最新のReactについて学べる
この講座ではReactで最近導入されたHooks（フックス）やstate（ステート）など新しい概念について学ぶことができます。
どうしてもフロントエンド言語は進化が早いため、情報を最新なものにアップデートしていない教材が多く存在します。
この講座は最新のReactの概念を取り入れているので、せっかく学習したのに「今では使わない概念・知識だった！！」ということもありません。
無料サンプル動画をチェック
この講座は元シリコンバレーで働いていた経験もあるエンジニアのはむさんが講師を務めています。これまで6,000人以上が受講し、高評価を得ている信頼度が高い講座です。
無料サンプル動画をチェック
githubおすすめポイント① Gitの使い方を学べる
この講座ではソースコードの管理をGitHubを使って行っていくため、Gitの使い方を学ぶことができます。
Gitはエンジニアであればほぼ100%使用するものなので、Gitを使ったことがないプログラミング初心者にもおすすめです。
おすすめポイント② Reduxについて学べる
Reactでは頻繁に『State』という言葉が出てきます。Stateとはアプリケーションが持つ状態のことを指します。
例えば下図のような入力フォームがあったとします。入力フォームには「テスト③」など自由にユーザーが入力することができます。
入力された情報（State）を簡単に管理できるようにしたのが、Reduxというフレームワークです。Reactと相性が非常に良く、大規模な開発にも向いていることから広く採用されています。
この講座でもReduxを用いて簡単なアプリを開発するので、非常に練習になります。
おすすめポイント③ Reactの開発環境構築を学べる
この講座ではReactを使うために環境構築を行っていきます。例えばNode.jsやyarnなどjavascriptを扱う上で必須のツールをインストールして、開発を行うのでより実践的な内容になっています。
開発環境構築と聞くと難しそうに感じるかもしれませんが、動画の内容に沿って操作すれば問題ありません。
無料サンプル動画をチェック
講座に関する補足①
講座ではVim（ビィム）と呼ばれるテキストエディタを使用して解説されています。Vimはターミナル上でコードを編集できるのが特徴ですが、Visual studio code（以下VScode）に慣れている方は驚くかもしれません。
ただVimを必ず使う必要はなく、VScodeや使い慣れたテキストエディタを使って動画を学習することもできるので問題ありません。
講座に関する補足②
所々情報が古い場面も見受けられます。これはどうしてもReactの進化が早いためしょうがないのですが、動画のコマンドを入力しても上手くいかないことがあります。
そのような場合は質問欄で類似のものを探すか、動画制作者にどんどん質問して解決していきましょう！
エンジニアは自分で分からないことを調べたり、試行錯誤してエラーと格闘する自走力や忍耐力が求められますもんね！
企業の募集サイトを見ても、Reactのスキルを求められるケースが多いと感じています。
Reactという新しい技術を少しでも知っていたり、習得していると非常に重宝されると思います。
ぜひ今回紹介した講座を利用して、Reactの知識を高めていただければと思います！
