React Native開発コミュニティの過去・現在・未来

React Nativeはどういうもの？

中田一成氏（以下、中田）：React Nativeコミュニティと現在と未来というタイトルでお話します。中田一成と言います。

Twitterのアカウントはbesutomeというアカウント名でやってるので、もしよかったらフォローしてください。

ふだんはフリーランスでReactだったりReact Nativeだったり、基本的にフロントエンド周りの開発をしています。先ほど紹介いただいたんですけど、コミュニティ活動に関してはReact Native JapanというReact Nativeのミートアップを2016年4月くらいからやっていて、だいたい2年くらい経ったところです。今日は朝からお集まりいただきありがとうございます。

資料としては、海外も含めてReact Native全体のコミュニティの流れを紹介する資料作ってきました。自分が最初の頃からReact Nativeのコミュニティを日本でやっていて、細かい会社名も含めて日本の状況はけっこう知っているので、そのフェーズの話もできたらいいなと思います。

ちょっといくつか質問させてください。ふだんReact Nativeを触ってるという方、どれくらいいらっしゃいますか？

（会場挙手）

多いですね。ありがとうございます。ふだんモバイルの開発をしているという方は？

（会場挙手）　2～3割くらいですかね。ありがとうございます。

じゃあだいたいReact Nativeはどういうもので、どういう立ち位置で、これからPWAとかに対してどうなっていくのかを知りたいみたいな感じですかね。わかりました。資料はそういう作りになっていないんですけど、その方向で話していきます。

これまでのReact Nativeについて、まず全体的な話をしていくと、リリースは確か2015年の後半とか秋以降だったと思います。

正直言って、そのころはぜんぜんネイティブのAPIに対応していないというか、事実上ベータ版というかアルファ版みたいなかたちでちっとも動きませんでしたよね。

今2018年ですけど、2年くらいかけて、ようやく一般的な機能をそこまで気を使わずに実装できるようになったかな、というのがReact Nativeの現状かなと。

大きな企業もReact Nativeを採用

そのうえでこれからどうなっていくのか？　みたいなところを軽く話すと、Webとの統合とか、あとは当然iOS、Androidの共通化みたいなところがメインになってきます。

そのうえでほかのNativeの開発の優位性というところで、リリースサイクルというか、Webのようにもっと柔軟に開発していきたい。レビューとかしなくても、早く動作確認ができるみたいなところは、React Nativeはわりと初期から提唱されてきたメリットの1つかなと思います。

全体で言うと、開発できないバグ、露骨なバグは2年くらいかけて直されてきました。

あとReact Native特有の開発体系がそれぞれ出始めた。特徴が出てきて、それがある程度使えるようになってきた段階なのかなと。それがこれまでのReact Nativeのコミュニティ全体の状況です。

日本のコミュニティの話をすると、大きめの企業も採用してきた経緯があります。コミュニティを始めた2016年の前半とかは、スタートアップとか、アプリ開発者がいないところばかりでした。

例えば、基本的に20人くらいのベンチャーで、Webサービスはあるけどアプリはないので開発したいとか。どスタートアップで最初から1〜2名でやってて、iOS、Androidを出したいからReact Nativeを使ってます、というのが2016年の前半でしたね。（それくらい）に使い始めました。

具体的な社名を言うと、トゥギャッターさんみたいなところが当時採用していました。それから半年くらい経って、Qiitaだったりブログだったりで出始めて。

「React Nativeを個人的に使ってみようかな」みたいな人が増えてきたのが半年から1年くらいで。2017年の前半くらいには、そんな感じで徐々に盛り上がってきたかなというところです。

それと並行して大きめの企業さんでも「実際React Nativeは使えるんですか？」となって、内部で社内ツールだったりプロトタイプみたいなものを開発していったのが2017年の前半くらいまでの流れで。

そこらへんで大きめの企業さんとかも実証実験してみて「使えそうだな」とか、個人の開発者でもいろいろ開発してみて「良さげだな」みたいになってきた。実際に企業の採用などで表面化してきたのが、2017年の後半くらいからかなと思ってます。

2017年の後半くらいから、いろんな企業が「採用しました」みたいなブログ記事を出していて、半年間くらい経って国内の採用事例も増え、ノウハウも貯まってきたところです。それがこれまでの国内企業のReact Nativeコミュニティです。

React Nativeは今後どうなっていくのか？

じゃあReact Nativeは今後どうなっていくのか？　国内、海外ともにどうなっていくのか？　みたいなところがあります。

1つわかりやすい事例というか、これを参照したらいいというのがReact Native Monthlyです。

