ハイブリッドパワー：フラッターの利点と利点

公開: 2022-03-11

Flutterは、2018年後半に1.0に到達したGoogleのハイブリッドモバイルアプリケーション開発プラットフォームです。ハイブリッド開発フレームワークのリストに新たに参入しましたが、その背後にある優れたアイデアにより、開発者の間ですぐに普及しました。

この記事での私の目標は、これらのアイデアを探求し、Flutterでの私の経験と、それがハイブリッドモバイルアプリケーション開発の未来であると感じる理由について書くことです。

市場には古いハイブリッドアプリフレームワークがありますが、モバイルアプリケーションにFlutterを選択している有名企業のリストが増えています。 Flutterショーケースページにはこれらの多くがリストされていますが、アプリ全体または重要な機能のいずれかにFlutterを使用するいくつかの注目すべきアプリを次に示します。

Google広告アプリ
GrabFoodのGrabMerchantアプリ
アリババグループのXianyuアプリは5000万回以上ダウンロードされています
ヌーバンク
eBayモーターアプリ

Flutterフレームワークは非常に機能的ですが、それでも比較的新しいものです。バランスを取るために、Flutterにコミットする前に知っておくべきいくつかの制限についても説明します。

この記事を読んだ後、Flutterの長所と短所をよく理解し、次のモバイルアプリケーションプロジェクトでFlutterを使用するかどうかを決定するのに十分な情報が得られることを願っています。

Flutterの利点（開発の観点から）

開発者として、これは私が最もよく知っている視点であり、ほとんどの情報を共有することができます。

クイック学習曲線

Flutterが開発者にとって最初に嬉しい驚きは、開始するのがどれだけ早いかということです。インストールプロセスを完了し、動作する開発環境をセットアップするのに30分もかかりません。そこから、最初のFlutterアプリを作成する準備が整いました。

クリーン開発プロセス

ハイブリッドアプリフレームワークでの以前の経験と比較して、開発プロセスもよりクリーンに感じられます。たとえば、WebViewsを使用して多くの要素（約100程度）を含むリストを表示する場合、特にユーザーがリストをスクロールしているときに、高いCPU使用率に対処する必要がありました。このために特別に作成されたIonicフレームワーク要素を使用してこれらを解決しました。 Flutterには、リストを表示するための1つの受け入れられた方法、 ListViewがあります。これは、箱から出してすぐに驚くべきパフォーマンスを発揮します。

ライブリロード

私を嬉しく驚かせたもう1つのことは、ライブリロード機能でした。フルスタックの開発者として、私はブラウザでライブリロードを提供するBrowserWatchのようなフレームワークに慣れていました。

ネイティブ開発にはそれがありません（しかし、AppleのSwiftUIはiOS開発のためにその面でいくらかの進歩を遂げていると思います）。 AndroidおよびiOS開発者は通常、コードを記述し、コードがコンパイルされてデバイスまたはシミュレーターにロードされるのを待ってから、変更を確認する必要があります。

Flutterは（React Nativeのように）ライブリロードメカニズムを提供します。このメカニズムでは、開発者が「保存」を押すとすぐにアプリコードがデバイスにリロードされます。これにより、即座にフィードバックが得られ、開発が大幅に高速化されます。

パフォーマンス

アプリケーションのパフォーマンスは、Flutterが勝者として徐々に浮上しているもう1つの指標です。

Flutterフレームワークは活発に開発されているため、パフォーマンスを最適化できる場所はたくさんあります。これは、たとえば、Flutter 1.17で明らかです。これにより、新しいiOSデバイスでレンダリングパフォーマンスが最大50％向上し、特定の種類のワークロードでメモリ消費量が最大70％減少しました。

クロスプラットフォームの一貫性

両方のモバイルプラットフォーム間で真に一貫したUIは、Flutterのもう1つの注目すべき機能です。 Flutterは独自のレンダリングエンジンを使用しているため（詳細は後で説明します）、UIはiOSとAndroidでまったく同じです。開発者は、すべてをデザインとまったく同じように見せるために、プラットフォーム固有のスタイリングの問題に取り組む必要がなくなりました。その保証はフレームワークの一部です。

