Flutterで始めるモバイル開発
1.「クロスプラットフォーム」でのモバイル開発とは?
従来のスマートフォン向けのモバイル開発では、各OSに合わせたプログラム言語での開発が必要であり、様々なプラットフォーム向けにアプリを提供する場合は、その種類分の開発コストがかかる、保守性が低下するなど多くの課題がありました。
これらの課題への対応として「クロスプラットフォーム」での開発が有効です。
「クロスプラットフォーム」では、iOS, Android, Windows, macOSなど異なるプラットフォーム上で、同じ仕様のアプリケーションを動かせるプログラムの開発が可能となります。
「クロスプラットフォーム」の主なメリットは以下のとおりです。
- 多様化するOSのシェアに対応できる
ネイティブの場合、同じ仕様のアプリでもOSごとにそれぞれ開発が必要だが、クロスプラットフォームの場合、1コードで複数のOSに対応したアプリが作成可能なため、開発工数が抑えられる。
※海外ではAndroid:7割、iOS:3割 日本だと、Android:3割、iOS:7割 - 開発言語がOSに依存しない
開発言語がOSに依存しなくなったことで、柔軟に開発言語が採用できる。
また、利用される言語が1つとなることで、学習コストが低い。
クロスプラットフォームのほとんどがOSSであるため、コミュニティも活発。 - アプリの保守運用の一元化
開発言語が1つとなることで、保守性を高められる。
Flutter | React Native | Xamarin | Unity | |
---|---|---|---|---|
開発会社 | Meta(旧Facebook) | Microsoft | Unity Technologies | |
OSS | 〇 | 〇 | 〇 | × |
開発言語 | Dart | JavaScript / TypeScript | C# / F# | C# |
開発環境 (IDE) | Visual Studio Code / Android Studio / Xcode,IntelliJ IDEA | Visual Studio Code / Android Studio / Xcode / Nuclide | Visual Studio | Visual Studio / Visual Studio Code / JetBrains Rider |
Github スター数 | 137k | 102k | 5.5k | - |
対応プラットフォーム | iOS, Android / Web / Windows / Mac / Linux | iOS / Android / Web | iOS / Android / Windows / Mac | iOS / Android / Web / Windows / Mac / Linux / PlayStation 4 Vita / Nintendo Switch 3DS / XBox One |
ホットリロード | 〇 | 〇 | 〇 | △ |
UI | 独自UI | ネイティブUI | ネイティブUI / 独自UI | 独自UI |
最もGitHubスター数が多いのは「Flutter」で、人気のあることが窺えます。
Flutterは他にも多くの特徴があります。
- 成長率
Google PlayストアにおけるFlutterを利用したアプリ数から見る、高い普及率。
2021年3月時点で15万件以上、2022年2月時点で50万件以上のアプリがリリースされている。 - 将来性
Androidの次期OSと言われるGoogleが開発中のFuchsiaにおいて、主要な開発フレームワークとしてFlutterを利用。
Googleが提供する30以上のサービスもFlutterを利用して開発されている。
4.「Flutter」とは?
本章ではよりFlutterを掘り下げたいと思います。
「Flutter」は、2018年にGoogleによって開発されたオープンソースUIのSDKであり、単一のコードベースから、Android、iOS、Web向けのクロスプラットフォームなアプリを開発するためのフレームワークです。
※2022/08/23時点の最新バージョンは3.0.5
高速でオブジェクト指向のプログラミング言語の「Dart」に基づいており、高パフォーマンスとUIデザイン面、高生産性で開発者に人気の技術となります。
Flutterの特徴として、ネイティブアプリのような本格的なUIコンポーネントが利用できることがあります。Google推奨マテリアルデザインを活用してプラットフォームに依存しないUIデザインが可能です。(ただし、OSごとの独自実装が一部必要)
また、開発環境も豊富であり、Android Studio、Visual Studio Code、Xcodeなど開発者ごとに馴染みのある環境で開発ができます。
良い点が多いFlutterですが、Flutter自体が新しいフレームワークのため、OSSライブラリが比較的少なく、日本語の文献が少ない、OSのアップデートに合わせたFlutterのアップデートにはラグがあり、素早いOSバージョンアップ対応には不向きである、などのデメリットもあります。
開発時は、各プラットフォームのエミュレーション環境と連携して、各プラットフォームでのデザイン面の違いなどを確認しながら実装が可能となります。
本章では、具体的な開発イメージをご紹介します。
ここではFlutter SDKの導入やVSCodeプラグインの導入は割愛し、大まかな開発の流れのみご紹介します。
- 新規プロジェクトの作成
まずアプリケーションのひな型を作成します。
アプリケーション名 を入力するとFlutter SDKが自動で空のアプリケーションを作成してくれます。 - ソースの実装
アプリケーションは「lib/main.dart」から処理を開始します。
各画面につき原則一つのdartファイルで分割し、画面処理を実装していきます。
各プラットフォーム別のアイコンなどは個別に対応が必要です。 - デバッグ
ある程度実装が進んだら、各エミュレーション環境で画面確認などを行います。
エミュレーション先を選択し、「lib/main.dart」を起動します。
ここではAndroidをエミュレート先に選択しているので、Androidで起動します。 - テスト
Flutterでは工程に合わせて、「Unit Test」、「Widget Test」、「Integration Test」の3つの自動テストを利用します。
単体テスト工程では各モジュールの自動テストを定義できる「Unit Test」、画面操作の自動テストが定義できる「Widget Test」が有用です。
特に「Widget Test」は、通常では自動テスト化しにくい画面操作が標準SDKで実施できるため、非常に使い勝手がよいです。
Widget Testの例)
結合テスト工程以降で各プラットフォームの検証をする場合は、「flutter_driver」を利用して各エミュレーション環境でのテスト実行が可能な「Integration Test」を用いると、環境差異のテストも自動化が可能となっています。