プログラマーズ雑記帳

Google が JavaScript に代わる言語として Dart を出して来ました。
今回はこの Dart のインストールと JavaScript への変換(コンパイル) 方法についての記事です。

Dart が目標としている用途は JavaScript のようにブラウザーが直接読み取って実行することです。 ただ、当分の間は JavaScript に変換して使うことなると思うので、コンパイルも必要でしょう。

Dart Editor と SDK

Dart は Dart Editor と SDK の 2 種類のパッケージで公開されています。

Dart SDK は Dart のコマンドラインツールのセットです。 コンパイルするだけなら、こちらで十分です。

• Getting Started with the SDK | Dart: Structured web apps

Dart Editor は Editor という名前ですが、 Visual Studio のような IDE に近いものです。
コンパイルだけなら必要ありませんが、 デバッグに役立ちそうですし、 Dart Editor のパッケージには SDK も含まれるので、 こちらをインストールすることにします。

• Getting Started with Dart Editor | Dart: Structured web apps

ちなみに、 Dart を実行できる Chrome(Dartium) も公開されています。

• Chromium with the Dart VM | Dart: Structured web apps

インストール

(0.) DartEditor は Java を使用するため、 入ってない場合は以下のサイトからダウンロードしてインストールしてください。

• Java テクノロジヘルプ - Java のインストール

1. Dart のサイトから PC 環境にあった zip ファイル(darteditor-winXX-XX.zip) をダウンロードします。

2. zip ファイルをインストールしたいところに解凍します。

3. 解凍後の dart フォルダー内に DartEditor.exe があるので、 実行してみて下さい。 正常に実行できていれば完了です。

(4.) エディターを使わずにコンパイラーを直接呼び出して使いたい場合は、 解凍した dart/dart-sdk/bin フォルダーのフルパスを環境変数 Path に追加します。

Dart Editor の実行でエラーが発生する場合

環境によっては DartEditor.exe の実行時に次のようなエラーメッセージが出る場合があります。

Failed to create java virtual machine

この場合は DartEditor.exe と同じフォルダー内にある DartEditor.ini ファイルの -vmargs の行を削除します。

-data
@user.home\DartEditor
-vmargs
-Dosgi.requiredJavaVersion=1.6
-XX:MaxPermSize=256m
-Xms40m
-Xmx1024m

• Solution Dart Editor: 'Failed to create java virtual machine'

コンパイル

JavaScript への変換(コンパイル)には dart2js.bat を使用します。

まず、適当な Dart のファイルを作成しておきます。
hello.dart :

import 'dart:html';

main() {
  var msg = query('#msg');
  var btn = new ButtonElement();
  btn.text = 'Click me!';
  btn.on.click.add((e) => msg.text = 'Dart!');
  document.body.nodes.add(btn);
}

コンパイルには次のようなコマンドを実行します。

dart2js.bat [オプション] 入力ファイル

> dart2js.bat -ohello.js hello.dart

実行するとオプションを指定していない場合は out.js という名前で JavaScript ファイルが生成されます。 出力ファイル名を指定する場合は -o オプションを使用します。

オプション

dart2js のオプションには次のようなものがあります。

オプション	機能
-o<file>, --out=<file>	出力ファイルの指定 (-o の後にはスペースを入れません)
-c, --enable-checked-mode, --checked	チェックモード (実行時型チェックのコードを挿入し、違反時にアサートできるようにします)
-h, /h, /?, --help	ヘルプの表示 (-v と一緒に指定すると詳細なヘルプになります)
-v, --verbose	詳細情報の表示
-p<path>, --package-root=<path>	インポート用のパッケージパスの指定
--minify	出力コードを難読化 (空白、コメントなどを取り除いたコードを生成します)
--suppress-warnings	ワーニングを非表示
--enable-diagnostic-colors	エラーメッセージを色付きで表示

ソースマップ

コンパイル時に JavaScript のファイルだけでなく、 JavaScript のファイル名の後に .map をつけたファイル(hello.js.map) も一緒に生成されます。

これはソースマップと呼ばれるもので、 Chrome や Firefox でのデバッグ時に使用します。 これを使うと JavaScript ファイル上のエラー発生箇所と一緒に Dart ファイルでの対応箇所も表示することができます。