言語、ツール、および拡張

ここで言及する必要があると私が感じる他の3つの小さいが、それでも重要な側面は次のとおりです。

Flutterアプリケーションがプログラムされている言語であるDartは、非常に簡単に使い始めることができます。しかし、これは非常に強力な言語でもあり、元々はGoogleがJavaScriptを置き換えることを目的としていました。開発者がJavaScriptやその他のCに似た言語の経験がある場合は、1〜2日以内にDartを問題なく入手できます。
デフォルトのツールチェーンに含まれている堅牢なプラグインマネージャー（pub）と、pub.devプラグインリポジトリから利用できるプラグインの膨大なライブラリがあります。
ネイティブプラットフォーム機能を利用するプラグインの作成は非常に簡単です。したがって、開発者がプラグインがまだ存在しないプラットフォーム機能にアクセスする必要がある場合、プラグインをコーディングすることはそれほど難しくありません。

フラッターの利点（ビジネスの観点から）

ほとんどの企業が考える最大のFlutterの利点は、iOSプラットフォームとAndroidプラットフォームの両方に1つのチームを雇うだけでよいことです。ただし、多くの企業が見落としているより重要な利点は、市場投入までの時間の短縮です。前のセクションの開発上の利点を活用して、小規模な開発チームは、Flutterを使用して、両方のプラットフォームで同じユーザーエクスペリエンスをはるかに迅速に提供するネイティブパフォーマンスの美しいアプリケーションを構築できます。

Flutterを使用すると、開発者は本当に美しいユーザーインターフェイスを構築できます。レノボスマートクロック用の美しい文字盤UIを構築するためのGoogleとレノボからの最近の挑戦を見てください。優勝者であるMickelAnderssonのParticleClockは、ユニークでエレガントなだけでなく、Flutterでのアニメーションのパフォーマンスも示しています。

Flutterを検討しているが、それが正しい方法かどうかわからない企業の場合、Flutterを段階的に活用できます。既存のモバイルアプリは、Flutterを一度に1つのパーツに統合できます。実際、ほとんどの大企業は、既存のアプリケーションのごく一部をFlutterで構築し、メリットを確認したら他の部分をゆっくりと交換することで、Flutterから始めています。

Flutterを使用する前に考慮すべき制限

公平に言えば、Flutterは新しく、React Nativeのような他のハイブリッドモバイルアプリケーションフレームワークほどテスト済みではありません。結局のところ、React NativeのエンドユーザーリーチはFacebook、Instagram、Skype、Discordのモバイルアプリをカバーしています。

「Flutterを使用する必要がありますか？」に対するデフォルトの回答今のところ、慎重なはいです。これは、プロジェクトマネージャーが、必要な高度な機能がある場合はそれを検討し、それらの機能がFlutterで使用可能であることを確認してから使用する必要があるためです。特に、チームが特定のアプリケーションを構築するために必要なライブラリとプラグインを尋ねる価値があります。モバイルアプリフレームワークの新しいエントリとして、FlutterにはReactNativeのような広範なライブラリとプラグインがありません。

たとえば、Flutterでのカメラのサポートはまだ完了しておらず、ズームとフラッシュ制御はまだ公式のカメラプラグインの一部ではありません。私にとっては、作成中のアプリに写真/ビデオ機能を統合する必要があるときにサードパーティのプラグインを見つけることができたので、それは大したことではありませんでした。

あなたが見逃すかもしれないもう一つの主要なプラグインはGoogleマップです。 DartネイティブのGoogleマッププラグインはありません。GoogleマップをFlutterコードに統合できるプラグインはありますが、開発者のプレビューステータスのままのFlutter（プラットフォームビュー）の機能を使用します。

