この春、”Dart”をはじめよう。

ここの記事を書いてって依頼されたタイミングで、
ちょうどDartの記事を読みました。
運命だと思います。

何が素敵か、まだ何一つわかっていませんが、この春からDartをはじめて見ようと思いました。

Dartって何?

Dartは、googleが作ったプログラミング言語です。ブラウザ組み込みのjavascriptの代替となるのを目的に作られております。wikipedia

さあ、はじめよう!!

↓ ここに「GET STARTED」があるので、こちらで始められます!
https://www.dartlang.org/codelabs/darrrt/

この記事では、この「GET STARTED」をちょっとやってみたことを書きます!!
バージョンは 1.3.1 です!!

セットアップッ!!

まずは、このリンクのすぐ下にある「DOWNLOAD DART + EDITOR(MAC)」
というボタン(Macで開いた場合)をクリックして、Dart と Editor をダウンロードしましょう!
https://www.dartlang.org/codelabs/darrrt/#set-up

ダウンロードしてから、解凍すると「dart」ディレクトリができますね。
この中に、SDK とか Editor とかが入ってます。

次に Editor を起動してみましょう。

dart ディレクトリの中にある 「DartEditor.app 」をダブルクリック!!

DartLogo
宇宙空間に突如あらわれた、これこそがDartのスプラッシュスクリーンです!シンプルでかっこいい!!

次に、Dartを感じるためのサンプルコードをインポートしましょう!

↓このリンクを開いたらすぐ下にある「Download」リンクをクリックすると、
サンプルコードをダウンロードできます。
https://www.dartlang.org/codelabs/darrrt/#i-classfa-fa-anchor-i-get-the-sample-code

次に、Dart Editor から 「File > Open Existing Folder…」を選択し、ダウンロードしたファイル解凍したもの(one-hour-codelab)を 選択してインポートしてください。
インポートしたらこうなりますね。
ss1

少し動かす!!

サンプルコードをインポートしたので、動かしてみましょう。
サンプルコードの中から、「web / 1-blankbadge / piratebadge.html」を見つけて、右クリックした後、メニューの「Run in Dartium」を選択してください。
するとどうでしょう!?ブラウザが立ち上がって、なんか表示されましたね!!!Success!!

スクリーンショット 2014-04-14 17.01.43

少しいじる!!

次に、少しいじってやります。テキストボックスを付けて、入力があったら入力した内容を表示する処理をつけます。

1. piratebadge.html にこう!!

・・・
<div class="widgets">
    <div>
        <input type="text" id="inputName" maxlength="15">
    </div>
</div>
・・・

2. piratebadge.dart のはじめにこう!!

import 'dart:html';

3. piratebadge.dart の main() のとこにこう!!

void main(){ querySelector('#inputName').onInput.listen(updateBadge);}

4. piratebadge.dart の main の下にもこう!!!

void updateBadge(Event e) {
    querySelector('#badgeName').text = (e.target as InputElement).value;
}

そしたら、動かしてみましょう!!テキストボックスに入力した想いが即座に右側の変な奴に反映されますね!!SUCCESS!!
スクリーンショット 2014-04-14 16.15.41

これで、Dartを利用し始めるための一番はじめのハードルを超えられたのではないでしょうか。僕もまだ気づいてない「Dart」のすばらしさを知ることができたら、僕達に連絡ください。

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

主に、WEBサイトやスマホアプリの構築に従事。新たな技術を積極に取り入れ、プロジェクトに貢献。テック系の情報などにも精通しており、世界で通用するスーパーハッカーを目指している。2009年、株式会社ヘッドウォータース新卒入社。 twitter: @yujiroarai qiita: @yujiroarai