はじめに

イノベーショングループのtagupoyoです。

toCアプリではモバイル(iOS/Android)とWebといったそれぞれのプラットフォームでサービスを提供することが多くなっています。 しかし、UIの開発ではそれぞれのプラットフォームに合わせて実装するのはコストが３倍ほどかかります。 ※厳密にはもっとかかると考えていますが、わかりやすくするために3倍としています。

そこで、単一のコードで様々なプラットフォームに対応できるクロスプラットフォーム開発です。 特にGoogleから提供されている Flutter について紹介します。

そもそも Flutter is なに？

Flutterっていうのは、Googleが開発したオープンソースのUIツールキットです。 一言でいうと、「１つのコードで、いろんなアプリが作れちゃうすごいヤツ」なんです。 主な特徴はこんな感じです。

• クロスプラットフォーム対応: 同じコードでiOS、Androidのモバイルアプリはもちろん、Webアプリやデスクトップアプリまで作れちゃいます。
• Dart言語: 開発に使うプログラミング言語は、同じくGoogle製のDartという言語です。このDartっていうのが、書きやすくてパフォーマンスも良い、イイ感じの言語なんです。

Flutter で嬉しいこと

Flutterを使うと、開発者にとって嬉しいことがたくさんあります。

1. 開発効率が爆上がり

• ホットリロード機能
  • コードを変えたら、すぐに実行中のアプリに反映されるので、UIの見た目をちょっと直したり、バグを探したりするのがめちゃくちゃ速くなります。最近のフレームワークにはよくある機能ですけど、やっぱり便利ですね！
• １つのコードでOK
  • iOS用、Android用、Web用…みたいにコードを書き分ける必要がないので、開発もメンテナンスもグッと楽になります。たまに、そのプラットフォーム特有の機能（ネイティブ機能）を呼び出すこともありますが、シンプルなアプリなら全然必要ないことが多いです。

2. おしゃれで一貫性のあるUIが作れる
   • 豊富なWidget
   • Flutterでは、UIを「Widget（ウィジェット）」っていう部品を組み合わせて作っていきます。レゴブロックみたいで楽しいです！宣言的UIっていう書き方なので、迷わずサクサク実装できるのが良いところです。
   • 公式ドキュメントにも Flutter is declarative. と書かれています。

Flutterの基本的な使い方

Flutter開発を始めるのは、意外と簡単です。ざっくりこんなステップで進められます。

1. 環境構築: まずは公式サイトの手順通りに、Flutter SDKや開発環境（Android StudioとかVS Codeとか）をPCにインストールします。
2. プロジェクト作成: ターミナルで flutter create my_app とコマンドを打つと、my_app という名前のプロジェクトフォルダができます。
3. アプリを動かしてみる: cd my_app でプロジェクトフォルダに移動して、flutter run を実行！これだけで、スマホやシミュレータでサンプルアプリが起動します。

例えば、画面の真ん中に文字を出すだけなら、こんなに短いコードで書けちゃいます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Flutter App'),
        ),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

StatelessWidget と StatefulWidget

FlutterのUIはWidgetの組み合わせですが、このWidgetには大きく分けて2種類あります。 これが分かると、Flutterアプリの構造がグッと理解しやすくなります。

StatelessWidget

StatelessWidgetは、その名前の通り「状態（State）を持たない」Widgetのことです。 一度画面に表示されたら、それっきり見た目が変わらない、とってもシンプルなWidgetです。 例えば、ただのアイコンとか、固定のテキストを表示するときなんかに使います。

• 特徴: 状態を持たないので、動きが軽くてパフォーマンスが良いです。
• 用途: 静的なテキスト、アイコン、レイアウト用の枠など。

StatefulWidget

一方、StatefulWidgetは「状態（State）を持つ」ことができる、ちょっと賢いWidgetです。 ユーザーがボタンを押したり、新しいデータが届いたりしたときに、見た目をガラッと変えたいときに使います。

このStatefulWidgetは、Stateっていう相棒と一緒に働きます。Widget自体は見た目の骨組みで、実際のデータ（状態）は相棒のStateが持っています。そして、setState()っていう魔法の呪文を唱えると、画面が新しく描き直される仕組みです。

• 特徴: データを保持して、動的にUIを更新できます。
• 用途: チェックボックス、スライダー、カウンター、フォーム入力など、ユーザーの操作で見た目が変わるもの全般。

例えば、ボタンを押すと数字が増えていくカウンターみたいなものは、まさにStatefulWidgetの出番です。

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    // setState() を呼ぶと、Flutterが画面を再描画してくれる
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Count: $_count'),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

この2つのWidgetをうまく使い分けることが、イイ感じのFlutterアプリを作るコツになります。

まとめ

今回は、クロスプラットフォーム開発ができるFlutterの基本的なところから、その魅力、簡単な使い方までを駆け足でご紹介しました。

• １つのコードでいろんなプラットフォームのアプリが作れる効率の良さ。
• ホットリロードでサクサク進む開発サイクル。
• おしゃれなUIと、ネイティブアプリに負けないパフォーマンス。
• StatelessWidgetとStatefulWidgetを使い分けてUIを組み立てる考え方。

※イメージ画像です。

こんな感じで、Flutterはとってもパワフルなツールなんです。コミュニティも活発で、どんどん進化しています。 もし「アプリ開発をもっと楽にしたいな」とか「新しいことに挑戦してみたいな」と思っているなら、Flutterはすごく良い選択肢になるはずです！