新しいハイブリッドアプリケーションのフレームワーク「React Native」をFacebookが公開。React.jsの書き方でOSネイティブのUIを利用可能

2015年3月30日

「FacebookではReact Nativeを以前から本番環境で使ってきた」(We've been using React Native in production at Facebook for some time now)。Facebookは、モバイルアプリケーション向けのフレームワーク「React Native」をオープンソースで公開しました。

React Native | A framework for building native apps using React

React Nativeは、JavaScriptおよび同社がすでにオープンソースとして公開している「React」でモバイルアプリケーションが開発できるフレームワーク。Web技術を用いつつもモバイルOSのネイティブなUIコンポーネントを利用できるのが最大の特長で、これによってWebViewをベースにしたハイブリッドアプリケーションよりも優れたユーザー体験を提供するモバイルアプリケーションが開発できるとしています。

iTunesに登録されているFacebookのモバイルアプリケーション「Facebook Groups」は、ネイティブコードとReact NativeのJavaScriptで構築されており、「Facebook Ads Manager」は完全にReact Nativeで構築されているとのことです。

learn once, write anywhere

Web技術を用いてモバイルアプリケーションを開発する方法としては、WebViewをラップするCordovaがよく知られています。しかしReact Nativeを開発した理由について、Facebookの記事「React Native: Bringing modern web techniques to mobile」で次のように説明されています。

Even though developing native mobile apps takes longer, there are many reasons why we can produce better experiences on the mobile platforms than we can on the web. For one thing, we have access to platform-specific UI components, like maps, date pickers, switches, and navigation stacks. It's possible to reimplement these components on the web, but our reimplementations never feel exactly like their native counterparts, and they also don't get updated automatically with changes to the platform.

ネイティブモバイルアプリケーションの開発には時間がかかるが、Webよりも優れたユーザー体験を実現できる多くの理由がある。1つ挙げるとすれば、マップやデータピッカ、スイッチなどのプラットフォーム固有のUIコンポーネントを利用できる。Webでもそれを再実装することはできるが、ネイティブコンポーネントとまったく同じにはならないし、プラットフォームのアップグレードによって自動的にアップデートされることもない。

React Nativeはこうした理由で、開発効率の良いWeb技術のJavaScriptと優れたUI構築のためのフレームワークであるReactを用いてネイティブアプリケーションを構築するを開発できるようにしたものだということです。

ただし、Web技術をベースにしたモバイルアプリケーションは、1つのアプリケーションがiOSにもAndroidにもWindowsにも展開できるクロスプラットフォーム対応を利点の1つとして挙げることが一般的ですが、React Nativeはそうではないと説明しています。

It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”

“write once, run anywhere.”を追求しているわけではない、ということは強調しておきたい。異なるプラットフォームには異なる見かけ、フィーリング、機能といったものがある。私たちは、それぞれのプラットフォームごとに適したアプリケーションを、そうしたプラットフォームごとにそれぞれ大きく異なる技術をいちいち学ぶことなく開発しなければならない。私たちはこれを“learn once, write anywhere.”と呼んでいる。

いちどReactの書き方を学べば、ほぼ同じ方法でどのプラットフォームでもネイティブなUIコンポーネントを用いてモバイルアプリケーションのプログラミングができる、というのが、React NativeでFacebookが実現しようとしたことであり、これが従来のハイブリッドアプリケーションと位置づけが異なるところです。

参考

このエントリーをはてなブックマークに追加
Bookmark this on Delicious

タグ : Facebook , JavaScript , モバイル

≪前の記事
Visual StudioがNode.jsの開発ツールに。「Node.js Tools 1.0 for Visual Studio」が無料公開。ブレークポイントやステップ実行も可能

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


新サイト「Publickey Topics」始めました!


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
RSSリーダーで : Feed





アクセスランキング - 過去7日間

  1. YouTubeがMySQLをスケールアウトする「Vitess」をオープンソースで公開。Kubernetesに対応
  2. マイクロソフトの新ブラウザ「Project Spartan」の開発にアドビが参加。CSSの強化などに貢献
  3. テストエンジニアとデベロッパーとの幸せな関係とは何か。開発効率の向上も、ゲームを面白くすることもテストエンジニアの領域に(前編) JaSST'15 Tokyo
  4. ChromeへのDartVM統合を断念、Dart開発チームが発表。今後はJavaScriptへのコンパイルにフォーカス
  5. クラウド専業SIerのテラスカイが4月30日にマザーズ上場へ
  6. Visual StudioがNode.jsの開発ツールに。「Node.js Tools 1.0 for Visual Studio」が無料公開。ブレークポイントやステップ実行も可能
  7. JoyentがDockerに最適化したクラウド「Triton」を発表。最小で1分毎に課金
  8. データベース界の巨匠 マイケル・ストーンブレイカー氏がチューリング賞を受賞
  9. テストエンジニアとデベロッパーとの幸せな関係とは何か。開発効率の向上も、ゲームを面白くすることもテストエンジニアの領域に(後編) JaSST'15 Tokyo
  10. SEと営業のためのヒアリング講座。モデレータのヒアリングテクニックから学ぶ(前編)
  11. AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ(前編)。Deverlopers Summit 2015
  12. オブジェクトストレージのAmazon S3、地域間レプリケーション機能「Amazon S3クロスリージョンレプリケーション」を追加
  13. アトラシアン、本社プレジデントJay Simons氏が基調講演「Atlassian RoadTrip 2015 Tokyo」4月14日開催。JIRA、Confluenceなど各プロダクトマネージャも来日 [PR]
  14. IT系企業の平均給与を業種別にみてみた 2014年版 ~ ネットベンチャー、ソーシャル、ゲーム編
  15. Chromeブラウザ、「Script streaming」と「Code caching」の2つのテクニックで、さらにWebページ読み込み時間を短縮へ

Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus