アプリを効率的に開発するために。ReactNative、Expoとは？徹底解説！

「アプリを効率的に開発したい」

「アプリを勉強していきたいと思っている。」

「Androidアプリを作るために、１からKotlinを勉強しようと思っている」

アプリ開発をこれから勉強しようとしている方、Androidアプリを開発するためにはどんな言語が必要なんだろ、JavaかKotlinか、、じゃあ、流行りに乗っているKotlinかな〜〜

こんなことを思っているそこのあなた。ちょっと待ってください。まずはこの記事を読んでから考えてください。

あなたはAndroidアプリを開発したいだけですか？iOSアプリも開発したいと思っていませんか？であれば、それぞれで言語を学ぶ必要はないです。クロスプラットフォームを使いましょう。

その中で、今回はReactNativeというクロスプラットフォームを紹介していきます。そして、Expoという素晴らしいツールについても紹介します。

この記事を読んで、アプリ開発の環境整備などに気を取られず言語の開発により勤しんでいただきたいと思います。

iOSとAndroidアプリを両方同時に作る

iOSとAndroidのアプリを開発したいと思っている方は、二つの開発を同時に行える統合開発環境（クロスプラットフォーム）という選択肢を考えていただいきたいと思います。

これは、これからアプリ開発をしていって自分のアプリを作っていきたいという方に向いています。私自身そうでした。

webアプリは作れるようになった時に、実はアプリの方が副業としての需要や、稼ぎやすいということを知りました。そこからアプリを開発していこうと思いました。以前携わっていた案件の中で、AndroidとiOSアプリを別々の人が開発をしていたので、それぞれで開発の言語を勉強してくことになんの疑問も持っていませんでした。

しかし、ある時、先輩と話していた時、「なんでクロスプラットフォームで開発しないの？」と聞かれ、「クロスプラットフォーム」という言葉自体知らなかった私は、なんのことだと思っていました。そこから調べてみると、2種類の端末を同じコードで開発できる環境であることを知りました。

なんて便利なんだと感動した私は、統合開発環境の勉強を始めました。

統合開発環境（クロスプラットフォーム）の種類

AndroidとiOSの同時開発の分野では、多くの試みがなされてきました。大別して以下の３つのアプローチがあります。

• ハイブリット型：webviewの上でWebアプリケーションを動かす（Cordova , Iconic FrameWork
• 独自レンダラ型：独自の描写エンジンでUIを描画する（Unity , Flutter）
• ネイティブUI型：AndroidやiOSのUIシステムを別の言語やフレームワークから操作する（Titanium , Xamarin , React Native )

今回は、その中の１つReact Nativeについて解説していきたいと思います。

React Nativeとは？

React Nativeは、FaceBook社が中心となって開発が進められている、オープンソースのクロスプラットフォーム開発ツールです。

Reactといえば、これもFaceBook社がオープンソースで開発している、JavaScript向けのUI状態管理ライブラリです。その名を受け継いだReactNativeは、Reactを活用してモバイルアプリを開発するためのツールとなっています。

ReactNativeの主な特徴として、次の３つが挙げられます。

ネイティブな画面部品なため、幅広く描画が可能

ReactNativeはその名の通り、ネイティブの名を冠しています。ReactNativeはUIの描写をWebViewに任せずに、Android SDK やiOS SDKなどのネイティブアプリ本来の画面部品を使って画面を構築していることに由来しています。

ReactNativeの中には、<View>や<Text>といった、画面部品があります。これらはそれぞれ、実行時にJavaScriptからAndroid SDKやiOS SDKへと、UIの描画を依頼します。

その結果、<View>要素はAndroid SDKの android.view.ViewやiOS SDKのUIKitが持つ、UIViewに変換されますし、<Text>要素も同様に、android.widget.TextViewやUIViewへと変換されます。

このように、JavaScript側で定義したレイアウトは、すべてネイティブなビューに変換されてアプリ上に表示されます。

