KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

React Native のこれまでとこれから 2019年11月編

f:id:ariiyu:20191112194552p:plain

Expo の登場、Airbnb の離脱、Hermes の発表。React Native の開発の歴史を振り返ります。React Native のコミュニティについても調べてみました。React Native には本体のレポジトリだけでなく、リリースについてのレポジトリや、コミュニティの会話のためのレポジトリがあったのが意外でした。

はじめに

業務委託でキッチハイクのアプリ開発をお手伝いしている、エンジニアの有吉です。キッチハイクチームは、モバイルアプリの開発をずっとReact Native で行ってきました。アプリの開発開始から2年半ほど経ったこのタイミングで、React Native のこれまでとこれからについて思いを馳せてみます。

React Native のこれまで

公式のBlog · React Native も参考にしつつ、過去の出来事の中で印象に残ったことを挙げてみます。React Native には時々節目となるようなアップデートがあり、ネイティブの環境への追従やReact Native 自体の改善が行われてきました。

React, React Native のOSS化

2013年にFacebook によってReact が公開されました。その後、2015年にはReact Native がOSSとして公開されました。その後React Native はFacebook だけでなく、様々なチームのアプリ開発に採用されました。Facebook, Instagram, Pinterest, Skype, Uber (UberEATS), Wix, Salesforce といったサービスは皆様もご存知でしょう。

Create React Native App (React Native + Expo) の登場

2017年には、Facebook とExpo によってCreate React Native App というツールが導入されました。 プロジェクト開始時に create-react-native-app というコマンドを使うことによって、Expo アプリが導入できるようになりました。Expo アプリにはWeb っぽい体験でモバイルアプリを開発・運用できるというメリットがあります。2019年現在では、国内においてスタートアップなどで採用される例がいくつも見られます。*1

*1 先日の記事: React Native + Expoで1年以上運用したCTOが集まってみた 前編 - KitchHike Tech Blog

React Native Community を強化する動き

React Native Community (RNC) は、協調的かつコミュニティ主導によってReact Native のパッケージやライブラリを長期的にメンテナンスすることに特化したGitHub organization です。React Native の開発は中核部分 についてはフルタイムのFacebook のReact Native チームが取り組んでいますが、さらにコミュニティの多くの人々が貢献を行っており、react-native-community にライブラリやツールのレポジトリが設けられています。 2018年になると、React Native Community がReact Native についてのコミュニケーション方法に変更を加えました。react-native-releasesdiscussions-and-proposals といったレポジトリの追加などが行われ、関係者のコミュニケーションがよりオープンになりました。*2

*2 公式のブログ記事: The State of the React Native Community in 2018 · React Native

Airbnb がReact Native を諦める

2018年6月にAirbnb がReact Native を諦めるという記事React Native at Airbnb がMediumに投稿され、界隈が一時騒然となるということがありました。
各企業や個人にとって、React Native のメリットやデメリットがより深く認識される契機となったのではないかと思われます。Airbnb の例で上手くいかなかった点のいくつかは、現在のReact Native では改善されています。例えばReact Native の最近のバージョンはTypeScript やAndroid 64bit に対応しています。 なおこの件の影響を受けて、Airbnb が開発していたライブラリはReact Native Community へ移管されました。*3

*3: react-native-mapsや、lottibe-react-native。以前の記事: lottie-react-nativeがAirbnbからコミュニティ主導になった影響とこれからの動き - KitchHike Tech Blog

RN v0.59, v0.60 リリース

f:id:ariiyu:20191112214736p:plain

2019年のリリースで、Android 64bit 対応やAndroid X 対応が行われました。ネイティブ側の変化に追従するという点で、React Native v0.59 やv0.60 は節目となるバージョンといえるでしょう。また、Autolinking の導入によってネイティブモジュールの利用方法も改善されました。
さらにv0.60 のリリースとほぼ同じタイミングで、Facebook チームがReact Native 向けのJavaScript エンジン Hermes を発表しました。*4 React Native はAndroid 用のJavaScript エンジンとしてJSC (JavaScriptCore) の特定のバージョンを利用していますが、起動時間やメモリ使用量といった点で課題がありました。本体によるJSC のアップデートは頻繁ではなく、対策となる jsc-android-buildscripts や react-native-v8 のレポジトリがこれまでに登場していました。

*4: 公式のブログ記事: Meet Hermes, a new JavaScript Engine optimized for React Native · React Native

余談

Airbnb の時だけでなく、iOS のSwift UI が発表された時にも開発者達が一瞬がざわつきました。何年もReact Native を使っているチームは、何度かヒヤッとした経験があるのではないでしょうか... (こういうニュースがあった後のミートアップは盛り上がりがちです)

React Native はどのように開発されているのか?

さて、React Native はそもそもどのように運営されているのでしょうか?React Native の運営の方針や、開発を行うコミュニティを知ることは、今後について考える助けになるかもしれません。

オープンなコミュニティ

React Native はFacebook のエンジニアや協賛企業のメンバーによるチームを中心に開発が行われています。当初から透明性を重視し、オープンに開発者を巻き込んでいく思想です。先述のように、2018年の発表にReact Native Community を強化するという発表もありました。

月1回くらいのペースで安定版をリリース

現在では安定版が月1回くらいのペースでリリースされています。ちなみに2016年までは隔週のリリースだったようです。リリースサイクルに関する議論はオープンにされています。

react-native/Releases.md at master · facebook/react-native

