2016年JSハイブリッドアプリの動向をまとめてみた

([元記事はこちら](http://blog.mmmcorp.co.jp/blog/2016/04/08/hybrid-app/))。

## 概要

ハイブリッドアプリで採用するフレームワーク・アーキテクチャの選定をするため、調べたことをまとめます。



## ハイブリッドアプリとは?

ハイブリッドアプリとは、ネイティブコード以外を使って作られたアプリです。今回は、JavaScriptを使用したハイブリッドアプリを想定しています。

ハイブリッドアプリは、基本的に[WebViewというネイティブコンポーネントを使って、Webの技術をネイティブに組み込む](https://html5experts.jp/anatoo/7253/)ような設計をしていました。それを可能にする代表的なものがCordovaで、名前は聞いたことがあるかもしれません。Cordovaを利用してでてきたのが、Ionicなどのフレームワークでした。

しかし最近になって、React Nativeを始めとして、ネイティブコンポーネントをJavaScriptで呼び出すというアプローチをとるものがでてきました。

[NativeScript](https://www.nativescript.org/)に関しては、全てのネイティブAPIを呼び出すことができますが、これは、JavaScriptエンジンを使用することで可能にしています。AndroidだとV8、iOSだとJavaScriptCoreのような具合で、アクセスしたネイティブAPIを実行環境にグローバルに保持する仕組みを持っています。

![ns_architecture.png](https://qiita-image-store.s3.amazonaws.com/0/22875/204cfc96-d687-0802-3faa-c5833d9f4d3d.png)


前者だと、ほぼほぼWebの技術でアプリを作れるというメリット、後者だと、パフォーマンスの向上や、`ハイブリッドだからできない`といった問題が減るといったメリットがあります。

* [What is a Hybrid Mobile App?](http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app)



## フレームワーク

フレームワークと呼べるか微妙なものもあるのですが、ハイブリッドアプリを作成するのによさそうなものをざっくりと選んでみました。有名であっても除いたものがありますが、それは、同系統のフレームワークの中だったら選ばないだろうな、という想いです。

### React Native

* [React Native](https://facebook.github.io/react-native/)
* [React Native ファーストインプレッション - Qiita](http://qiita.com/naoya@github/items/ecda4d3089902dcbea53)

#### 特徴

* Reactのエコシステムがある
* React Native独自のJSX的なものを使って、ネイティブのビューコンポーネントを呼び出す
* Objective-C, Swift, Javaなどのネイティブコードをインポートできる
* Facebookがバックにいる(Parseと同じことが起こらないとはいえないが・・・Facebook自身がプロダクションで使っているのがParseとの違い)
* write-onceではない
* Androidのサポートでは劣る部分がありそう



### NativeScript

* [NativeScript](https://www.nativescript.org/)
* [FIRST THOUGHTS ON NATIVESCRIPT | AGING CODER](http://www.agingcoder.com/programming/2015/03/07/first-thoughts-on-nativescript/)
* [SECOND THOUGHTS ON NATIVESCRIPT | AGING CODER](http://www.agingcoder.com/programming/2015/10/15/second-thoughts-on-nativescript-react-native-and-mobilenativejavascript-in-general/)
* [Which is better: React Native or Native Script? - Quora](https://www.quora.com/Which-is-better-React-Native-or-Native-Script)
* [NativeScript First Public Beta Release is Now Available!](https://www.nativescript.org/blog/nativescript-first-public-release)
* [How NativeScript Works -Telerik Developer Network](http://developer.telerik.com/featured/nativescript-works/)

#### 特徴

* ネイティブのビューコンポーネントを呼び出している
* その他、全てのネイティブAPIをJavaScriptから呼び出すことができる
* Objective-C, Javaなどのネイティブコードをインポートできる(Swiftは現在サポートしていない)
* 2015/05にリリースされた割に、React Nativeと比較されることが多く、開発速度も早い
* Angular 2.0との組み合わせがしやすいよう



### Ionic

* [Ionic](http://ionicframework.com/)

#### 特徴

* AngularJSとの親和性
* HTML, CSSでUIをつくる
* ビルドシステムはCordova
* コミュニティがかなり大きく、ドキュメント、Web上の記事にも多くの知見がみられる
* [Pluginを作成](http://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html)すればネイティブコードを埋め込むことも可能



### Meteor

* [Meteor](https://www.meteor.com/)
* [Mobile | Meteor Guide](http://guide.meteor.com/mobile.html)

#### 特徴

* Meteor色がかなり強い感じ



### Reapp

* [Reapp](http://reapp.io/)

#### 特徴

* Reactを使用する必要がある
* UI kitとビルドシステムを提供していて、自身でも`フレームワークではない`ことを言っている。
* 最近のコミットが少ない


### Onsen

* AngularJS
* [Onsen](http://ja.onsen.io/)


### まとめ

表にまとめると以下の様な感じです。

|名前|アーキテクチャ|アプリケーションFW|パフォーマンス|ネイティブAPIの呼び出し|
|---|---|---|---|---|---|---|
|NativeScript|JSランタイム&ネイティブUIのブリッヂ|Angular 2.x|◎|グローバル変数にデバイス毎のネイティブAPI呼び出し|
|React Native|JSランタイム&ネイティブUIのブリッヂ|React/(Redux)|◎|React Nativeにないものはネイティブのコードをインポート|
|Cordova|WebView|なんでも?|◯|ネイティブAPI呼び出しプラグイン|
|Ionic|WebView|Angular|△|Angularモジュールとして|
|Onsen|WebView|Angular|△|Cordova-plugin|
|Meteor|Meteor|Meteor|△|Meteor|
|Reapp|WebView|React/(Redux)|◯|Cordova-plugin|