皆さんこんにちはWebnationの山下です。
WebViewを利用したスマホアプリの開発をApachCordovaで作ることが多かったのですが今回新たにReactNativeで開発する機会がありましたので記事にさせていただきます。

なぜReactNativeなのか？

今回プラットフォーム選定の要件としてクロスプラットフォームで有ること、webベースの技術で対応可能なこと、広く使われているプラットフォームで有ることを条件に選定したところReactNativeに行き着きました。
ApachCordovaと比較するとこんな感じ

比較すると両方ともクロスプラットフォーム対応でベース言語がJavaScriptなのは変わらないですが、GitHub starを見るとに大変人気なプラットフォームのようですね。

Expoとは

ExpoはReactNativeでの開発をサポートするフレームワークです。
ReactNativeでの開発を行う場合基本的にExpoかReactNative cliのどちらかを選択することとなります。
導入のメリットとしては下記が挙げられるのではないでしょうか？
 
・開発時にWebブラウザで簡単に確認が可能
・カメラや位置情報など端末に依存する機能を拡張機能として提供
・iOSビルド後のデータをXcodeを介さずにストアへアップロード可能（Windowsで完結）

環境構築

以下の環境を前提として進めます。
 
・windows10
・Node v16.10.0
・npm 7.24.2
 
では作業環境を構築してみましょう。
 

//Expoのインストール
npm install -g expo-cli

//プロジェクトの作業フォルダで以下を実行します。
expo init SampleProject
// templateでblankを選択

cd SampleProject
expo start

 
実行するとWebブラウザ上にコンソール画面が自動で立ち上がります。
左側メニューから「Run in web browser」を選択すると開発中の画面が簡易的に確認できます。
 

Hello World

初期状態では生成されたフォルダ内のApp.jsの内容が表示されていますので＜text＞＜/text＞で囲まれた文字を変更してみます。
変更後ファイルを保存するとブラウザ上の表示も更新されます。
ChromeのDevToolから表示する端末を選択してあげるとよき！
 

 
最後までご欄頂きありがとうございました。
ReactNative + Expoの環境構築でした！
構築自体はとても簡単ですね。
まだまだReactNative勉強中ではありますが、また機会があれば記事として更新させていただきます。