Chrome Dev Editor で Dart を書く

2015年に爆発的に流行する事が(俺の中で)予測されているDartですが、Dart EditorはEclipseすぎてキモいので、皆さんIntelliJ IdeaのDart Pluginを当然のように使ってることと思います。とはいえItelliJ Ideaに毎年1万円も課金してる信者の方ばかりでは無いのも事実。そんなDartのEditor難民の方は、公式のChrome Dev Editorを使うといいと思うのです。

install

Chrome Dev Editor

ChromeウェブストアからDLするので、当然のようにChrome Appです。

Create Project

左上の三本線から New Project を選んで、とりあえずサンプルを開いてみましょう。

名前とかは適当でいいんじゃないかな。

何かできた

左のところが赤かったり黄色かったりするやつは、そこにエラーあるよって感じ。

Pub Get

Dartのパッケージ管理ツールである pub もここから使える。
pubspec.yaml (npmのpackage.jsonみたいなやつ）を右クリック

左下でくるくるしながら pub get が実行されて、 /packages ディレクトリの中にぶちこんでく。

そしたら赤いのとか黄色いのとかも消える。

赤いのは、「んなパッケージねーよ！」エラーだったみたい。

Launch app

何も考えずに再生ボタン押す。適当に右クリックでコンテキストメニューから Run でもいいと思う。

やったね！

でも、Chrome Dev Editor の左下のくるくるが終わるまでまとう。

Dartium じゃないとDartで動かないからせこせことDartをJSにコンパイルしてくれてるので、しばらく待とう。

Play app

Type your name... のところに文字列を入れると、何と反転表示してくれる！！神アプリ！！

あとは、メニューの About を押すとURLと画面が切り替わるんだけど、これはSPAになってる。

main.dart

var router = new Router();
  router.root
    ..addRoute(name: 'about', path: '/about', enter: showAbout)
    ..addRoute(name: 'home', defaultRoute: true, path: '/', enter: showHome);
  router.listen();

main.dartのrouting処理のところみると分かるね。

ちなみにRouterは、route_hierarchical パッケージを使ってて、これはAngularのRouterみたいですね。

main.dart

import 'package:route_hierarchical/client.dart';

ちゃんとうえのほうでimportしてるから使える感じだね。

Add new page

せっかくなのでいじってみましょう。新しく /hoge ページを追加してみます。

index.html+0900

@@ -53,6 +53,7 @@
     <ul>
       <li><a href="/">Home</a></li>
       <li><a href="/about">About</a></li>
+      <li><a href="/hoge">Hoge</a></li>
     </ul>
   </nav>

@@ -83,6 +84,11 @@
       </p>
     </div>

+    <div id="hoge" style="display:none">
+      <p>This is additional page.</p>
+      <p>"Hoge" is Japanese culture.</p>
+    </div>
+
     <div class="sass-hidden">
       <p>
         Note: to use Sass with this application, switch the stylesheet

main.dart

@@ -15,6 +15,7 @@
   var router = new Router();
   router.root
     ..addRoute(name: 'about', path: '/about', enter: showAbout)
+    ..addRoute(name: 'hoge', path: '/hoge', enter: showHoge)
     ..addRoute(name: 'home', defaultRoute: true, path: '/', enter: showHome);
   router.listen();
 }
@@ -23,9 +24,17 @@
   // Extremely simple and non-scalable way to show different views.
   querySelector('#home').style.display = 'none';
   querySelector('#about').style.display = '';
+  querySelector('#hoge').style.display = 'none';
 }

 void showHome(RouteEvent e) {
   querySelector('#home').style.display = '';
   querySelector('#about').style.display = 'none';
+  querySelector('#hoge').style.display = 'none';
+}
+
+void showHoge(RouteEvent e){
+  querySelector('#home').style.display = 'none';
+  querySelector('#about').style.display = 'none';
+  querySelector('#hoge').style.display = '';
 }

大したことはやってないす。

ちなみに .. について

ちな router.route..addRoute()..addRoute() の部分の ..addRoute() の .. はDartのシンタックスで、メソッド呼ぶんだけど常に return this してくれる的なやつです。

addRoute

void addRoute({String name, Pattern path, bool defaultRoute: false,
        RouteEnterEventHandler enter, RoutePreEnterEventHandler preEnter,
        RoutePreLeaveEventHandler preLeave, RouteLeaveEventHandler leave,
        mount, dontLeaveOnParamChanges: false});

addRouteの実装みるとreturnはvoidなんだけど、メソッドチェーンが使えるんだよ！的なあれ。

show hoge page

そんなこんなでちゃんとHogeページが追加されてて、メニューの切り替えも動作してます。すばらしい。

まとめ

• Dartの開発がChrome Appでできる
• Pub Getもできるしコンパイルもできる
• ブラウザでの確認もできる

感想

コードヒントとかコードジャンプとか何かひと通り必要な事は全部できるすごい。
これがDartで書かれてるってのがすごい。
大規模なクライアントサイドアプリケーションとして実用に耐えてる証左になるんじゃないかな。
結構重い処理もあると思うんだけど、そんなに重さは感じなかった。

ただ、Dart2JSのコンパイルが重い。激重い。やってらんない。糞。

Dart2JS通さずにDartiumで直実行できるのであればいい感じかなぁ。
そのへんを簡単に設定するオプションは見つからず。
DartiumにChromeDevEditorをインストールして起動してもRunすると普通のChromeの方でURL開いちゃったりするしどうしたもんかね。

結論

IntelliJ Idea に課金すればいいと思うよ。