Flutterとは？独自レンダラ型クロスプラットフォームは万能か？特徴と将来性まとめ

近年、誰もがスマホを活用する時代ですが、それに伴ってスマホアプリの開発の需要も高くなっています。そんなスマホアプリの開発を非常に効率化させてくれるものの1つに「Flutter」があります。 Flutterは新しいモバイルアプリ開発フレームワークで、独自レンダラ型のクロスプラットフォームとして注目されています。今回は、クロスプラットフォームと独自レンダラ型についておさらいした後に、Flutterがどのようにしてそれを実現しているのか見ていきます。さらに、Flutterの歴史や特徴、得意機能、それを活かした利用分野、適用製品、適用事例などについても触れます。 Flutterの将来性を見る意味で、Flutter人気の推移や開発元の動向、学習機会についても紹介します

Flutterとは

Flutterとは[/caption] Flutterとは、iPhoneやiPad、Androidなどのモバイル端末で動くアプリを開発する際に使うモバイルアプリ開発フレームワークの1つです。また、Flutterは独自レンダラ型のクロスプラットフォームとしても注目されています。

モバイルアプリとは

モバイルアプリはモバイル端末にダウンロードして使うタイプのものを指します。ダウンロードは、iPhoneやiPadならApple App Storeから行い、AndroidならGoogle Playから行います。モバイルアプリは、劣悪な電波環境でもアプリの動作が重くなったり、アプリが止まってしまうことのないように、オフラインでも使えるように作ることもできます。一方、safariやChromeなどのブラウザから接続するシステムをWebアプリと呼び、モバイルアプリとは区別されます。 Webアプリはウェブサイト上で動くアプリで、モバイル端末にダウンロードする必要はありません。また、利用中は常にインターネットに接続している必要があるなどの点でモバイルアプリと大きく異なります。

クロスプラットフォーム開発が可能なモバイルアプリ開発フレームワーク

ココでは、Flutterの特徴である下記について説明していきます。「クロスプラットフォーム開発」の機能を搭載した「モバイルアプリ開発フレームワーク」

クロスプラットフォーム開発のニーズが多い

モバイルアプリの開発方法には「ネイティブ開発」と「クロスプラットフォーム開発」の2つの方法があります。前者では、iOSやAndroidアプリを開発する際にSwiftやKotlinなどの言語を使って、それぞれのプログラムを開発します。この際、コーディングやデバッグなどの作業を効率的に行うために、AppleやGoogleが提供している専用の統合開発環境を使います。しかし、1つのモバイルアプリを仕様の異なるiPhoneやAndroiｄなどの端末に搭載させたいというニーズは多いです。クロスプラットフォーム開発はこのニーズに応える開発方法です。

モバイルアプリ開発フレームワークに搭載

モバイルアプリ開発フレームワークは、モバイルアプリで汎用的に利用される基本構造をパッケージにして、個別に開発や実装する部分を減らすものです。このフレームワークを使えば、モバイルアプリの開発に使われる基本的構造が提供されますから、開発期間が短縮され開発コストを削減できます。今では、クロスプラットフォーム開発の機能を持ったフレームワークが多く提供され、使われています。

クロスプラットフォームの型

クロスプラットホームには以下の3つの型があり、モバイルアプリ開発フレームワークはサポートするクロスプラットフォームの型で分かれています。 Flutterもその中の1つの型に対応しています。以下の解説で、「レンダリングエンジン」という言葉が出てきますが、これは「プログラミング言語を解釈して画面に描画するシステム」のことです。

ネイティブ型

フレームワークからOSのレンダリングエンジンを直接使いますから、他の型に比べ処理速度が速いです。また、プッシュ通知やカメラ、位置センサーなどのデバイス機能を利用できます。ネイティブ型はオフライン環境でも操作できるゲームアプリなどの開発に向いています。

ハイブリッド型

ネイティブ型の描画機能をモバイル端末に組み込まれているWebViewが代行するもので、処理速度が遅いです。モバイルアプリのうち描画部分はHTMLやCSS、Javascriptで記述できますから、プログラム開発が容易です。

