DartでWebコンテンツを作ってみる　その１

DartでWebコンテンツを作ってみたい
プロジェクトの作成とHello World
要素を追加してみる
CSSを使用してみる
まとめ

DartでWebコンテンツを作ってみたい

私はFlutterを使うためにDartを覚えたのですが、Dart単体でもJavaScriptにコンパイルすることでWeb上で動作させることができます。そこで、DartでWebコンテンツを作成する方法について見ていきたいと思います。

プロジェクトの作成とHello World

私の場合、DartはFlutterの環境を整えた時点で入っていたのでインストール方法は省略してプロジェクトの作成から始めます。

今回はdart_web_helloworldという名称のプロジェクトを作成します。下記のコマンドで作成できます。

$ dart create dart_web_helloworld

dart_web_helloworldというディレクトリにプロジェクト一式が生成されるので、dart_web_helloworld/bin/dart_web_helloworld.dartを開いて下記のように編集します。

import 'dart:html';

void main(List<String> arguments) {
  document.body?.appendText('Hello World!');
}

4行目のdocumentはdart:htmlにあらかじめ定義されているルートとなるノードです。そのbodyにHello World!というテキストを追加しています。bodyはnullを取り得るのでbody?としてアクセスしています。

これをJavaScriptにコンパイルするために下記のコマンドを実行します。

$ cd dart_web_helloworld
$ dart compile js -o dart_web_helloworld.js bin/dart_web_helloworld.dart

このコマンドにより、dart_web_helloworld.jsというJavaScriptのファイルが生成されます。このままでは実行出来ないので、このJavaScriptを実行するためのHTMLファイルを作成しましょう。dart_web_helloworld.jsと同じディレクトリに下記の内容でindex.htmlを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <script src="dart_web_helloworld.js"></script>
  </body>
</html>

このindex.htmlをブラウザで開いてみます。下の画像のようにHello World!と表示されていれば成功です。

要素を追加してみる

もう少し要素を追加してみます。Hello World!の後に数字を表示し、＋ボタンでカウントアップ、ーボタンでカウントダウンできるようにしてみます。bin/dart_web_helloworld.dartは下記のようになります。

import 'dart:html';

// 表示するテキストデータの更新
void updateText(Text text, int num) {
  text.data = 'Hello World! $num';
}

void main(List<String> arguments) {
  final body = document.body;
  if (body == null) {
    return;
  }

  // 表示する数値とテキスト
  var num = 0;
  var text = Text('');

  // 初期値でテキストデータの更新
  updateText(text, num);

  // テキストの配置と改行
  body.append(text);
  body.append(Element.br());

  // ＋ボタンとーボタンの配置
  body.append(ButtonElement()
    ..text = '+'
    ..onClick.listen((event) {
      updateText(text, ++num);
    }));
  body.append(ButtonElement()
    ..text = '-'
    ..onClick.listen((event) {
      updateText(text, --num);
    }));
}

最初のHello World!と表示するだけの例とは異なり、表示する文字列を変更できるようtextという変数でTextのインスタンスを保持するようにします。そして、updateText関数によりnumに応じてtextの保持する文字列を書き換えるようにしています。＋ボタンと−ボタンはnumを更新したうえでupdateText関数を呼ぶようになっています。

実動作するものをこちらに載せておきます。

CSSを使用してみる

さらにCSSを使用して少し装飾してみます。文字色やボタンの背景色を変更するため、コードを下記のように変更しました。

import 'dart:html';

// 表示するテキストデータの更新
void updateText(Text text, int num) {
  text.data = 'Hello World! $num';
}

void main(List<String> arguments) {
  final body = document.body;
  if (body == null) {
    return;
  }

  // 表示する数値とテキスト
  var num = 0;
  var text = Text('');
  final element = Element.a()..append(text)..style.color = 'red';

  // 初期値でテキストデータの更新
  updateText(text, num);

  // テキストの配置と改行
  body.append(element);
  body.append(Element.br());

  // ＋ボタンとーボタンの配置
  body.append(ButtonElement()
    ..text = '+'
    ..onClick.listen((event) {
      updateText(text, ++num);
    })
    ..style.backgroundColor = 'orange');
  body.append(ButtonElement()
    ..text = '-'
    ..onClick.listen((event) {
      updateText(text, --num);
    })
    ..style.backgroundColor = 'cyan');
}

さきほどのコードとの変更点は以下です。