Google製のWebプログラミング言語 Dart を試してみる

Google製のWebプログラミング言語 Dart を試してみる

Clock Icon2016.12.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Dart(ダート)とは?

Wikipediaによると、

Dart(ダート もしくはダーツ。当初は Dash と呼ばれていた)はグーグルによって開発されたウェブ向けのプログラミング言語である。2011年10月10日~12日に開催された デンマークのオーフスで開催された「GOTOカンファレンス」で公開された。 この言語は、ウェブブラウザー組み込みのスクリプト言語であるJavaScriptの代替となることを目的に作られた。

Dart|Wikipedia より引用 と、あります。当初はJavaScriptと置き換わるような構想だった様ですが、 Googleは、DartをJavaScriptの直接的なコンペティタと見なすことをやめ、位置づけをJavaScriptへコンパイルされる言語と変えて、TypeScriptやCoffeeScriptなどと同列に置いた。 GoogleのDartプログラミング言語に再びスポットライトが…その高い生産性にまず社内で人気が盛り上がる | TechCrunch より引用

と、あるように、javaScriptにコンパイルする言語になった様です。

Developers.IOでも以前、取り上げられていましたが、

個人的にノーチェックだったので簡単に見ていきたいと思います。

公式サイト

https://www.dartlang.org/

Dart Developer Summit 2016

Dart Developer Summit 2016 のプレイリスト

APIドキュメント

https://api.dartlang.org/stable/1.20.1/index.html

開発環境

DartPadというブラウザ上でDartを試せるサイトが公開されています。coreライブラリ(dart:ioとdart:ioに依存するライブラリを除く)のみが使えます。

DartPadhttps://dartpad.dartlang.org/

また、IDE(統合開発環境)では、IntelliJ IDEAWebStorm に対応しています。

Dart_Tools_IDE

多くの機能を利用するにはSDKが必要ですが今回はどんな感じか見たいだけなのでDartPadで試してみます。

DartPad

DartPadの簡単な説明になります。DartPadのサイトにアクセスします。すると、下記のような画面が表示されます。

DartPad

DARTHTMLCSSでそれぞれのコードを切り替えます。

DartPad 2

また右側の出力結果もHTML OUTPUTCONSOLEを切り替えることが出来ます。

DartPad3

また、コードがエラーの場合は右下にエラーが表示されます。(下の画像は末尾に;が無いエラー)

DartPad 4

コードの実行には画面中央の▶ Runボタンを押します。キーボードショートカットの⌘↩でも実行されます。

DartPad 5

サンプルコード

また右上のSamplesボタンから色々なサンプルを見ることが出来ます。
一例の紹介です。

helloworld

コンソール上にhello 0からhello 3を出すだけのシンプルなコード

DartPad 8

helloworld html

コンソール上にhello 0からhello 3を出し、HtmlにもHello worldと表示するシンプルなコード

DartPad 9

Fibonacci

みんなだいすきフィボナッチ数列

DartPad 10

Bootstrap demo

Bootstrapのデモサンプル

DartPad 11

Solar

太陽系のアニメーション?サンプル

Dart soler

Sunflower

ひまわりの種シミュレーション

DartPad 12

Dartを書いてみる

右上のNew Pad...をクリックして新しく立ち上げます。
自動でコードネームが付くみたいです。この時はblue-credit-6398という名前が付きました。これは毎回変わるみたいで、これの前はsilent-hill-7805という名前がついてました。(サイレントヒルっていうホラーゲームあったなぁとちょっと思ってしまった)

DartPad 13

HTMLに文字を出力する

HTML側

HTMLを選択して下記タグを入力します。

<p>吾輩は<span id="cat"></span>である</p>
<p>名前は<span id="catName"></span></p>

DartPad 14

リアルタイムで右側にHTMLの結果が表示されて便利です。

Dart側

次に、DARTを選択して下記コードを入力します。

import 'dart:html';

void main() {
  var cat = querySelector('#cat');
import 'dart:html';

void main() {
  var cat = querySelector('#cat');
  cat.text = "??";
  querySelector("#catName").text = "まだ無い";
}

DartPad 15

main() 関数が最初のエントリーポイントです。
htmlに出力するため、'dart:html'をインポートします。
querySelectorはCSS selector syntaxに一致する要素を取得します。

  var cat = querySelector('#cat');
  cat.text = "??";

  querySelector("#catName").text = "まだ無い";

はそれぞれのセレクタを取得して、それに対してテキストを表示しています。
(catの方は一度変数にいれてますが、catNameは直接操作しています)

[参考] querySelector | Dart SDK

実行する

これらのコードを実行すると以下の結果になります。
Dartのコードで定義した文字列が反映されました。

DartPad 16

Strong mode

次は個人的にdartで良いなと思ったStrong modeです。
詳細はStrong Mode | dart-lang/dev_compiler | Githubにありますが、簡単に書くと、Strong modeをONにすると型のチェックとかをコンパイラでしてくれます。

たとえば、

void main() {
  var list = ["hello", "world"];
  List<int> listOfInts = list;
  for (int i = 0; i < listOfInts.length; i++) {
    print(listOfInts[i]);
  }
}

のようなコードがった場合、

Strong modeがオフの場合

警告は出ません

DartPad Strong mode Off

Strong modeがオンの場合

List<String>型の値をList<int>型の変数に割り当てることはできません」という警告が表示されます

DartPad Strong mode On

さいごに

今回、ほんのちょっとさわってみただけですが、癖も無く使いやすそうな印象を受けました。
DartPadが手軽に扱えるので、興味のある方は、まずはサンプルを編集してみたりとかすると良いかもしれません。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.