読者です 読者をやめる 読者になる 読者になる

ひだまりソケットは壊れない

ソフトウェア開発に関する話を書きます。 最近は主に Android アプリ、Windows アプリ (UWP アプリ)、Java 関係です。

まじめなことを書くつもりでやっています。 適当なことは 「一角獣は夜に啼く」 に書いています。

React Native の Universal Windows Platform サポートを試してみた

UWP アプリ

React Native が Universal Windows Platform をサポートするという発表が、2016 年 4 月の F8 にて MicrosoftFacebook により行われました。 すなわち、React Native を使って Universal Windows Platform (UWP) アプリを開発できるようになります。

blogs.windows.com

上のブログ記事の公開時点では、React Native の本家とは独立した Git リポジトリに UWP サポートが入っているものが公開されているのみで、本家の方には UWP サポートは入っていません。 今後、React Native プロジェクトの本家に UWP サポートが追加されていくようです。

仕組み

React Native の仕組みが、冒頭で紹介したブログ記事で簡単に紹介されています。

Under the hood, React Native enables app builders to declare their UI using JavaScript and React, and the framework translates the React DOM from JavaScript into method calls to view managers on the native platform, allowing developers to proxy direct calls to native modules through JavaScript function invocations. In the case of React Native on UWP, the view managers and native modules are implemented in C#, and the view managers instantiate and operate on XAML elements. We use Chakra for the JavaScript runtime, which can be consumed by any UWP app without any additional binaries being added to the app package.

React Native on the Universal Windows Platform | Building Apps for Windows

React Native でアプリ開発をする場合、開発者は JavaScript と React で UI を定義し、React Native のフレームワークが React DOM をもとにネイティブプラットフォームの View マネージャのメソッドコールを行ってネイティブの UI 要素を生成します。 また、ネイティブモジュールのメソッド呼び出しを JS から行うこともできます。

UWP での React Native の場合は、ネイティブの UI マネージャやモジュールは C# で実装されており、それらを JS から使うことができます。 JS 実行環境には Chakra が使われるため、アプリに JS 実行用の追加のバイナリを含める必要はないとのことです。

試してみた

まだ React Native 本家に UWP サポートは入っていませんが、UWP サポートが入っている Git リポジトリが公開されているので試すことができます。 というわけでリポジトリに入っているデモプロジェクトを動かすところまでやってみました。

リポジトリ

下記のリポジトリです。

UWP サポートに関するドキュメントは、今のところ次のものしかなさそうです。

試し方

上のドキュメントに書かれている通りに進めれば試せます。 簡単に流れを書くと次のような感じです。

  1. まずは Node.js や Python などの必要なツールをインストールする。
  2. リポジトリを Git で clone してくる。
  3. プロジェクトのディレクトリで npm install
  4. プロジェクトのディレクトリで node local-cli\cli.js start
  5. Visual Studio 2015 で ReactWindows\ReactNative.sln を開き、Playground プロジェクトを実行するとアプリが起動する。

Visual Studio 側で開かれるプロジェクトは、React Native と UWP の橋渡しのための機能群やアプリのガワの部分だけです。 アプリ内部の JS で書かれている部分はプロジェクトの Examples\UIExplorer\UIExplorerApp.windows というファイル (Playground プロジェクトの AppReactPage.cs ファイルで指定されている) で、JS 部分は node local-cli\cli.js start で起動されたプロセスがアプリのガワの方に渡すっぽいです。 (詳しいことはわかってない。)

アプリが起動すると、最初に次のような画面が開きます。

f:id:nobuoka:20160504020228p:plain

しばらくすると次のような表示になるはずです。

f:id:nobuoka:20160504020423p:plain

JS ファイルを変更したら、Ctrl + R で更新できます *1

とりあえずデバッグビルドで動かすことは簡単にできましたが、リリースビルドの作り方とかはよくわかってないです。

雑感

UWP アプリ開発においては、もともと JS + HTML + CSS での開発がサポートされています。 Windows Runtime API も基本的には JS からそのまま使用できます。 よって、単に 「JS + React でアプリ開発ができる」 という点では、React Native を使った場合ももともとの JS サポートも大差はありません。

もともとの JS サポートと React Native を使った場合とを比べて一番違ってくるのは、UI 周りかなと思います。 前者は HTML + CSS で UI を記述しますが、後者は本来であれば XAML で記述される UI を JS 側から操作する、ということになります。 Windows 8 や 8.1 の Windows ストアアプリの頃は、C# + XAML での UI コンポーネント相当のものが WinJS で提供されていましたが、Windows 10 の UWP アプリでは、C# + XAML では使えるカレンダーなどのコンポーネントが WinJS では提供されていないなどの差が出てきました。 同じ UI コンポーネントを異なる環境用に提供してメンテナンスするのはコストが大きいのかもしれません。

WinJS が C# + XAML の UI コンポーネントを全てカバーしきれていないという状況の中で、React Native は 「慣れている JS + React でアプリ開発したいけどネイティブの UI コンポーネントを使いたい」 という人の有力な選択肢になるかなと思います。 もちろん、もともとの JS + HTML + CSS でのアプリ開発が React Native に劣っているというわけではなく、HTML や CSS に慣れている人にとっては JS + HTML + CSS の方が view 周りをごりごり書いていくことができたり、web 側の UI ライブラリをそのまま使えたりできるといった利点もありますので、どちらを選ぶかは状況次第という感じになりそうです。

ともかく React Native で UWP アプリ開発ができるようになるのは喜ばしいことですね!

*1:文字入力用のフォームにフォーカスが当たっているときでないと反応しませんでした。