これはだいたい10社前後のReact Nativeにかなりコミットしている企業たちが、2017年6月から毎月開催しています。

今後コミュニティとしてどういう方向性があって、こういう貢献をしましたという、報告会というか会議みたいなのを2017年6月からやっています。これはReact Nativeの公式サイトに、ブログとして議事録が出てます。

興味のある方は見てもらえばいいんですけど、毎月開催と言いながら、事実上2ヶ月に1回くらいだろみたいなペースです。今年の1月に6回目のレポートだったので、どう考えても2ヶ月に1回くらいかなって話ですね（笑）。

（スライドを指して）これは公式サイトのキャプチャなんですけど、右上のブログというところからあがっています。

今回は話さないですけど、「データベースとReact Nativeの組み合わせはどうやるの？」「アニメーションはどうするの？」みたいなものもあります。

アニメーションの話はTwitterの事例とか書いてあって、けっこう実用的でちゃんとした内容になっているので、興味ある人はこのブログ記事も見てみるといいと思います。

ざっくりとそれぞれの企業群がどういうことをやってきたのかを、時系列関係なくまとめました。この1年間どういうことをやってきたみたいな、React Native Monthlyに書かれている活動記録をまとめてみたんです。

Facebookは全体的には、もはやAPIの改良とかバグの潰しをメインにしている感じで、さっき言ったReact Nativeでの開発体系の拡張はそんな担ってない印象です。それはたぶん今後も変わらないだろうと思います。

けっこう前なんですけど、PackagerをMetro Bundlerに独立させたのは、わりとコア的にも特徴的だったんですけど。

それ以外はAPIの改良とか、プラットフォームをサポートするとか。textとかtextinputの部分で、バグじゃないんですけど、より使いやすくしようとか。

あとネイティブの自動拡張しよう、スタイルプロパティ修正しようみたいな、地盤を固めるものをいろいろやっている印象です。たぶん今後もFacebook社としての基本的な方針は、そんなに変わらないというイメージがあります。

ネイティブAPIの制作のときにバグがあるから直しましたとか、一般的なネイティブ開発に比べてわかりにくい部分があったのでAPIを改良しましたとか。そういう方向性の開発になるというのが、個人的なFacebook社の印象です。

Expoの優位性とは

次にExpoというものがあって。Expoをご存知の方はどれくらいいらっしゃいますか？

（会場挙手）

1人2人くらいですかね。ありがとうございます。デモをすればよかったかなとちょっと後悔してるんですけど。

これはどういうものかと言うと、React Nativeの公式サイトで作っているboilerplateみたいのがあって。それでコマンドラインで立ち上げると、コマンドライン上にQRコードが出てくるんですよ。

Expoアプリというスマホのアプリがあって、それでQRコードを撮影します。ローカルのPCで開発していたとして、PCに出てきたQRコードをこのスマホアプリで撮ると、PCで開発してる途中のReact Nativeアプリが、スマホの本体で動くようになっています。

例えばPCで「あああ」とテキストを追加したものが、即座にスマホに反映されるみたいな。即座に新規で開発、確認できる機能がExpoというものです。

これはモバイル開発としては特徴的な体験なので、余裕がある人はやってみるとおもしろいと思います。ただ注意点としては、カメラでネイティブの機能を使う場合。Expo上からネイティブの機能に接続するかたちになっているので、一般的なReact Native開発の記法だと動かないこともあります。

その流れでここでExpo本体って書いてますけど、ビデオレコーディング機能をExpoで対応したのが、こちらの機能開発、改善してきた内容ですね。

ここでさっきあったExpoの機能で対応できるものを書かせていただいてます。特徴的なのは何だろう？　スプラッシュ画面APIは普通なんですけど、画像操作のAPI、顔検知のAPI、ARTとかですかね。

そういうものがネイティブの機能を使わずにできる。いちいちビルドして実機で確認して動かすみたいな開発体験ではなく、PCで書いて保存したら何も接続していなくてもQRコードを読み込んでさえいれば即座に実機で確認できる。この体験はExpoが優位性を持っている部分かなと思っています。

例えばARキット。ARの開発ってデバイスに先にダウンロードしてビルドしてインストールして動くかどうか確認するってなると、早くても1、2分はかかると思います。それが数秒で動くか実機で確認できるのは、かなり優位性があるかなと。

アプリストアにリリースせずにアップデート

これってExpo上なのでJavaScriptで動くものなんです。JavaScriptで動くということは、Hot Code Pushが対応できるということなんですよね。

Hot Code Pushって何ぞやと言うと、Hot Code Pushはアップデートするときにネイティブのビルドをしてアプリストアにリリースするサイクルを踏まずに、直接アプリをアップデートできる機能があります。JavaScriptで対応している機能に限るんですけど。

