[Flutter][Tips][1] Flutterが画期的な理由は◯◯型UIプログラミングである点

宣言型UIか、命令型UIか

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

宣言型は従来の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ってしたことないー。

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。

コメントする