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"ボタンを押すと、次のような画面が表示されるはずです！