独自レンダラ型

OSに依存しない独自のレンダリングエンジンを使います。このため、OSに依存しないクロスプラットフォームが実現できます。独自レンダラ型はゲーム開発などに向いています。

代表的なモバイルアプリ開発フレームワーク

代表的なモバイルアプリ開発フレームワーク[/caption] ここではFlutterを含め代表的なモバイルアプリ開発フレームワークを紹介します。

ハイブリッド型：Cordova

Apacheソフトウエア財団が提供するオープンソースのハイブリッド型フレームワークです。 HTML5やCSS3、JavaScriptなどのWeb開発用の言語でスマホアプリが開発できます。カメラや加速度センサーなどプラグインが豊富で、独自のプラグインも可能です。

ネイティブ型：Xamarin／Xamarin.Forms

XamarinとXamarin.FormsはMicrosoftが提供するネイティブ型フレームワークです。 Xamarinの開発言語はC#で、スマホのOSに依存する処理は、C#からiOSやAndroidが提供しているAPIを実行させることによって行います。 OSに依存しない処理は.Netのランタイム技術Monoを使って動作させます。 Xamarinを使えば、ビジネスロジックはプラットフォーム間で共有できますが、UIはプラットフォームごとに作成する必要があります。 Xamarin.Formsは共有のUIを作成するフレームワークです。 XamarinとXamarin.Formを利用することで、・プラットフォーム間で共有するUIのレイアウトおよび設計・プラットフォーム間で共有するビジネスロジックのコード作成、テストなどを行うクロスプラットフォームが実現します。

ネイティブ型：React Native

Facebook（Metaに社名変更）が開発したオープンソースのネイティブ型フレームワークで、開発言語はJavaScriptです。 React NativeではJavaScriptでソースコードを書くだけで、iOSとAndroidの両方に対応したアプリを生成できます。処理速度の速さが評価され、有力企業に多く導入されています。このように支持されている背景には、・React Nativeは、Reactを引き継いでいること・ReactはWebアプリでも使えるUIに特化したJavaScriptのフレームワークで、Web開発でユーザーを増やしていること・Reactに馴染んだWebアプリ開発者にとつてスマホアプリの開発は敷居が低いことなどがあります。

独自レンダラ型：Flutter

Flutterは後発のフレームワークで、React Nativeを意識して開発されたものです。 Googleが開発したオープンソースの独自レンダラ型フレームワークです。

Flutterについて

Flutterについて[/caption] ここでは、Flutterを大まかに理解するために、歴史や概要機能、仕組みなどを説明します。

Flutterの歴史

まず、Flutter発展の歴史を振り返って見ましょう。 2015年：Flutterの初期バージョン「Sky」をDart開発者サミットで紹介 2018年12月：正式版Flutter1.0のリリースをGoogleが発表 2020年：GooglePlayをFlutterで書き換えたとGoogleが発表 2021年3月：GoogleがFlutter2をリリース。モバイルアプリ以外にWindows・Mac・LinuxのデスクトップアプリやWebアプリ・組み込みデバイスのアプリの生成までカバー。 2021年5月：Googleの新OS「Fuchsia」を発表。開発にFlutterが使われたことを公表最新版は、2021年9月にリリースされたFlutter2.5です。

Flutterの概要

開発言語はGoogleが開発したDartです。 Flutterでは「Dart」言語でソースコードを書くだけで、iOSとAndroidの両方に対応したアプリを生成できます。基本的な機能だけを使ったアプリならこれで完成ですが、プラットフォームのOSに依存する機能を使いたい場合は手を加える仕様になっています。 Flutterの独自レンダラは、ホットリード機能を持つので「リアルタイムで変更が確認できる」のが特長となっていますこれは、ホットリロード機能によって「プログラムの変更を瞬時に上書きしてUIに反映させることが出来る」ことで実現しています。

Flutterの仕組み

ここでは、・Flutterのクロスプラットフォーム環境はどのようなものか・その環境を使ってアプリ開発がどのように行われるのかを見ていきましょう。

Flutterのクロスプラットフォーム環境

