Web系エンジニアがIOS/Androidアプリを初めてリリースした話
はじめに
初めまして！普段は専らwebアプリをメインで開発している、Takaneと申します。
今回初めてZennで記事を書きます！（zenn-cliめちゃくちゃ楽でいい...）
この記事は、web系エンジニアが個人開発で、初めてIOS/Androidアプリをリリースしてみて、個人的に思った ReactNativeの良い点・悪い点、開発前に知っておきたかった やるべき事 などを主に書いています。
(※技術的なことは書いてません。)
これから開発を始めようと思われている方の参考程度になれば幸いです。
どんなアプリを開発したか
Aqualist
もともと趣味だったアクアリウムで、飼っている生態や水質を管理できるアプリがあったらいいな〜 と思ったのがきっかけでした。
調べたところ、既存で IOS/Android の両方ともすでに同種のアプリが存在していましたが、個人的に使いづらかったのと、いつかIOS/Android アプリ作ってみようと思っていたこともあり、この機に開発してみました。
（※ 現在Androidアプリでプランのアップグレードが行えない状態になっていますが、アプリ自体は使用可能です）
React Native の良い点・悪い点
私は普段web系をメインに開発しているため、React や Next.js はある程度触ったことがあり前提知識はありました。
ただ、ReactNative はもちろんのこと、IOSやAndroidなどのネイティブアプリに関しては全くのド素人でした。
(そもそも、Apple Developerにすら登録してなかったし、その存在を知らなかったレベル)
そいう前提を含め、個人的に感じた React Native の良い点・悪い点 をあげてみようと思います。
※こちらは完全に個人的な意見ですので、ご了承ください🙇♂️
良かった点
1.（冗談抜きで）ほぼReact
ちょっと予想以上にReactでした😳w
Reactを使用したことがある方はお分かりだと思いますが、Reactと言えば Components、 Hooks、JSX なんかを思い浮かべられる方が多いと思いますが、もうほぼ全部と言って良いいほど同じでした。
先ほどから「ほぼ」と言っているのは
- React と ReactNative では使用する Components が異なる
- Styles の プロパティ がwebのそれとは異なる
という点で若干異なるので「ほぼ」と表現させていただきました。
なので、私の場合ComponentsとStyleの当て方少し学習した程度で、開発できるようになり、学習コストがほとんどない状態で開発のスタートを切ることができました。
Reactを既に触ったことがある もしくは何かしらで 知識がある状態 の場合は迷わずReactをお勧めします！
2.（Macの場合）開発環境が構築しやすい
これもReactで何かしら開発を行ったことがある方向けになってしまいますが、Reactの開発環境構築をした際にnodeやnpm、yarnが入っていると思いますので、あとは watchman (ファイル変更管理ツール) や cocoapods (iOSのライブラリ管理ツール) のような、ReactNative環境で使用するパッケージを入れて、
$ npx react-native init HogeApp
あとは上のおまじないをするだけです。(あら簡単😳)
他にも Expo を使って開発環境を立ち上げることができますが、Macの場合であれば、上記の方が個人的に簡単かつ早い気がします。
※Expoで立ち上げるとExpoでしか使用できないライブラリや逆も然りで、Expoにはないライブラリがあります。
悪かった点
正直、ReactNativeが好きになってしまったので（ちょろ）、あまり悪い点が見つからなかったのですが、強いて言えばという感じで上げさせてもらいました。
日本語の記事が少ない（体感）
やはり、どこ行ってもエラーは付きもの😇
基本的なことに関しては日本語での記事はあるものの、コアなエラーに遭遇するとなかなか日本語での記事はヒットしない可能性がありました。（全く無いというよりは表面的な内容の記事が多いなと感じました）
英語で検索した方がヒットする確率が上がり、解決に至るまでの時間が違ったので、途中から英語で検索していました。
SwiftやFlutterの場合はもう少し日本語の記事が多くある感じがしました。
（調べていると結構Flutterの記事に遭遇した記憶があります。最近よく使われているのでしょうか？）
初めに知っておきたかった「やるべき事」
こちらはReactNativeに限った話というわけではなく、ネイティブアプリを作成する上で やっておけば良かった事、やっておいて良かった事をまとめてみました。
1. アプリを立ち上げたら、bundleId や applicationId は必ず先に使用できるかチェックする事
実は同時進行で Aqualist とは別のアプリを開発していました。(よくあるToDoアプリを自作して、自分で使おうと思ってましたが、結局リリースまではしてないです。)
その際に設定したbundleIdが既に使用されていたため、App Store Connectにアップロードできないという問題が発生しました...
bundleIdを変更すると多くの影響箇所の修正を余儀なくされ、結構めんどくさい事になります。
ReactNativeにはbundleIdを変更して、影響箇所も一括で修正してくれるライブラリがいくつかありましたが、私の場合うまくいきませんでした。（ReactNative上でのエラーは解消できましたが、何故かbuild時にクラッシュして結局...という感じでした）
そういうこともあって、これからはアプリを立ち上げたらまず初めに bundleId や applicationId が使えることを確認しておくようにしようと思いました。
2. Analytics系のアクセス解析ツールを入れておく事
私の場合はリリース時から Firebase Analytics 入れてアクセス解析などを行っていました。
アクセス解析目的よりも何方かと言えば、使ってみたかったから という方が強かったです。
リリースしてしばらくすると日本以外でも使用されていることがわかりました。（これは自分でもちょっと驚きでした）
当初はグローバル対応するつもりは無かったですが、これがきっかけでグローバル対応しました。
もちろんApp Store Connectでもアクセス解析などは可能です。
ただリアルタイムでの解析や、ページやイベント毎のコンバージョンなど、そこまで詳細に見る事ができません。
もし可能であれば、アクセス解析ツールは入れておいた方が良いなと思いました。
最後に
拙い文章で恐縮ですが、ここまでお読みいただきありがとうございました🙇♂️
Twitter(X) もやっているのでもし良ければフォローして頂けると嬉しいです🙇♂️
（特にアクアリウムやられてる方は是非！！！）
HP
Discussion