Expo、ReactNativeとは?【アプリ開発の学習手順】

アプリ開発で注目されている「Expo」「React Native」とはなにか、その学習手順をわかりやすく紹介しています。Expo、React Nativeを利用して、一緒にアプリ開発の導入をすすめましょう!

ReactNativeやExpoとは?

Expo ReactNative

Expo、React Nativeでアプリができるまで

アプリを作る上では、
「Expo」「JavaScript」「React Native」「JSX」の4つを理解すれば簡単に開発を進められます。

「Expo」はReact Nativeの開発ツール
「JavaScript」はアプリ開発言語
「React Native」はモバイルアプリケーションの開発言語(JavaScriptの拡張)
「JSX」はJavaScriptの拡張構文
です。

日本語が専門的ですので、建築を例にすると、
「Expo」は材料集め&建築作業
「JavaScript」は全体のザックリとしたな設計図
「ReactNative」は細かな設計図
「JSX」は設計図を作るルール
です。

Expoは優秀・React Nativeは超簡単

先程の例からも分かるように「Expo」は材料集めから建築作業までの幅広い分野をカバーしてくれる、非常に優秀な開発ツールです。
Expoは優秀なわけですが、Expoについて覚えることはほとんどありません。
Expoは「学習」というより「操作方法」をマスターする感覚に近いです。
新しい家電の操作方法をマスターするレベルの学習量です。

「ReactNative」がまた簡単。
プログラミング言語と呼ばなくてもいいほどに、簡単なコードで実装ができます。
とにかく、「Expo」「JavaScript」「React Native」「JSX」の4点をマスターすれば、
AndroidとiOSアプリの両方同時にが簡単にリリースできるわけです。

従来のアプリ開発との比較

従来よりも遥かにReact Native と Expoを利用すれば、アプリ開発は非常に簡単です。

従来はAndroidはAndroid専用の言語、iOSはiOS専用の言語で、別々でアプリを開発する必要がありました。
2つの言語でそれぞれ作る必要があったわけです。
しかしReact Nativeの登場からは、1つの言語でAndroidとiOSの同時開発ができるので、単純に労力が半分なわけです。

すごい。

React Native

React Nativeとは?

React Nativeは、
JavaScriptのフレームワークであるReactがベースとなり、それをモバイルでも利用可能にしたものです。

モバイルアプリケーションの開発言語という認識で大丈夫です。

Reactとは違う?

ReactとReact Nativeは別物です。
ReactはWebのUIを操作する言語であるのに対して、React Nativeはモバイルアプリケーションの言語です。

Webかモバイルアプリケーションかによって、React Nativeかそうでないかが分かれます。
React Nativeは、Reactの子供的なポジションです。

Expo

Expoとは?

Expoはモバイルアプリの開発ツールです。
噛み砕いて言えば、自分で書いたコードを簡単にリリースできるように手伝ってくれる道具です。

Bluetoothやカメラ、位置情報などを使ったアプリも簡単に導入することができ、リアルタイムで実機やエミュレーターで動作確認も行えます。

また、他と比べてリリースも非常に簡単で、
時間ががかる審査も、通常よりも時間をかけずに通過することができます。

React Nativeには、
・「React Native」×「ReactNative CLI」
・「React Native」×「Expo」
の2つのアプリ開発方法があります。
両者もメリットデメリットがありますが、後者の「React Native」×「Expo」が開発者にとって非常に簡単で使いやすいです。
さっそく使いやすい「Expo」のインストール方法を紹介します。

Expoのインストール方法

下の記事で数十枚の画像を使いながら、どこの記事よりも詳しく解説しています。
下の記事よりインストールし、環境構築すればExpoは利用できます。

ExpoをMacに環境構築する方法【アプリ開発】

JSX

JSXとは?

JSXは、JavaScriptでHTMLのようなコードを書けるようにした、JavaScriptの拡張構文です。

JSXを利用すれば、非常にスッキリとわかりやすくコードを書くことができます。
エンジニアにとって可読性といわれる、誰が見ても読めるコードを書くことは非常に重要です。
これを可能にするのがJSXです。

しかし、「JSX」という言葉の定義は非常に曖昧です。
「JavaScriptでHTMLのようなコードを書けるようにした拡張構文」とだけ認識しておけば大丈夫です。

Node.js・npmのインストール方法

Node.jsとnpmをインストールしておけば、JSXは使えるはずです。
下の記事からインストールしてください。

Node.js・npmのインストール方法をわかりやすく解説!

まとめ

「Expo」の使い方、「JavaScript」×「React Native」×「JSX」の組み合わせたプログラミング言語をマスターすればアプリがリリースできます。

Expo オワコンという言葉が最近登場していることが悲しいですが、Expoは優秀です。
かゆいところに手の届かないことはありますが、巨大なアプリケーションでもなければ十分に手の届くところをカバーしてくれます。

JavaScriptだけでアプリが利用できるようになったExpo・ReactNativeを一度触ってみてください。
せっかくなんで僕がExpoとReactNativeに抱いた感動を、沢山の方に共感してもらいたいです。

ということで本記事は、
Expo、ReactNativeとは何か、詳しく紹介しました!
最後まで読んでいただき、ありがとうございました\(^o^)/

超オススメのPC用品

PCを操作する上で、トラックボールマウスが非常におすすめです!
僕も感動したこのマウスを、騙されたと思って使ってみてください!(^^)

外部モニターで2倍以上の効率化が見込めます!
安いものだと、たったの1万円前後なのでおすすめですよー!\(^o^)/