スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 

Dart のインストールとコンパイル (Windows)

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


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

Dart Editor と SDK

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

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

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

インストール

(0.) DartEditor は 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

コンパイル

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 ファイルでの対応箇所も表示することができます。
スポンサーサイト
 

JavaScript の軽量化(難読化)ツール

前回 、 JavaScript に変換して使う言語を紹介しました。 どうせならもう一手間かけて、リリースする際は軽量化(難読化)もしておきましょう。
という事で、今回は軽量化ツールの紹介です。

軽量化や難読化とは、英語で言うと minify や compress と呼ばれているもので、 コメント、空白、改行などを取り除くことです。 これをやっておくとファイルのロードが多少速くなります。

かしこいものになってくるとコードをより短い表現に変換したり、 使っていないコードを削除してくれたりもします。
コードの改変までやるのは不安を感じる人もいるかもしれませんが、 たいていのツールはオプションで指定しないかぎり、かってにそこまでやることはありません。
  new Array(1, 2, 3, 4)  => [1,2,3,4]  
なお、前回紹介した言語の中では、 Dart はオプションによって、 軽量化した状態のコードを生成することができます。
紹介する軽量化ツールはバッチ処理などをしやすいコマンドラインのものです。
ツール プラットホーム 必要なもの
UglifyJS クロスプラットホーム Node.js
Microsoft Ajax Minifier Windows  
JSC Windows  
Google Closure Compiler クロスプラットホーム Java
お勧めは次のような感じです。
Minifier select

公開されている JavaScript ファイルを見たい場合などに 軽量化(難読化)を戻したい時があります。 この軽量化の逆は beautify や decompress と呼ばれています。
上記のツールの中では UglifyJS はこれが可能です。
しかし、そんなに行う処理でもないため、オンライン版で十分だと思います。

UglifyJS

JavaScript の解析、軽量化、整形ツールです。 Node.js がインストール済みであれば、一番簡単にインストールできます。

インストール

Node.js がインストールされていない場合は、まず Node.js をインストールします。 インストール方法は CoffeeScript または TypeScript の記事を見てください。

以下のコマンドを実行すると、ネットワークから取得してインストールしてくれます。
 > npm install -g uglify-js

使い方

軽量化する場合には次のようなコマンドを実行します。
uglifyjs [オプション] 入力ファイル
 > uglifyjs -o hello_c.js hello.js 
デフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。
オプションは必ず入力ファイルの前に記述して下さい。 後ろに書いたものは認識してくれません。

その他のよく使いそうなオプションをあげておきます。
オプション 説明
-b, --beautify 整形(軽量化の逆)
-o, --output <file> 出力ファイルの指定
--overwrite 軽量化後のコードで入力ファイルを上書きします
--unsafe コードをより短い表現に変換

使用法の詳細は以下のページを参照して下さい。 -h などでヘルプを表示することはできません。

Microsoft Ajax Minifier

Microsoft 製の軽量化ツールです。

インストール

Microsoft のサイトからインストーラー(AjaxMinSetup.msi)をダウンロードし、 実行します。 以下のフォルダーにインストールされます。
 c:\Program Files\Microsoft\Microsoft Ajax Minifier 
環境変数 Path に追加するか、 スタートメニューに追加された [ Microsoft Ajax Minifier ]→[ Microsoft Ajax Minifier Command Prompt ] の項目から使用します。

使い方

軽量化する場合には次のようなコマンドを実行します。
ajaxmin [オプション] 入力ファイル
 > ajaxmin hello.js -o hello_c.js 
デフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。

短くするためのコードの改変まで行う場合は -hc オプションもつけます。
 > ajaxmin -hc hello.js -o hello_c.js 

その他のオプションは次の方法でみることができます。
  • -? オプション
  • スタートメニュー
    [ Microsoft Ajax Minifier ]→[ Microsoft Ajax Minifier Documentation ]
また、以下のサイトに詳細な説明があります。

JSC (JavaScript Compressor)

exe ファイル一つで動作するので、一番お手軽です。 ただし、 コードの改変までは行なってくれないようです。

インストール

以下のサイトから zip ファイル(JSC-X.X.zip)をダウンロードします。 zip ファイル内の JSC.exe ファイルを Path の通ったフォルダーに置きます。

ここで一つ注意点があります。
.NET のコマンドラインツールに同名のプログラム jsc.exe(JScript Compiler) が存在します。 紛らわしいので、 jsm.exe などの別名にしておいた方が良いでしょう。

使い方

軽量化する場合には次のようなコマンドを実行します。
jsc 入力ファイル [出力ファイル]
 > jsc hello.js hello_c.js 
出力ファイルを省略した場合は jsc-compressed-MM-DD-YYYY.js の名前で生成されます。
入力ファイルも省略するとバージョン情報や使用法が表示されます。
コマンドオプションはありません。

Google Closure Compiler

Google 製の軽量化ツールです。

インストール

Java を使用するため、入ってない場合は以下のサイトからインストールしてください。

以下のサイトから zip ファイル(compiler-latest.zip)をダウンロードします。 zip ファイル内の compiler.jar ファイルを好きなディレクトリーにおいて下さい。

使い方

軽量化する場合には次のようなコマンドを実行します。
java -jar "compiler.jarのパス" --js 入力ファイル --js_output_file 出力ファイル
 $ java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js 
オプションを指定しない場合は、入力が標準入力、出力が標準出力です。

--js オプションを複数書くことによって、結合して軽量化したファイルを生成することができます。
 $ java -jar compiler.jar --js util.js --js hello.js --js_output_file hello-compiled.js 

コードの改変まで行う場合は、 --compilation_level ADVANCED_OPTIMIZATIONS オプションをつけます。
 $ java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js --js_output_file hello-compiled.js 
使用法の詳細は以下のサイトを見て下さい。
追記
最初、用語には一番よく使われているかなと思い、難読化を使っていました。 しかし、 軽量化 も結構使われているようなので、軽量化に変更しました。
コードを読みづらくすることが目的ではなく、 短くした結果読みづらくなるだけなので、呼び方としては軽量化の方が個人的にはいいんじゃないかと思います。

圧縮 という言葉も使われますが、こちらは zip のような圧縮をまず連想します。 しかもサーバー側の設定によっては、 gzip で圧縮した html や JavaScript などのファイル (html.gz, js.gz) を通常のファイルのように使うこともできます。
そのため、 圧縮はちょっと紛らわしいでしょう。

ちなみに英語では、なんとなくですが minify が最近の主流っぽいです。
 
このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
10位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

10月 | 2017年11月 | 12月
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。