多くのプロジェクトに影響を与えないもう1つのことは、注意する必要があります。現時点では、Flutterは3D機能をサポートしていません。チームは今のところ2Dにのみ焦点を合わせています。ただし、ほとんどのアプリケーションは3D機能を使用しないため、これは大多数の開発者にとって大きな問題にはなりません。

Flutterの経験からのアドバイス

過去2年間に3つのFlutterアプリをリリースして、始めたときに言われたらいいのにと思うことをたくさん学びました。それらがFlutter開発の旅であなたを助けることを期待して、ここにそれらをリストします。

Flutterは非常に簡単に使い始めることができます。私はAppBreweryの素晴らしいコースから始めました。ただし、最初のいくつかのモジュールを完了した後、私は十分に学んだと思い、最初に起動したアプリの作成を開始しました。

せっかちだったので、そのコースで重要であることが判明したいくつかのモジュールをスキップし、間違いを犯してそれらのモジュールのレッスンを難しい方法で学ぶ必要がありました。具体的には、Flutterのベストプラクティスをいくつか学んだら、アプリ開発でのFlutterの最初の使用ではるかに優れた仕事をしたでしょう。

Flutterアプリケーションコードをモジュール化して構造化する方法。
状態管理の仕組み。
Flutterアプリのさまざまなページでユーザーを認証し、認証ステータスを追跡する方法。
FirebaseMessagingパッケージを使用して通知を統合する方法。

私はこれらすべてのことを学ぶことになりましたが、最初に多くの間違いをしなければなりませんでした。最初に作成したアプリのかなりの部分を書き直しました。しかし、2番目のFlutterアプリでは、自分の過ちから学び、より良い、より迅速な仕事をすることになりました。

私が上にリストした概念について学ぶためにグーグルを検索することによってあなたが簡単に見つけることができる多くのリソースがあります。 FlutterサイトのLearnMoreページのリンクを確認することから始めることができます。

私が見つけたもう1つのことは、Flutterが非常に新しいため、アプリを構造化するための1つのパターンがないことです。主にDjangoベースの開発キャリアから来て、MVCが私のDjangoアプリで使用するパターンであることを知っていることに慣れています。 iOSには、それに続くMVVMパターンでも明確な勝者がいます。 Androidには、アプリを最適に設計するための一連のガイドラインがあります。

Flutterには、多くの可能性に「勝った」ようなアーキテクチャパターンはありません。これは最初は大変な時間を与えてくれました。結局、Flutterアプリを数多く開発してきたので、アーキテクチャを選択してそれを使い続けるのが最善だと思います。

私は個人的に、依存性注入と変更管理フレームワークの両方としてproviderパッケージを使用しています。私のFlutterアプリも、大きく3つの行に分かれています。

ビュー。これは、画面を含む、アプリケーションを構築するウィジェットです。 ProviderパッケージのConsumerウィジェットを使用してサービスとモデルをビューに挿入し、利用可能なデータに基づいてUIを構築できるようにします。 Consumerウィジェットは、状態が変化したときにビューを再構築します。これは、アプリが状態の変化にどのように反応するかを示しています。
モデル。これは、構造化データを保持するために使用するプレーンオールドオブジェクトです。
ほとんどのビジネスロジックが使用されるサービス/コントローラー。 APIインターフェースもここでコーディングされており、データを取得してAPIに送信できます。これらのAPIインターフェースは、データを渡すためのモデルを提供および受け入れます。

ブロックライブラリは、 providerパッケージの代わりとして検討する価値もあります。アーキテクチャが少し異なり、イベントと状態のストリームを使用してビューとモデルを接続します。

関連： FlutterとAngularDartでのコード共有にBLoCを活用する方法

providerライブラリを使用するよりも状態を管理する方法は少し複雑ですが、複数のソースから同じデータに変更を加え、複数の場所からの変更に対応する必要がある複雑なアプリケーションがある場合は、効果があります。

BLoCまたはproviderを使用しないことになった場合、特に通知が関係する場合は、アプリケーション全体で状態を管理するための何らかの方法を考え出す必要があります。

Flutterと他のハイブリッドフレームワークとの比較

