家計簿日記 CashDiaryという、日記と家計簿を同時管理するアプリを作りました。
開発した経緯、技術選定理由や詰まった箇所を忘れないために、記録を残します。

作った理由

個人的要件

ReactNative
- 前述の通り、hooksの学習をしたかった
TypeScript
- React使用するには必須のため
expo
- ~~expoを使用しないと色々と面倒らしいため~~
expo-sqlite
- FireBase等のサービスを使うとお金が掛かる。毎月コストなしで運用したかったため。しかしこれぐらいの規模なら無料プランでおさまったかもしれない・・
EAS
- react-native-google-mobile-adsはexpoに対応していないとのことで、EASを使用してビルド、ストアに提出した

react-native-google-mobile-adsを使用してAdmobを実装したかったが、expoでは対応していなかった。
そのためEASで実装が必要になる。

アプリの各種設定（アイコン・スプラッシュ画像）は、app.jsonに記述するが、
動的に変更したい場合がある。
その場合は、app.config.jsを作成してルートディレクトリに配置する。

開発用実機iOSにビルド
eas build --profile preview --platform ios

iOSシミュレーターににビルド
eas build --profile development-simulator --platform ios

expo起動
npx expo start --dev-client

eas device:createで対象デバイスを追加する
またiOS16の場合、デバイス側でプライバシーとセキュリティ　→　デベロッパモードをONに設定する必要あり

app.config.jsに環境変数を設定する場合

1.　app.config.jsに以下を追加する

app.config.js

    "extra": {
      APP_ID: process.env.APP_ID
    }

eas secret:create --scope project --name key --value value

eas secret:list

.gitignoreにあるファイルはEASビルドの対象外になる
.easignoreを追加すると、こちらの設定が優先されるので、ファイルをルートディレクトリに追加する。
すべて空白にすると、.gitignoreに記載されていても、対象になります。

eas submit -p iosでAppStoreに提出したら、
次に提出する際は、buildNumberをインクリメントする必要がある。
また、この際、ルートディレクトリにiOSディレクトリがあると、
そこのplistの設定が優先されるため注意

app.config.js

  "expo": {
    "ios": {
      "buildNumber": "X"
    }
  }

Simulator
Simulator →　File →　NewSimulaterで　デバイスを追加
File →　Open Simulator → デバイスを選択

Expo　IOを開いて、BuildDetailsからアプリをDownload
appをデバイスにD&Dする

以下の解像度のスクショは必須になる

再レンダリングによるパフォーマンスを意識できてなかったため、useMemoやUseCallbackを活用する

愚直にスクリーン毎、機能毎にコンポーネントを作っていた。Atomデザインを適用したい。

ReactNativeでの開発が初めてということもあって、時間がかかってしまった。
途中からChatGPT4を使用し始めたので、効率が上がった気がする。
あと、React Nativeのメリットを活かすためにandroid版も出したい。