React Nativeがスマホアプリのフロント開発を変えるのか

https://www.youtube.com/watch?v=KVZ-P-ZI6W4

1 comment | 1 point | by WazanovaNews 2年弱前 edited


Jshiike 2年弱前 edited | ▲upvoteする | link

Reactは当初、「Huge step backwards(これではメンテできなくて、かえって大きく後退してしまっている。)」「Rethink established best practices(皆が積み上げてきたベストプラクティスを変えようとしている。)」と揶揄されたりもしましたが、最近は他のJavaScriptフレームワークにもその思想の一部が反映されるようになって、メインストリームに近づきつつあるようです。

さて今回Facebookが、React Nativeを発表 & オープンソースとして公開するとして話題になっていますが、Tom Occhinoは React.js Conf 2015のキーノートスピーチで、「一度書けば、どのプラットフォームでもうまく動作する。」ではなく、「一度覚えれば、どのプラットフォーム向けにも書けるようになる。」ものであることを強調しています。

同社の開発メンバの声を拾うことで、その全容を探ってみました

  • まずは、iOSとAndroidがターゲットプラットフォーム。
  • JavaScriptエンジンがバックグランドで実行される。
  • メインスレッドで実行されるネイティブサーバと、バッチ形式の非同期なメッセージプロトコルでやり取りする。(基本的に、create_view( ), update_view( ), destroy_view( ), on_event( )など)Reactのためにそのプロトコルを使えるプラグインという立ち位置。
  • Reactは当初から、特定の環境のローレベルの構築ブロックをライブラリレベルで抽象化している。React Nativeは、DOMレンダラーをnativeレンダラーに置き換えることで、<div> / <span>の替わりに、プラットフォームの<View> / <ScrollView> / <NativeWhatever>をレンダリングできるようにしている。それ以外は、既存のReact APIと同じ。
  • React Nativeの真の価値は、学ぶのが簡単なReactを使って、エンジニアが相当な努力をせずに優れたUXのアプリをつくれるようになるということ。
  • 標準のテキストコンポーネントやクロスプラットフォーム向けのflexboxレイアウトシステムなど、クロスプラットフォームでの開発を多少手助けしてくれるツールが用意されている。
  • ネイティブプラットフォームのviewを活用できるように設計されており、Java Swingのようにはならない。
  • CSSのサブセットもポーティングされている、nativeアプリをCSSでスタイリングすることも可能。
  • Facebook GroupsのiOS版は、React Nativeをベースに開発されている。

パフォーマンスについて説明する背景として、React Nativeが他と異なるアプローチを採用している理由は、

  • 「エンジニア自らの開発のフィロソフィーや習慣を変えなくても自動的に素晴らしいモバイル体験をつくれるようになる。」とは言っていない。モバイルの開発をしていれば、UXについて気にかけるし、パフォーマンスにも注意を払うので、コードがやり取りするニュアンスを大切にしなくてはいけない。素晴らしいUXを実現している作品の背後には、必ずそこに注力する人がいる。しかし、React Nativeであれば、そのレベルに至る工数を削減できると考えている。
  • React NativeはDOMをまったく利用していない。Reactは、ブラウザーにおいて想定外のプログラミングに起因するパフォーマンスの問題の多くを、うまく対処してくれる。そしてReact Nativeは、ブラウザでできることを超えて次のレベルまで進んでいる。Reat Nativeが示したのは、一般的に支持されている「バーチャルDOM」よりも、「ゼロDOM」をReactJSが志向しているということ。
  • Web開発のベストなところをアプリに適用できるのが、React Nativeの特徴。ネイティブviewのパフォーマンスやリソースコントロールをキープするためには、webでのよいところを捨てなくてはいけないわけではない。React Nativeだと、FlexBoxでネイティブのviewをレイアウトできるし、その他のよく使っているスタイル属性も利用できる。しかも、致命的なCSSのリフローも避けられる。ライブラリのコードが同じなので、既存のReactアプリと同じイベントシステムが動作する。勝手のわかるwebスタイルとレイアウトを使って、ネイティブアプリの実装を素早くできるようになる。まったく新しいツール群を学びなおさなくてはいけない他のアプローチと比較すると、この方が当然良いと思っている。
  • React Nativeの差別化のポイントは、クオリティの高いアプリをJavaScriptで書けるということ。ブラウザだと限界に突き当たる。プラットフォームのコンポーネント(physics/mapの特定のスクロールビューなど)にアクセスできないか、実装しているやり取りがイメージでコーディングに邪魔されてどうしようもなくなるとか。React Nativeだと、以前はJavaScriptでは実装(mapなど)できなかったネイティブのプラットフォームのviewを使ってアプリをつくれる。高いパフォーマンス粒度の構築ブロック(マルチスレッドでデコードされた<Image />や、DOMをまったく使わない<View/>ブロックなど)を使うこともできる。このおかげで、プラットフォームごとの特徴に合わせたクオリティの高いものをつくりだせる。
  • 基本的には、AndroidとiOSでなるべくコードをシェアすることはやってもらいたいものの、「一度書けば、どのプラットフォームでも動作する」ものではないことを留意してほしい。例えば同じiOSにおいても、iPhone6+のスクリーンに対する最適化などへの考慮は重要。なので、個別の環境に合わせた実装は常に必要になってくる。

ここで約束されているネイティブらしいUXを本当にうまく実現できる手法なのか。やや懐疑的な声もありますし、一方で、FacebookのChristopher Chedeauは「既存の素晴らしいネイティブコンポーネントをつくり直そうとして失敗したアプローチがこれまでは多かったが、React Nativeはそれをうまく利用する。」と説明してくれています。その成否は、今後色々情報がでてくるかと思います。

[参考資料]

https://www.youtube.com/watch?v=7rDsRXj9-cU

https://news.ycombinator.com/item?id=8961551

https://news.ycombinator.com/item?id=8963710


2014 Topアクセスランキング


Back