Dartでウェブアプリを構築する

1. Dartのインストール
2. CLIツールまたはIDE（あるいはその両方）を入手する
3. ウェブアプリを作成する
4. アプリを実行する
5. アプリにカスタムコードを追加する
6. Dart DevToolsを使用してアプリを検査する
7. ウェブアプリをビルドしてデプロイする
次のステップ

このページでは、DartでWeb専用アプリの開発を開始する手順について説明します。 マルチプラットフォームアプリを作成する場合は、Flutterを試してください。

始める前に、Dart入門を読んで、Dartの基本を理解していることを確認してください。次に、以下の手順に従って、Dartで小さなウェブアプリを作成します。

実際のアプリを開発するには、SDKが必要です。 Dart SDKを直接ダウンロードするか（下記参照）、完全なDart SDKを含むFlutter SDKをダウンロードすることができます。

Windows
Linux
Mac

Chocolateyを使用して、Dart SDKの安定版リリースをインストールします。

Dart SDKをインストールするには

C:\> choco install dart-sdk

APTを使用して、LinuxにDart SDKをインストールできます。

以下の1回限りのセットアップを実行します

$ sudo apt-get update
$ sudo apt-get install apt-transport-https
$ wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/dart.gpg
$ echo 'deb [signed-by=/usr/share/keyrings/dart.gpg arch=amd64] https://storage.googleapis.com/download.dartlang.org/linux/debian stable main' | sudo tee /etc/apt/sources.list.d/dart_stable.list

Dart SDKをインストールします

$ sudo apt-get update
$ sudo apt-get install dart

Homebrewを使用すると、Dartのインストールは簡単です。

$ brew tap dart-lang/dart
$ brew install dart

terminal コマンドラインを使用する場合は、webdevパッケージをインストールしてください

$ dart pub global activate webdev

web IDEの使用はオプションですが、強くお勧めします。利用可能なIDEのリストについては、エディタとデバッガの概要を参照してください。

terminal コマンドラインからウェブアプリを作成するには、webテンプレートを使用してdart createコマンドを使用します

$ dart create -t web quickstart

web Dart統合を備えたIDEから同じウェブアプリを作成するには、Bare-bones Web Appという名前のテンプレートを使用してプロジェクトを作成します。

ウェブアプリテンプレートは、最新のWeb向けに構築されたDartの強力で簡潔なWeb相互運用ソリューションであるpackage:webをインポートします。詳細については、Web相互運用の概要をご覧ください。

terminal コマンドラインからアプリを実行するには、webdevを使用してアプリをビルドして提供します

$ cd quickstart
$ webdev serve

web または、IDEからアプリを実行します。

アプリを表示するには、Chromeブラウザを使用してアプリのURL（例：localhost:8080）にアクセスします。

IDEを使用する場合でもコマンドラインを使用する場合でも、webdev serveは開発用JavaScriptコンパイラを使用してアプリをビルドして提供します。開発用コンパイラがアプリを初めてビルドして提供するときは、起動が最も遅くなります。その後、アセットはディスクにキャッシュされ、増分ビルドははるかに高速になります。

アプリのコンパイルが完了すると、ブラウザに「Dartアプリが実行されています」と表示されます。

Launched bare-bones app

作成したアプリをカスタマイズしてみましょう。

次のスニペットからthingsTodo()関数をweb/main.dartファイルにコピーします

dartIterable<String> thingsTodo() sync* {
  const actions = ['Walk', 'Wash', 'Feed'];
  const pets = ['cats', 'dogs'];

  for (final action in actions) {
    for (final pet in pets) {
      if (pet != 'cats' || action == 'Feed') {
        yield '$action the $pet';
      }
    }
  }
}

（以下に示すように）newLI()関数を追加します。指定されたStringを含む新しいLIElementを作成します。

dartIterable<String> thingsTodo() sync* { /* ... */ }

HTMLLIElement newLI(String itemText) =>
  (document.createElement('li') as HTMLLIElement)..text = itemText;
 
void main() { /* ... */ }

main()関数で、appendChildとthingsTodo()の値を使用して、output要素にコンテンツを追加します

dartIterable<String> thingsTodo() sync* { /* ... */ }

HTMLLIElement newLI(String itemText) =>
  (document.createElement('li') as HTMLLIElement)..text = itemText;

void main() {
 final output = querySelector('#output');
 for (final item in thingsTodo()) {
   output?.appendChild(newLI(item));
 }
}

変更を保存します。
webdevツールはアプリを自動的に再構築します。アプリのブラウザウィンドウを更新します。これで、シンプルなDartアプリにTODOリストができました。次のようになります
必要に応じて、web/styles.cssを編集してフォーマットを改善し、アプリをリロードして変更を確認します。
css
```
#output {
  padding: 20px;
  text-align: left;
}
```

Dart DevToolsを使用して、ブレークポイントの設定、値と型の表示、アプリのDartコードのステップ実行を行います。セットアップの詳細とチュートリアルについては、Dart Webアプリのデバッグを参照してください。

開発環境外でウェブアプリを実行するには、ビルドしてデプロイする必要があります。 Dartウェブアプリのデプロイの詳細については、Webデプロイをご覧ください。

これらのリソースをご覧ください

問題が発生した場合は、コミュニティとサポートで Hilfe を見つけてください。

特に明記されていない限り、このサイトのドキュメントはDart 3.5.3を反映しています。ページの最終更新日：2024-06-10。ソースを表示または問題を報告する。

Dartでウェブアプリを構築する

1. Dartのインストール

2. CLIツールまたはIDE（あるいはその両方）を入手する

3. ウェブアプリを作成する

4. アプリを実行する

5. アプリにカスタムコードを追加する

6. Dart DevToolsを使用してアプリを検査する

7. ウェブアプリをビルドしてデプロイする

次のステップ