とはいえ、React Nativeは常にJavaScriptで書かれているので、基本的な機能はすべてストアリリースせずにできます。例えば管理画面とかで更新すると、ユーザーがアプリにインストールしているものを全て更新できます。

ただそれって今までネイティブ機能以外は対応してたんですけど、ネイティブ機能は対応していませんでした。カメラアプリだとアプリのカメラを使うためにネイティブのコードをbundleする必要があって。

例えばカメラアプリのほうにバグがあったら、更新してアプリをストアにリリースしなくちゃいけなかったんです。でもExpoを使うとすべてJavaScript上で動いているので、アプリストアにリリースせずともアップデートできる。

このスライドで言うと、ARTもサポートしてましたし、顔検出APIもサポートしてました。顔検出APIやARTにバグがあったとしても、アプリストアに申請して審査が通ってリリースするというのを待つのではなく、バグを直した瞬間にリリースしてアップデートできるところが強みかなと思います。

当然ロールバックもできるので、アプリリリースしてからバグがあって戻したいときも、いちいち申請し直して、1〜2日待つということはないです。すぐにロールバックできるのがExpoです。

ちょっと話を戻しますけど、Expoっていう会社が作っているExpoアプリの本体の開発は、1年くらいかけてこのように開発してきました。

Expoはアプリ以外にもいろいろ革新的なものを作っていて、SnackっていうWeb上でReact Nativeコードのサンプルを実行できるものがあります。それをnpmモジュールに勝手に書けばインストールできるみたいなかたちになっていて。

複雑な機能ではなく、基本的な単機能で「これって実現できるんだっけ？」みたいなプロトタイプの段階であれば、SnackのWeb上ですべてやっちゃえばいいみたいなところはあります。

このスライドで書いてあるように、依存性を持つライブラリとか、Expoとの依存性をテストできます。「これってExpoで実装できるんだっけ？」みたいな懸念はSnackでさらっと確認して、いけそうだったら実際にプロトタイプ的にExpoで開発していこうみたいなものです。

MicrosoftやAirbnbの貢献

あとは細かい話なんですけど、（スライドの）一番下。Reasonを簡単に試してみるのに役立つスクリプトをリリースしましたみたいな。Reasonってご存知の方いらっしゃいますか？　いないですよね。

Reasonっていうのは、Facebookが出している言語の革新的なプロダクトです。基本的な記法はOcamlで書いていて、OcamlをJavaScriptにコンパイルできるかなり変わったやつなんですけど。

Reason自体は流行るかどうかわからないんですけど、Expo社全体としてはかなり革新的なものにいろいろコミットしています。

あとはMicrosoftですね。Microsoftも意外とReact Nativeにコントリビュートしています。

半年くらい前にSkypeのアプリをリプレイスとしたときに、React Nativeにしてリリースしています。

そういう経緯もあって、Microsoft社自体としてもReact Nativeに貢献している部分があります。React XPというReactを書けば、WindowsのプラットフォームやWindowsのアプリケーション、もうなくなりましたけどWindowsモバイルとかにビルドできるクロスプラットフォームの機能をリリースしてたりとか。

さっき言ったCode Pushですね。アプリストアに申請せずともリリースできるのがCodePushで、そのCodePushの開発もMicrosoftがやっていました。

あとは最近の話だとこの一番下ですかね。React NativeとWindowsのブリッジが.NETの標準のものに移行になりました。具体的に何に対応したかと言うと、JavaScript Core、Xamarin Mac、Linux Gtk#、Samsung Tizenが.NET標準に対応しています。

自分は.NETを使ったことないんであんまりわかんないんですけど、これによって.NET開発をしていた方たちもスムーズに移行しやすくなり、いろんなかたちのクロスプラットフォームが進んでいる印象があります。

このスライドにはあまり書かれていないんですけど、AirbnbはJavaScript界隈にいろいろと貢献しているので、あんまりAirbnbのことを嫌いにならないでください。

単純にReact Native Monthlyに書かれたのはこのへんです。アクセシビリティAPI追加とか、初期化のパフォーマンスの改善をしたっていうところ。

ちょっとAirbnbのフォローをしておくと（笑）、Airbnbってわりと初期からJavaScript界隈というかフロントエンドかなり強い企業で、ReactとかReact Nativeにコミットしています。ESLintにAirbnbのスタイルガイドをよく使うと思うんですけど、そういうのも含めて一番最初からJavaScript周りの整備をしていたのがAirbnbなので、Airbnbの貢献度はけっこうあります（笑）。