Flutterのクロスプラットフォーム環境の構築には次のようなツールが必要です。各ツールは示されたサイトからダウンロードできます。 (1)Flutter：Googleのサイトから (2)Web開発環境（Chrome）：Googleのサイトから (3)iOS開発環境（Xcodet）：Appleのサイトから (4)Android開発環境（Android Studio）：Googleのサイトから (5)エディタ（Visual Studio Code）：Visualstudioのサイトから

FlutterでUIを作る

FlutterでUIに使うパーツのことをWidgetと呼びます。 Widgetにはシステムが用意した・マテリアルデザイン用・アプリケーションバー用・テキスト用・アクションボタン用などがあり、自分でも作ることができます。

Flutterでアプリを作る

エディタを起動し、コマンドラインからFlutterのプロジェクトを作成します。例えば、これから作るアプリの名前をABCgameとします。プロジェクト名はABCgameで、次のようなファイルやディレクトリが作られます。・lib：メインのソースコード用のディレクトリで、この中にプログラムが追加されます。この中のmain.dartが最初に実行されます。・web：Webアプリ用ディレクトリで、ここにWebアプリに依存したファイルが置かれます。・iOS：iOSアプリ用ディレクトリで、ここにiOSアプリに依存したファイルが置かれます。・android：Androidアプリ用ディレクトリで、ここにAndroidアプリに依存したファイルが置かれます。これら以外に、ライブラリ用のpubspec.yamlやテスト用のtestなどのディレクトリが作られます。

Flutterの特徴と得意分野

Flutterの特徴と得意分野[/caption] ここではFlutterの特徴と得意機能について見ていきましょう。

Flutterの特徴

次に、Flutterを利用する上でのメリットとデメリットを述べます。

メリット

第一のメリットは、トランスプラットフォームの対象となるプラットフォームはAndroid／iOS／Web／Windows／macOS／Linux／組み込みデバイスなどで、数が多いことです。これに対し、先発のReal NativeはAndroid／iOSのみです。第二のメリットは、トランスプラットフォームの際にFlutterなら独自レンダラによる共通のUIデザインばかりでなく、Webアプリも作成できる点です。これに対し、Real Nativeはプラットフォーム毎に異なるネイティブUIが必要です。ネイティブUIは、各プラットフォームに対応したレンダリングエンジンを使っており、他のプラットフォームには使えないからです。第三のメリットはホットリロードが使えるので、アプリ開発の際に修正確認の手間が大幅削減されることです。それ以外に、UI開発にマテリアルデザインが適用できることや、Dart言語がJavaScriptを踏襲しているのでJavaScriptエンジニアには習得し易いこともメリットと言えます。また、オープンソースなので費用をかけずに導入できるのも魅力です。

デメリット

第一のデメリットは、トランスプラットフォームといっても、プラットフォーム固有の機能については個別に開発する必要があることです。第二のデメリットは、モバイル端末のOSがアップデートされた場合の対応の遅れです。ネイティブ型なら対応遅れという事態は発生しませんが、Flutterの場合は独自レンダラ型ですからFlutterの対応待ちになります。第三のデメリットはFlutterは歴史が浅いので、Flutterの分かるエンジニアが少ない点と、オープンソースライブラリの数が他と比較して少ない点です。

Dart言語と独自レンダラの特徴

Flutterの開発言語はDart言語で、独自レンダラによりマテリアルデザインが利用できます。 DartはGoogleが開発したプログラミング言語で、・UI構築が得意・パフォーマンスと生産性を両立・クライアントとサーバーの両方に使えることなどを特徴とするオブジェクト指向の言語です。また、マテリアルデザインはWebページやサービスを作る際に、UIで直感的な操作ができるようにGoogleが提唱しているものです。マテリアルデザインにより、・画面をどのように操作したらよいのか、直感的に分かる・実世界のような影を付けることで立体感を生み出す・ユーザーの操作を補完した連続性のあるアニメーションなどが可能になります。

Flutterの得意分野と適用例

Flutterの得意分野と適用例[/caption] 先にも述べましたが、Flutterはモバイルアプリ以外にWindows・Mac・LinuxのデスクトップアプリやWebアプリ・組み込みデバイスのアプリの生成まで極めて広い用途を持っています。このような広い用途の中で、Flutterの特徴や得意機能を活かせるのはどのような分野でしょうか。ここでは、Flutterkの得意分野とFlutterを使って開発した製品、社内システムの開発などに適用した事例について見ていきましょう。

得意分野

最初に、どのような場合にFlutterの特性を活かした利用が出来るのか見ていきましょう。

高い開発生産性が求められる場合

ソースコードに手を加えることなくアブリを色々なプラットフォームに展開できることや、ホットリロードなどにより開発の高い生産性が実現できます。アプリケーションの動作はプラットフォームに最適化され、開発者が意識する必要性はありません。

アプリの同時リリースが求められる場合

単一コードでiOSアプリとAndroidアプリを同時に開発できます。但し、ビルド環境はiOSとAndroidでは異なるため、それぞれに担当者を配置する必要があります。

モバイルアプリ以外にWebアプリとしての利用も求められる場合

Flutterで開発したアプリはモバイル以外にWebアプリとしても利用できますから、Webアプリ開発の手間が省けます。但し、アプリケーションの内容によっては、手を加えることが必要な場合もありますから、注意が必要です。

Flutterで作られた製品

Flutterで作られた製品の中で、国内でも有名なものを4つ紹介します。・Google Ads：オンラインの広告プラットフォームです。・Google Assistant：スケジュール管理、アラーム設定などができます。・iekoi：ビデオ通話を使ったマッチングアプリです。・カウル：中古マンションを探したり、比較出来たりできるアプリです。

適用事例

ここでは、社内で使うアプリの開発にFlutterを適用した事例を紹介します。・既存のアプリからの乗り換え：旅先での宿やホテルの予約サイト「じゃらん」が今後の保守運用の利便性を考えて。このような事例は他でも多いです。・モバイルアプリエンジニア確保の対策として：求人メディアのGreenがAndroidアプリ開発で。・プッシュ通信機能を利用：日本能率協会総合研究所の「せんえいNAVI」に採用し、リリース後のメンテナンスコストの削減に期待。・組み込みデバイスが魅力：トヨタの車載システムなどを手掛けるトヨタコネクト社が次世代システムにFlutterを採用する計画を発表。・拡張性とマルチプラットフォームが魅力：核となる高いレスポンスをもった音楽ゲームアプリの開発で、電子楽器メーカーのローランドがFlutterを採用。

Flutterの将来性

Flutterの将来性[/caption] ここでは、Flutterの将来性について見ていきます。既に取り上げましたが、Flutter自身の持つ高いポテンシャルや開発元のGoogleの力の入れようから期待できます。では、日本や海外での人気度、学習機会なども総合的に見てみましょう。

Flutterの学習機会

1つの開発言語をマスターするだけで、幅広い分野のアプリ開発に対応できるので、プログラム開発者にとっても極めて魅力があります。 Flutterを学べるのは学習サイトと単行本やWeb上の記事だけで、今のところプログラミングスクールはありません。

学習サイト

ここでは、Flutterを学べる学習サイトを4つ紹介します。最初に紹介するのは、学習サイト「みんなのプログラミング」の「スマホアプリ開発初級編講座」で、有料です。次に紹介するのは、学習サイト「Udemy」の「人工知能（AI）を搭載したiOS、Androidアプリを作ろう」講座で、有料です。 3番目は、学習サイト「ストアカ」の「Flutterで作る!iOS・Androidアプリ」講座で、有料です。 4番目は、学習サイト「Udacity」の「Flutterを使用してネイティブアプリを構築する」講座で無料ですが、対応言語は英語です。

単行本など

これからFlutterを学ぶ方に方には、・Web上で公開されている「Flutterはじめの一歩」という記事・単行本「基礎から学ぶFlutter」(2019/12/25発売）がお薦めです。本格的にFlutterでの開発を目指す方には、・単行本「Flutterモバイルアプリ開発バイブル」(2019/10/31発売）・Web上で公開されている英語版の「Flutter documentation」があります。