React NativeでiOS/Androidアプリを丸っと開発! Nature Remo開発で分かった長所と短所

React Nativeを使って「Nature Remo」iOS/Androidアプリの開発を進める村瀨大輔(typester)さんと、北原壮さんに、導入して分かったメリットとデメリットを伺いました。

React NativeでiOS/Androidアプリを丸っと開発! Nature Remo開発で分かった長所と短所

モバイルアプリ開発の現場において、現在注目されているのがFacebookやInstagramといったサービスも採用している「React Native」です。

Facebookが開発したJavaScriptのフレームワーク「React」をモバイルアプリ開発向けにしたもので、iOS/Androidアプリの開発ができます。JavaScriptがネイティブのUIを描画でき、iOS/Androidでコードを共通利用できる開発効率の高さから、多くの開発者が興味を寄せています。

開発のスピーディーさに注目が集まっている一方で、事例の少なさから参考になるドキュメントが少なく、開発が本当に楽になるのか疑問視する声や、メジャーバージョンになっていないことへの不安を感じている方も多いのではないでしょうか。

そこで今回は、React Nativeでスマートリモコン「Nature Remo」の開発を進めている、Nature社の村瀨大輔さん、北原壮さんのお二人に、React Nativeの長所や短所、実際に導入したからこそ分かる開発のノウハウなどを伺いました。

村瀨大輔(むらせ・だいすけ/@typester)(写真左)
通称typester。面白法人カヤックの新規事業開発ラボにてリードエンジニアとして、Facebook電話アプリ「Reengo」 をはじめとする多数のサービス・アプリを開発。その後、独立し4年間の会社経営を経て、2018年4月にNatureに参画。オープンソース活動も積極的に行なっており、GitHubで公開しているレポジトリ数は100を超える。
北原 壮(きたはら・そう/@soh335)(写真右)
2012年に慶応義塾大学大学院(SFC)の政策メディア研究科を卒業。学生時代から、面白法人カヤックの新規事業開発ラボにてゲームコミュニティ「Lobi」など多数のサービス・アプリを開発。卒業後、面白法人カヤックに就職するも、独立後の村瀨を支援するために転職し、2018年4月にNatureに参画。

React Nativeを導入する理由は「開発スピード」の早さ

1

―― 村瀬さんと北原さんはNature参画前から受託でNature Remoの開発に参加し、現在はNature RemoのiOS、AndroidアプリをReact Nativeを使って2人で開発されていると伺いました。開発にReact Nativeを導入しようと思ったキッカケを教えてください。

村瀬:もともと、仕事でなく個人的な遊びでReact Nativeは使っていて。Nature Remoのアプリ開発に誘われて、少人数でiOS/Androidアプリを両方開発するにはどうしたらいいかと考えたときに「コードを一本化できるReact Nativeでやったらどうか」と考えたんです。

北原:でも、僕は正直、最初は導入を渋りました(笑)まだ新しいフレームワークでライブラリもそれほど充実していないので、仕事に使うのはどうなのかなって。

村瀬:当時は、今よりも実用性がなくて“おもちゃ感”があったからね(笑)僕もずっと遊びでReact Nativeを触ってきた中で、2018年に入った頃から、良い感じにバッドノウハウが溜まってきたんです。「これはいけそう」と思い、React Nativeでの開発に切り替えました。

―― なるほど。村瀬さんはもともと、宮川達彦(@miyagawa)さんのポッドキャスト番組などで、React Nativeを高く評価されたりしていましたし、潮流を追っていたからこそ、「今だ」という感覚がつかめたんですね。北原さんももともと、React Nativeには詳しかったのでしょうか?

北原:本格的に使い始めたのはNature Remoの開発からですね。もちろん、専門のノウハウや勉強は必要ですが、昔からネイティブアプリの開発はやっていましたし、React Nativeだからといって開発の流れがガラッと変わるわけではないので、使い始めるとそんなに抵抗はなかったです。

2

―― React Nativeを導入して感じた、一番のメリットはなんでしょう?

村瀬:やはり、開発スピードです。1つのコードでiOS/Android、両方のアプリを動かせるので、それぞれで開発するよりも断然早い。Nature Remoは、僕ら2人でiOS/Androidアプリの開発と、サーバーサイドの開発もしているので、「スピード」は何より大事なんです。あとは、わざわざビルドしなくても画面を確認できるので、その速さもメリットだと思います。

北原:僕らは人数が少ないから、「スピード」という面でメリットが大きく感じますが、開発チームの人数が多い場合は、それぞれ別々に開発した方が早い場合もあると思います。

村瀬:そうですね。開発の環境やチームメンバーによって、「React Nativeを導入するべきか、否か」という判断は変わってくると思います。

―― やはり「向き」「不向き」はあるということですね。Nature Remoの開発では、React Nativeの導入に合わせてネイティブからコードを置き換えたとのことですが、移行する上で苦労した点があれば教えてください。

村瀬:個人的にReact Nativeは使い慣れていましたし、使っているライブラリを引き継いだり、バッドノウハウも溜まっていたりしたので、アプリ面の開発ではそれほど苦労した部分はなかったですね。

北原:僕も、死ぬほど大変! とは思わなかったです。結局はReactとReduxの世界なので、表示周りの開発とかはむしろ楽ですよ。iOS/Android、シミュレーターを2つ立ち上げなきゃいけなきゃいけないのはダルいかな(笑)

村瀬:あとは、iOS/Android同時にデバッガーにつなげられないんです。シミュレーターなどを立ち上げるときに、引数を変えたりすればできると思うんですが、まだ試せてなくて。

