Reactでネイティブアプリを作成しました！

Posted date at 2024-05-02

React

上記のYoutube動画で、Reactでネイティブアプリ（ブラウザではなく、iOS、Android環境で動作するアプリ）を開発する方法をハンズオンで学びました。

学習内容、開発用途、iOSアプリ開発に必要な環境とリリースに必要な手続きをまとめましたので共有します。

🥎アプリのQRコード📒

※AppleStoreから、「ExpoGo📒」をインストールした上で、カメラを起動するとアプリが使用できます。こちらは、正式なリリースではありません。正式なリリースをする場合は後述する手順を踏む必要があります。

　

🚀ReactNativeとは

説明文

React Nativeは、Facebookによって開発されたオープンソースのフレームワークで、モバイルアプリケーションを構築するためのプラットフォームです。React Nativeは、JavaScriptとReactというライブラリを使用して、iOSやAndroidのネイティブアプリケーションを開発するための効率的な手段を提供します。(ChatGPT4🤖)

　

🚀資料

🥎学習動画「【React Native】スマホアプリ開発の流れをハンズオンで理解しよう」📒

🥎ソースコード📒

　

🚀開発用途

WEBアプリでは困難な機能の実装に使用したいと考えています。 例えば、NFCタグの読み取り機能を持つアプリを開発したいと思っています。 「ReactNative NFCタグ」で検索するとテックブログやGitにソースコードが多く出ているので 担当課の利用ケースを聞いてアプリを開発したいと考えています。

🥎SwiftとFlutterの学習要否

iOSネイティブアプリを開発する上でSwift、Flutter、ReactNativeのどれがいいかという議論があります。

今、エンジニアの代名詞にもなりつつあるwebアプリケーションの勢いが衰えることは

なさそうなので、Web開発（フロントエンド、バックエンド、DBまで踏めたフルスタック）

の技術を高めていきたいと考えます。

その副産物として、ネイティブアプリの開発に活かせるReactNativeの使用が妥当だと今は考えます**。**

個人的にはPWAが発展してきて、いずれネイティブアプリもPCのデスクトップアプリに近い位置づけに

なるのではと考えています。

　

🚀ReactNativeのiOS開発環境の構築とiOSアプリリリース手続き

🥎開発環境

1.windowsの場合

  • ⇒EXPO📒を使用して、実機で開発（今回の手順）
  • ⇒仮想OS(VirtualBox等）でMacOSを起動し、その中でXCode（エミュレータ）を使用

2.MacOSの場合

  • ⇒XCodeを使用して開発

一般的には、2が主流のようです。業務での開発おいては開発＋検証用にMacBookを１台用意したほうが良いと考えます。

　

🥎iOSアプリのリリース手続きについて

iOS向けにアプリをリリースするにはAppIDに追加で以下の登録をする必要がある。

アプリの公開（デプロイ）には、審査（期間：１日～１週間）が必要である。

〇Apple Developer Program

  • 年会費：$99
  • リリース・バージョンアップ時に審査が必要

〇Apple Developer Enterprise Program

  • 年会費：＄299
  • リリース・バージョンアップ時に審査が「不要」
  • 備考：申請が通りにくい模様（大手企業でも通らないこともある）

　

🔎追記：社内へのアプリの展開方法を見つけました！

〇カスタムAppの配信

  • 特定の業務用アプリの作成のために用意された区分
  • 外部に非公開とされる
  • リリース・バージョンアップの際にAppleの審査が必要(1～2日程度）
  • Apple Developer Programを契約する必要がある（年会費：$99）
  • ⚽参考URL📒

　

🚀最後に

ReactNativeに触れてみて、普段、Reactを使用している人間からすると基本的な文法やフレームワークが一緒なので思ったよりとっつきやすい印象でした。

Appleの審査の厳しさ、期間が分からないので、余裕を持った開発をしたいと考えます。

今回、ネイティブアプリについて気になっていたため学習しましたが、基本的にウェブアプリケーション開発を極めたいので、当分は学習を進めることはないと思います。

←ホームに戻る