• HaXe や TypeScript で使えるソースマップが便利。 | 机上のにゅーろん

前に Dart のインストール方法を紹介しました。 Dart には IDE とも言える Dart Editor があリます。 しかし、"コードの編集はやっぱり Emacs "という人は多いはず。
ということで、今回は Dart ファイルを Emacs で編集するためのモード (dart-mode.el)のインストール方法について説明します。

ダウンロード

以下のサイトに dart-mode.el が公開されています。

• nex3/dart-mode ・ GitHub

ダウンロード方法は以前の記事を参考にして下さい。

• GitHub, Bitbucket でのファイルのダウンロード方法 | プログラマーズ雑記帳

インストール

取得した dart-mode.el をパス(load-path)の通ったフォルダーに置いておきます。

~/emacs.d/init.el に設定を記述します。
最小限必要なのは次の記述です。

(add-to-list 'auto-mode-alist '("\\.dart\\'" . dart-mode))
(autoload 'dart-mode "dart-mode" "Major mode for editing Dart files" t)

Dart 用として特に新しくキーが割り当てられているものはありませんが、 C++ や Java と同じ cc-mode を基に作られているので、 だいたい同じ機能が使えます。

コンパイル

エラーメッセージ形式の登録

dart2js のコンパイル時のエラーメッセージは標準的な形式なので、 そのまま M-x compile によるコンパイルができます。

デフォルトコマンドの改良

コンパイル時のコマンドをちょっと改良する方法も紹介します。
以下の記述を init.el に追加して下さい。

(defun dart-mode-init ()
  (make-local-variable 'compile-command)
  (let* ((curfile (file-name-nondirectory (buffer-file-name)))
         (outfile (concat (substring curfile 0 -5) ".js")))
    (setq compile-command (format "dart2js -o%s %s" outfile curfile)))
  ;; (set (make-local-variable 'yel-compile-auto-close) nil)
  )

(add-hook 'dart-mode-hook 'dart-mode-init)

引数にファイルを指定したものがデフォルトになり、値もバッファで独立するようになります。 例えばファイル名が hello.dart の場合、デフォルトは次のコマンドです。

dart2js -ohello.js hello.dart

パスやオプションを変えたい場合は format に渡している文字列を変更して下さい。

出力バッファの自動クローズの停止

以前 コンパイル後に出力バッファを自動的に閉じる方法を記述しました。

• Emacs でのコンパイル後に自動的にウィンドウを閉じるようにする方法 | プログラマーズ雑記帳

しかし、 dart2js が jsx と同様に コンパイルに失敗しても正常終了のステータスを返すので、これが使えません。
利用されている方は、 先ほどの設定コードの dart-mode-init 内のコメントアウトを外して、 自動クローズの機能を OFF にしてください。

最近、コードを JavaScript に変換して使用する形式の言語が続々と出てきました。 それらのうち、どれを使おうか迷っていませんか ?
今回は JavaScript 系新言語の選択について私なりの考えを書いてみました。

ただ、どれもまだ試しにちょっと使ってみただけなので、 もっとよく使ってみたら、また意見が変わるかも知れません。

検討した新言語の Windows 環境におけるインストール方法(コンパイラーの使い方)および Emacs モードのインストール方法については、 以前の記事を御覧ください。

言語	インストール	Emacs mode
CoffeeScript	link	link
Dart	link	link
TypeScript	link	link
Haxe	link	link
JSX	link	link

先に選択方針を図にまとめたものをあげておきます。

JavaScript 系新言語のどれかは使うべき ?

最初にそもそも何か新しい言語を使う必要があるのか? というところから考えてみましょう。

JavaScript に変換する言語あるいは取って代わろうとする言語 がいろいろできてきている状況を考えると、 今のままの JavaScript には問題がある と多くの人が思っていることは間違いないです。

そのため、今後は JavaScript を直接書くのはやめて、 どれかの言語は使うべきだと思います。

JavaScript にもいいところはある、 新しい言語を覚えるのは大変という人も多いでしょう。
しかし、理由は後で説明しますが、そういう人でも TypeScript は使うべきです。

対象言語

ここに挙げたもの以外にもありますが、私が有名だなと思うものと対象にしました。

CoffeeScript

CoffeeScript は JavaScript に変換して使用する言語としては最初に有名になった言語ではないでしょうか。

JavaScript の抱える問題には大きく 2 つあると思います。
その一つは スクリプトなのに書きづらい 点です。
スクリプト系の言語は書きやすさが売りです。 しかし、 Ruby や Python など他の言語の経験者が使うと、 JavaScript ってこんなこともできないの と思う点が多々あります。
CoffeeScript はそんな問題点を解決する言語で、 スクリプトとしての書きやすさの向上を目的としています。

もう一つの問題は大規模開発に向いていない点です。
JavaScript はちょっとした処理の実行を目的に作られました。 そのため、 近年 Web アプリが大規模化してきて、役不足になってきました。
CoffeeScript の書きやすさの改良に対して、 以降の言語は大規模開発向けの改良に重きが置かれています。

Dart

Dart は Google が開発した言語です。 Dart の特徴はなんといっても JavaScript との置き換え を目的にしている点です。
他の言語は JavaScript に一旦変更して使うことになります。 Dart も JavaScript への変換機能は用意されていますが、 あくまで過渡的なもので、 最終的にはブラウザーで直接読み取って実行することが目的です。

TypeScript

TypeScript は Micorosoft が開発した言語で、 その名のとおり、 型(Type)指定ができる JavaScript です。特徴は ECMAScript 6 のスーパーセットであるところでしょう。

JavaScript はもともと Firefox の前身である Netscape 用として作成されましたが、 いまでは ECMAScript として標準化されています。
ECMAScript は型指定などの大規模開発向けの機能を盛り込んだ次期バージョンを策定中です。 TypeScript はこれらの機能を先取りした次世代の JavaScript といえます。

ECMAScript 6 もだんだんとでき始めてます。 Dart とは違ったアプローチで TypeScript は今後の JavaScript となっていくでしょう。

• 見えてきた「 ECMAScript 6 」。 JavaScript の生みの親が書く「 Harmony of Dreams Come True 」 - Publickey

Haxe

Haxe の特徴は JavaScript だけでなく、様々な言語への変換ができることです。

変換可能な言語としては次のようなものがあります。

• JavaScript
• Flash
• PHP
• C++

JSX

JSX はオンラインゲームで有名な DeNA が開発した 言語です。
変換後の JavaScript がなるべく速く動作するように最適化 されている点が特徴です。

まだ、ちゃんと動作しませんが、 JavaScript だけでなく、 C++ への変換も考えられているふしがあります。

機能比較

代表的な機能に対して比較をしてみました。

言語	静的クラス	型指定	モジュール	JavaScript の利用	ソースマップ
CoffeeScript	○	Ｘ	○	○	○
Dart	○	◎	○	△	○
TypeScript	○	◎	○	◎	○
Haxe	○	○	○	△	○
JSX	○	○	○	△	○

静的クラス

JavaScript のわかりにくい点といえば、 プロトタイプベースのオブジェクト指向 だと思います。
他のオブジェクト指向言語の経験があると、馴染めないと感じてしまいがちです。

ECMAScript 6 には静的クラスが入っています。 プロトタイプベースにも良いところはあるといった記事も見かけますが、 ECMAScript の策定者でさえ静的クラスがあった方がわかりやすいと認めていることは間違いないでしょう。

この静的クラスが使える点は書きやすさの特長として言語の説明でよく挙げられます。 対象とした全ての言語で使えます。

型指定

型指定はメソッドの引数などで型を指定できるかどうかです。
JavaScript では不適切な型の変数を渡しても、 型チェックが無いため、実行時に初めてエラーが分かります。
この機能があれば、コンパイル時にエラーのチェックができます。
コードの安全性を向上する大規模開発向けの機能です。

Ruby や Python にもないためか、残念ながら CoffeeScript では対応していません。

モジュール, JavaScript 利用

JavaScript の大きな欠点として、 他のスクリプト言語での require、 C, C++ での include に相当するような機能が無いことが挙げられます。 この機能を実現するものは、 モジュールやライブラリーと呼ばれています。 これも大規模開発向けの機能といえるかも知れません。
この機能も候補の言語すべてで使えます。


ただ、 JavaScript でも全くできないというわけではなく、 <script> タグで複数ファイルをロードすることによって似たようなことはできます。 JQuery のプラグインなどはこれで実現しています。

JavaScript 利用 は JQuery のような JavaScript ですでに書かれたコードを使えるかどうかという意味です。

JavaScript のコードも候補の言語すべてで使うことはできます。
しかし、 言語の入れ替えを狙っている Dart や他の言語への変換も考えている Haxe や JSX ではちょっと利用に手間を必要とします。
CoffeeScript は TypeScript を除けば、 JavaScript の一番薄いラッパーといえるので、 使えなくはないといった感じです。 また、生成後の JavaScript コードも読みやすくなっています。他の言語の生成コードは読むことが想定されておらず、まず読めません。

TypeScript は JavaScript の次期バージョンですから、 すんなりと JavaScript のコードを利用することができます。 過去の資産がそのまま使える方がいいというのが、 Microsoft の主張でもあります。

ソースマップ

ソースマップ は Chrome や Firefox でのデバッグ時に使用するものです。 これを使うと JavaScript のソースファイル上のエラー発生箇所と一緒に 変換前の言語でのソース上の対応箇所も表示することができます。
すなわち、デバッグしやすいということです。

CoffeeScript だけが現時点(2012-11-08)で対応していませんが、 そのうち対応するとは思います。

Dart 時代は来る ?

言語を選択する上で、 本当に Dart への移行があるのか というのは大事なポイントでしょう。 そこでこの点について私の予想を書いてみます。

MS の不支持

Dart が広がる上で一番の問題点は Microsoft が反対していることです。 つまり、 IE では対応しないということです。

• MS 、グーグルのウェブプログラミング言語「 Dart 」に不支持を表明 - CNET Japan

JavaScript の問題点は作りなおさないと直らないというのが Google の考え方です。 それに対し、既存の資源を大事にし、 JavaScript の欠点は JavaScript を改良することによって解決しようというのが Microsoft の主張です。
TypeScript は ECMAScript 6 が実現するまでの間に Dart に席巻されないための対応策といったところでしょう。

ダメなものは新しいものでどんどん置き換えていく新興企業の Google と古いものを大事にさせたい大御所の Micorosoft との対決といった感があります。


IE で使えないのでは、 Dart の使用は考えてしまうところですが、 Dart に対応していないブラウザーでも使えないわけではありません。
対応していない場合、 Google のサイトにある JavaScript を呼び出して、 Dart のコードを JavaScript に変換して動作させることができます。
Dart 対応のブラウザーはそのまま使え、Dart 未対応では動くけど、遅くなる というのを Google では薦めているようです。

ちなみに既存のものを大事にしようと言っている Micorosoft ですが、 以前には VBScript を広めようとしました。
これは Office 製品の VBA や Visual Basic のユーザーが作りやすいように といった意図だったと思います。 しかし、 Netscape(当時の IE の対抗はこれぐらい)が苦労して MS 帝国を強固にするための手伝いをするわけもなく、 結局広がりませんでした。

他のブラウザーの対応

IE 以外のブラウザーの対応はというと現時点では Dart に対応することを明言しているのは、 Chrome だけです。
そこで将来的な対応も考えてみます。 このブラウザーの対応を考える上では、 レンダリングエンジンが重要だと思います。

• ブラウザとレンダリングエンジン | プログラマーズ雑記帳

レンダリングエンジンには JavaScript エンジンも含んでいることが多いです。 Chrome ではこれを変えて使っているようですが、 WebKit での Dart 対応ができれば、対応ブラウザーは一気に増えます。 Safari, Opera に加え、 iOS, Android のほとんどのブラウザーが WebKit を使っています。

Firefox も対応すると思います。 Google は Mozilla の筆頭スポンサーですし、 Mozilla には新しいものを積極的に取り入れる気質がある感じがします。

他のモダンブラウザーでは高速に動くのに、 IE だけは遅くなるというサイトが増えれば、 さすがに IE も対応するのではないでしょうか。


また、 Dart がオープンソースなのも広げる要因になると思います。
ソースが公開されていれば、簡単に機能を追加できるということは決してありませんが、 それでも、 0 から作るよりかなり楽だと思います。

選択方針

言語ごとの選択方針です。

CoffeeScript

CoffeeScript は出てきた当初はすごいと思いました。 しかし、他の言語もいろいろと出てきた後では、 大規模開発向けの機能の弱さなど少し見劣りがする感じです。

ただ、 CoffeeScript は Rails の標準になるらしいですし、 Ruby との共通点も多いので、 Rails を使った Web アプリを開発する場合には あり かなと思います。

• Rails Hub 情報局: ベター JavaScript!? CoffeeScript が注目されるワケ

Haxe

Haxe を利用する場面としては、 Web でも使いたいし、 ローカルでも動作させたいといったプログラムを作る場合でしょう。

例えば、 TeX の記述を MathML に変換する mathjs という JavaScript ライブラリーがあります。 mathjs が Haxe で書かれているわけではありませんが、 こういったものは、ローカルで使っても有用なのではないかと思います。

JSX

JSX の売りは速さです。 これは今の時点ではかなりメリットですが、 将来的にはどうかなと思っています。

C 言語などでも 2 で割るよりもシフト演算子を使った方が速い といった速く動かすためのコーディングというものがいろいろありました。
しかし、最近ではコンパイラーの高機能化やコンピューターの高性能化により、 あまり聞かなくなりました。

JavaScript の最適化もブラウザーが高性能化していけば、 必要なくなってくる分野だと思います。


JSX が JavaScript よりも優れていると言っている点は faster, safer, easier です。
ここで、 safer が型指定、 easier が 静的クラスを指しています。 faster を重視しなければ、他の 2 つは他の言語にもあり、 特長がなくなってしまいます。

しかし、欠点も見当たりませんし、言語仕様的には悪くありません。 インターフェースも Mix-in もできて、むしろ良い感じです。

• 多重継承禁止とインターフェース, Mix-in の許可 | プログラマーズ雑記帳

日本製ですし、個人的には応援したい気もあります。 C++ への変換ができるようになれば、広がる可能性はあるんじゃないかなと思います。

TypeScript, Dart

大手が開発しているだけあって、 特に理由がなければ、 TypeScript か Dart に落ち着くのでないでしょうか。


JavaScript だって捨てたものではない、 新しい言語を覚えたくないという人でも TypeScript は使うべきと最初に書きました。 これは TypeScript が今後の JavaScript であるからです。
TypeScript は欠点の改良された JavaScript なので、 先取りして使っていった方がいいと思います。
また、 JavaScript の機能追加なので、新しく覚えることは少ないですし、 TypeScript で追加された機能は JavaScript を使っていてもそのうち覚えなくてはならなくなります。

TypeScript には他にも JavaScript のライブラリーがそのまま使えるという利点があり、 他の言語から抜きんでている感があります。


では Dart を使う利点はというと私は速さだと思います。
JSX のところで速さを重視しないと書いたばかりですが、 こちらはコードの書き方といった小手先のものではなく、 もっと本質的なものです。 C++ における テンプレートを使った基本型のソートでは C よりも速くなる といったような言語仕様からくる速度の向上です。
同じものを JavaScript と Dart で書いた場合、 ブラウザーが対応していれば、 Dart の方が速く動くという可能性は高いです。

また、他の言語もソースマップというものはありますが、 Dart は Dart としてデバッグできるので、一番デバッグしやすいでしょう。


昔の JavaScript のコードを使うことを重視するなら TypeScript 、 新しく作る場合には Dart といった選択がいいのではないかと思います。

私の選択

最後に私の選択について書いてみたいと思います。

個人的には Dart が広まって欲しいと思っています。
これは決して Dart が理想的な言語と思っているわけではありませんし、 JavaScript なくなれと思っているわけでもありません。 大事なのは、今まで JavaScript 以外の選択肢がなかったのに対して、 選択肢ができるということです。
私はこの多様性のある状況というのが好きです。

• Rails Hub 情報局: 「なんで Ruby なんか作った!? 迷惑だ！」に対する Matz の答え

Dart が成功すれば、今後、別な言語も登場してくる可能性が出てきます。 逆に Google ができないようでは、 他のどこにもできないでしょう。


そのため、基本的に Dart 推しです。
しかし、プログラミング言語はツールであり、言語は目的、用途にあわせて使い分けるもの とも私は思っています。
何か理由があればその言語を使うし、なければ Dart を使う というようにしていくつもりです。