Dart で Web アプリを構築する

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

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

実際のアプリを開発するには SDK が必要です。Dart SDK を直接ダウンロードする (以下で説明) か、完全な Dart SDK を含む Flutter SDK をダウンロード できます。

C:\> choco install dart-sdk

brew tap dart-lang/dart
brew install dart

terminal コマンドラインを使用したい場合は、webdev パッケージをインストールします

dart pub global activate webdev

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

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

dart create -t web quickstart

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

Web アプリテンプレートは、モダンな Web のために構築された、強力で簡潔な Dart の Web 相互運用ソリューションである package:web をインポートします。詳細については、Web 相互運用の概要 を確認してください。

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

cd quickstart
webdev serve

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

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

IDE を使用するかコマンドラインを使用するかに関わらず、webdev serve は開発用 JavaScript コンパイラを使用してアプリをビルドして提供します。開発用コンパイラが初めてアプリをビルドして提供する際に、起動に最も時間がかかります。それ以降は、アセットがディスクにキャッシュされ、増分ビルドがはるかに高速になります。

アプリがコンパイルされると、ブラウザに「Your Dart app is running.」と表示されるはずです。

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

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

   dart

   Iterable<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';
         }
       }
     }
   }

2. newLI() 関数 (以下に示す) を追加します。これは、指定された String を含む新しい LIElement を作成します。

   dart

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

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

   dart

   Iterable<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));
    }
   }

4. 変更を保存します。

5. webdev ツールはアプリを自動的に再ビルドします。アプリのブラウザウィンドウを更新します。これで、シンプルな Dart アプリにToDo リストが表示されました！次のようになっているはずです。
   

6. 必要に応じて、web/styles.css を編集してフォーマットを改善し、アプリをリロードして変更を確認してください。

   css

   #output {
     padding: 20px;
     text-align: left;
   }

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

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

これらのリソースを確認してください

• Dart 言語、ライブラリ、および規約
  • 言語ツアー
  • コアライブラリウォークスルー
  • Effective Dart
• Web 開発
  • JavaScript 相互運用
  • Web ライブラリとパッケージ
  • package:web の概要
  • DOM の紹介
• Dart チュートリアル

行き詰まった場合は、コミュニティとサポート でヘルプを見つけてください。