もっと
FlutterでBack4appを使用してデータ処理を行う方法：List.generateの利用

10min
はじめに
Flutterでは、動的リストを作成する最も簡単な方法は、List.generate.を使用することです。これは、Back4appのようなバックエンドサービスを通じて取得したデータを扱う際に特に役立ちます。動的UI要素、複数のデータエントリの処理、またはネットワークリクエストの最適化に関して、List.generate は少なくともコードを簡素化し、パフォーマンスを向上させるでしょう。

このチュートリアルでは、Flutterでバックエンドデータを効率的に処理する方法を見ていきます。この例では、Back4Appを使用してユーザーレビューを動的に取得し表示するシンプルなFlutterアプリケーションを作成する方法を示します。その過程で評価も行います。バックエンドデータの処理、ネットワークリクエストの最適化、そしてList.generate.を使用したバッチ操作について学びます。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウント。 Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境をセットアップします。まだセットアップしていない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、および非同期プログラミングの基本知識。
ステップ1 – Back4appバックエンドの設定
Back4appプロジェクトを作成: Back4appアカウントにログインし、新しいプロジェクトを作成します。
Parseクラスを作成: Back4appプロジェクト内で、「Review」という名前の新しいParseクラスを作成します。このクラスは、さまざまなアイテム（製品、映画など）のユーザーレビューを保存します。次のフィールドを追加します:
username（String）：レビューを提出したユーザーの名前。
rating（Number）：ユーザーが付けた評価で、通常は1から5の値です。
comment（String）：レビューのテキストまたはコメント。
サンプルデータを追加: Flutterアプリで使用するために、「Review」クラスにサンプルデータを入力します。
Back4appの認証情報を取得: プロジェクト設定に移動して、FlutterアプリをBack4appに接続するために必要なアプリケーションIDとクライアントキーを取得します。
ステップ2 – Flutterプロジェクトの設定
新しいFlutterプロジェクトを作成する: ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します:
依存関係を追加する: pubspec.yamlを開き、次の依存関係を追加します:
アプリでParseを初期化する: lib/main.dart, Parse SDKをインポートし、次の main 関数内で初期化します:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReviewScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReviewScreen(),
    );
  }
}
﻿
「'YOUR_BACK4APP_APP_ID'」と'YOUR_BACK4APP_CLIENT_KEY'」を実際のBack4appの資格情報に置き換えます。
ステップ3 – List.generateを使用してデータを取得し表示する
レビュー画面ウィジェットを作成する: lib/main.dart, Back4appからレビューを取得し、List.generate:を使用して表示する新しいウィジェットを追加します。
Dart
class ReviewScreen extends StatefulWidget {
  @override
  _ReviewScreenState createState() => _ReviewScreenState();
}

class _ReviewScreenState extends State<ReviewScreen> {
  List<ParseObject>? reviews;

  @override
  void initState() {
    super.initState();
    fetchReviews();
  }

  Future<void> fetchReviews() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        reviews = response.results as List<ParseObject>;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Reviews')),
      body: reviews == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: reviews!.length,
              itemBuilder: (context, index) {
                final review = reviews![index];
                return ReviewTile(
                  username: review.get<String>('username') ?? 'Anonymous',
                  rating: review.get<int>('rating') ?? 0,
                  comment: review.get<String>('comment') ?? '',
                );
              },
            ),
    );
  }
}



class ReviewTile extends StatelessWidget {
  final String username;
  final int rating;
  final String comment;

  ReviewTile({required this.username, required this.rating, required this.comment});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              username,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 5),
            Row(
              children: List.generate(5, (index) {
                return Icon(
                  index < rating ? Icons.star : Icons.star_border,
                  color: Colors.amber,
                );
              }),
            ),
            SizedBox(height: 10),
            Text(comment),
          ],
        ),
      ),
    );
  }
}
class ReviewScreen extends StatefulWidget {
  @override
  _ReviewScreenState createState() => _ReviewScreenState();
}

class _ReviewScreenState extends State<ReviewScreen> {
  List<ParseObject>? reviews;

  @override
  void initState() {
    super.initState();
    fetchReviews();
  }

  Future<void> fetchReviews() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        reviews = response.results as List<ParseObject>;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Reviews')),
      body: reviews == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: reviews!.length,
              itemBuilder: (context, index) {
                final review = reviews![index];
                return ReviewTile(
                  username: review.get<String>('username') ?? 'Anonymous',
                  rating: review.get<int>('rating') ?? 0,
                  comment: review.get<String>('comment') ?? '',
                );
              },
            ),
    );
  }
}



