Chrome Dev Editor で Dart を書く


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

## install

[Chrome Dev Editor](https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg)

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

## Create Project

![Chrome_Dev_Editor__developer_preview_-3.png](https://qiita-image-store.s3.amazonaws.com/0/3865/29739d8c-f4a6-30dc-db3c-55db390fc130.png "Chrome_Dev_Editor__developer_preview_-3.png")

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

![Chrome_Dev_Editor__developer_preview_.png](https://qiita-image-store.s3.amazonaws.com/0/3865/b24f98e8-00cb-ac29-b58a-e1585950fd4c.png "Chrome_Dev_Editor__developer_preview_.png")

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

![Chrome_Dev_Editor__developer_preview_.png](https://qiita-image-store.s3.amazonaws.com/0/3865/fea6d2d6-fb25-5800-191c-d0d9f1f69795.png "Chrome_Dev_Editor__developer_preview_.png")

何かできた

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

## Pub Get

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

![Chrome_Dev_Editor__developer_preview_-3.png](https://qiita-image-store.s3.amazonaws.com/0/3865/c29353eb-9044-8538-6b7c-d393bdd85f80.png "Chrome_Dev_Editor__developer_preview_-3.png")

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

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

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

## Launch app

![Chrome_Dev_Editor__developer_preview_-3.png](https://qiita-image-store.s3.amazonaws.com/0/3865/5a26dc35-b24c-269b-6b86-ad9ca5c70386.png "Chrome_Dev_Editor__developer_preview_-3.png")

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

![HelloWorld_2.png](https://qiita-image-store.s3.amazonaws.com/0/3865/30439b98-2570-7dd9-9a8a-6345ddf29c40.png "HelloWorld_2.png")

やったね！

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

![Chrome_Dev_Editor__developer_preview_-2.png](https://qiita-image-store.s3.amazonaws.com/0/3865/4ea8277a-15ea-2a6f-32ce-dff6f9875e53.png "Chrome_Dev_Editor__developer_preview_-2.png")

[Dartium](https://www.dartlang.org/tools/dartium/) じゃないとDartで動かないからせこせことDartをJSにコンパイルしてくれてるので、しばらく待とう。

## Play app

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

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

```dart: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](https://pub.dartlang.org/packages/route_hierarchical) パッケージを使ってて、これはAngularのRouterみたいですね。

```dart:main.dart
import 'package:route_hierarchical/client.dart';
```

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

## Add new page

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

```diff: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
```

```diff: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`` してくれる的なやつです。

```dart: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

![HelloWorld.png](https://qiita-image-store.s3.amazonaws.com/0/3865/1b28b7a8-7db1-b6a4-db63-61fad61faf56.png "HelloWorld.png")


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

# まとめ

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

## 感想

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

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

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

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