宣言型UIか、命令型UIか

UIプログラミングには宣言型UI、命令型UIの２種類あります。

宣言型は従来のUIプログラミング、命令型はFlutterやReactに代表される新しいUIプログラミングです。

公式ドキュメントに下記のUIの状態遷移を例に、二者の違いを解説してあったので、訳してみました。

命令型UIプログラミング：Win32、Web、Android、iOS

通常、Win32、Web、Android、iOSのフレームワークは命令型で、プログラマにとっても馴染みのあるスタイル。UIViewを手動で作って、UIが変更された時にメソッドとセッターを使って変更します。

例えば、Swiftだとこんな感じ。

class ViewController: UIViewController {
@IBOutlet weak var label:UILabel!
@IBOutlet weak var buttom:UIButton!

//画面が表示されるときに実行される
override func viewDidLoad() {
        super.viewDidLoad()
        ...
}
...
//ボタンが押された時に実行される
@IBAction func tapButton(_ sender: Any) {
    //インスタンスbを取得し、複製
    ...
    //複製したインスタンスbを変更
    b.setColor(red)
    b.clearChildren()
    ViewC c3 = new ViewC(...)
    b.add(c3)
}

宣言型UIプログラミング：Flutter

対して、Flutterに代表される宣言型UIプログラミングでは、様々なUI状態間の遷移方法をプログラミングする必要がありません。現在のUI状態を記述しておけば、状態遷移はフレームワークにお任せすることができます。

class _MyHomePageState extends State {
  //ボタンが押された（状態が変わったら）らsetStateの中身が実行される
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
...
//StatefulWidgetは状態が変わるたびにリビルドしてsetStateを呼び出す
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
...
      ),
      body: Center(
...
      return ViewB(
          color: red,
          child: ViewC(...),
      ),
      floatingActionButton: FloatingActionButton(
        //ボタンを押した時に呼ばれる処理。setStateが呼び出される。
        onPressed: _incrementCounter,
      )

ポイントは、UIが変更されたときに古いインスタンスbを変更するのではなく、FlutterがRenderObjectsを使って新しいウィジェットインスタンスを作成してくれる点。

ざっくりいうと、開発者が「ボタン押した時」「この画面から戻ってきた時」みたいに場合わけしていちいちViewインスタンスをnewしなくていいってことですね。一回書いとけばOKだと。

多分。

確かに、Flutter開発してる時にnewってしたことないー。