本資料はDartのウェブ開発の公式ページのなかのDart開発ツールとクイックスタートのページを中心に作成してあります。不明な個所は原文を参照願います。
この章で使われているサンプル・プログラムのコードはGitHubからダウンロードできます。
本資料を読む前に「プログラミング言語Dartの基礎」等でDart言語の基礎知識を理解しておくことをお勧めします。
本資料ではOSには64ビットWindowsを、IDEにはIntelliJ IDEAのCommunity版（無料）を使用しています。

*********

本ガイドを読んでAngularDartの基礎を理解するには、AngularDartの開発環境をつかって添付されているサンプルを試しまた調べるのが最も効率的且つ効果的です。本章ではGoogleのDartのグループが推奨しているJetBrain社のIDEのインストールとその使い方を説明します。

Angularアプリケーションに必要な開発ツール

以下のものはAngularDartアプリには必須です：

IDE

Angularアプリケーションを開発するにはIDEが必要です。DartグループはJetBrain社のIDEを推奨しています。

IntelliJ IDEAは良く利用される製品ですが、同社のWebStormなどもDartのユーザが多いようです。

IntelliJ IDEAには有料のUltimate版とお試し版のCommunity版があります。双方の機能の相違は比較のページを見てください。Community版は機能が限定されており、ウェブ・アプリのデバッグを直接にはサポートしていません（間接的にはDartium内臓のChrome開発ツールを使ってデバッグできます）。またJavaScript、HTML、CSS、及びYAMLファイルのサポートは限定的です。従って、この資料では無料のCommunity版を使用していますが、ある程度Dart及びAngularDartに慣れてきたらUltimate版に切り替えられることをお勧めします。

Dartium

DartiumはDartで書かれたウェブ・アプリ開発のために特別に用意されたDartのVMを実装したChromeのビルドで、Dart言語のアプリケーションをそのまま実行できるブラウザです。

後述のように、このブラウザはDartのSDKと一緒にDartのサイトからダウンロードできます。

Dart SDK

Dart VM、APIライブラリ(libフォルダ)、および dart, dart2js, dartanalyzer, pub, およびdartdocgenを含むコマンド行ツールたち（binフォルダ）で構成されています。DartのSDKにはAPI以外にも多くのコマンド行のツールが含まれていますが、特にウェブ・アプリの場合には以下のツールが有用です。
- dart2js

DartからJavaScriptへのコンパイラ

pub build

ウェブ・アプリ構築のためのPubコマンド

pub serve

ウェブ・アプリを提供するサーバとなるPubコマンド

Dart SDKとDartiumをインストールする

最初にDart SDKとDartiumをインストールします。SDKとDartiumはDartのウェブ・アプリの開発者には必須のツールです。インストールの手順はDartのインストールのページを見てください。Windowsのユーザの場合はDart SDK installer for Windows が手っ取り早いでしょう。

Dart SDK installer for Windowsのページの安定版のダウンロードのボタン（”GET DART(64-BIT Windows, STABLE)”を押します。
インストーラがダウンロードされるので、それを実行します。そうするとウィザードが表示されるので、それに従ってインストールしてください。

• インストール・ディレクトリはC:\dartとする

• satrt menuフォルダは生成しないことにチェックを入れる

この場合は次のようなフォルダとファイルがC:\dartにダウンロードされます：

即ち：

dart-sdk（binとlibのフォルダが含まれる）のパス：c:\dart\dart-sdk
Dartium（実行ファイル）のパス：c:\dart\chromium\chrome.exe

となります。この２つのパスは重要です。

IntelliJ CE( IntelliJ Community edition)のダウンロード

IntelliJ CE( IntelliJ Community edition)は前述のとおり無料で利用できるIDEです。Community版である程度馴染んだらUltimate版にアップグレードすることをお勧めします。

ダウンロードの前に確認

Javaの実行環境(JRE)が必要な場合があります。JREはブラウザ等によって既にインストールされている場合が多いですが、ない場合は以下のようにインストールしてください。

java.comのダウンロードのページから使用するブラウザのビットに対応した最新のJavaのJREをダウンロードします

また既にDart-SDKとDartiumがインストールされていることも確認してください。

IDEは一般にPCのメモリ消費が大きいので、他のアプリも同時に走らせている場合は8GBまたはそれ以上のRAMが実装されていることが推奨されます。タスク・マネージャでメモリ使用量を確認してください。

