Flutterって何者? – ④Flutter開発の特徴

はじめに

前回は、

Flutterの開発言語である「Dart」の歴史や特徴について解説しました。

Dart?なにそれ?」って方は、まずこちらを御覧ください✨

さて今回はついに、

Flutterで開発するときの特徴や、

ネイティブとちょっと変わった仕組みになっている部分

解説していこうと思います☺️

Flutterならではの機能が盛りだくさんなので、

ワクワクしながら見てみてください✨😳

では行くぅ〜😊

Flutter開発の特徴

Flutterのメリット・特徴は

たくさんあると思いますが、目立つ特徴としては

以下に挙げられるものではないかと思います。

  • 宣言的UIフレームワーク
  • ホットリロード
  • Widget

今回はについて調べてみたので、

ご紹介していきますね😌

宣言的UIフレームワーク

Flutterは言語レベルで”宣言的UIフレームワーク”をサポートしています😉

ナンジャラホイおじさん

宣言的”ってナンジャラホイ?

おや?ナンジャラホイおじさんが出てきましたね?

ということで、まずは”宣言的ってなんだろう?”ってところから解説していきましょう!

宣言的ってなんじゃ?

宣言型プログラミングは「対象の性質を宣言してプログラムを構成する」ことで特徴づけられる。すなわち、出力を得る方法ではなく、出力の性質・あるべき状態を記述することを「宣言型」と称する。

宣言型プログラミング – Wikipedia

ここでいう”出力の性質・あるべき状態”とはいわゆる「結果」であり、

結果を宣言”することで目的のデータを得るので”宣言的”と言われています。

例えばSQLHTMLなんかがそうですね😉

逆に”出力を得る方法”とは、いわゆる「過程」であり、

データを得るための”過程を命令”するので”命令的”と言われています。

Javaなどがこれに当たります🤭

分かった人

なるほど。つまり宣言的UIってのは”どうやって表示させるか”を指定するんじゃなくて、”どんなものを表示させるか”を宣言するってことだね。

そういうことです😊

つまり極端に言うと宣言的プログラミングにおいて、

結果として欲しい物を手に入れられさえすれば、過程はどうだっていいわけです。

もっと分かりやすい例を見つけたのでご紹介します🙌

例えば今、あなたは温かいコーヒーが欲しいとします😌

それを部下に頼むとき、

そこの棚にある豆を挽いて、熱湯を注いで、出来上がったものを僕の机に出して!

と伝えるのが”命令的プログラミング”です😌

そして、

温かいコーヒーが欲しい!

とするのが”宣言的プログラミング”です😌

両者の違い、お分かりでしょうか・・・?

命令的の場合、

コーヒーを得るまでの過程を指定する事ができますが

例えばコーヒー豆が切れていたとき対応できません。それ以外の方法を命令されていないからです。

対して宣言的の場合、

コーヒー豆が切れていようが結果として温かいコーヒーが手に入ればいいので、

セブンイレブンで買って来ようが、冷蔵庫にあるパックのコーヒーをレンチンしようが関係ないですよね😳

コーヒーを持ってくる過程は、依頼された側に委ねるわけです。

この解説は以下の記事で、ものすごくわかりやすく解説してあるものを参考にしています。

参考:宣言的? Declarative?どういうこと? – Qiita

Flutterは”宣言的”

Flutterでは”宣言的”に”UIを指定する”という特徴があります。

実際のコードを見てみましょう!

以下はプロジェクト開始時に自動生成されるコードの抜粋です。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

これは画面を表しているのですが、

なんとなく見ていくと

上にAppBar(アクションバー的なもの)があって〜タイトルはこうで〜

bodyには中央寄せのカラムに文字列が2行あって〜、

というのが、なんとなくわかりますよね😳✨

まさに”どんな物が欲しいか”を”宣言”しています😌

Flutterではこのようにして、UIを構成していきます。

この書き方は人によって好みが分かれそうなところですが、

使ってくととてもわかり易くて僕は楽しいと感じています😉✨

ホットリロード

Flutterといえば、ホットリロードでしょ!

とも言われる程の(定かではないw)、

ものっそい便利な機能、それが”ホットリロード”です✨

ネイティブで開発経験のある方なら、一度はこんなこと思ったことないでしょうか?

画面パーツ1個の位置をいくつか試したいときに、毎回ビルドするのは時間かかって効率悪いなぁ…

これが例えば、ほぼ1秒以内に変更が反映されていたら、便利だと思いませんか?

そう!まさにそれがホットリロード✨

開発中は何度もトライ&エラーを繰り返しますよね😉

そのたびに何度も再ビルドしていては大変・・・。今まではそれが当たり前でした😢

ですがこのホットリロード機能を使うことで、

行った変更を瞬時に反映させることができ、開発効率が劇的にアップします!

どんな感じなのかを動画にしてみました✨

ご覧の通り、変数が保持している値を初期化することなく(状態を維持)、

更に超スピードでUIの変更が反映されていますよね😳

これ、メッチャクチャ便利です✨

Widget

Flutter開発の大きな特徴として、

画面に関係するすべてのものは”ウィジェット”で構成されています😳

では、”画面に関係するもの”とは何なのでしょうか?

Flutter公式の、ウィジェットカタログを見てみましょう↓

参考:ウィジェットカタログ-Flutter

ボタン、画像、アイコン、テキストはもちろんのこと、

なんと”Padding”や”Center””Align”など、

通常はパラメータで指定しそうな値もすべてウィジェット

になっていますね😳

Flutterではこれらの各ウィジェットを”ツリー構造”で配置することによって、レイアウトを作っています🙌

先程紹介したコードを抜粋して見てみましょう。

body: Center( // 中央揃え
  child: Column( // カラム
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      // テキスト
      Text(
        'You have pushed the button this many times:',
      ),
      // テキスト
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.display1,
      ),
    ],
  ),
),

この場合、ツリー構造はこのようになっています😳

ネストが深くなるので分かりづらいという意見もありますが、

見ての通り感覚的にUIを作っていくことができるのはメリットではないでしょうか😊

おわりに

今回まで続いてきた【Flutterって何者?】シリーズ、

ついに終了となりました😌

この他にもFlutterにはたくさんの魅力があります😊

これらについては僕もまだ理解しきっていないところも多く、

発信を通して学んで行こうと思います✨

Flutterの魅力について、少しでも伝えることができてよかったです✨

さぁ、あなたもすばらしいFlutterの世界へ!