リアクトネイティブ

React Nativeは、これまでで最も人気があり成功しているハイブリッドモバイルアプリケーションフレームワークであり、それには十分な理由があります。人気のあるよくできたフロントエンドWebフレームワークであるReactが必要であり、何百万ものフロントエンド開発者がモバイルアプリケーションの作成を開始することもできました。開発者がネイティブのiOSおよびAndroid開発SDKを学ぶための時間と動機を見つけなければならなかったとしたら、今日私たちが持っている素晴らしいモバイルアプリの多くは決して作られなかっただろうと私は確信しています。

このような背景の中で、Flutterは最終的には主要なハイブリッドモバイルアプリケーションフレームワークとして勝つと確信しています。それにはいくつかの理由があります。

React NativeコンポーネントはJavaScriptコードで記述され、ネイティブコントロールに変換されます。これは、ユーザーがiOSバージョンとAndroidバージョンのアプリで異なるUI感覚を取得することを意味します。開発者がユーザーのネイティブエクスペリエンスを実現しようとしている場合、これは素晴らしいことです。

ただし、開発者が両方のモバイルプラットフォームで同じ一貫性のあるUIを使用したい場合は、ネイティブコンポーネントのスタイルを調整して同じように表示するか、両方で同じルックアンドフィールを提供する異なるコンポーネントを一緒に使用する必要があることも意味します。プラットフォーム。

これを、フレームワークがサポートされているすべてのプラットフォームで独自のウィジェットを提供するFlutterと比較してください。 FlutterはUIのペイントにネイティブコントロールに依存していないため、変換は行われません。代わりに、独自のコントロールライブラリを使用します。 Flutterのウィジェットライブラリは、ネイティブコントロールのように見えるウィジェットを提供しますが、それらは完全にオプションです。

このアプローチには長所と短所があります。最大の利点は、両方のプラットフォームでまったく同じアプリを使用できることです。しかし、あなたはそれを達成するためにいくつかのことをあきらめます。

Flutterはネイティブウィジェットを使用する代わりに独自のウィジェットを使用するため、React Nativeでの最小限の作業でできるように、カスタムコントロールを提供する多数の既存のライブラリを使用することはできません。 React Nativeでは、既存のネイティブコントロールの周りに小さなラッパーを記述して、それを機能させるのは非常に簡単です。これが、現在、Flutter用の安定したGoogleマップの実装がない理由でもあります。

ただし、ネイティブコントロールを埋め込む機能は現在作業中であり、開発者プレビューにあります。つまり、使用することはできますが、バグに対処する必要がある場合があります。リリースされると、React Nativeと比較して、Flutterの機能におけるこのかなり大きな穴が塞がれます。

これと同じFlutter機能（ネイティブウィジェットの代わりに独自のウィジェットライブラリを使用）は、まったく新しいコンポーネントを作成する場合にも大きなメリットをもたらします。 React Nativeでは、プラットフォームネイティブコンポーネントを構築し、バインディングを介してアプリケーションにインポートする必要があります。

Flutterを使用すると、Dartコードでカスタムコンポーネントを直接構築できます。 CustomPainterなどのウィジェットを使用してUIを完全に制御し、必要なものを描画できます。また、カスタムアニメーションを実装できるウィジェットのライブラリを利用できます。これらのカスタムウィジェットを構築するために、Dartコードベースの外に出る必要はありません。

そして、これはFlutterの最大のメリットの1つだと思います。 DartコードからUIを完全に制御できるため、開発対象のプラットフォームのネイティブSDKを学習する必要がなくなります。

ApacheCordova

Apache Cordovaは、ブラウザーラッパーであるため、フレームワークではありません。 Cordovaを使用すると、HTML、CSS、JavaScriptなどのWebテクノロジーを使用してアプリケーションを構築できます。 Cordovaは、モバイルプラットフォームでこのWebアプリケーションを実行する方法を提供し、JavaScriptでネイティブプラットフォームAPIを公開して、アプリケーションがプラットフォームと対話できるようにします。

