はじめに
今回は、Reactでスマホアプリが作れるReactNativeを紹介します！
Reactを触ったことあるけど、ReactNativeは触ったことがない方向けに
ReactNativeの概要をご紹介します。
YouTube動画
動画はこちらから視聴できます。
記事に書き起こしきれなかったやっすん自身の経験談なども聞くことができますので
ぜひ一度ご覧ください！！
【YouTube動画】Webの技術でアプリが作れる、ReactNative入門
React(Web)との違い
ReactNativeのコードはこのようになっています。
import { View, Text } from 'react-native'
function App() {
return(
<View>
<Text>テキスト</Text>
</View>
)
}
Reactとの違いは、JSXで使用するタグ(コンポーネント)です。ReactNativeではViewやTextといったタグを使います。
ReactNativeは、ビルド時にこれらのタグをiOSやAndroid用のクラスに変換することで、ネイティブアプリのように動作させることができます。
ReactNativeで利用できるタグについてはこちらをご覧ください。
ReactNative開発を始めるときの２つの選択肢
ReactNativeの開発環境構築についてググった時に、Expoというフレーズを目にしたことはありませんか？
実は、ReactNative開発ではExpoとReactNativeという2つの選択肢があります。
それぞれの特徴をご紹介します。
Expo
ExpoはReactNative開発初心者向けで、主な特徴は以下の通りです。
-
Xcode, AndroidStudio不要なので、web技術ゼロでも大丈夫。
ExpoではiOSとAndroidの向けアプリをそれぞれ自動的にビルドしてくれます。 -
ビルドが速い
ビルドや公開については、ExpoのCIサービスが立ち上がってビルドしてくれるようになっているので、XcodeやAndroidでよくあるバグが出ません。 -
Expo用のライブラリがある
Expoでは通常のReactNative向けライブラリの一部を使用することができません。
ただし、Expo用のライブラリがとても充実しており、通常開発する範囲で必要となる大体の機能は開発することができます。
ReactNative開発を初めて行う方は、まずはExpoを使って徐々に慣れていくことをオススメします！
ReactNative
元々iOSやAndroidアプリ開発の経験がある方、Expo開発に慣れもっと高度な機能を実装したい方はReactNative開発がおすすめです。
特徴は以下の通りです。
-
Xcode, AndroidStudio(Gradle)の知識が必要
アプリ開発環境に関する知識が必要になりますが、Expoよりもきめ細かな設定が可能です。
ビルド設定はiOSとAndroidそれぞれで行う必要があります。 -
様々なネイティブのライブラリがある
Expoと異なり、ReactNative向けのライブラリを全て使うことができます。
ネイティブのライブラリのインストール方法は、
- iOSのインストール：CocoaPods
- Andriodのインストール：Gradle
中・上級者の方は、より高度な機能開発ができるReactNativeがオススメです！
Expo Application Service
Expoでは様々なライブラリが使えないという制約がありますが、Expo Application Serviceを使うとネイティブのライブラリを組み込めるようになるらしいので、EAS Build機能の本リリース後は全員ExpoでOKになるかもしれません。
EAS Buildについてはこちらをご覧ください。
※現時点では experimental featureとなっており、本番利用は推奨されていません。
まとめ
ReactNativeとReactの違いや、ExpoとReactNativeについて主に解説しました。
この記事をきっかけにReactNative開発に触れてみていただけると嬉しいです！