＊＊＊　Dart 2 の解説：開発環境の構築とその活用　＊＊＊

ここではDart 2ベースのアプリケーション開発を目指す読者の皆さんを対象に、必要な基本的な以下のツールを解説する：

• DartPad （組込みライブラリが使える簡易なオンラインのツールとその使い方）

• IDE （Dartが推奨する統合開発環境であるJetBrain社のIntelliJ IDEAとWebStormのインストールと使い方）

• Pub （大規模なDart言語を使ったパッケージの共有システムとPubコマンド群の使用法）

加えてこの編ではPubライブラリの幾つかのサンプルとその使い方を示す。

大規模ウェブ・アプリ用のAnglarDartとモバイル・アプリ用のFlutterはここでは触れていない。

注意：読者はGoogleのアカウントとgmailアドレスを持っている（Android端末の所有者は通常そうなっている）ことが好ましい。これはDart開発のディスカッションに参加したり、自分の作ったライブラリをPubにパブリッシュしたりする際に必要である。またDartPadやGithubで自分のコードを共有できるようにするときなどでもgmailを介すとなにかと有用である。

注意：Dartでは内部ではUnicodeを、ファイルにはUTF-8が使われている。従ってテキスト・エディタ等の自分のツールはUnicodeでの表示（コピーと貼り付け）とUTF-8でのファイル読み書きができるようにしておいたほうが好ましい。

DartPad

この章は以下のドキュメントがベースとなっている：

• DartPad解説書

• 共有ガイド

• 組込みガイド

DartPad (https://dartpad.dartlang.org)はオープン・ソースのツールで、自分のブラウザ上でDart言語を試すことができる。このツールの画面は下図のようになっている：

左側がコード入力領域であり、.dartで書かれたコード、ウェブ・アプリ用のHTMLとCSSのファイルを入力・表示できる。右側は表示領域であり、そのコードの実行出力のコンソール出力、ブラウザ表示、及びこのコードに対するエラー等が表示される。

ライブラリ対応

DartPadはウェブ・アプリで使われるdart:*ライブラリ、例えばdart:html、dart:asyncに対応しているが、dart:ioやPubにあるパッケージには対応していない。dart:ioを使いたいときは、Dart SDKやIDEを使用することにある。

DartPadを試す

DartPadに馴染むためにいくつかのサンプルを試し、次に簡単なコマンド行アプリを作ってみることにする。

DartPadを開き幾つかのサンプルを試す

1. dartPadを開く

   サンプルは左側に、出力は右側に表示される。すでにDartPadを使っていた場合は、New Padをクリックして元のサンプルに戻ることができる。

2. Runをクリックする

   サンプルは再度走り、出力を更新する。

3. 右上のSamplesのリストを使ってSunflowerのようなHTMLサンプルを選択する

   ここでも出力が右側に表示される。デフォルトではHTMLの出力（HTML OUTPUT:ユーザがブラウザで見るもの）が表示される。

4. このサンプルのコンソール出力を見るのにCONSOLEをクリックする

5. 左側のHTMLタブをクリックすればこのサンプルのHTMLマークアップを見ることができる

   同様にCSSタブをクリックすればこのサンプルのCSSシートを見ることができる。

コマンド行アプリを作る

シンプルなコマンド行アプリを作るにはNew Padを使う

1. New Padボタンをクリックして現行のpadへの変更を廃棄したいということを確認する（Discardをクリック）

   DARTタブの下部にHello Worldアプリのソース・コードが表示される。

2. DartPadの右下にあるShow web contentチェック・ボックスのチェックを外す

   HTMLとCSSのタブが消える

3. コードを変更する。例えばmain()関数のボディを以下のコードで置き換える：

   for (var char in 'hello'.split('')) { print(char); }

   タイプ入力するたびにDartPadはヒント、ドキュメンテーション、及び自動完了のヒントの助言をしてくれる。

4. Formatボタンをクリックする。DartPadはしかるべきインデンション、ホワイトスペース、及び改行処理となるようにDartフォーマッタを使っている

5. Runボタンをクリックしてそのアプリを走らせる

6. このコードのタイプ中にバグがなかったときは、わざとバグを作ってみる

   例えばspritをspitと変えてみると画面右下にそのエラーの内容が表示され、またRunボタンにはエラーがあることが表示される。このアプリを実行されると、コンパイル時エラー(uncaught exception)だとの出力が表示される。

Dartバージョン情報をチェックする

DartPadがサポートする言語機能とAPIはこのDartPadがベースとしている Dart SDKのバージョンに依存する。SDKバージョンはDartPadの右下に表示されている。

DartPadで作ったコードを共有する

DartPadはGitHubのgistを使って自分が作ったコードの公開と共有を可能としている。DartPadは各gistのなかの3つのファイルを探す：

• main.dart

• index.html (optional)

• styles.css (optional)

自分が作ったコードを他の人と共有するには：

1. main.dart, index.html (if needed)及びstyles.css (if needed)を含んだgistを作る

2. DartPadをそのgist ID（ハッシュコード）に行くようにする。例えばhttps://gist.github.com/49bde0c1ed780decc902f3d4d06d8f0c

   をDartPadで見るには、次のURLを指定する： https://dartpad.dartlang.org/49bde0c1ed780decc902f3d4d06d8f0cを使う

ウェブ・ページにDartPadをはめ込む

自分が作成するHTMLドキュメント内にDartPadの画面をはめ込むと読者に対するアピールが更に強くなろう。

DartPadをHTMLドキュメントにはめ込むにはIFRAMEタグを使用する：

<iframe src="https://dartpad.dartlang.org/embed-inline.html?id=72d83fe97bfc8e735607&verticalRatio=80></iframe>

?以降がクエリ文字列である（[組込みのみ]のクエリ以外は通常のウェブ・アクセスによるDartPad起動にも使える）：

• id (gist ID)：指定したgistを取り込むためのID

• line (line number)：どの行に飛ぶかの指定

• verticalRatio (0 to 100)：[組込みのみ]

• horizontalRatio(0 to 100)：[組込みのみ]

• run (run = true：自動run [組込みのみ]

• strong (strong = false)：strongモードを指定する、デフォルトではtrue

表示モードは次のように指定する：

1. https://dartpad.dartlang.org/embed-inline.html　:　dartとコンソール

2. https://dartpad.dartlang.org/embed-dart.html　:　dart、コンソール、及びドキュメンテーション表示

3. https://dartpad.dartlang.org/embed-html.html　:　dart、コンソール、及びHTML出力

IFRAMEの縦横を指定したいときには次のようになる：

<iframe style="width:400px;height:400px;" src="https://dartpad.dartlang.org/embed-inline.html&id=72d83fe97bfc8e735607&verticalRatio=80"></iframe>

クエリを追加するときはそれを&でつなげば良い。

以下は筆者がgistにアップロードした簡単なデモをDartPadで見たり走らせたりするサンプルである：

このサンプルはコード領域の右上の赤の実行ボタンで試すことができる。表示される枠内をクリックするとそこを中心とした円で埋めてゆく。