ダウンロード

最初にJetBrains社のダウンロードのページを開きます：
Community版のダウンロード・ボタンをクリックして実行ファイルをダウンロードします。
これはideaIC-20xx.xx.xx.exeといった実行ファイルであり、これを実行します。インストールに先立ち、他の実行中のアプリは終了させてください。
設定ウィザードに従って初期設定をします：

Install Locationはデフォルトのままでよい
Installation OptionsのCreate Associationsはなにもチェックを入れない
Start Menu FolderはJetBrainsのままにしてInstallボタンをクリックするとインストールを開始します

IntelliJ CEの設定

インストールが終了したらIntelliJ IDEA CEの設定をします。

IntelliJ IDEA CEを最初に起動すると以前使っていたIntelliJ IDEAの設定をインポートするかどうかを聞いてくるので、デフォルトのインポートしないという指定でOKボタンをクリック
UI themeはどちらか好きなものを選択してSkip All and Set Defaultsをクリック
そうすると下図のようなWelcome画面が表示される
このWelcome画面の右下にあるConfigure（設定）をクリックするとプルダウン・メニューが表示されるので、Pluginsを選択する。なおこの設定はWelcome画面からでなく、あとでFile → Settings → Pluginsで実行できる
Dartのプラグインを選択してセットする：

左下のInstall JetBrains pluginをクリックし（あるいはサーチ機能を使って）、Dartを探す
Install pluginをクリックしてプラグインをダウンロードしてインストールする
もし読者のコンピュータが企業内のプロキシの配下にあるときは、HTTP Proxy Settingsボタンをクリックして、所定のプロキシ設定を行う
Dartプラグインのインストールが終了したら、Restart IntelliJ IDEAをクリックして、IntelliJ を再起動する必要がある

IntelliJ CEの幾つかのオプショナルな設定事項

以下にあらかじめ設定することが好ましい幾つかの事項を紹介します。

Dartプラグインの管理

File → Settings → Pluginsで開いたウインドウでDartプラグインのアップデートがあるかを調べ、必要ならそれをダウンロードします。その場合はRestart IntelliJ IDEAをクリックして、IntelliJ を再起動する必要があります。

ファイル・エンコーディング

DartではUTF-8が標準的に使用されており、その他のエンコーディングを使用することは推奨されません。このことはShift-JIS (Windows-31J)が良く使用されている日本では不便な場合があるが、ウェブ・アプリケーションの世界ではむしろ好ましいものです。

File → Settings → File EncodingsでEditor > File EncodingsでIDE及びプロジェクトのエンコーディングを該プロジェクトに対し設定する
その下のProperties Files（各国言語対応に関する情報を保持している）もUTF-8にする

コンソール出力のUTF-8化

Windowsの場合はこれをしないと日本語文字のコンソール出力が文字化けを起こすことがあります。

C:\Program Files (x86)\JetBrains\IntelliJ IDEA Community Edition 14.1.3\binにあるidea64.exe.vmoptionsおよびidea.exe.vmoptionsに対し、以下のオプションの行を追加する：

-Dfile.encoding=UTF-8

これらのファイルの変更は管理者(administrator)権限で行うこと

ファイルの変更が終了したら、 IntelliJ IDEAを再起動する

行番号の表示

File → Settings → Editor → General → Appearanceで下図のようにShow line numbersをチェックする：

フォントの変更

File → Settings → Editor → Colors and Fonts → Fontでまず自分のスキームをSave as..で（例えばdartlangあるいはAngularDartという名前で）セットする：
次に好みのモノスペースのフォントを選択する

開発環境を試してみる

これでAngularDartの開発環境ができました。最初にAngularDartではなくてDartのアプリを使って開発環境を試してみましょう。AngularDartのサンプルは次のクイック・スタートで走らせてみましょう。

GitHubからサンプル・プログラムをダウンロードする

dart_code_samplesを例として、そのダウンロード手順を示します：

下図のようにGithubの画面を開き、
1. まずClone or downloadのボタンをクリックし、選択ウィンドウを開く
2. 次にその窓のDownload ZIPのボタンをクリックするとZIP圧縮されたファイル（dart_code_samples-master.zip）がダウンロードされる
このファイルを適当な解凍ツールを使って解凍すると下図のように展開される：

