よく聞くボイラープレートとは何か？

🏭ボイラープレートってなんですか？

Flutter（および多くのプログラミングの文脈）において、ボイラープレートは、必要な機能を実現するために繰り返し書く必要がある、手続き的または冗長なコードを指します。このようなコードは、新しいプロジェクトや機能を迅速に開始するための「テンプレート」として機能する場合がありますが、時として重たく感じられ、エラーの原因となる場合もあります。

Flutterでは、特に状態管理の方法によっては、多くのボイラープレートコードが必要になる場合があります。

以下は、setStateを使用したシンプルなカウンターアプリの例です。

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _incrementCounter() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(child: Text('Count: $_count')),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

上記のコードはFlutterの基本的な状態管理に従っていますが、大規模なアプリケーションになると、このようなアプローチはすぐに複雑になり、多くのボイラープレートコードが発生します。

ボイラープレートを減少させることは、コードの可読性とメンテナンス性を向上させるだけでなく、エラーを減少させるのにも役立ちます。しかし、どの状態管理方法を選択するかは、プロジェクトの要件やチームの経験によって異なります。

状態管理のパッケージを使用する
riverpodを使用すれば、ボイラープレートの削減を行うことができカプセル化することができます。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// A Counter example implemented with riverpod

void main() {
  runApp(
    // Adding ProviderScope enables Riverpod for the entire project
    const ProviderScope(child: MyApp()),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Home());
  }
}

/// Providers are declared globally and specify how to create a state
final counterProvider = StateProvider((ref) => 0);

class Home extends ConsumerWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter example')),
      body: Center(
        // Consumer is a widget that allows you reading providers.
        child: Consumer(
          builder: (context, ref, _) {
            final count = ref.watch(counterProvider);
            return Text('$count');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // The read method is a utility to read a provider without listening to it
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

最後に

ボイラープレートの削減方法って他に何があるんだろうと調べていたら、Widgetのコンポーネント化も削減する方法だそうです。
例えばボタンやAppBarは多くのページで使用するコードなので、同じコードを何度も書くと冗長だなと思うことがありました。この課題を解決するために、コンポーネント化を行なって、ボイラープレートの削減に努めます。