1. TOP
  2. BLOG
  3. DEVELOP
  4. React NativeアプリをWebエンジニアだけで開発した話

React NativeアプリをWebエンジニアだけで開発した話

2020.02.07


こんにちは、エンジニアの川上(@natsumican63)です。

スタジオ・アルカナでは、普段は主にPHPでのWebサービス開発を行っています。

今回は、はじめてWebエンジニアのみでReact Nativeでのアプリ開発・リリースを行ったので、その時の話を書いていこうと思います。

React Nativeでアプリ開発をする事になったきっかけ

スタジオ・アルカナでは、キミスカという新卒者向け就活プラットフォームの開発・運用を行っています。

しかし、学生向けサービスでありながら、ブラウザ版のみの提供となっておりアプリ版配信の要望が多く寄せられていました。

そこで、過去に採用実績があり、Webエンジニアでも馴染みのあるReactを用いたアプリ開発を行うことになりました。

React Native(Expo)について

React Nativeは、Reactを使用してiOS,Androidアプリを構築することができるライブラリです。

今回、Webエンジニアのみでアプリ開発を行うため、React Nativeをより簡単に扱える開発支援サービスである、Expoを採用しました。

Expoでは、ネイティブのコードを一切書かない(書けない)代わりに、JavaScriptを使用します。

つまり、ネイティブモジュールが使えない代わりに、Expo側の用意したAPIをJavaScriptで呼び出し、それらを組み合わせてアプリを構築することになります。

カメラ機能やプッシュ通知機能といった主な機能は一通り提供されており、出来ることも増えつつあるため、今回私達の開発するアプリでは、Expoを採用することにしました。

どのようなAPIが提供されているかは、下記ドキュメントから参照できます。

Expo SDK

 

よかった点

Webフロントエンドの知見でアプリ開発ができる

前述の通り、Expoではネイティブのコードを書かずにJavaScriptのみで開発します。

SPA開発でお馴染みのHot Reload(Fast Refresh)が使えたり、npmライブラリを使用できたりと、Webフロントエンド開発の体験をほぼそのまま得ることができました。

また、React NativeではWebフロントエンドと同じくFlexboxでレイアウトを組んでいくため、スタイリングに関してもこれまでの知識を応用することができました。

ビルドが簡単にできる

Expoでは、CLIからコマンドを叩くだけで、iOS/Androidアプリのビルドができます。

コマンドを叩くと、Expoサーバーでビルドが行われ、iOS/Android用にそれぞれipa,apkファイルが生成されます。

また、この際に面倒な証明書等の作成もExpoが実行してくれます。

Expo Clientを用いた実機確認が簡単

Expoでは、汎用型クライアントアプリをアプリストアからダウンロードし、QRコードを読み込むだけで、開発中のアプリを簡単に実機で動かすことができます。

これにより、エンジニアだけでなく、ディレクターやビジネスサイドの方々にも、開発中のアプリを簡単に確認してもらうことができます。

今回はCIも導入し、常に最新のバージョンを確認できるようにしました。

 

大変だった点

Amazon Pinpoint×Androidで通知が飛ばない事件

前提として、Expoでは便利なPush通知機能がデフォルトで用意されています。

Push Notifications

今回は事情により、プッシュ通知サービスはAmazon Pinpointを利用することになりました。

その際に、Androidで通知がうまく飛ばず、一度ExpoアプリをejectしAndroid Studio上でエラーログを確認する必要がありました。

結果的に、Pinpointのドキュメントと実際のペイロードが異なっていたために起きた不具合でしたが、そもそもExpoのPush通知機能を使っていれば避けられた問題だったかな…と思います。

ストア審査のあれこれ

Webアプリケーションと異なり、アプリストア上でアプリを配布するためには、Apple/Googleの審査を通す必要があります。

社内にアプリエンジニアがいないため、審査に必要なものやリジェクトされない方法については、逐一ググっていくしかありませんでした。

運良く審査も一発で通り、結果的に無事リリースまで漕ぎ着けましたが、今回の開発で一番苦労した点と言えます…。

 

その他アプリならではの工夫した点

せっかくなのでUIも使いやすく

これまでのメーラー風UIを刷新し、学生世代にも馴染みのあるチャット風UIを採用しました。

基本的なチャット風UIを素早く構築できるReact Native用ライブラリ、react-native-gifted-chatがExpoにも対応しており、今回はそれを用いて構築しました。

Slackにアプリストアのレビュー情報を流す

AppFollowを使用して、Slack上にアプリストアのレビュー情報を流し、ユーザーからのFBがリアルタイムで確認できるようにしました。

 

まとめ

今回、Expoを利用することによりSPA開発時と同じような開発体験を得ることができました。

パフォーマンスの方も、今の所ネイティブと遜色の無いレベルで動いていると思います。

今回のように、Expoで用意されているAPIで事足りる要件であれば、Expo採用は選択肢のひとつになり得ると思います。

はじめてのReact Nativeでのアプリ開発で、社内にネイティブアプリの知見がない状態での開発でしたが、とくに大きな問題もなく無事アプリをリリースすることができました。

まだリリースしたばかりですが、今後の運用にどのような影響があるかも含め、引き続き検証していきたいと思います。

また、この記事では言及しませんでしたが、今回はサーバー側でGraphQL、クライアント側でApollo Client(+TypeScript)を採用したりと、Expo以外にも面白い技術を採用しましたので、次回はそのあたりについて書けたらと思います!

スタジオ・アルカナでは共にReactを書いてくれる仲間を募集しています!!