開発環境について

今回は、実際に Dart の開発を行うための環境構築について書きます。


プログラミング言語で開発を行う場合、SDK （ソフトウェアを開発するためのツールキット）、統合開発環境（eclipse など）をそれぞれインストールして開発を行うのが普通です。
Dart に関しては、SDK同梱の統合開発環境 DartEditor が用意されています。


DartEditor インストールから、サンプルプログラム実行までをまとめましたので、参考にしてください。
※筆者の PC が Windows のため、Windows の場合の環境構築になります。


[DartEditor インストール]
Dart のホームページ（https://www.dartlang.org/）を開くと、「Download Dart」というボタンが用意されていますので、それをクリックします。
（お使いの PC に合わせて、32-BIT か 64-BIT を選択してください。）

「Download Dart」ボタンをクリックすると、ダウンロードが開始されます。
完了したら、ダウンロードフォルダに 「darteditor-windows-iaXX.zip」というファイル名の zip ファイルがあるはずです。
※ファイル名の XX 部分は、32-BIT の場合は32に、64-BIT の場合は64になります。

ダウンロードした zip ファイルを、任意のフォルダに解凍します。
解凍後のフォルダ内に、「dart」という名前のフォルダがあるので、それを開きます。
フォルダ内に「DartEditor.exe」というファイルがあればインストールは完了です。
（インストールというよりはダウンロードですね。。。）

[サンプルプログラムの実行]
先ほどダウンロードした「DartEditor.exe」を実行すると、下の image のようなウィンドウが立ち上がります。
これが Dart 言語開発用の統合開発環境 DartEditor です。

サンプルプログラムを実行するためには、新規のアプリケーション作成が必要です。
新規アプリケーションの作成は、DartEditor 上部の「File」タブをクリックし、「New Application」をクリックします。

「New Application」という別ウィンドウが立ち上がりますので、「Application Name:」テキストボックスに任意のアプリケーション名を入力します。
（今回は「HelloDart」としていいます。）
入力が完了したら、「Finish」ボタンをクリックします。

新規アプリケーションの作成が完了すると、DartEditor 左部のファイルエクスプローラに先ほど作成した HelloDart アプリケーションが表示されます。

新規アプリケーションを作成した時点で、サンプルプログラムは用意されていますので、これを実行します。
実行方法は、ファイルエクスプローラに表示されている「hellodart.html」を選択して右クリック、「Run in Dartium」をクリックします。

すると Google Chrome に似た Web ブラウザが立ち上がります。
これが Dart VM 搭載 Web ブラウザの「Chromium」です。

ブラウザ上に HelloDart と表示されていれば、実行完了です。
HelloXXX というのはプログラミング言語のサンプルプログラムでよくありますが、Dart の場合、その下に「Click me!」と表示されています。
それをクリックすると...

「Click me!」という文字列が反転しました！


サンプルプログラムの実行はここまでです。



実際の開発では web フォルダ内の「hellodart.css」、「hellodart.dart」、「hellodart.html」の3ファイルを編集することで行います。