未来の自分へ知識貯金

ゆーきのエンジニアブログ

約3分 Flutterアプリ開発

C#erがMAUIではなくFlutterを選んだ理由

C#erがMAUIではなくFlutterを選んだ理由

漫画管理アプリ「ほんだな」を作るとき、フレームワーク選びで少し悩みました。 候補は .NET MAUIFlutter の2つです。

MAUIという選択肢

C#をメインに書いてきたので、MAUIは自然な選択肢でした。 以前に自力で書いたこともあって、「書ける」という感触は持っていました。 .NETのモダンな設計思想も、受け容れつつありました。

それでも今回はFlutterを選んでいます。

理由①:AI × 知らない言語を試したかった

今回の開発は Claude Code(AIアシスタント)と一緒に進める前提でした。

MAUIなら自分でも書ける。でも「AIと組み合わせたら知らない言語でどこまでできるか」は、まだ試したことがありませんでした。

Flutter / Dart は書いたことがありません。だからこそ試す価値があると思いました。 AIがコードを書いてくれるなら、言語の壁はずっと低くなるはず——そのくらいの気持ちで飛び込んでみました。

結果、いい感じでした。「何を作りたいか」を日本語で伝えると、Dartのコードが出てきて、動く。 言語を知らなくても、やりたいことは全部実現できました。

理由②:XMLのタグが「同じ情報を2回書かせる」のが気になった

もう一つ、技術的な理由もあります。

MAUIのUIはXAMLで書きます。こういう書き方です。

<Button Text="追加" Clicked="OnAddClicked">
</Button>

Button という名前を開きタグと閉じタグで2回書く必要があります。

「同じ情報は一度だけ書く」というのが自分の持論でして、 2箇所に同じことが書いてあると、片方を変えたときにもう片方も変えなければなりません。 変え忘れがバグになりますし、変更箇所が純粋に倍になります。

FlutterはDartのコードでUIを書くので、こういった冗長さがありません。

ElevatedButton(
  onPressed: _onAddPressed,
  child: const Text('追加'),
)

名前は1回だけ。すっきりしています。

実際に1画面作るとどうなるか

タイトルと著者名を表示するシンプルな一覧画面で比べてみます。

MAUI(XAML)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MangaApp.MangaListPage"
             Title="ほんだな">
    <StackLayout Padding="16">
        <CollectionView ItemsSource="{Binding MangaList}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="8">
                        <Label Text="{Binding Title}" FontSize="16" />
                        <Label Text="{Binding Author}" FontSize="12" TextColor="Gray" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button Text="追加" Command="{Binding AddCommand}" />
    </StackLayout>
</ContentPage>

ContentPageStackLayoutCollectionViewCollectionView.ItemTemplateDataTemplate—— タグを開くたびに、同じ名前が閉じタグとしてもう一度登場します。

Flutter(Dart)

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ほんだな')),
      body: ListView.builder(
        itemCount: mangaList.length,
        itemBuilder: (context, index) {
          final manga = mangaList[index];
          return ListTile(
            title: Text(manga.title),
            subtitle: Text(manga.author),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onAddPressed,
        child: const Icon(Icons.add),
      ),
    );
  }
}

ScaffoldListView.builderListTile——それぞれ1回しか登場しません。 同じ画面を作るのに、名前の重複がない分だけコードが見通しやすいです。


AIと組み合わせると、知らない言語への心理的なハードルはかなり下がります。 C#の経験があってモバイルに踏み出したいなら、Flutter × AI の組み合わせは試してみる価値があると思います。

この記事をシェアする

ゆーき
ゆーき

プログラマー経験10年以上。好きなプログラム言語はC#。使える言語はC++, Python他。好きな開発環境はVisual Studio。

プロフィールを見る →