この例ではフォルダ名を dart_code_samples-masterから dart_code_samplesに変更し、それをc:\に配置してある

IntelliJ CEでダウンロードしたプログラムを開く

これまで説明してきた手順でIntelliJ CEのダウンロードとDart開発のための設定がすでに実施されていることを確認する
上部選択バーのFile → New → Project から、Create New Project（新規プロジェクト）を選択する
ここでDart SDK pathとDartium pathを指定する。即ち：
1. dart-sdk（binとlibのフォルダが含まれる）のパス：c:\dart\dart-sdk
2. Dartium（実行ファイル）のパス：c:\dart\chromium\chrome.exe
またStart Dartium in checked modeにチェックを入れ、Dartiumはチェック・モードで実行させる
Nextボタンをクリックして新しく生成するプロジェクト名を記入する。ここではdart_code_samplesという名前を付ける。そうすると新しいプロジェクトが開く
このプロジェクトで開く必要なフォルダを開く

IntelliJ CEの画面の上部選択バーからOpenを選択する：
上画面で必要なフォルダを選択してOKボタンをクリックすると下図のように展開される：

6. このプロジェクトに対しDart言語対応の設定を行う

上図の画面でFile→Settings...で設定画面を開き、下図のようにDart設定を行う：

外部パッケージの取り込み

Dartで書かれたアプリケーションの殆どにpubspec.yamlというYAMLファイルが存在します。これはそのアプリケーションで使用する外部リソースを記述したファイルです。IntelliJなどのIDEに対しては、それらの外部リソースを取り込むことを指示する必要があります。IntelliJではそのようなファイルを選択すると必要なPubアクションを提示してくれます。

例えばdart_code_samples/apps、およびdart_code_samples/codesにもpubspec.yamlが存在しています。上図はdart_code_samplesのフォルダの中にあるcodesという名前のフォルダの中のpubspec.yamlを選択しコード・ビュー上で表示させた例です。Pub actions:で表示されているアクションの"Get dependencies"をクリックすると必要なパッケージが取り込まれます（プロジェクト・ビュー上でこのファイルを右クリックしてもよい）。取り込みが成功すれば次のようなメッセージがコンソールに表示されるはずです：

Working dir: C:\dart_code_samples\codes

C:\dart\dart-sdk\bin\pub.bat get

Resolving dependencies...

Got dependencies!

Process finished with exit code 0

そうすることで.packagesというフォルダ、pubspec.lockおよびその他のファイルも生成されます。

CanvasTestを試してみる

dart_code_samplesにはいわゆる「コマンド行プログラム」と呼ばれるDartのVMだけで走るプログラムを集めたcodesというフォルダと、ブラウザやサーバ上で走るプログラムを集めたappsというフォルダがあります。AngularDartのアプリもその類です。ここではappsフォルダの中にあるCanvasTestというアプリを試してみましょう。CanvasTestはHTML5のCanvasを使った簡単なサンプルです。

このアプリのフォルダにもpubspec.yamlファイルが存在しているので、最初に外部ライブラリを取り組む必要があります。またwebディレクトリ内にはこのアプリの本体であるCanvasTest.dartとCanvasTest.htmlの2つのファイルがあります。これらをダブル・クリックするとコード・ビューの表示域に表示されます。pubspec.yamlファイルをコード・ビューで選択すると、Pubに対するアクションが表示されます。Get dependenciesを実行させると、下のメッセージ・ビューにはpub.batのgetコマンドの実行結果が表示されます。またweb、.packages、及びpubspec.lockといったファイルも追加されます。.packagesはこのアプリが必要な外部ライブラリが収容されています。

それではこのアプリを走らせてみましょう。CambasTest.htmlファイル右クリックするとこのコードに対する処理の一覧が下図のように表示されます。

Open in Browser→Dartiumを選択すれば、下図のようにDartiumでこれらのコードが実行されます。キャンバス内の任意の場所をクリックするとその点を中心にした円が描かれます。

IntelliJは用意したサーバ経由でDartiumにこのアプリを送信します。Dartiumではなくて通常のブラウザ（Chrome、IEなど）を選択した場合は、IntelliJはDartコードのファイルを自動的に最初にDart2JSでJSコードにクロスコンパイルして送信します。その為マシンによってはブラウザに画面が表示されるまで最初は多少時間がかかります。

AngularDartの開発環境をつくる