Flutter Webが安定版をリリースし、今日では「Dartを使用してWebアプリを作成する」と聞くと、多くの人がFlutterを思い浮かべるでしょう。しかし、Flutterを使わずにDartでWebアプリを作ることは可能であり、始めるのも非常に簡単です。

準備

もしまだDart SDKをインストールしていない場合は、こちらからダウンロードできます。お使いのオペレーティングシステムに合わせた手順に従ってインストールし、終わったら戻ってきてください。

次に、ターミナルでグローバルに利用できるwebdevとstagehandツールが必要です。以下の2つのコマンドを実行してください。

pub global activate webdev
pub global activate stagehand

stagehandパッケージは、Dartプロジェクトを簡単に始めることができ、webdevは開発中のWebアプリの提供や本番環境用のビルドなどを簡単に行うことができます。

プロジェクトの生成

Stagehandには、コンソールアプリ、パッケージ、Webサーバー、Webアプリを作成するための様々なジェネレーターが用意されています。シンプルなWebアプリの開始点が必要なので、プロジェクト用の新しいフォルダを作成し、そのフォルダからstagehand web-simpleを実行します。

mkdir my_new_project
cd my_new_project
stagehand web-simple

完了したら、必要な依存関係を取得するためにpub getを実行してください。以下のような構造のプロジェクトが作成されます。

プロジェクトの提供とビルド

開発用にプロジェクトをローカルで提供するのは、前述のwebdevツールで非常に簡単です。

単にwebdev serveを実行するだけで、http://127.0.0.1:8080でページを表示できます。

本番環境用のビルドの準備ができたら、webdev buildを実行します。結果として生成された静的サイトコードはbuildフォルダに保存されます。このフォルダは、静的Webサイトを提供できる場所（Github PagesやS3など）にアップロードできます。

Sassでスタイリッシュに

小規模なシンプルなWebサイトを構築するこのアプローチの私のお気に入りの点の1つは、scssの使用がほとんど手間がかからないことです。

まず、sass_builderパッケージをプロジェクトに追加します。リンク先のページで最新バージョンを確認し、pubspec.yamlファイルのdev_dependenciesに以下のように追加してください。

dev_dependencies:
  build_runner: ^1.10.0
  build_web_compilers: ^2.11.0
  pedantic: ^1.9.0
  sass_builder: ^2.1.3

これにより、任意のscssまたはsassファイルは、対応する名前のcssファイルにビルドされます。例えば、webフォルダにstyle.scssというファイルがある場合、ビルド後にbuildフォルダにstyle.cssファイルが生成されます。

HTMLファイル内では、スタイルファイルをcss名で参照するようにしてください。例えば、web/style.scssというファイルがある場合、web/index.htmlでは以下のように含めます。

<link rel="stylesheet" href="style.css">

これは、ソースのscssファイルではなく、ビルドされた結果のファイルを参照しているためです。

では、スタイリングできる（そして後でHTTPリクエストのデモンストレーションに使用できる）HTMLを準備しましょう。

<div id="app">
  <main>
    <img id="good-boy" />
    <button id="get-good-boy">Good Boy!</button>
  </main>
</div>

そしてstyles.scssファイルにいくつかのSCSSを追加します。

#app {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  main {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    img, button {
      width: 100%;
    }
  }
}

Dioでフェッチリクエストを処理

Dartでこのように単純なWebアプリを作成する際のもう1つの素晴らしい点は、豊富なDartライブラリにアクセスできることです。

例えば、Flutterでの作業でDioの使用に慣れている場合、ここでもフェッチリクエストの処理にDioを使用できます。

まず、pubspec.yamlファイルにDioを依存関係として追加します。

dependencies:
 dio: ^3.0.10

main.dartファイルの先頭に、これらの依存関係を含めます。

import 'dart:html';
import 'dart:convert';
import 'package:dio/dio.dart';

dart:htmlはquerySelectorメソッドと様々な要素の型を提供し、dart:convertはJSONレスポンスをマップに変換するために使用され、dioは当然Dioを提供します。

では、main関数内で必要な要素を取得し、ボタンにイベントリスナーを追加しましょう。

void main() async {
  ImageElement dogImage = querySelector('#good-boy');
  ButtonElement dogButton = querySelector('#get-good-boy');

  dogButton.addEventListener('click', (Event event) async {
    dogImage.src = await getGoodBoy();
  });
}

上記はすべて非常に分かりやすいですね。ここから、最も良い男の子（フリーな犬の写真API）の写真を取得するgetGoodBoyボタンを実際に作成する必要があります。

Future<String> getGoodBoy() async {
  final uri = 'https://dog.ceo/api/breed/akita/images/random';
  final response = await Dio().get(uri);

  Map<String, dynamic> body = jsonDecode(response.toString());

  return body['message'];
}

これで完了です！すべてが正常に動作すれば、"Get Good Boy"ボタンを押すと、次のような画面が表示されるはずです！