class ReviewTile extends StatelessWidget {
  final String username;
  final int rating;
  final String comment;

  ReviewTile({required this.username, required this.rating, required this.comment});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              username,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 5),
            Row(
              children: List.generate(5, (index) {
                return Icon(
                  index < rating ? Icons.star : Icons.star_border,
                  color: Colors.amber,
                );
              }),
            ),
            SizedBox(height: 10),
            Text(comment),
          ],
        ),
      ),
    );
  }
}
﻿
この例では、ReviewTileはユーザーのレビューを表示するカスタムウィジェットです。星の評価は、List.generateを使用して動的に生成され、バックエンドから取得したrating値に基づいて星アイコンの行が作成されます。
ステップ 4 – List.generate と Future.wait を使用したデータ取得の最適化
複数のバックエンドエンドポイントから同時にデータを取得する必要がある場合、List.generate と Future.wait を組み合わせてプロセスを最適化できます。
関連レコードの取得: 別のクラス Product があり、複数の製品に関連するレビューを一度に取得したいとします。これらのリクエストを同時に開始するために List.generate を使用できます:
Dart
Future<void> fetchMultipleProductsReviews(List<String> productIds) async {
  List<Future<List<ParseObject>>> requests = List.generate(productIds.length, (index) {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('productId', productIds[index]);
    return query.query().then((response) => response.results as List<ParseObject>);
  });

  List<List<ParseObject>> allReviews = await Future.wait(requests);

  setState(() {
    _allProductReviews = allReviews;
  });
}
Future<void> fetchMultipleProductsReviews(List<String> productIds) async {
  List<Future<List<ParseObject>>> requests = List.generate(productIds.length, (index) {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('productId', productIds[index]);
    return query.query().then((response) => response.results as List<ParseObject>);
  });

  List<List<ParseObject>> allReviews = await Future.wait(requests);

  setState(() {
    _allProductReviews = allReviews;
  });
}
﻿
このアプローチは、すべての製品のデータを同時に取得することで、全体の待機時間を短縮します。
ステップ 5 – List.generate を使用したバッチ操作の実行
バックエンドから取得した複数のレコードに対してバッチ更新や削除を行う必要がある場合、List.generate はプロセスを簡素化できます。
バッチ更新の例: 複数のレコードのステータスを一度に更新する方法は次のとおりです:
Dart
Future<void> updateMultipleReviews(List<String> reviewIds, String newStatus) async {
  List<Future<ParseObject>> updateRequests = List.generate(reviewIds.length, (index) {
    ParseObject review = ParseObject('Review')..objectId = reviewIds[index];
    review.set('status', newStatus);
    return review.save();
  });

  await Future.wait(updateRequests);
  print('All reviews updated');
}
Future<void> updateMultipleReviews(List<String> reviewIds, String newStatus) async {
  List<Future<ParseObject>> updateRequests = List.generate(reviewIds.length, (index) {
    ParseObject review = ParseObject('Review')..objectId = reviewIds[index];
    review.set('status', newStatus);
    return review.save();
  });

  await Future.wait(updateRequests);
  print('All reviews updated');
}
﻿
ここで List.generate を使用することで、大量のレコードに対して単一の操作で効率的に処理を行うことができます。
ステップ 6 – アプリのテストと実行
アプリを flutter run を使用して実行します。
ユーザーレビューのリストが表示されるはずで、各レビューには List.generate を使用して動的に生成された星評価が表示されます。バッチ操作とマルチフェッチの例を実装した場合は、それらのシナリオもテストして、すべてが正しく機能することを確認してください。
結論
このチュートリアルでは、Flutterで List.generate を使用して、Back4appのようなバックエンドから取得したデータを効率的に処理および表示する方法を学びました。 List.generate を使用することで、動的なUI要素を作成し、データ取得を最適化し、バッチ操作をクリーンでメンテナブルな方法で実行できます。このアプローチは、アプリのパフォーマンスを向上させるだけでなく、コードベースを整理し、管理しやすく保つことにもつながります。
FlutterでBack4appを使用する方法についての詳細は、次の Back4app Flutterドキュメント をご覧ください。コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
ReactJSとBack4Appを使用したブログプラットフォームSPAの構築
Firebase Vertex AIを使用してFlutterアプリに生成AIを統合する方法