Cordova用に構築されたさまざまなフレームワークがいくつかあります。私が過去に使用した有名なものの1つは、Ionicフレームワークです。ネイティブプラットフォームコンポーネントと同様に表示および動作するUIコンポーネントのセットを提供します。ただし、これらのコンポーネントはHTML / CSS/JavaScriptを使用して実装されます。

CordovaとIonicの開発経験は本当に素晴らしく、すでにWeb開発者であれば、始めるのは非常に迅速です。 Webテクノロジーを使用してアプリケーションを構築しているため、Webエコシステム全体を利用できます。 HTML / CSS / JavaScriptに基づく数十万の小さなコンポーネントとライブラリについて考えてみてください。それらのすべてではないにしても、ほとんどを使用できます。これは、必要なほとんどの「ウィジェット」がすでにオンラインで利用できることを意味します。

ただし、これも欠点です。 Webテクノロジーを使用してアプリケーションを構築するため、モバイルで動作するように縮小されたWebサイトだけでなく、アプリがモバイルアプリのように見えるようにするためには細心の注意が必要です。

CordovaはMVPやアプリの最初の数バージョンを開発するための優れた方法ですが、Flutterで最初に作成したアプリはIonicアプリの移植版でした。特にスクロールするコンテンツが多いビューで得られたパフォーマンスの向上は、最初のインタラクションから顕著でした。

Xamarin

私はXamarianの経験がないので、2つを公正に比較することはできません。しかし、私の研究中に、私は公正な比較を行う素晴らしい記事に出くわしました。

記事はFlutterとXamarianの関係で終わりますが、私がそれを読んでいて、2つのフレームワークのどちらかを選択しなければならなかったとしたら、Flutterが輝いているのはそれであるため、Flutterを使用したと自信を持って言えます。私がもっと大切にしていること。

Flutterの技術概要

Flutter：ハイブリッドアプリフレームワークの「ゲームエンジン」

ハイブリッドモバイルアプリケーションフレームワークの中で、Flutterには独自のアプローチがあります。 UIをネイティブプラットフォームに委任したり、Webビューを使用したりすることはありません。代わりに、Flutterは独自のレンダリングエンジンを使用してUIをペイントします。これは、ネイティブコントロールを使用する代わりに、ゲームがUIのすべての部分を生成するゲームエンジンを使用する方法に似ています。

Flutterは、高性能で戦闘テスト済みのSkiaグラフィックエンジンを使用して、モバイルアプリケーションのすべてを描画します。 Skiaを使用すると、私が考えることができる2つの主な利点がありますが、Flutterの背後にいるGoogleのエンジニアはもっと多くのことを念頭に置いていたと思います。

アプリは、プラットフォームごとにカスタマイズする必要がなく、すべてのプラットフォームでまったく同じように見えます。
ウィジェットを描画するためにコードをネイティブプラットフォームコードに変換する必要のある中間レイヤーがないため、アプリはネイティブアプリケーションと同様に優れたパフォーマンスを発揮します。

すべてがウィジェットです

Flutterのドキュメントでは、Flutterを「Reactスタイルのフレームワーク」として説明しています。これは、小さなウィジェット（React用語のコンポーネント）を一緒に構成することによってアプリがどのように構築されるかで明らかです。

ただし、Flutterは、私が使用した他のどのフレームワークよりも一歩進んだウィジェットアプローチです。

簡単な例はパディングです。ほとんどのフレームワークでは、パディングはUI要素の属性です。 Flutterでは、 Paddingは他のウィジェットをそれ自体の中にラップし、その子ウィジェットの周りにパディングを追加できるウィジェットです。

さらにユニークなことに、 InheritedWidgetにはUIがなく、ユーザーとの対話も提供されません。その唯一の仕事は、ウィジェットツリーに情報を追加して、ツリーの深い時点でその情報を引き出すことができるようにすることです。

