Reactlの入門が知りたい
React Nativeならスマホアプリ開発がiOSもAndroidも一度にできるの？
プログラミングに関わったり、IT業界にいると最近よく耳にする「React(リアクト)」
日本語での情報はまだ限られていますが、注目が集まっているJavaScriptライブラリのReactについて、入門からできることや学習方法まで紹介します。
記事を最後まで読めば、一足早く「React」の魅力を知って、プログラミング学習やアプリ開発に生かせるようになるでしょう！
もくじ
1. ReactとはUI(ユーザインタフェース)のためのJavaScriptライブラリ
(出典：Wikipedia）
1-1. Reactの概要
Webアプリ開発でよく使われる、Webページに動きを与える役割の「JavaScript」というプログラミング言語のためのライブラリの１つがReact（リアクト）です。
一言で言えば、Reactは「JavaScriptでできることを拡張する」役割をになっています。
JavaScriptのライブラリなので、拡張子をつけて「React.js」と呼ばれることもあります。
| 開発者 | |
| 発表年 | 2013年 |
| プログラミング言語 | JavaScript |
| 公式サイト | https://ja.reactjs.org/ |
1-2. Reactの３つのコンセプト
公式ドキュメントに書かれている、Reactのコンセプトは以下の３つです。
- 宣言的なView
- コンポーネントベース
- 一度学習すれば、どこでも使える
仮想DOMという仕組みによって、ユーザインターフェースが変更された部分だけを処理する仕組みを採用しているので動作が軽く、宣言的なViewでアプリが構築されているので、コードが読みやすいです。
また、コンポーネントとは「カプセル化された自分自身の状態を管理するもの」で、これを効率的に更新・描画することで、ReactはUIを操作します。
1-3. React NativeとはReactをモバイルで使えるようにしたもの
(出典：React Native 公式）
スマホアプリの開発では今までは、iPhoneアプリならSwiftかObjective-C、AndroidアプリならKotlinかJavaという風に異なる言語でプログラミングしていました。
そのせいで、一度スマホアプリを作っても、他の種類のOSに対応するために、再度プログラミングをしなければなりませんでした。
しかしReactNativeは、大きく変更することなく１度書いたコードをiOSでもAndroidでも使えるというメリットがあります。
これからモバイルアプリを開発したい人は、ReactとReactNativeを学んでおくとiOSとAndroid用に別々でほぼ１からプログラムを書かなくて済むので、おすすめ◎
例えば、ReactNativeで書かれたFacebookの広告管理アプリのAndroid版の87%のコードは、iOSと全く同じだといいます。
2. React Reduxって何？hooksとかTypeScriptも一緒に使われるの？
Reactの情報をいろいろ探してると、Reactとセットで「何やらプログラミング関連の単語らしいもの」に出会うことがよくあります。
くわしくは、Reactで開発しているうちに出会うので、その時に手を動かしながら理解すれば大丈夫です。
今回のReact入門編では、さらっと「こんな言葉もあるんだな〜」と思っておいて、学習を進めていってから理解を深めるといいでしょう。
- Redux：Reactが扱うUIの状態を管理をするためのフレームワーク
- hooks：一部のReactの機能をクラスを書かずに使えるようになった新機能
- TypeScript：JavaScriptを拡張したプログラミング言語
3. Reactを語るなら一緒に知っておきたいVueとAngular
(出典：Wikipedia）
ReactとはJavaScriptのライブラリですが、実はJavaScriptのライブラリには色々あって、その中でもユーザーインターフェイスを構築するために使われる有名な３つが「React・Angular（アンギュラー、アングラー）・Vue（ビュー）」（ロゴは左から順）です。
3-1. ライブラリとフレームワークの違い
正確にいうと、JavaScriptでできることを拡張する仕組みは「ライブラリとフレームワーク」の２種類あり、React以外はフレームワークに属します。
JavaScriptのライブラリには、Reactの他に「jQuery、Node.js」などもあり、聞いたことがある人もいるかもしれません。
「ライブラリとフレームワークの違い」について、わかりやすい例えを見つけたので記載しておきたいと思います。
- ライブラリ：だしの素とかハイテク家電のような手間を省いてくれるツール
- フレームワーク：食材や調味料がまとめてあってあとは調理するだけのセット
（出典：React, Vue.js はフレームワーク？ライブラリ？）
3-2. React・Vue・Angularの比較
学習コストに従って、大規模なアプリを作れるという特徴はありますが、React・Vue・Angularは、どれもWebアプリとスマホアプリの開発が可能です。
4. Reactでできることと学習方法
Reactのフレームワークでできることは主に、
- 高速で軽いWebアプリ開発
- iOSとAndroidの両方で使えるモバイルアプリ開発
- WebベースのVR開発
です。
今回は、Reactを使ったWebアプリ開発とReactNativeを使ったモバイルアプリ開発を学習するために、おすすめの方法を紹介します！
Reactは日本語で書かれた参考書もほぼ無く、オンラインプログラミングスクールなどではコースが無いので、Udemyの講座で講師への質問なども活用しながら学んでいくのが１番の近道です◎
4-1. ReactでWebアプリを開発する
Webアプリを作りながらマスターする！ 超実践的 React + Redux 入門講座
ReactでWebアプリ開発に挑戦する時に、一番基本的な講座。
WindowsとMacの両方に対応しており、作りながら１つ１つの作業の意味も丁寧に解説されていると評価も高いです。
4-2. フロントエンジニア向けのReact学習
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 
受講における必要条件がしっかり明記されていて、すでにフロントエンドエンジニアの経験がある人が最短でReactを学んでステップアップするのに役立つ講座。
講師の方もエンジニアとしての経験が豊富で、React入門からReduxとMaterial-UIも含めて、実務に役立つ内容をしっかり学べる時間を無駄にしないコンテンツ内容が魅力です。
4-3. React Nativeでスマホアプリの開発に挑戦
① React Native で iOS / Android アプリ開発をゼロから始めよう！ 
事前知識は不要でMacのパソコンを持っていたら誰でも始められる、スマホアプリ開発を学ぶのにぴったりの講座。
講師の方は、ユーザインターフェースやユーザエクスペリエンスに関する経歴を持っている方なので、React NativeやJavaScriptだけでなく、アプリの構想から教えてくれる手厚い内容が他には無いメリットです、
② React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年版 
ニュースアプリを実際に作りながら、ReactNativeのメリットとデメリットを具体的に学べる実用的な講座です。
JavaScriptの基本文法などは学べないので、初心者でも何らかのプログラミング経験はあるけど、React Nativeは初めてで、実際にリアルなアプリを作りながら学びたい人はかなり満足できると思います◎
③ React Native 〜JavaScriptによるiOS／Androidアプリ開発の実践
4/27についに日本語でもReact Nativeの参考書が発売されます。
目次を見たところ、未経験だと少しむずかしそうな部分もありましたが、コンテンツ内容は充実していて、期待大です◎
4-4. ReactとNextでWebアプリ開発
日本語で書かれたReactの入門書で1番新しく、読みやすい参考書はこの本です。
説明が丁寧なので初心者から読みやすく、サンプルコードも随時修正とアップデートがされているので、つまずかずにReactを試してみることができました。
React入門から、ReduxやNext.jsをどのように組み合わせたらいいのかまで１冊で広く学べました。
5. Reactは入門講座や本が少なくて初心者だと難しい印象を受けるけど、将来性の高いプログラミング言語
ReactはJavaScriptでできることを広げてくれて、モバイルアプリ開発を一度に行えて、VR開発も身近にしてくれる、将来性のあるライブラリです。
Reactについて日本語で書かれた本は、まだ少なく学習環境も整っていませんが、海外のスタートアップではReactのわかるエンジニアの募集が急増しており、日本にも流れがやってくる可能性が高いです。
Reactを書くために必要なプログラミング言語のJavaScript自体は、初心者も始めやすいので、一度身に着けると色々なアプリ開発で使えるので、今回紹介したような入門講座を活用して、ぜひ挑戦してみてください！
おすすめ記事
ブロックチェーンのメリットデメリットは？仕組みを分かりやすく学ぶ方法も紹介
大学生が全くの初心者からweb制作で月8万稼げるまでにやったこと