リリースの内容については、専用のレポジトリでコミュニケーションが行われています。

react-native-community/releases: React Native releases

活発なコミュニケーション

React Native は2018年には全レポジトリで2番目にコミッターが多いOSSとなりました。記事執筆時点では、facebook/react-native レポジトリのコントリビュータの数は2,043人となっています。 本体やサードパーティのライブラリのレポジトリのIssue を見ると、問題の報告や、議論や、コードの共有がよく行われています。例えば最新のネイティブの環境に追従できていない場面や、特定のライブラリのバージョンに依存した問題があると分かった場面で、誰かがIssue のコメントでパッチを共有してくれるということがよくあります。筆者の印象ですが、みんなが困っている問題はみんなで解決していくという姿勢がコミュニティにあります。

余談

Xcode 11 でアプリがクラッシュする件のパッチをコメントしたsaudahmed さん。React Native をまだ最新版にアップグレードできない開発者達を救ってくれました。(React Native のアップグレードは時期によって即座に行うのが難しいことがあるので、こういうのは本当に嬉しいです!)

f:id:ariiyu:20191112213852p:plain
saudahmed さんがパッチを投稿

React Native のこれから

それでは、React Native の今後について思いを馳せてみましょう。

みんなの提案を見てみる

Issues · react-native-community/discussions-and-proposals のレポジトリを覗いてみましょう。 こうなったらいいのにという、React Native の将来の姿について提案が行われています。 "What do you dislike about React Native?" (あなたがReact Nativeで気に入らない部分は何ですか?) という苦情調査のIssue も何度か立っていて、React Native をより良くして行こうというチームの姿勢が感じられます。ここではいくつか気になったトピックを挙げてみます。 "What do you dislike about React Native?" June 2019 Edition より

  • Lean Core is great but extracted repos may not be well-attended: react-native-community に移されたライブラリで非アクティブになっているものがある
  • Assets for all resolutions are bundled with the app: @2xや@3x のアセットが同時にアプリに含まれてしまっているためアプリのサイズが大きい。最適化の余地がある
  • Swift not being the default language for iOS: プロジェクト作成時のテンプレートをObjective-C ではなくSwift にしてはどうか

Lean Core という運営方針 *5 による課題や、アプリの最適化や、開発体験の改善に関するIssue が立てられていることが分かります。 筆者はここ1年くらいでReact Native の開発体験は良くなり続けていると感じていますが、これらの提案を見ればまだ改善の余地があるということが分かります。

*5 React Native の開発にはLean Core というコンセプトがあり、React Native 本体から切り離されてcommunity にメンテナンスが委ねられるライブラリがある。直近ではreact-native-community/async-storage などが react-native-community のレポジトリに移された

これからについて思いを馳せる

ここまでを踏まえると、コアチームとコミュニティのメンバーの力によって、React Native は今後も改善を続けていくと言えそうです。ネイティブ (iOS, Android)、JavaScript、React 界隈の重要なアップデートに追従していくのは間違いありません。サードパーティのライブラリも最新のReact の変更を採り入れてきています。 *6 さらに、開発体験の改善や、パフォーマンス面のようなアプリの最適化など、痛みとして指摘される点への対応も行われていくはずです。また、Flutter など他の開発手段の影響を受けて、これまでにない議論や変更が生まれる可能性もあります。

今後もReact Native は、特にWeb 開発者が多いチームにとってアプリ開発の有力な手段であり続けるでしょう。一方で、やはり従来のネイティブ開発を完全に置き換えるものにはならなそうです。React Native の性質や開発リソースの都合上、ネイティブの最新の環境に即座に対応するのが難しかったり *7 、ネイティブの細かな仕様への対応がまだ乏しかったり *8 ということがあります。

React Native がネイティブ開発と異なる開発体験を追求する一方で、現在のネイティブ開発との垣根を無くしていけるかどうかは、オープンなコミッターの活躍にかかっているような気がしています。未解決の問題があるということは、コミットのチャンスが多いということでもあります。

いずれにせよ、React Native に関わるということは開発者としてとても刺激的です。これからもコミュニティの熱量を感じつつ、React Native でキッチハイクアプリの開発をしていきます。

*6 例えばreact-native-firebase v6ではドキュメントのサンプルコードの記述が Hooks を使ったパターンになった。また、react-navigation v3 以降ではHOC (Higher-order Components) を利用した記述パターンがドキュメントに追加されている
*7 速やかにパッチが提供されることがあるものの、React Native 本体のリリース版に反映されるまでには時間がかかる
*8 自分でネイティブコードを書いてブリッジを作るという手段はある

余談

iOS のAVFoundation フレームワークで扱われているような機能はReact Native 本体ではカバーされておらず、特に動画関連についてはサードパーティのライブラリもほとんど見かけません。ごく一部のアプリでしか要件に入らないような機能は当面対応されなそうな予感がします...(逆に、多くの開発者が使いたいと思う機能は既にサポートされていると感じています)

まとめ

  • React Native の安定版のリリースは月一回くらい。ネイティブの環境への追従やReact Native 自体の改善のため、時々節目となるようなアップデートがある
  • React Native のレポジトリは1つではない。リリースや提案についてのレポジトリが存在するのは意外だった
  • サードパーティもReact の変更を意識してアップデートを行ってきている。我々も先を見ながら開発を行っているし、これからもしていく必要がある

We're Hiring!

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

www.wantedly.com

www.wantedly.com

www.wantedly.com