facebook flowでHTML5 Canvasデモを作ってみた

こんにちは、ICS池田です。

11月19日(水)にFacebookから発表された「flow」(以下「facebook flow」と記述します)ですが、皆さんは試されましたでしょうか?facebook flowはJavaScriptの静的型付けチェックツールでもあり、altJSという一面もあります(※公式ではaltJSとは説明していないですが、私は実質的なaltJSだと考えています)。本記事では、facebook flowの採用によってWebコンテンツ制作にどのようなメリットがあるのか調べるために、インタラクションデモを作って検証してみました。

flow_web

flowで作成したコンテンツ

HTML5 Canvasタグを使ったグラフィック表現で、約500行程度のJavaScript (flow code)で作成しました。タップやマウスしながら動かすと大量のパーティクルが拡散するような表現になっていますので、次をクリックしてブラウザで再生してみてください。

HTML5 Canvasで作成しているので、Flash風のコンテンツもiPhoneで動きます

HTML5 Canvasで作成しているので、Flash風のコンテンツもiPhoneで動きます

コンパイルの仕組み

公式サイトの手順に従ってfacebook flowと、自動コンパイラのJSXの両方をインストールします。flowコマンドはチェックツールであり、jsxコマンドのほうでflow codeのコンパイルを行う仕組みのようです。今回作成したコンテンツは次のようなフォルダ構造になっています。facebook flowではオリジナルのコードflow codeを拡張子.jsで書き、同じ拡張子.jsのファイルが別フォルダに出力される仕組みとなっています。

flow_workflow

これを次のコマンドを用意してチェックやコンパイルを行います。

jsx --strip-types --harmony --watch src/ build/

facebook flowのプログラム言語

facebook flowの言語flow codeはTypeScriptのようなJavaScriptとなっています。ほとんどがTypeScriptと同様の記述方法であり、具体的には静的型付け・クラス・アロー関数などが用意されています。現行のJavaScriptのライブラリとして今回のデモではCreateJSを利用しましたが、公式サイトで紹介されているように「declare」キーワードを使うことで名前空間の解決ができました。今回作成したflow codeはこちらのリンクをご覧ください。

チェックツール(flowコマンド)でコードの間違いがカラフルに指摘されます。試しにわざと型違いのコードをflowにかけてみたら、関数に引数を与えるところでstring型とnumber型とが違うことを指摘しています。

flow_console

コンパイラはHaxe言語(altJSの一つ)のコンパイラと同様にOCaml言語で開発されているのですが、Haxe同様にコンパイル処理が早いことが期待できます。(コンパイル処理の早さに関しては、TypeScriptやCoffeeScript等のNode.jsベースのコンパイラよりは期待できそうだと思います)

類似のTypeScriptとの比較

ほぼTypeScriptと同じ要領でコードを書くことができましたが、TypeScriptにはあってfacebook flowには用意されていない機能があったので、違いを次の表にまとめてみました。現時点ではTypeScriptのほうが高機能ですが、ロードマップで示されているfacebook flowの今後に期待したいところです。

    • 出力されたJavaScriptコードが汚い (これが出力された)
    • 現時点ではコードエディターの恩恵や、Gruntやgulpのようなタスクランナーが利用できない。(高機能で無料のエディターBracketsが比較的書きやすかったです)
TypeScript flow code
アクセス修飾子 public,
protected,
private が利用可
存在しない
メンバー変数の宣言 初期値を代入可能 初期値設定不可
(コンストラクタで記述して回避する)
nullチェック 無い 厳しくチェックする
配列の型指定 string[] Array<string>
string[]
コンパイラの開発言語 TypeScript
(tscはNode.jsで実行される)
OCaml

最後に

facebook flowは既存のJavaScriptコードの資産の再利用しやすいのが利点だと感じました。既存のJSに対してもチェックツールとして働かせることもできるので、素のJavaScriptとaltJSとしてのflowコードを混在して開発したい場合にも役立つ可能性があります。

今後の進化に注目していきたいところです。

池田 泰延

ICS代表取締役。筑波大学 非常勤講師。テクニカルディレクターとしてウェブサイト・ゲームの制作に携わる。個人ブログ「ClockMaker Blog」やセミナー・講演・書籍執筆などの活動を通して積極的にインタラクティブ技術の情報共有に取り組んでいる。著書に「Stage3Dプログラミング」(ワークスコーポレーション刊)、「Papervision3D入門」(エクスナレッジ刊)など。