開発編

IDE

この章ではDart 2でのアプリケーション開発のための統合開発環境(IDE : Integrated Development Environment)としてのJetBrain社のIntelliJ IDEAのCommunity版の

インストール
設定
使用法

を解説する。

注意：本資料ではWindowsのユーザを対象としている。LinuxやMacOSのユーザはこれを参考にして自分のプラットホームに合わせたコマンドを使用する。

IntelliJ IDEAのCommunity版は無料でダウンロードできるので、初めてDart 2を試してみたいユーザにもハードルが低い。Community版でDart 2言語にある程度馴染んだあとで、同社のWebStormまたはIntelliJ IDEA Ultimate（有料版）を購入されることをお勧めする。

Dart開発環境の経過

2015年4月28日に開催されたDart Summitのなかで1.11版から推奨開発環境（IDE）としてDart EditorからDart Plugin for IntelliJ/WebStormに切り替え、Dart Editorは廃止すると発表された。その後公式なサイトでも発表されている。これはかなり衝撃的な動きで、Dart VM実装Chromeの開発停止の発表とともに大きな議論を起こした。Dart EditorはDart言語開発の初期からこのコミュニティのなかで馴染み親しまれてきたものである。結局他のIDEに馴染んだ多くのDartのデベロッパたちがDart Editorから脱却していることを踏まえたためだとのことだった。WebStormが推奨IDEであり、Eclipseのプラグインは現在サポートされていない。

本資料で使用しているIntelliJ IDEAのCommunity版ではJavaScript、HTML、CSS、及びYAMLファイルのサポートは限定的である：

	WebStorm及びIntelliJ IDEAのUltimate版	IntelliJ IDEAのCommunity版
Dartプラグイン	○	○
サーバ・サイドのアプリのデバッグ	○	○
Pubspec.yaml と Pub の統合 ( Pub Get )	○	○
YAML サポート（YAMLファイルの編集）	○	▽
ブラウザ・プラグインを介したJavascriptのデバッグ	○	×
ブラウザ・プラグインを介したDartコードのデバッグ	○	×

より詳細な機能の相違はJetBrain社の比較のページに示されている。

Dart SDKのインストール

Dart 2ではSDKはバージョン2.1.0以降のものをインストールしなければならないので最新の安定版(stable release)をダウンロードする。

インストールの手順はDartのインストールのページでWindows、Linux及びMacOSのユーザごとに示されているのでそれに従う。

Community Installerを使ったインストール

Windowsのユーザの場合はDart SDK installer for Windows が手っ取り早い。

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

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

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

この場合は次のようなフォルダとファイルがC:\dartにダウンロードされる：
versionのファイルをブラウザまたはWordpad等のエディタで開いてそのバージョンを確認する。

注意：dart-sdk（binとlibのフォルダが含まれる）のパス：c:\dart\dart-sdkは重要である。

dart2_code_samplesのダウンロード

IntelliJ CEをダウンロードしてDartのコード開発用に設定する為に必要なコード・サンプルをあらかじめダウンロードしておいたほうが好ましい。

コード・サンプル集はdart2_code_samplesという名前でGithubのリポジトリとして公開してあるので、これをダウンロードする。

dart2_code_samplesを開くとClone or downloadという緑色のボタンがあるので、これを開きDownload ZIPをクリックしてダウンロードする。
ダウンロードしたdart2_code_samples-master.zipというZIPファイルを展開し、そのフォルダをdart2_code_samplesという名前に変更する。
これを例えばc:\に移動させる。
c:\dart2_code_samples\ideという名前のフォルダに我々がこの章で使うサンプルが収容されている。

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

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

ダウンロードの前に確認

自分のPCにJRE X86が実装されていることを確認する。そうされていないときはインストールの設定ウィザードの中で同時にこれをインストールするよう指定できる。

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

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

IntelliJ CEのダウンロード

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

既にインストール済みで新バージョンに更新する場合は旧バージョンの削除のウィザードが表示されるので、それに従う
Install Locationはデフォルトのままでよい
Installation OptionsのCreate Associationsはなにもチェックを入れない
自分のPCにJRE X86がインストールされていないときはDownload X86 JRE...にチェックを入れる
Start Menu FolderはJetBrainsのままにしてInstallボタンをクリックするとインストールを開始する（これには少し時間がかかる）

IntelliJ CEの設定

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

IntelliJ IDEA CEを最初に起動すると更新の場合は以前使っていたIntelliJ IDEAの設定をインポートするかどうかを聞いてくるので旧バージョンのものを引き継ぐ箇所にチェック、そうでない場合は設定をインポートしないという指定でOKボタンをクリック
次のウィザードでUI themeはどちらか好きなものを選択してSkip Remainings...をクリック

そうすると次のようなウィザードが表示される：

この画面では何も設定処理はしないで、まず適当なDartコードが入ったフォルダを開いてから、その中でいろんな設定を行う。