北原:なので、僕がiOSのシミュレーターを立ち上げて、村瀬さんがAndoroidをやって……と、なんとなく分業制になっていますね。それで、お互いのバグが分かったりしています。

「TypeScript」を使っていなければ死んでいた

―― React Nativeを導入した開発で、使うと便利なライブラリなどあれば教えてください。

村瀬:そうですね……必須なのは「TypeScript」くらいかなと思います。ほかに最近の開発では、ナビゲーションは「React Navigation」、state管理は「Redux」を使っています。ただ、個人では他のナビゲーションやstate管理も試していまして、けっこう使いやすいものも多いので、結論としては「好きなものを使うのが良い」になると思います。

―― わりと自由に選べるんですね。

北原:そこがReact Nativeの良い点だし、悪い点でもありますね。自由だからこそ、最初はある程度の知見がないとライブラリの選定が難しいんです。

村瀬:そもそも、React自体がWebで使われているライブラリなので、React周りのライブラリにバグが潜んでいることがあって。例えば「Redux Form」はReact Native用には設計されていないので、キーボードが勝手に起動してしまうバグがありました。

3

―― 試行錯誤してノウハウを貯めていくしかないというのは、ある意味「新しい技術ならでは」な点ですね。そんな中で「TypeScriptが必須」という意見は、説得力があります。

村瀬「TypeScript」を使っていなかったら死んでいたと思います(笑)

北原:6月ごろ、AirbnbがReact Nativeでの開発を取りやめると発表して話題を集めていましたが、Airbnbでは素のJavaScriptで書いていたらしくて、それはかなりキツイだろうなあと思いました。自分たちでReact Nativeにもパッチを当てて運用していたみたいで。そのあたり、Nature Remoの開発では「TypeScript」を使っているので、不満はないですね。

―― ネイティブアプリの開発者からは「型がないのが不安」という意見も挙がっているかと思いますが、「TypeScript」を使うと解消されるんでしょうか。

北原:ほぼ解消されると思います。ただ「TypeScript」は初期設定だとかなりルールがゆるい。JavaScriptに少し型がついたくらいのものなので、なるべくキツめに設定した方がいいと思います。

村瀬:サーバから返ってきたJSONがおかしいと、ランタイムの型チェックで落ちたりしてつらいですね……。

北原:まあ……それはSwiftなどでも起きる問題なので、仕方ない部分はありますね……。

シンプルゆえに、デザイン面では「妥協」も

4>

――先ほど「1つのコードでiOS/Android、両方のアプリを動かせる」とおっしゃっていましたが、実のところ、Nature RemoではどのくらいiOS/Androidでコードに差異があるのでしょう。

村瀬:開発工数の問題もあり、デザインはiOSに寄せるようにしていて、JavaScriptのコードはなるべく同じにしています。なのでNature Remoの開発では、iOS/Androidどちらもほぼ同じコードで済んでいます。

北原:ネイティブアプリには、OSそれぞれの「デザイン」がありますよね。AppleにはAppleの、GoogleにはGoogleのデザインがあって、それぞれに合わせたデザインを突き詰め始めると、かなりのコードを書き分けないといけなくなるんです。そうなると、React Nativeのメリットが薄まって、つらい感じに……。

村瀬:なので、必然的にデザインの妥協が必要になります。例えば、アプリ上でアニメーションを取り入れる場合、ネイティブの機能を使うと動作が軽くて済みますが、JavaScriptの中でアニメーションを使用すると重くなってしまう。なので、React Nativeを使った開発では、JavaScriptのアニメーションを制限して動きを減らしたりしていますね。

―― ほかに、デザインの視点で気になることはありますか。

村瀬:Web開発と同じくCSSのようにデザインを当てられる機能もあるのですが、それにも課題があって、カスケーディングができないんです。CSSであれば再利用ができると思うんですけど、React Nativeだと各コンポーネントごとに再定義しないといけない。スタイルを各コンポーネントに全部書かなくちゃいけないので、すごく面倒くさい。でも、そういうものだと思うしかない。

その代わり、コンポーネントごとの管理が単純でなので、新しい「デザイン」、新しい「画面」を作るときには、圧倒的に早いんですよ。

北原:そう考えるとコンポーネントごとにスタイルを当てなきゃいけないっていうのは、逆に功を奏している部分もありますよね(笑)iOSのAutoLayoutだと、他にパーツを流用しようとすると、切り出したViewは動くけど、他との関係は壊れて動かなかったりする。

5

―― そうすると、デザインは「シンプル」にならざるを得ないですよね。逆に、「デザインのシンプルさ」が開発のしやすさにつながりそうです。

村瀬:そうですね。端末のバリエーションも増えて画面サイズも機種ごと異なっているので、そういうシンプルなUIの方が幅広い画面サイズに対応できるという一面はあります。

北原:とはいえ、文字の大きさを変えるのが大変なのは困っていますね。iOSには、文字が詰まったときに一行で収まるように、フォントサイズのパーセントを制御する機能があるんですが、それをReact Nativeで使おうとすると、iOSでしか使えなくて。その機能をオンにすると、iOSでは動作するけど、Andoroidでは動かないということが起きる。なので先ほども話したような、デザインを寄せるといった「妥協」が必要になります。

村瀬:逆に「Androidならできるのに」ということもありますしね。お互いにうまくいかないことはあります。

―― Androidでバグが出たときは、どういった対処をされているのでしょうか。

村瀬:Android公式のドキュメントがしっかりしているので、学びながら都度都度やっている、ですよ。僕も北原くんももともとiOSアプリの開発をしてきていて、モバイル開発の「感じ」が分かっているから、あまり経験のないAndroidも同じようにやれてきた。

6>

苦労は多いが「けっこういいもの」だと思っている

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く