DartからJSを使う その1

実は、先日のDevFest Kyotoで、DartからGoogle Mapを利用しようと、
Hackathonの時に色々やってみて、絶賛放置中でした。
DartがM1になって、JSもDartから利用可能なったので試してみることにしました。

Google Mapsのサンプルもあると、先日DevFest Kyotoで
Dart CodeLabでチューターをしてくれたGDG京都スタッフの粟納さんに
教えてもらいました。

まずはJSの簡単なサンプルから試します。

先日のDart CodeLabで使用したテキストのもとは、Google I/Oの
Dart CordLabのテキストですが、日本語に翻訳済みです。

Dartが始めての方は、まずこちらからどうぞ！

Dart Code Lab 日本語訳

------

まずは、DartのM1をダウンロードします。

Downloads & Source
http://www.dartlang.org/downloads.html

適当なところに解凍したdartフォルダを置いて、Dart Editorを起動させます。

DartからJSを使う
下記のjs-interopにDartからJSを使う記事があります。
アラートを表示するプログラムのようです。

js-interop Use JavaScript from Dart
https://github.com/dart-lang/js-interop

js-interop / README.md を開いて、順々に読み進めます。

Dart JavaScript Interop
js.dartライブラリは、ブラウザで実行されているダートコードと 同じページで、実行されるJavaScriptを操作すること可能にしますとあります。

APIの説明 - js library
http://dart-lang.github.com/js-interop/docs/js.html

使い方
Dart EditorのメニューのFileから、New Applicationを選択します。
Application Nameは、仮にHelloJSとしておきます。

"Add Pub support" がチェックされていることを確認します。

pubspec.yaml に以下のようにソースを追加します。

dependencies:
js: { hosted: js }

メニューの "Tools" から "Pub Install" を選択します。

ちなみに、私の環境はWindowsXPで、この時点で対応してないよと言われます。
動いたら良いので取り合えず、js.dartをソースファイルと同じ階層にコピペしました。
フルパスを書いても良いのではと思います。

DartのソースファイルHelloJS.dartにも以下のようにソースを追加します。

import 'dart:html';
import 'package:js/js.dart' as js; ←これを足します。

Windows XPの場合は、以下のようにします。

import 'js.dart' as js;

そして、それ以下のコードを消去し、このソース足します。

void main() {
　js.scoped(() {
　　js.context.alert('Hello from Dart via JS');
　});
}

起動テスト
まず、依存関係をインストールするには、Pub Package Managerを使用します。

pub install

Dartium上のブラウザでテストするために、HTMLファイルを開きます。
WindowsＸＰの場合は、対応していないので、単に起動だけしてみます。

JavaScriptにコンパイル
現代の任意のブラウザでJavaScriptを使用してブラウザテストを実行するには、
まず、JavaScriptにコンパイルするために、コマンドプロンプトから次のコマンドを使用します。
環境変数にpashを通しておくと便利だと思います。

dart2js -o＜filename＞.dart.js ＜filename＞.dart

dart2js.dart は、ちなみに以下にあります。
dart\dart-sdk\lib\_internal\compiler\implementation\dart2js.dart

コンパイルが済むと

＜filename＞.dart.js　と　＜filename＞.dart.js.map　

というファイルが生成されています。

その後、HTMLファイルを他のブラウザで開くと、このプログラムの場合はアラートが開くはずです。

※本の少し追記しました。