File→Openで次のような選択画面が出るのでc:\dart2_code_samplesという名前のフォルダを選択する：

そうすると次のようにDartコードのlist_test.dartファイルを開くとDartのプラグインが必要なのでインストールするかを聞いてくるのでInstall pluginsを選択する：

インストールすべきプラグインが示されるので、OKをクリックしこのプラグインをインストールする：

注意：プラグインをインストールしたらこのIDEの再起動が必要である。

再起動後は次のような表示となり、Dartプラグインの設定が求められる：

ここでOpen Dart settingsを選択して、dart SDKのパスを指定してやる：

pathはC:\dart\dart-sdk
Project 'dart2_code_samples'をチェックする

その後OKボタンをクリックする。

注意：この操作はFile→Settings→Language and Frameworks→Dartでも可能である。

より詳細な設定

File→Settings→Editor→Fontで自分の好みのフォントが選べる
File→Settings→Editor→General→AppearanceでShow Line Numberのチェックを外すと行番号表示をしないようにできるが、通常は画面に影響しないならデフォルトの行番号表示をオンとする
File→Settings→Editor→File Encodingsでグローバルとプロジェクトでのファイル・エンコーディングが指定できる。ここではプロジェクトのエンコーディングをデフォルトのWindows-31jではなくてUTF-8にしておくことを勧める

その他各自試してみることをお勧めする。

簡単なコードで試してみる

ここでは簡単なプログラムを試しながらこのIDEに馴染んでもらうことを意図している。ここで示すプログラムはdart2_code_samples￥ideのフォルダに入っている。

まず最初に dart2_code_samplesをこのIDEで開くと次のように展開される：

赤のアンダーラインでutilizing_packagesのフォルダ内で問題があると警告している。またコード領域では'Pub get' has not been runと警告している。これは3つのフォルダ内で外部のパッケージを使っているのも関わらずまだそのパッケージの取り込みが行われていないことを示している。これは次の章「Pubパッケージを活用する」で解説するので、ここではそのままで構わない。

コマンド行のコードを試す

次のコードを試してみよう。このコードは既にIDEのコードビュー上にC:\dart2_code_samples\ide\list_test\list_test.dartとして存在している筈である：

list_test.dart

import 'dart:math';
main() {
  List myList = ['pi is ', pi, ', and cos pi is ', cos(pi)];
  String s = '';
  for (int i = 0; i < myList.length; i++) {
    s = "$s${myList[i].toString()}";
  }
  print(s);
}
/*
pi is 3.141592653589793, and cos pi is -1
*/

これを実行させるにはこのコードのタブ（或いは左側のプロジェクト表示領域のこのコード）を右クリックすると次のような操作メニューが出るので

Run 'list_test.dart'を実行させる。そうすると左下のコンソール画面にその結果が出力される。

またIntelliJでアプリを実行させるときには最初にWindowsから以下のような表示がされることがある：

この場合はプライベート網での通信を許可にして「アクセスを許可する」をクリックする。

注意：これは後でブラウザの設定で「ローカル・アドレスにはプロキシを使用しない」ようにしても良い。その方法はネットで検索されたい。

ウェブ・アプリを試す

次のアプリを試してみよう。このアプリはブラウザ上にHello Wrldを表示させるものであり、IDE上ではC:\dart2_code_samples\ide\hello_worldのフォルダ内に収容されている：

hello_world.dart

import 'dart:html';
class HelloWorld {
  HelloWorld() {}
  void run() {
    write('*** Hello World! from Dart 2 ***');
  }
  void write(String message) {
    // the HTML library defines a global 'document' variable
    document.querySelector('#status').innerHtml = message;
  }
}
void main() {
  HelloWorld().run();
}

hello_world.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <link rel="stylesheet" type="text/css" href="hello_world.css">
    <script defer src="hello_world.dart.js"></script>
</head>
<body>
<h1>HelloWorld</h1>
<h2 id="status">dart is not running</h2>
</body>
</html>

hello_world.css

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}
h1, p {
  color: #333;
}
h2, p {
  color: Tomato;
}
#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}
#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
  -webkit-user-select: none;
  user-select: none;
}

pubspec.yaml

name: hello_world
description: A sample web application
environment:
  sdk: '>=2.0.0 <3.0.0'
dev_dependencies:
  build_runner: ^1.0.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0

このままではブラウザ上では走らない。何故なら.dartコードはブラウザでは走らない。従ってこれをJavaScriptコードに変換し、それをブラウザに送ってやる必要がある。

その作業をまとめてくれるのがBuildである。このコマンドはDart SDKに含まれているコマンド行ツールのwebdev buildを起動させている。このコマンドはこのウェブ・アプリの配備可能なバージョン(deployable version)を構築するものである。

注意：IDEでBuildを実行するにはBuildしたいYAMLファイルをコード・ビュー上に開いておく必要がある。またBuildには時間がかかるので、コンソール上で進捗状況を確認する。

