Next.jsエンジニアがFlutterを触ってみた

背景

みんな大好きフロントエンジニアロードマップの2023年版が公開されたようです。Flutterにチェックマークがついていたので、さっそく触ってみました。自分がどう理解を進めたのかの記事です。

（補足）もはや説明不要かもしれませんが、誤解を恐れずに言えば、Flutterとは、iOS/Android/WebAppを一つのコードで作成できるフレームワークとビルドツールのセットだと思われます。Next.js的な立ち位置だと考えています。また、言語はDartというものですが、個人的には、JavaScriptやKotlinに近く馴染みやすさを感じました。

準備

まずは公式の通りに「Install」から「Test drive」まで進めました。

ここの状態だとコードの理解が難しくなってしまうので、以下のようにコードを切り分けました。

• lib/
  • components/
    • component.dart: ページで使うためのコンポーネント
  • pages/
    • home.dart: Next.jsでいう「ページ」
  • main.dart: Next.jsでいう_app.tsxに該当するファイル

中身はこんな感じにしました。

// main.dart
// Next.jsだと、_app.tsxに該当するファイル
import 'package:flutter/material.dart';
import 'package:my_flutter_app/pages/home.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // これで、URLによってコンポーネントを切り替えられる
      routes: {
        '/': (context) => const HomePage()
      },
    );
  }
}

import 'package:flutter/material.dart';
import 'package:my_flutter_app/components/component.dart';

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

  @override
  Widget build(BuildContext context) {
    // アプリのひな型を作るためのScaffold
    return Scaffold(
        appBar: AppBar(
          title: const Text("Home"),
        ),
        body: const Center(child: Component()));
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Text("Hello World");
  }
}

だいぶNext.jsぽくなりました。

起動

flutter run

からchromeを選んで実行してみました。

まとめと感想

FlutterやDartと聞くと手が出しづらいように思いましたが、Statlessであれば大して怖くなかったです。

もしかしたらFlutterのお作法としてよくないのかもしれませんが、Next.jsと同じようにしてやればNext.jsと同じような考え方で理解できそうな気がしました。

今後の展望

今回はStatelessWidgetしか使っていないので、値が変化したり、fetchしたり、いわゆるステートフルな動的なアプリケーションには対応できていません。これに対応するためにはStatefulWidgetを使えばよいのですが、Next.jsエンジニアに馴染のあるReact Hooksのように書けるflutter_hooksを使ってみようと思います。