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

―― 村瀬さんと北原さんは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だからといって開発の流れがガラッと変わるわけではないので、使い始めるとそんなに抵抗はなかったです。

―― 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用には設計されていないので、キーボードが勝手に起動してしまうバグがありました。

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

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

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

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

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

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

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

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

>

――先ほど「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は動くけど、他との関係は壊れて動かなかったりする。

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

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

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

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

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

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

>

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

―― Nature RemoをReact Nativeで運用し始めて、実際にぶつかっている問題があれば教えてください。

北原：IMEが、日本語の変換が行われないまま勝手に確定されてしまったり、0文字になった場合に高さが変わってしまったりということがありますね。

村瀬：日本語と英語が混ざっていると、line-height分ズレるというバグがあるんです。プルリクはされているんですが、まだ全然マージされなくて……。一応、いつのバージョンに戻すとこのバグがでないということは把握しているので、とりあえず戻そうかなと検討していますが、本体のバージョンを変えるとテストし直しになりますし、予想外のところが動かなくなったりするので、実行するかどうかは慎重に検討します。

―― 開発よりも、フレームワーク自体が発展途上で苦労しているという点は、新しい技術らしいといえばらしいですね。

村瀬：そうですね。苦労は多いですが、それを踏まえてもReact Nativeは「けっこういいもの」だと思っています。

―― ほう。では、モバイルアプリの開発経験がない人にも「けっこういいもの」だと思いますか。

村瀬：うーん、シンプルなプロトタイプであればいいと思いますが、ガッツリとアプリを作るのはおすすめしませんね。

北原：React Nativeでの開発も、結局はモバイルアプリの知識が必要になりますから。

村瀬：JavaやSwiftと違って、AppleやGoogleのドキュメントにはReact Nativeのことについて書かれていないから、モバイル開発の知識がない場合に「ドキュメントを参考に書いてとりあえず動かす」ということがやりづらいんです。モバイルアプリ開発初心者にはハードルが高いと感じます。

僕らもReact Nativeを触るときは、先にReact Nativeのコードを見て「こういうふうにアプリとして動かしているんだな」と中身を分かった上で使っています。モバイル開発が未経験の場合、React Nativeの動作もブラックボックス、モバイルアプリ開発もブラックボックスという状態だと、何かの拍子で動かなくなったときにどうしたらいいか分からず困ってしまうので、せめてプロジェクトに一人は、モバイルアプリ開発に詳しい人がいないとつらいと思いますね。

―― なるほど。ちなみに、Reactを使ったことがない人がReact Nativeを使い始めることについてはどう思いますか？

村瀬：それはそんなに困らないんじゃないでしょうか。僕自身は、React Nativeに興味を持ったときに、正月を全部潰してReactとReduxについて勉強して、簡単なプロダクトを作ったくらいで、あとは何もせずいきなりReact Nativeを始めました。

北原：僕も、人によるとは思いますが、そこまで苦労することはないと思いますよ。

村瀬：逆に、僕はReactから始めたのはよくなかったんじゃないか？ と思うことがあります。僕はとにかくブラックボックスを作りたくなくて、例えばwebpackがどう動いているかの仕組みを確認する時間が欲しくてなかなか進みませんでした。React Nativeはそういったツールチェーンを自分でそろえる必要がなくて全部やってくれるし、余計なことを考えなくていい。今、Reactを使ってWeb開発をやれと言われても、僕が触ったときとは状況が変わっていて、できないかもしれないですしね（笑）

ツール系のアプリは、導入に向いている

―― 個人的に「React Nativeを使うと、アプリの速度が遅くなるのでは？」という疑問を抱いているのですが……。

村瀬：先ほどもお話したように、アニメーションを使用すると気になると思いますが、それ以外で速度が遅いとは感じないと思います。4～5年前のAndroid端末などだと若干“もっさり”するかもしれませんが、最近の端末ではネイティブとまったく変わりないですね。

―― そうなんですね。あと、速度の他にも、アプリ自体の容量が重くなるというデメリットがあると思います。

村瀬：容量の問題だと、iOSのウィジェットが作れないという課題がありますね。ウィジェットのメモリ制限ってすごく大きいので、React Nativeではほぼ無理だと思います。そこは、普通にネイティブで開発した方がいいかと。

北原：あとは、React Nativeをそのままバンドルしないといけないので、単純なアプリを作ったときに「やたら容量が大きいな」と驚くかもしれません（笑）

村瀬：もう一つ妥協したことがあって、Nature Remoの操作アプリって、本来は「長押しすると揺れる」という挙動があるんです。でもできなくて、どうしようか考えてる最中なんですよね。Twitterで聞いてみたりしたんですけど、そもそもReact Nativeでそこそこ大きいアプリ作ってる人ってまだそんなにいなくて。

北原：知見のある人がいたら、ぜひ情報交換したいですね……。

―― React Nativeの導入が向いていると思うサービスはありますか？

村瀬：ツール系は向いていると思いますよ。

北原：Bluetoothを使うものや、位置情報を取得するものなど、複雑なUIが必要なサービスは向いていないと思いますね。

―― やはり「大きいアプリ」を作るのは向いていないということでしょうか。

村瀬：UI面の制約が強いので、画面上がシンプルであれば大きいアプリでも大丈夫かと。

北原：あとは、やろうと思えばネイティブにブリッジが書けるので、位置情報の取得もできますよ。Nature Remoでも、位置情報やキーチェーン周り、HTTPクライアントのカスタマイズなどは、自前でブリッジを書いています。

―― では「開発の一部にReact Nativeを使う」のはどうでしょう。

村瀬：設定画面の開発にだけ使う、とかであればアリじゃないでしょうか。

北原：そうですね。ネイティブから見るとReact Nativeもあくまで1つのViewなので、「一画面」ではなく、「一画面のとある一部だけ」にReact Nativeにするのは、理論的には可能なんじゃないかな。「理論上は可能」というだけで、やるかどうかは別の話ですが（笑）

まだ発展途上。しかし、条件によっては「間違いなくいい」

―― ずばり、React Nativeは「薦められる技術」でしょうか。

北原：正直、まだ自信を持って他の人に薦められるわけではないですね。ネイティブアプリ開発の手法が分かっている人だったらお薦めしてもいい……かな……ってレベルです（笑）モバイルアプリ開発の知識がない状態で、初手をReact Nativeにするのは絶対にやめたほうがいいです。

―― それはなぜでしょうか？

村瀬：ある程度経験がある自分たちでも、ずっと苦労しているからですね。新しいからバージョンアップが速くて、必ず一次ソースに当たらないと情報が古い可能性が高い。日本語の解説ブログを参考にすると死ぬ、ということはけっこう多いです。

それでも僕らがReact Nativeを使っているのは、少人数でサーバーサイドも含めてiOS/Andoroidアプリをそれぞれ開発することが、ネイティブでは「無理」だからです。この人数、このスピード感でやるなら、間違いなく「React Nativeがいい」と思っています。あとは、デザイナー不在でエンジニアが個人でアプリ開発するのであれば、React Nativeはとてもいいと思いますよ。

―― これから、Nature Remoの開発で取り組みたいことがあれば教えてください。

村瀬：コードを同じにして、iOSに寄せた結果「Androidぽさ」がないので、Androidユーザーのためにもそこは対応していきたいですね。あとは仲間を増やしたい……！

北原：React Nativeに強い人、Androidに強い人、Cが強い人……。いろんな人に開発に関わってもらって、よりよくなるとうれしいです。

取材：megaya　megayaのブログ