Dartを簡単に試してみる Try Dartlang or Dart Editor or Chrome Dev Editor


# はじめに

「Dartって何？」
語弊を生じるかもしれませんが、Googleが開発しているJavascriptの代替言語です。

ただ、コンパイルしたらJavascriptになるとか、そんなちっぽけな話ではないです。
Dartはそのままフロントでもバックでも動く事を想定しています。

というか、きっとAndroid開発もdartでできるようにきっとなるはず...
なってほしい、切実に...

最近の話だと、
GoogleのApp Engineがサポートしたり、[詳しくはこちら](http://jp.techcrunch.com/2014/07/01/20140629googles-dart-programming-language-is-coming-to-the-server/)
ECMAscriptの標準規格になったり、[詳しくはこちら](http://jp.techcrunch.com/2014/07/09/20140708googles-dart-language-is-now-an-official-ecma-standard/)
今年に入ってから勢いをつけています。

もうそろそろ実際にDartの実用例が出てくる事かなっと思っています。

去年くらいはまだ実用化に不安があると開発者自身がいっていたので、
（どこかで見た覚えがある）
Dart1.3くらいからかなり安定してきているのではないでしょうか。
（現状1.5.3）

っでここからは、とりあえず初めて触るための紹介です。

# 簡単な三つの方法

・try.dartlang
・Chrome Dev Editor
・Dart Editor

取り組みやすい順に上から並べています。
まぁ、全部すぐにはじめることができるほど簡単ですが..


# try.dartlang

http://try.dartlang.org/
上記にアクセスしたらすぐにできます。

左にコードを書いてコンパイルすると右に出力されます。
お手軽です。

また三つのサンプルが用意されています。
Hello WorldとFibonacciとSunflowerです。

本当にさっくり言語仕様を試したいだけの場合におすすめです。

![スクリーンショット 2014-07-13 13.49.47.png](https://qiita-image-store.s3.amazonaws.com/0/10962/3ba803c6-7f86-c4ea-91de-4fce481dcfca.png "スクリーンショット 2014-07-13 13.49.47.png")


# Chrome Dev Editor

Google IO 2014で公開されたChrome Dev Editor(CDE)。
デスクトップとモバイル開発を対象とした新しいIDEで、JavascriptとDartをサポートしています。
[詳しくはこちら](http://www.infoq.com/jp/news/2014/07/google-chrome-dev-editor)

[Chrome Web Store](https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg)
からインストールできます。

インストールして起動すると下記画面になります。

![editor1.png](https://qiita-image-store.s3.amazonaws.com/0/10962/6168c65d-407c-e1a4-a63c-6c04e8898473.png "スクリーンショット 2014-07-13 12.46.33.png")

左上の...からNew Projectを選択します。

![スクリーンショット 2014-07-13 13.43.03.png](https://qiita-image-store.s3.amazonaws.com/0/10962/b43d3603-f8f7-3dc8-123b-ed59c8c6ac80.png "スクリーンショット 2014-07-13 13.43.03.png")

Dart Web Appを選択します。

![スクリーンショット 2014-07-13 13.43.18.png](https://qiita-image-store.s3.amazonaws.com/0/10962/dcd73654-fe26-3eed-90aa-4a09d47d7183.png "スクリーンショット 2014-07-13 13.43.18.png")

Dart Web Appのプロジェクトが作成されました。

![スクリーンショット 2014-07-13 13.43.33.png](https://qiita-image-store.s3.amazonaws.com/0/10962/f42bcbbe-20e8-130c-65b2-287b49f98bb2.png "スクリーンショット 2014-07-13 13.43.33.png")

また、左下の設定から文字の大きさや、KeyBindingsが選択できます。
KeyBindingsはDefaultとVim、Emacsから選べます。

Vimを試してみたのですが、まぁそこそこにVimなKeyになっています。
ただまだ物足りない。。ないよりは全然いいですが。

![スクリーンショット 2014-07-13 13.48.02.png](https://qiita-image-store.s3.amazonaws.com/0/10962/0fa97c83-562d-91bd-2c76-7b29a1a98351.png "スクリーンショット 2014-07-13 13.48.02.png")



# Dart Editor

最後にDart Editorです。

ここからダウンロードできます。



![スクリーンショット 2014-07-13 22.01.16.png](https://qiita-image-store.s3.amazonaws.com/0/10962/8a443d0c-35d8-8e8f-17b5-b50a0f139902.png "スクリーンショット 2014-07-13 22.01.16.png")

ƒileからNew Projectを選択します。

![スクリーンショット 2014-07-13 22.02.47.png](https://qiita-image-store.s3.amazonaws.com/0/10962/fafb072d-201b-1a3a-83e0-63381b813741.png "スクリーンショット 2014-07-13 22.02.47.png")

展開するディレクトリと名前、あとは種類を選ぶとProjectoが作成されます。

![スクリーンショット 2014-07-13 22.04.17.png](https://qiita-image-store.s3.amazonaws.com/0/10962/d6c0dcd6-1a66-7da6-f525-5f5d0024b275.png "スクリーンショット 2014-07-13 22.04.17.png")

作成されました。

![スクリーンショット 2014-07-13 22.04.43.png](https://qiita-image-store.s3.amazonaws.com/0/10962/a98ecfee-c163-f135-491e-73f0340ff5ce.png "スクリーンショット 2014-07-13 22.04.43.png")

また左上のDart Editorの環境設定からKey Bindingsが設定できます。
XMLのimport式です。

vimが見当たらなかったのですが、Emacsならありました。
EmasのKey Bindings.
https://github.com/hpoul/dart-editor-emacs-keybindings


![スクリーンショット 2014-07-13 22.05.03.png](https://qiita-image-store.s3.amazonaws.com/0/10962/34502403-92e6-ecd8-dd78-20e4b8cf6ac0.png "スクリーンショット 2014-07-13 22.05.03.png")

ほかにThemaも選択できます。

![スクリーンショット 2014-07-13 22.05.18.png](https://qiita-image-store.s3.amazonaws.com/0/10962/256747b8-e4e8-1f23-d0be-73a3facbae1c.png "スクリーンショット 2014-07-13 22.05.18.png")


# 外部アカウント

技術情報のみつぶやくアカウント作成しました。Dart以外にもAlt-JSの情報も追っていきます。
[Twitterはこちら]
(https://twitter.com/takeharumikami)
[Feedlyのフォローはこちら]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)