KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

React Native + Expoで1年以上運用したCTOが集まってみた 後編

こんにちは、エンジニアの Miho です!Expo に関わるCTO達の座談会、 前編は React Native や Expo の仕組みについて理解を深めながら、導入のメリットや eject の必要性など、1年以上運用してきたからこそ語れる話題で盛り上がりました。

tech.kitchhike.com

後編は、オープンソースコミュニティという視点を中心に、Expo のもつ可能性をさらに深掘りしていきたいと思います!

Expo を支える組織

藤崎 祥見(以下、S):改めて Expo の価値や導入のメリットを振り返りたいと思います。React Native を含めて、クロスプラットフォームという特徴は間違いなく、少人数でのネイティブアプリ開発に向いていますよね。 Expo の公式サイトにも、The fastest way to build an app とその特徴を大きく打ち出しています。

筑井 友啓(以下、筑井):JavaScript 自体は、多くの人が馴染み深いものだと思います。その偉大なエコシステムに乗っかって開発できる、という恩恵は常に感じていますね。

康 裕三(以下、康):一方で、開発元としての Expo のことは、多くの人がほとんど知らないように思います。どういうチームなんだろう。

f:id:izmipo:20190906122901j:plain

S:確かに、実際にはどんな人達が運営しているか気になりますね。そこで調べてみたのですが、一見OSSコミュニティかと思いきや、開発企業が存在するんですね。コアチームの中でも、活発に発信してくれているのが Evan Bacon という方でしょうか。

渡邊 雄(以下、渡邊):Wikipediaで調べると出てきますよね、1997年生まれのレゴアーティストってすごい肩書きだ(笑)こんな若い人たちが開発をリードしているということが分かる、というオープンさには好感を持てますね。刺激にもなります。

S:React Native とはコミュニティが独立していて、規模も温度感も全く違う。Facebookのコアチームに所属するメンバーは優秀に違いないとは思いますが、顔はなかなか見えてこない。

筑井:他にも、日本国内ではあまり知られていない情報ですが、「ハッカーと画家」で有名な Paul Graham や、彼が創立者の1人である Y Combinator から出資を受けているようです。

S:それは知らなかった!注目企業であることに異論はないですね。

温度感あるOSSコミュニティ、Expo

渡邊:前にも少しお話ししたのですが、初期の Expo は機能不足だという声が多く挙がっていました。でも、着実にサポートは充実しています。その成長性には期待できるものがあるというか。

S:いいですね。具体的なエピソードはあったりしますか?

渡邊:例えば expo.canny っていうユーザーフィードバックを管理するサイトがあるんですけど、活発に動いています。「この機能が欲しい」「それ自分も思っていた!」とか。僕も、問題解決の方法をコメントしたりしています。なかなか、ここまでフラットかつスピーディーな動きがみれるコミュニティは珍しいと思います。

f:id:izmipo:20190906132419p:plain
我々が見慣れたカンバンが!今はアプリ内課金と、Bluetooth APIがホットな話題になっているようです。

f:id:izmipo:20190825212856j:plain

和田 崇彦(以下、和田):Expoの動きとして他に感心したのは、日本語・中国語の変換問題に関してですね。本家である React Native の上流ブランチよりも先に、Expo が該当の修正コミットを cherry-pick してくれて。

筑井:あれは焦りました(笑)Expo の SDK version を30に上げてリリースしようとしたら、サポートしている React Native のバージョンでまだ問題が解決されていなくて。Expo が率先して cherry-pick してくれていなかったら、うちのプロダクトのリリースも漏れなく遅れていましたね。

【日本語・中国語の変換問題とは💡】
React Native 0.54.2 以降で発生していた、valueもしくはdefaultValueとして値を入れて、かつonChangeTextを使うと日本語(あるいは中国語)の変換ができなくなる、という不具合。
0.57 以降ではこの問題は解決されている。
ただ、修正バージョンのリリース当時はまだ安定していない段階であったため、Expo が修正コミットを cherry-pick した SDK 30.0.0 を先に公開するというファインプレーがあった。

渡邊:公式で解決されるまでは、僕が Expo のsnackに投稿した解決案 も結構参考にしてもらっていました。

f:id:izmipo:20190825210919p:plain
PR に渡邊さんのコメントが!

S:まさに、うちも暫定対応でパッチを入れてましたね〜!解決方法を書いてくださったの、渡邊さんだったとは!

渡邊:そうなんですよ。それで Expo コミュニティの話ですけど、ちゃんと我々の声を拾ってくれている感じがあります。OSSの基本的思想ですが、これだけ認知が広まってきていても「一緒に良くしている」という感覚をもてるのは、なかなか貴重だと思いますね。

Expo のメリット・デメリット復習

S:急に React の話になりますが、このタイミングで話しておきたいことがあって。Expo で実現される便利さの根幹には、やはり "Learn Once, Write Anywhere" の思想があってこそだと思っています。

