Flutterの特徴を解説する

こんにちはnasustです。 Googleが開発したFlutterは、どのようなフレームワークなのか少し詳しく解説します。

FlutterはiOS,Androidのアプリ開発をサポートするクロスプラットフォームのフレームワークです。 ネイティブアプリに匹敵する品質とパフォーマンスのアプリを開発する事ができます。 プログラミング言語、ライブラリ、開発ツールなど総合的に素晴らしい開発環境を提供します。

GitHubのスター数は、後発にも関わらずReact Nativeを同程度の人気があり勢いあります。 バージョン1.0を超えており、安定してきているのでプロダクトに採用しやすい状況です。 さらにWebのSPAとデスクトップアプリ、そしてサーバーサイドも開発できるように発展しています。

頻繁にFlutterの技術的な記事や動画がアップされており注目度が高いフレームワークです。

Dart

FlutterはGoogleが開発したプログラミング言語であるDartで開発します。 DartはUIの開発に最適化した言語です。UIの開発に適した宣言型UIフレームワークが組み込まれています。

元々はブラウザのJavaScriptの問題点を改善して代替を目的としたスクリプト言語でした。 ブラウザに組み込む予定でしたが路線を変更して、再構築して現在はiOSやAndroidのネイティブバイナリへのコンパイル、JavaScriptへのトランスパイルする クロスプラットフォームな言語となっています。

Dartはスクリプト言語の生産性、静的言語並みの型安全、モダンな文法、 トレンドな機能を積極的に取り込んだ言語です。

宣言型UIフレームワーク

Flutterの高い生産性の要素の1つは、宣言型UIフレームワークを言語レベルでサポートしている事です。 コードで直感的に分かりやすくUIを開発する事ができます。

宣言的UIとは、どういう風にUIを構築したいかをプログラミングする方法です。 HTMLのようなUIの表現方法に近いです。その為、直感的にUIを構築する事ができます。

このフレームワークはiOS、Androidより簡単に高品質なUIを開発しやすくなっています。

iOSではストーリーボードでUIをGUIで作成できますが、高品質で作り込まれたUIを実現するにはコードで実装する事になります。 しかしコードで逐次的にUIを作り込みする為に構造が分かりにくくなります。

Androidでは、XMLでUIを記述します。このXMLでの開発は宣言的で構造などは分かりやすいですが融通が効かなく、高品質なUIを作成するにはiOS以上に色々と手間が掛かります。

DartではUIをコードで宣言的にレイアウトとデザインを表現する事ができます。


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),
        ),
    );
}
dart

上記のDartコードは宣言的にUI構築した例です。 UIの構造がコードで表現されている為に分かりやすいですね。 UIとコードが一体化しているのでツールが行き来しなくて済むので効率的に開発出来ます。

ホットリロードと高速コンパイル

Flutterの高い生産性と品質を実現する機能としてホットリロードと高速コンパイルがあります。 ホットリロードはエミュレーター又は実機で開発中のアプリを実行したまま、コード変更した内容を1秒以内でリロードする機能です。 UIの開発で品質を上げるにはトライ&エラーを繰り返す事が重要です。変更した瞬間に試せるので、もの凄く便利です。 Flutterが人気になる理由の1つとして挙げられます。

高速コンパイルはJITコンパイルされる事で実現しています。 DartはJITとAOTの両方のコンパイラをサポートしています。 JITはプログラム実行中にコンパイルされる為、変更を反映しながら素早く実行できます。 アプリのリリース時はAOTでネイティブコードにコンパイルされる為、JITより※高速に動作します。

※この高速とは、処理速度というより事前にコンパイルする事で最初の実行がJITより速いという事です。処理速度については、どちらが速いかは一概に言えません。 例えばオラクルのJavaはJITコンパイラですが、コンパイル後の処理速度はC/C++より速いケースがあります。

UIはFlutter独自実装

Flutterは、OSが提供しているUIを使用せずに独自に提供しています。

メリットは、iOS,Androidの両方で同じデザイン、振る舞いを提供する事ができます。

デメリットは、OSの標準的なUIでは無い為にデザインや細かい振る舞い違う事があります。 ただしFlutterはGoogleが開発されている為、Androidでは違和感は無いと思います。 iOSの方が違和感強いです。しかし対策として標準的なUIに似せたデザインのFlutterのUIを提供しています。