pubspec.yamlこのファイルはこのアプリが動作し、またDartコードをJavaScriptに変換して配布可能なパッケージとするに必要な情報が記述されている。このファイルをコード・ビュー上で開くと下図のようにこのコードに対するアクションが表示されるので、最初にGet dependenciesをクリックする：

これには少し時間がかかる。そうするとプロジェクト・ビュー上では幾つかのファイルとフォルダが追加される。

次にBuild...をクリックする：

そうすると下図のように：

と出力フォルダの名前を変更できる。このままBuildボタンをクリックすると以下のように配備可能なコードがBuildフォルダに収容される。Build実行は少し時間がかかる：

このフォルダの中には新しくトランスコンパイルされたhello_world.dart.jsも収容されている。このなかのhello_world.htmlをコード・ビュー上に開き、そこにカーソルを移動させると次のようにどのブラウザでこれを開くかを聞いてくる。（これはhello_world.htmlのコード上で右クリックして、Open in Browserで選択しても良い）

以下はChromeで開いた例である：

ウェブ・アプリの構成法と構築法に関しては次章「Pub」以降でも記述されている。

サーバ・アプリを試す

今度は簡単なサーバ・アプリを試してみる。このサーバはhttp://localhost:8080/time でアクセスすると現在の時刻を表示するもので、当初は2012年にDartのチームが作成したものである。その後のAPIの変更を組み入れてDart 2で使えるようにしてある。このアプリはIDE上ではC:\dart2_code_samples\ide\time_server\time_server.dartとして存在している筈である。

time_server.dart

// Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
// December 2013, Modified.
// March 2019 API changes incorporated.
// Access this server as 'http://localhost:8080/time'.
import "dart:io";
import "dart:convert";
const HOST = "localhost";
const PORT = 8080;
final REQUEST_PATH = "/time";
const LOG_REQUESTS = true;
void main() {
  HttpServer.bind(HOST, PORT).then((HttpServer server) {
    server.listen((HttpRequest request) {
      if (LOG_REQUESTS) {
        print("Request: ${request.method} ${request.uri} "
            "from ${request.connectionInfo.remoteAddress}");
      }
      if (request.uri.path == REQUEST_PATH) {
        service(request);
      } else
        request.response.close();
    });
    print(
        "${new DateTime.now()} : Serving $REQUEST_PATH on http://${HOST}:${PORT}.\n");
  });
}
// create and send response for the request here.
// if you are using Future or Stream objects inside of the try block,
// you have to catch and handle their error in the callback.
void service(HttpRequest request) {
  try {
//  throw new Exception('exception raised');  // uncomment this line to test exception handling
    String htmlResponse = createHtmlResponse();
    sendResponse(request, htmlResponse);
  } catch (e, st) {
    // catch any error and exception
    sendErrorResponse(request, e, st);
  }
}
void sendResponse(HttpRequest request, String htmlResponse) {
  String htmlResponse = createHtmlResponse();
  List<int> encodedHtmlResponse = utf8.encode(htmlResponse);
  request.response.headers
    ..set(HttpHeaders.contentTypeHeader, "text/html; charset=UTF-8")
    ..contentLength = encodedHtmlResponse.length;
  request.response
    ..add(encodedHtmlResponse)
    ..close();
}
void sendErrorResponse(HttpRequest request, e, st) {
  request.response
    ..statusCode = HttpStatus.internalServerError
    ..headers.set('Content-Type', 'text/html; charset=UTF-8')
    ..write('<pre>internal server error:\n$e\n$st</pre>')
    ..close();
}
String createHtmlResponse() {
  return '''
<html>
  <style>
    body { background-color: teal; }
    p { background-color: white; border-radius: 8px; border:solid 1px #555; 
        text-align: center; padding: 0.5em;
        font-family: "Lucida Grande", Tahoma; font-size: 18px; color: #555; }
  </style>
  <body>
    <br/><br/>
    <p>Current time: ${new DateTime.now()}</p>
  </body>
</html>
''';
}

このサーバを実行させると、IDE上のコンソールには次のように表示される：

C:\dart\dart-sdk\bin\dart.exe --enable-asserts --enable-vm-service:56098 C:\dart2_guide\development\ide\code_samples\time_server\time_server.dart

Observatory listening on http://127.0.0.1:56098/

2019-03-10 11:17:38.616336 : Serving /time on http://localhost:8080.

この状態で自分のブラウザからhttp://localhost:8080/time でアクセスすると下図のように現在の時刻を表示する：

コンソール上には次のような記録が残される：

Request: GET /time from InternetAddress('::4100:8059:b600:0%2033629512', IPv6)

Request: GET /favicon.ico from InternetAddress('::%66', IPv6)

まとめ

かなり詳細にDartチームが推奨するIDEのIntelliJ IDEAのインストールと使い方を解説した。読者はこれを参考にしてこのツールに馴染んで頂きたい。

次章からは自分のアプリのライブラリの構築法、Pubへのパブリッシング等を解説してゆく。