UWP アプリと TypeScript + React

UWP アプリとは 「UniversalWindows Platform アプリ」 のことで、Windows 10 で導入されたWindows プラットフォーム向けのアプリの一種です。Windows 8 で導入されたWindows ストアアプリやWindows Phone 8.1 向けのWindows Phone アプリの進化版という感じですね。

• 参考 :ユニバーサル Windows プラットフォーム (UWP) アプリとは - Windows app development

現在のところ株式会社はてなでは UWP アプリの開発は行っていませんが、Windows ストアアプリ 「はてなブックマーク」 を 2012 年にリリースしています。*1

TypeScript + React の環境

さて、ここからは実際に TypeScript + React を UWP アプリ開発で用いるための環境について考えます。 UWP アプリは、ローカルファイル上の HTML + JS +CSS をブラウザ上に表示するのと似たような仕組みで動きますので、まずはローカルファイルシステム上でビルドしてブラウザ上に表示できるようにする環境を考えます。

TypeScript + React の環境を整えるためには、npm を使用するのが簡単でしょう。

• TypeScript のビルド : npm のtypescript モジュール
• React のソースコード : npm のreact モジュール
• React の型定義 : npm のdtsm モジュールを使用してDefinitelyTyped から react.d.ts を取得

React を使うにあたってはCommonJS モジュールシステムを使うことが推奨されていますので、TypeScript を記述する際はモジュール形式で記述し、CommonJS 形式でコンパイルするようにしました。

We recommend using React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages.

Getting Started | React

コンパイルした JS をブラウザ上で実行するために、また、UWP アプリの JS ファイルとして使用するためには、webpack やBrowerify などを使用してパックしてやる必要があります。 今回は私は webpack を使用してみました。 (webpack を選択した理由は特にありません。 同僚からは、「webpack は大艦巨砲という感じなので、Browserify で事足りるなら Browserify で良さそう」 という意見をもらいました。)

これらのツールを使用して TypeScript + React のビルドを行うようにしたサンプルプロジェクトをGitHub で公開しています。 (ここではビルドシステムとして Gradle を使用しています。)

• nobuoka/typescript-react-sample-project · GitHub

UWP アプリのプロジェクトへの TypeScript + React 開発環境の導入 : Node.MSBuild.Npm の紹介

さて、最後に UWP アプリのプロジェクトに上述の環境を構築することを考えましょう。

上で紹介した Gradle を使ったプロジェクトでは、Gradle から Node.js と npm を使用するためにGradle Plugin for Node を使用しています。 このプラグインは、ビルド時に Node.js と npm をダウンロードしてきて、セットアップしてくれるというものです。

一般的な UWP アプリのプロジェクトのビルドシステムであるMSBuild でも同様の機能を使えれば、上で紹介したプロジェクトの Gradle 部分をMSBuild に置き換えることで、UWP アプリのプロジェクトに TypeScript + React の開発環境を導入できるでしょう。

MSBuild に似たような機能を提供する NuGet パッケージがないかどうか探したのですが、NuGet パッケージの中に node.exe や npm の各種ファイルを含むようなものは見つけられたものの、ビルド時にセットアップするタイプのものはなさそうでした*4。 そこで、そのような機能を持つ Node.MSBuild.Npm という NuGet パッケージを作成し、公開しました。

www.nuget.org

使用方法は簡単です。 まず、Visual Studio で NuGet パッケージマネージャを起動して 「Node.MSBuild.Npm」 を検索してインストールしてください。 あとは package.json を記述して、ビルド時に実行したい処理をbuildスクリプトとして package.json に定義するだけです。

例えば、TypeScript + React 環境を構築してビルド時に TypeScript のビルドや webpack による変換を実行するには、以下のように記述します。

{"name":"my-app","private":true,"devDependencies":{"react":"^0.13.3","webpack":"^1.12.9","typescript":"^1.7.3","dtsm":"^0.13.0"},"scripts":{"build":"dtsm install & tsc -p ts --outDir built\\typescript & webpack"},// 一部略}

ビルド時に実行したい処理の記述方法に関しては、もう少し扱いやすいようにできると良いなぁと思っています。

ぜひご利用ください。

TypeScript + React 環境に対する評価

まだ軽く試している段階ですが、現時点での評価は以下のような感じで、個人的には他のライブラリ (Polymer や AngularJS) を試すまでもなく UWP アプリ開発に導入して良さそうという気がしています。

• (良い) TypeScript が JSX をサポートしているので、JSX 構文内でもIDE のサポートを受けやすくて記述しやすい。
  • これは本当に便利です。
• (良い) React 自体は大きなフレームワークではなく、導入がしやすい。
  • 画面内の一部の DOM 構造の構築のみに React を使用するなど。
• (良い) React により View のコンポーネント化ができ、開発しやすくなる。
• (良い) WinJS 側で React 用のアダプタが用意されており、WinJS と一緒に使いやすい。
• (微妙) TypeScript + React の環境を作るのが少し面倒。 慣れれば問題はなさそう。
  • TypeScript をモジュールとして記述するかどうかや、モジュールとして記述する場合には browserify を使うか webpack を使うか、といったことで悩みそうです。 (React は CommonJS のモジュールシステムを使用することを推奨している。)
• (不明、問題なさそう) 将来にわたってメンテナンスしやすいかどうか。
  • Facebook によりリリースされているので、ライブラリのメンテナンスの心配はそれほどなさそう。
  • 使い方次第ではあるが、React を使いながら徐々に別のライブラリに移行するというのも難しくはなさそう。

「はてなブックマーク」 のWindows ストアアプリを更新する際には、こういった技術を導入することでより開発しやすく、メンテナンスしやすいコードを書けるようになりそうです。*5

おわりに

はてなでは、より開発しやすく、よりメンテナンスしやすいコードを記述していこうとするエンジニアを募集しています！

hatenacorp.jp

明日の 「はてなデベロッパーアドベントカレンダー 2015」 の担当はid:motemen です。 お楽しみに！

*1:以下 UWP アプリ向けの話をしますが、Windows ストアアプリでも基本的に同様です。

*2:UWP アプリに限らず

*3:UWP アプリではないですが、大体一緒です。

*4:NuGet パッケージ内に node.exe や npm を含むようなタイプでも悪くはないのですが、exe ファイルを複数プロジェクトで共有したかったり、プロジェクトの階層が深い場所にあると npm のパッケージのインストールに失敗するという問題があったりするので、ビルド時にホームディレクトリにインストールしてくれるタイプのものが欲しいのでした。

*5:この文は 「はてなブックマーク」Windows ストアアプリの大幅な更新を予告するものではありません。