S:React は何を実現しているかというと、主に2つが挙げられますよね。Viewコンポーネントを抽象化する react-reconciler と、Virtual DOM による差分管理の効率化。これらを一度でも学べば、あらゆるプラットフォームに適用できる。

f:id:izmipo:20190906181424j:plain

【大きなチームも React Native を使っている💡】
- Microsoft製Office365
UIの多くが React Native または react-native-windows で実装されている。
- Skype
自作の React Native ラッパーを開発している。

スタートアップのような小規模チームから、大規模なチームにまで適用できる思想は偉大ですね!

和田:それで、僕たちはごく小規模なチームとして効率よく開発するために、Expo を採用している。書くのは基本 JavaScript だけで、ビルド環境やバージョンアップの心配もしなくていいメリットはやはり大きいです。

筑井:その反面、Expo がサポートしていないサードパーティのアナリティクス系SDKとかを入れたいフェーズにくると、eject が必要になってきます。また、React Native のバージョンが固定されるのは避けられないので、先に話していた 日本語・中国語の変換問題 のような不具合で困ることもありますね。

f:id:izmipo:20190906132926j:plain

渡邊:そこで僕が推したいのが、react-native-unimodules ですね。その名の通り、モジュールを都度 import する形で、素の React Native に対しても導入が可能なので。まだ日本語で書かれた情報も少ないので、ぜひ概要はつかんでみてほしいですね。

speakerdeck.com

先日の React Native Tokyo で登壇された渡邊さんのスライド。react-native-unimodules についての理解が深まります!

【もっと知りたい人へ💡】
- 素の React Native
- Expo SDK
- ExpoKit
- react-native-unimodules
これらの技術について、それぞれの特徴とメリット / デメリットが気になった人は、図解も含めてくわしく説明している【前編】もチェックしてみてくださいね!👉

S:ここまで振り返ってみて、やはり React Native、そして Expo は少人数開発にとって非常に心強い技術と言えますね。勉強会でも似た環境の方々に出会うことが多いですし、今後より普及することが期待できそうです。

コミュニティへの関わり方と、今後の展望

S:再びコミュニティの話に戻りましょう。Expo の比較対象としてまず挙げられるのは、やはり本家の React Native かと思います。規模感はどうなんでしょう?

筑井:日本のコミュニティである React Native Japan は、グループの人数だけでいえば2000人を超えています。開催されるMeetupも、毎回150〜200人規模ですね。

:PyCon JP みたいな超大規模なコミュニティイベントになると、参加者自体が1000人単位という規模になります。もちろん、参加費もそれなりにかかるんですけど・・・でもそこまでくると、本家のメンバーも登壇してくれることもあるみたいですね。それだけでも、話題性は大きいです。

f:id:izmipo:20190825224519j:plain

和田:実は前回の ReactNative勉強会 を開催するにあたって、本家にもアプローチしてみようと、メールを送ってみました。ただ残念ながら、その時は嬉しい返事はもらえなかったんですよね。

S:それは残念・・・次回以降に期待ですね!和田さんや康さんは、まさにコミュニティを運営する側ですが、特別なモチベーションはあったりしますか?

:現在の技術スペックで開発するにあたって、僕はここにいる皆さんの知見の恩恵を受けています。そうしたことへの「感謝」の意味も込めて、オープンなイベントというのは、今後も増やしていきたいと考えています。

和田:僕たちは企業のプロダクトとして技術を採用しているわけですから、コミュニティが盛り上がることはメリットしかないですよね。さらには Expo を代表して、成長期の段階で何かしらの形で貢献できるというのは、自分自身にも刺激になります。

f:id:izmipo:20190825224757j:plain

S:そもそも、この座談会が実現できたのも ReactNative勉強会 がきっかけでした。お2人の想いを聞く限り、コミュニティの未来は明るいですね!またぜひ、別のテーマでも集まりましょう!


いま注目の開発手法を取り上げるとき、エンジニア視点だと、話題の中心はどうしてもそのスペックに偏りがちです。もちろん、それは必要不可欠。ただ、視野をもう少し広げて、その開発を支える人々にも目を向けると、現在だけでなく未来のチームにとって、より良い技術選定ができるのではないでしょうか。

この記事が、少人数チームで開発する方々への一助になれば幸いです!

今回の座談会開催のきっかけとなった ReactNative勉強会 は、イベント名を「React Native Tokyo」に改め、これからも定期的に開催を予定しています。 興味がある方はぜひ、グループにも勉強会にも参加して、一緒に盛り上げていきましょう!

r-n.connpass.com

f:id:izmipo:20190825225205j:plain


We’re Hiring!

キッチハイクでは、React Native でどんどん開発したいエンジニアを大募集中です!

www.wantedly.com

www.wantedly.com

www.wantedly.com