この特徴によって、カメラのプレビューなどの、ブラウザでは実装することが難しかった機能も実装することができ、ブラウザ製アプリに対する大きなアドバンテージとなっています。

HTMLやCSSライクな書き方をするので、理解がしやすい

React Nativeでは、とてもHTMLやCSSに近いような形でコードを書くことが可能です。

例えば、ReactNativeでは以下のように書きます。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//要素を決める部分
export default function App(){
  return (
     <View style={styles.container}>
       <Text>Hello World</Text>
     </View>
  );
}

//レイアウトを決める部分
const styles = StyleSheet.create({
   container: {
       flex: 1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
   },
)};

要素を決める部分などは、とてもHTMLの表記方法に似ていると思いませんか。

<div>タグなどは、<View>になっています。<Text>タグは文章を格納するものです。HTMLを一度勉強したことのある人であれば、言語を理解するのはとてもやりやすいのではないかなと思います。

レイアウトを決める部分もそうです。justifyContent, padding , marginなどほとんどがCSSで使われていた構文をそのまま使うことができます。そのため多くの方が触れたことのあるHTML/CSSの言語の知識を使って言語を理解することが可能なのです。

ReactNativeの辛いところと、Expoの活用

ブラウザ向けの開発手法とモバイルアプリ向けの開発手法のいいとこ取りをしたかのように、見えるReactNativeでも落とし穴があります。

それは、環境構築の面倒さです。

ReactNativeは、Android SDKとiOS SDKに跨って構築されています。そのためには、GradleやXcode, Cocoapods, その他多数のビルドツールをインストールしていかなければなりません。

私は、React Nativeを初めてやった時、Expoの存在を知らず環境構築だけで１週間ほど費やしてしまいました。ただインストールするだけならいいのですが、バージョンの違いや、新しいインストール方法があったりとネットに載っている情報の違いなどもあり、次から次に来るエラーに辟易していました。

Expoを知った今だから言いますが、これからReact Nativeを未経験でやろうと思っている方は、絶対Expoを利用することをお勧めします。

Expoとは何かというと、ReactNativeを動かすためのビルドツールをひとまとめにしたセットのようなものだと考えてください。

開発者は、ReactNativeを利用するための、複数のビルドツールを一つのコマンドで準備することができます。React Nativeの開発環境構築で悪戦苦闘していた自分にとっては、簡単すぎて感動したほどでした。

Expoのメリット・デメリット

Expoのメリットは以下の２点であると考えます。

• 環境構築が驚くほど楽
• 作ったアプリをすぐ実端末で確認できる。

１つ目は先ほども触れたことではありますが、ReactNativeで必要なビルドツールをコマンドライン１行ですべて済ますことができます。（これが本当に良い）

２つ目は、作ったアプリをすぐ実端末で確認できるということです。webサイトやwebアプリ等を作った人がある方なら経験があるかと思いますが、コードを変更した後、ページを更新すれば変更内容が反映されていましたよね。Expoを使えば、それを可能にします。

保存したコードが自動的にシミュレーターや実機で反映され動作を確認することができます。コードの変更がどんな動きをするのかなどをすぐ確認できるのは開発者としてとてもやりやすいものです。

では逆にデメリットは以下のようなものがあります。

• 使えるライブラリがExpo内のものに限られる

Expoは開発環境をすべてExpoが作っています。そのため、Expoに含まれていないライブラリをインストールして使うことができません。

しかしながら、モバイルアプリ開発に不可欠なライブラリはすでに取り込まれており、自分含め多くの開発者が、Expoに含まれていない部分のライブラリを必要としていません。

まだ初心者であれば全く開発に問題はありません。安心して使っていただければと思います。

まとめ

今回は、アプリを効率的に開発していくReactNativeとExpoについて解説していきました。ぜひこれからアプリの勉強をしていく方は統合開発環境の中から自分のより良いものを選んでいただければと思います。

以下では、ReactNativeのExpoを使った記事を書いています。併せて読んでみてください。

React Native - プロラブ (abyblog.online)