JavaScriptで書く! クロスプラットフォームアプリ 2016

cross_platform_app

こんにちは! Pairsチームの太田です。

日本がGWに浮かれていたころ、ソルトレイクシティで開催されたng-confではAngular2とNativeScriptの統合がアナウンスされました。
nativescript_at_ng_conf

NativeScriptはもともとJavaScriptのワンソースでクロスプラットフォームのNativeコードを出力することができるというツールでした。
それがバージョン2.0では新たにAngular2 + TypeScriptのコードにも対応したとのことです。
NativeScript陣営は1年ほど前からAngularチームと協力してこの話を進めてきたそうなので、出来には期待してよさそうです。


正直なところ、これまで私はクロスプラットフォームアプリには腰が引き気味だったのですが、今年2月のMicrosoftによるXamarinの買収に続いて、NativeScriptがAngular2のようなビッグタイトルを担いできたことは今後クロスプラットフォームアプリ界隈が盛り上がるきっかけになりそうだと感じています。


現在の多種多様なクロスプラットフォームアプリの開発ツール・環境の中でも、私のポジション的にWeb技術を中心としたものにフォーカスしてその魅力についてみていきたいと思います。

JavaScriptで書くことの魅力

クライアントもサーバーサイドも書き切れる

言わずと知れたNode.jsでサーバーサイドを書けば、アプリを構成する全てのコードをJavaScriptだけで完結することも可能ですね!
また、サーバーレスアーキテクチャというコンセプトの中で言及されるAWS Lambdaを使うこともできますし、Google I/O 2016で注目を浴びたMBaaSのFirebaseを使うこともできるでしょう。


参考:

JavaScript自体の進化

Web技術を利用したクロスプラットフォームアプリの開発ツール・環境としてPhoneGapやTitanium Mobileが話題になっていた2010年ごろに比べると、JavaScriptは飛躍的に進化しています。
2010年に公開されたTitaniumのチュートリアルのコードを見てください。

Titanium Mobileで作る! iPhone/Androidアプリ


モジュール分割されておらず、ES2015どころかES5のArrayメソッドすら使えていない状況です。Promiseもなくコールバック地獄まっしぐらです。

現代ではおなじみのES2015のClassやModulesやPromiseなどの機能が取り入れられた今のJavaScriptは、モダンな言語として他の言語にもひけをとりません。


参考:
ES6 in Practice

コードの再利用

JavaScript界隈にはIsomorphicだとかUniversalといった言葉で、クライアント/サーバーサイドで同じコードを共有する設計・実装のコンセプトがあります。(縦の共有)
それとは別に、クロスプラットフォームアプリの観点では、各プラットフォームのクライアント間でコードを共有できる利点があります。(横の共有)


具体的な例では、Facebookが今年のF8向けにリリースしたReact Nativeで書かれたアプリは85%のコードの再利用を実現したとのことです。
これはかなり魅力的な数字ではないでしょうか?


参考:


どのツール・環境を使うべきか

JavaScriptでクロスプラットフォームアプリ開発に取り組むにあたり、主なツール・環境を比較・検討してみました。
Titanium…? 知らない子ですね。

React Native

Pros

  • あの大人気ライブラリReactのファミリープロダクトである(エコシステムに期待できる)
  • 開発元がFacebook。Facebook Ads ManagerやF8などのReact Native製アプリがリリースされている実績がある
  • プラットフォームの標準UIコンポーネントにマッチしたコンポーネントを提供しているので、よりNativeに近いUXを実現できる

Cons

  • ワンソースで完結するコンセプトではない。各プラットフォームのUIのコードは別々に書く必要がある
  • 実際にNativeコードを出力するのではなく、プラットフォームのJavaScriptエンジンを経由してNativeのAPIをコールする仕組みなので、本当に深いところまでは介入できない(のでは)

NativeScript

Pros

  • ReactライクなコンポーネントベースでUIを構築できる
  • ワンソースで各プラットフォームの本当のNativeコードが出力できる
  • Angular2 + TypeScriptのコードをNative化できるのはすごい

Cons

  • エコシステム構築できるか不安。開発元がよくわからない組織(だからこそAngular2と結びついたのだろうが…)
  • Angular2サポートは強みでもある反面、ロックイン・ブランディング付けが懸念される弱みでもある

Cordova

Pros

  • 元々はPhoneGapというプロダクトであり、クロスプラットフォームアプリの老舗的な存在で実績がある
  • UIはWebViewなので、普通のWebアプリと同様に書けるハードルの低さがある

Cons

  • 結局WebViewなので…

まず、Cordovaは老舗だけあって時代遅れ感は否めません。
クロスプラットフォームアプリであっても、NativeのUXを提供できるツールがある今では選択する理由が弱いでしょう。


NativeScriptは未知の存在ですが、ワンソースで完結するということは逆にNativeのエッジな部分にはアプローチできないと感じますし、Angular2の今後次第という見方もできます。


やはり本命はReact Nativeで、現実感のあるコンセプトは信頼できます。またエコシステムとしての成長が明らかに期待できます。


というわけで、React Nativeによるクロスプラットフォームアプリ開発にトライします! そこで感じたことをレポートしたいと思っています!
それではまた。

  • このエントリーをはてなブックマークに追加

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください!皆様のエントリーをお待ちしております!

Recommend

ユーザーストーリーマッピングをやってみました

Elasticsearch 5.0.0-alpha1 が公開されたので早速使ってみた