🍔

React Nativeで初めてアプリを作って公開までした話

2023/08/23に公開

iOS

React Native

Redux

tech

自己紹介

都内の大学院に通う修士1年生です。通信系の研究をしていますが、就職先としてはwebアプリやモバイルアプリの開発をしたい25卒の者です。

数週間ほどReact Nativeの勉強をしていて、ひと段落ついたので自分で1から何か作ってみようと思い開発を行った話を書きたいと思います。

作ったもの

ホットペッパーのAPIを利用して、現在いるところ、もしくはこれから向かう駅の周辺にある飲食店の中から一店舗選んでくれるアプリです。価格帯も設定できます。
優柔不断でお店選びにいつも困ってしまうという方に使って欲しいです。

githubのリンクも貼っておきます。

なんで作ったか

webフロント開発の勉強のためにReactを使ったことがあり、モバイルアプリ開発に興味を持ったときにwebフロントと同じ感覚で開発ができると思いReact Nativeを触れることに決めました。その勉強が一段落ついたのでアウトプットのために作りました。

アプリ内容に関しては、僕自身お店選びにすごく時間をかけてしまうので、アプリに「ここ！」って決めてもらえれば楽だなと思いこのようなアプリを作ることに決めました。

Figma

フローチャート

最初にFigmaでアプリのすごく簡単にフローチャートを決めました。

簡単にでもフローチャートを考えておくことで、アプリ使用時の流れを把握しながら開発することができました。

UIデザイン

僕は凝ったデザインを作ることができないので、最低限が分かればいいとてもシンプルなものにしました。
画面遷移を図示しながらデザインを作りました。

figmaでほとんどの画面とデザインを大体作ってから開発に移りました。

実装

実装関係について簡単に書いていきます。

環境

expoを用いて開発しました。動作確認も手持ちのデバイスに専用アプリをインストールしてそこで確認できるのでスムーズに開発できました。

API

お店情報を取得するためにAPIを提供しているサービスを調べました。いくつか見つかり、当初は食べログのAPIを使いたかったのですが、かなり前にAPIの提供を終了していたらしく、ホットペッパーのAPIを使用することにしました。

状態管理

状態管理にはReduxを使用しました。前から使ってみたかったのですが、なかなかハードルが高く避けていたところを意を決して今回採用してみました。いざ使ってみると、思ったよりは扱うことはできましたが、やっぱり概念は複雑なので完璧に使いこなすにはまだまだという感じでした。次はRecoil使ってみようかな。

https://redux.js.org/

各スクリーンの開発

主な画面はトップ画面とマップ画面の二つだけでした。

トップ画面

トップ画面でユーザーは

現在地 or 別な駅かの選択
別な駅の場合、駅名の入力
価格帯の入力

を行います。

このユーザーが触れる部分をそれぞれコンポーネントとして作り、状態によって表示を切り分けるようにしました。

価格入力のコンポーネント表示時に決定ボタンが押されたら、入力された情報を用いてAPIから情報を取得し、マップ画面に遷移します。

マップ画面

APIで受け取った情報には複数の店舗情報があり、マップ画面ではそのうちランダムな一店舗を店舗情報表示コンポーネントに渡します。ボタンをタップすることでその店舗のホットペッパーのページをブラウザで開くこともできます。

また、お店情報にはそのお店の座標も含まれており、それを用いてマップ上にピンを打ちます。

react-native-mapsライブラリを使うことでマップの表示やピンに関しては簡単に実装できました。

アプリの公開

App storeに公開するために、"Apple Developer Program"に登録しました。（約1,3000円払いました…)

expoのコマンドでipaファイルを作成し、それを登録した後各種申請用の情報をApp Store Connectに入力していきました。無事申請できたと思ったら、予想できていなかった不具合が発生したり、上手くエラー処理をしていたと思ったらそれがバグだと認識されたりでリジェクトされ、審査が通るまで5日ほどかかってしまいました。

開発外でこんなに手こずるとは思っていませんでした。

今回はあくまで勉強のアウトプット用の開発であったことと、Androidの方まで申請するのは大変そうだと感じたのでiosのみにしました。せっかく両方開発できるフレームワークなので、次回はiosとandroid両方でリリースできるように頑張りたいと思います。

終わりに

webフロントとほぼ同じ要領で開発を進められるため、reactを経験しているとかなり楽に開発を進めることができました。最近よくReact Nativeはオワコンだという意見を聞くようになりましたが、webアプリ開発からやって来て早急にモバイルアプリを開発したいとなったらベストな選択肢なのではないかと思いました。

高いお金を払ってApple Developer Programに登録したのでモチベーションを維持してまた新たにアプリを公開したいです。