UIのデザインはマテリアルデザインを採用しています。 マテリアルデザインは現実世界にある動きや奥行きに沿ったデザインのフレームワークです。 その為にユーザはアプリを視覚的に分かりやすく操作する事ができます。

iOSのUIデザインによる違和感に話が戻りますが、GoogleがiOSに提供するアプリはマテリアルデザインになっています。 Googleのアプリに慣れているユーザーにとっては、Flutterの独自のUIに違和感が少ないと思います。

UIのパフォーマンスはネイティブアプリと匹敵します。 GPUを活用したレンダリングエンジンによる高い実行パフォーマンスを実現しています。

Flutter Pub

Flutterは機能を追加できるパッケージがあります。 世界中のユーザーがパッケージを開発してFlutter Pubで公開しています。 Flutterはパッケージを導入する機能がサポートされています。 パッケージの設定する事で自動的にダウンロードと追加が簡単に出来ます。 パッケージの依存関係で問題が起きないようにバージョンアップのルールを設定する事ができます。

様々なライブラリが提供されています。 firebaseやOauth2など、よく使う機能のライブラリが提供されています。

OS依存の機能が開発しやすい

Flutterのプロジェクトは、クロスプラットフォームでアプリを開発できるように iOSとAndroidのプロジェクトを使用しています。

つまりOS依存の機能は、それぞれのプラットフォームのプロジェクトに直接実装する事が出来ます。 iOSであればXcodeで、AndroidであればAndroid StudioでFlutterが生成したソースコードに機能を追加する事が出来ます。 そしてDartには、それぞれのプラットフォームと通信する機能があります。

開発ツール

Flutterの公式的な開発ツールは2つあります。 Android StudioとVisual Studio Codeです。

Android Studio

Android開発用のIDEです。Flutterプラグインをインストールする事でFlutterが開発する出来ます。

Visual Studio Code

人気のエディッター、Flutterの拡張機能を追加する事で開発する事が出来ます。 Android Studioより軽量で動作します。 Flutter開発環境としては後発なので、Android Studioより機能は少ないですが頻繁に機能が追加されています。

DevTools

DevToolsは品質とパフォーマンスを充実した内容でデバック出来きるツールです。 UIのレイアウトと状態、パフォーマンスとメモリの状態がデバック出来ます。 分かりやすいビジュアライザーで表現されたデバック出来ます。

上記のDevToolsの画像は、Creative Commons — Attribution 4.0 International — CC BY 4.0で提供されています。

充実した公式ドキュメント

公式ドキュメントは英語ですが充実しています。 Flutterの概要、構造、ライフサイクル、パフォーマンス、コーディング、APIリファレンス、注意点やヒントなど、 開発するに十分な内容のドキュメントが揃っています。

iOS、Androidを学ばないでFlutterだけで開発できるか?

最低限、各プラットフォームのUIガイドラインやアプリのリリースの仕方を学ぶ必要があります。 Flutter Pubで提供されていない機能を実装する場合は、iOS、Androidの知識が必要になります。 現状、サードパーティのSDKなどはFlutter用に用意されている場合は少ないです。 iOS、AndroidのSDKを導入してDartから使えるように開発するケースがあります。

つまりiOS、Androidの知識は必要になります。

Flutterリンク集

Flutterの更なる知見を得たい場合は、下記のウェブサイトで開発者の記事またはリンクがあります。

awesome-flutter | An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.有益なFlutterのリンク集
Flutter WeeklyFlutterファンによるFlutterファンのためのニュースレター
Flutter Weekly - QiitaFlutter Weeklyを日本語訳している
Flutter - YouTube公式チャンネル
Flutter 🇯🇵 – MediumFlutter日本語記事のトピックス
Flutter – MediumFlutter英語記事のトピックス
The most insightful stories about Flutter – MediumMediumのFlutterタグの記事
flutterの最新人気記事 - はてなブックマークFlutterタグのはてなブックマーク
Flutter - QiitaQiitaのFlutterタグの記事
FlutterDev: Development with Google's Flutter UI frameworkFlutter開発のコミュニティ
prevnext