もっと
FlutterでIsolatesを使ってBack4appと連携し、重いデータ処理を行う方法

12min
はじめに
Flutterはクロスプラットフォームアプリケーションを構築するための強力なフレームワークですが、多くのモバイルフレームワークと同様に、デフォルトではすべてのコードを単一のスレッドで実行します。このスレッドはUIスレッドとして知られ、アプリのUIをレンダリングする責任があります。データ処理やファイル処理のような重いタスクがUIスレッドで発生すると、アプリが遅延したり「ジャンク」したりし、ユーザーエクスペリエンスが悪化する可能性があります。
これに対処するために、DartはIsolatesという機能を提供します。Isolatesを使用すると、高価な計算を別のスレッドで実行できるため、UIを応答性のある状態に保つことができます。このチュートリアルでは、FlutterアプリケーションでIsolatesを使用して、Back4appバックエンドから取得した大きなJSONファイルのデシリアライズなどの重いデータ処理タスクを処理する方法を探ります。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4appアカウント。 Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境をセットアップしてください。まだセットアップしていない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、および非同期プログラミングの基本的な知識。
ステップ1 – Back4appバックエンドの設定
Back4appプロジェクトを作成する: Back4appアカウントにログインし、新しいプロジェクトを作成します。
Parseクラスを作成する: このチュートリアルでは、Recordという名前のParseクラスを作成し、大量のデータを保存します:
title (String): レコードのタイトル。
description (String): レコードの説明。
metadata (JSON): レコードに関連付けられた大きなメタデータコンテンツ。
サンプルデータでクラスを埋める: Recordクラスに大きなJSONオブジェクトを含むいくつかのレコードを追加します。これは、実際のアプリでジャンクを引き起こす可能性のあるデータ処理のシミュレーションになります。
Back4appの資格情報を取得する: プロジェクト設定に移動して、FlutterアプリをBack4appに接続するために必要なアプリケーションIDとクライアントキーを取得します。
ステップ 2 – Flutter プロジェクトの設定
新しい Flutter プロジェクトを作成: ターミナルまたはコマンドプロンプトを開き、次を実行します:
Bash
flutter create isolate_example
flutter create isolate_example
﻿
依存関係を追加: pubspec.yaml を開き、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
次のコマンドを実行します flutter pub get これらの依存関係をインストールします。
アプリで 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: RecordScreen(),
    );
  }
}
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: RecordScreen(),
    );
  }
}
﻿
「'YOUR_BACK4APP_APP_ID'」と「'YOUR_BACK4APP_CLIENT_KEY'」を実際のBack4appの資格情報に置き換えてください。
ステップ3 – Back4appからデータを取得する
RecordScreenウィジェットを作成する: 「lib/main.dart」で、Back4appからデータを取得する新しい画面を作成します:
Dart
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
このコードは、Back4appの「Record」クラスからすべてのレコードを取得し、リストに表示します。
ステップ4 – 重いデータ処理をアイソレートにオフロードする
大きなJSONをデシリアライズするためにアイソレートを使用する: 各レコードの「metadata」フィールドにデシリアライズする必要がある大きなJSONオブジェクトが含まれていると仮定します。UIスレッドをブロックしないように、アイソレートを使用してこのタスクを実行します。
Dart
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
﻿
アプリにアイソレート処理を統合する: RecordScreen ウィジェットを更新して、各レコードのメタデータをアイソレートを使用して処理します:
Dart
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

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

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

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

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

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

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
この実装は、Back4appからレコードを取得し、重いJSONデシリアライズタスクをアイソレートにオフロードし、処理が完了したらUIを更新します。
ステップ5 – アプリのテストと実行
アプリを実行する using flutter run. Back4appから取得したレコードのリストが表示されるはずです。各レコードのメタデータは別のアイソレートで処理され、UIがスムーズで応答性を保つことが保証されます。
パフォーマンスを確認する メタデータフィールドに大きなJSONファイルを使用してテストすることで。アイソレートの使用がジャンクを防ぎ、UIを応答性のあるものに保つ様子を観察してください。
結論
このチュートリアルでは、Flutterでアイソレートを使用して、大きなJSONファイルのデシリアライズなどの重いデータ処理タスクを処理する方法を学びました。これらのタスクをアイソレートにオフロードすることで、UIスレッドをレンダリング処理に自由に保ち、よりスムーズで応答性のあるアプリを実現します。Back4appをバックエンドとして統合することで、データを効率的に管理および取得でき、Dartのアイソレートモデルにより、複雑な操作を処理しているときでもアプリのパフォーマンスが維持されます。
FlutterをBack4appと一緒に使用するための詳細情報については、次を確認してください。Back4appのドキュメント と Flutterのドキュメント. コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
リアルタイムJavaScriptアプリケーションの開発
Back4appを使用したFlutter DevTools拡張機能の構築と使用