たとえば、アプリケーションのルートであるMaterialAppウィジェットは、 InheritedWidgetを使用して認証サービスをウィジェットツリーに挿入できます。これで、ユーザープロファイルページなど、他のページのツリーの奥深くで、メソッドを使用してその認証サービスを抽出して使用できます。

これはすべてウィジェットアプローチであり、ある程度慣れる必要があります。しかし、慣れれば、アプリケーションで機能を構築するための強力な方法になります。

フラッター、ダーツ、そしてソースへの掘り下げ

FlutterはDartと密接に関係しています。コアレンダリングエンジンはC/C ++に組み込まれていますが、それはFlutterのほんの一部にすぎません。

Flutterコードベースの大部分はDartで記述されており、Flutterチームがそれを選択した理由はたくさんあります。しかし、私にとっての最大の利点は、フレームワークのソースコード、およびフレームワークが提供するすべてのさまざまなウィジェットを簡単に確認し、それらから学ぶことができたことです。

これは、多くの開発者が認識しているよりも強力な利点です。ほとんどの開発者は、フレームワーク/ライブラリのコードで答えを見つけようとすることをお勧めします。これは、内部で何が起こっているのかを理解するのに役立つだけでなく、高品質で適切に設計されたコードにさらされるためです。これは確実な方法です。開発者として成長すること。

ネイティブプラットフォームの相互運用性

FlutterはUIレイヤーを提供し、ビジネスロジックは純粋なDartパッケージを介して簡単に処理されますが、ジオロケーションやカメラ制御などのネイティブプラットフォームの機能にアクセスするには、pub.devのサードパーティパッケージを使用するのが最も簡単な戦略です。

ただし、既存のパッケージでは利用できない必要な機能がある場合は、自分で作成することはそれほど難しくありません。私は自分でプラットフォームネイティブパッケージを作成していませんが、好奇心から多くのソースコードを調べました。

私はネイティブアプリケーション開発者ではありませんが、これらのプラグインのネイティブ部分をほぼ理解し、メッセージパッシングを介してプラグインがDartランタイムにどのように接続されているかを確認できました。経験豊富なネイティブプラットフォーム開発者にとって、ネイティブ機能を活用するための新しいパッケージの作成は非常に簡単です。

次のプロジェクトでFlutterを使用する必要がありますか？

この記事が、モバイルアプリケーションプロジェクトでFlutterを使用できるかどうかを判断するのに十分な情報を提供してくれることを願っています。私は、長所と短所の両方をリストして、Flutterのバランスの取れた画像を提供しようとしました。

誰もあなたに代わって決定を下すことはできませんが、次のモバイルアプリケーションでFlutterを使用するという問題にどのように取り組むかについて、別れのアドバイスをすることができます。 Flutterの利点がアプリケーションに必要なすべての機能を提供できるのであれば、私はそれをハートビートで選択します。

これは、Flutterが現在不足しているいくつかの領域を除いて、他のすべての側面が、過去1年間に5つの異なるFlutterアプリケーションの開発と起動に感心し、信頼するようになったためです。

Flutterの使いやすさ
開発のスピードに焦点を当てるためにゼロから設計されたフレームワークを使用することで得られるスピードの向上
すぐに利用できるDartライブラリとサードパーティパッケージの豊富なエコシステム
すべてを使用してアプリケーションを開発するFlutterの異なるが非常に生産的な方法は、ウィジェットアプローチです。

モバイルアプリ開発サービスを提供している人は、Flutterをまだ真剣に見ていない場合は、真剣に検討するのが賢明です。

最後に、Flutterの利点を1つ挙げて締めくくります。これには、私が使用したライブラリまたはフレームワークの中で最も優れたドキュメントがいくつかあります。 Flutterの質問をグーグルで検索しても、Flutter自身のサイトのページで回答されないことはめったにありません。

関連： Flutterチュートリアル：最初のFlutterアプリを作成する方法

Google Cloudパートナーとして、ToptalのGoogle認定エキスパートは、最も重要なプロジェクトのオンデマンドで企業に提供されます。