アプリ未経験の大学生が1ヶ月かけてReactNative（Expo）でiOS/Android対応のアプリを作った話

先日、「ワセフリ」というアプリをリリースしました。開発期間は約1ヶ月。ReactNativeを使って、iOS/Android両対応しています。

先日、学生が教科書などを交換や売買できるようなフリマアプリ、「ワセフリ」をリリースしました！

開発に着手したのが2020年の3月19日。正式にリリースしたのが4/19日ということで、まあ大体4週間かかったかな、という感じです。

言い訳がましいのですが、平日はほぼフルコミットでエンジニアのインターンとして働いていることもあり、開発に使えるのは平日の夜&土日ということで、本気を出せば1週間とかでリリースまでいけたかと思います！！（多分ムリ）

1週間でアプリをリリースできたら、本記事のタイトルもさぞかしキャッチーなものになったでしょうが、まあしょうがありません。妥協しておきます。

※　アプリ未経験と書きましたが、プログラミング自体の経験は1.5 ~ 2年ぐらいあります。完全に0からというわけではないのでご承知おきください。

僕は元々アプリを作ったことがなかったのですが、現在はReactを使っている会社でインターンをしているということもあり、ReactNativeでアプリ作れるんだよな、じゃあやってみるか、と思ったのがアプリを作るきっかけです。

開発経緯

同じ大学の同級生と、ちょっと自分たちでサービス作ってみたいよねーという話になり、じゃあやってみるか、という感じでスタートしました。はい、以上です。ごく単純。

もっと踏み込んだ話をしますと、今まで自分はアプリ開発の経験がなく、アプリ開発やってみたいなーという気持ちと、でも俺にできるのかなという気持ちの間で揺れ動いていました。

アプリ開発となると、そもそも違うプログラミング言語を扱ったりだとか、アプリ開発独自の用語だったりがあるため、それらを新しく学ぶのが若干面倒に思えたのです。

ですが、よくよく調べてみると、今の自分が扱える技術を振り返ってみたところ、**「iOSもAndoroidも両方いけちゃうやつ」**というスーパー便利なものがあることに気づいたのです。React Nativeというものです。

この気付きが追い風となり、よっしゃぁぁああーアプリ作ってみるかぁああ！！、となったわけですね。

実装機能

• ユーザー登録機能
• チャット機能
• 投稿機能
• プッシュ通知

大学生が教科書をもっと安く手に入れられたらな、との思いからアプリを作りました。まあ、コロナの影響もあり、教科書の授受ができないので、アプリの存在意義がちょっとなくなりかけているのですがw

使用技術

Firebase

• Authenticate: ユーザー登録・認証

• Realtime Database: Firebaseのデータベースサービスとしては、Realtime DatabaseとFirestoreという2つのサービスがあり、Firestoreのほうが新しくてナウいっぽいのですが、なんとなくRealtime Databaseのほうが簡単そうだったのでこちらを採用しました

• Fire storage: 画像のアップロード&読み込み先はこちらです。僕もまだまだ未熟なところがあり、無駄にリクエストをばこばこ送っていて使用量がけっこうギリギリなのが悩みどころですね。

• Firebase Cloud Messaging: Androidのプッシュ通知に関しては、このサービスを使わないと実装できないようです。とはいっても、面倒な部分はExpoが全部やってくれるので、僕がやったことといえば証明書を発行したぐらいですね

Firebaseに関しては、素人童貞みたいなところがあり、今までは雰囲気でやっていたのですが、今回はドキュメントを隅々まで読みこんで実装しました。おかげでFirebaseに関してはそこそこ詳しくなれたので、よかったですね！

ReactNative（Expo）

ReactNativeでアプリを作る場合、

• ReactNativeを生で書く（bare workflow）
• Expoを使う

という2パターンがあるのですが、**僕はExpoで開発しました。**Expo半端ないっす。マジで。ドキュメントがむちゃくちゃ充実しているので、それに従っていれば、そこそこのアプリなら簡単に作れてしまいます。とはいえ、よりiOS/Android端末のコアに近い部分の操作をするためには、ちょっとしんどいかな、というところですが。

使用したpackage

• react-native-gifted-chat: チャット画面のUIが簡単に実装できました。本当にプラグインを入れるだけでMessagerそっくりの画面ができるという

• react-native-elements: マテリアルデザインのUIが簡単に実装できちゃうスグレモノ。UIコンポーネント系のパッケージは他にも、NativeBaseとか色々あったんですが、一番使用されている&今後もサポートされるであろうreact-native-elementsを使用することにしたって感じですね

• react-navigation: routerみたいなやつです。ページ遷移とかの挙動はコイツでサクッと実装できます。スタック式の「戻る」・「進む」のパターンも、画面下側に張り付いているナビバー型も、ハンバーガーメニューのdrawerも、全部react-navigationで実装できます。react-navigationは、長らくversion 4がデファクトスタンダードだったらしいのですが、最近version 5が出まして、version4と5ではけっこうコードの書き方が異なります。ドキュメントも、v4, v5、どっちもあるので、けっこうややこしかったですね。

ReactNative（Expo）を使ってみた感想

ReactNativeの日本語の情報がまじで少ないですよね。公式のドキュメントは充実しているので、僕はそれを見ながら実装を進めていったんですが、英語アレルギーの人にはReactNativeはオススメできないなと感じました。

新機能が続々と開発されている段階でもあるので、それに追いつくためのキャッチアップがけっこう面倒くさい、というのもあります。

しかしReactNativeのライブラリであるExpoなら、JavaScriptの経験がある人にとっては想像以上に学習コストが低いです。僕も、あれ、こんなに簡単にアプリ作れちゃっていいの？というびっくりしました。

普通にコンポーネントをぽこぽこ作っていくだけでアプリができてしまうという。Webの開発経験があるなら、ドキュメントをさらっと読むだけでアプリが作れるはずです。

もちろん、低レイヤー部分に手を加えたいならFlutter/Swift/Kotlinの出番でしょうが、そこまで必要になるのはけっこうな規模のアプリになるのでは？　個人開発レベルから、それなりのトラフィックを捌くレベルまでなら、ReactNativeで全然対応できるのではないでしょうか。何より技術の幅がうんと広がりますしね。いいことづくめです。

というわけで、ReactNative(Expo)を使ったアプリ開発、みなさんも一度経験してみては？