アプリケーションエンジニアへ、Flutterを全力で紹介したい！！！
近年、モバイルアプリの需要が急増しています。iOS、Android、最近ではPCのデスクトップ向けのアプリケーションも増えてきました。
開発者としては別々のプラットフォームに対応するために複数の言語やフレームワークを学ぶ必要があり、その学習コストは決して低くはありません。
そんな中、この課題を解消してくれるのが『Flutter』です！
今回は、私が実際にFlutterを使用してプロジェクトを進めた際の体験をもとに、なぜFlutterが素晴らしいのかを全力で紹介する記事をお届けします。
目次
Flutterって何？
Flutterは、Googleが開発したオープンソースのUIソフトウェア開発キッド（SDK）です。
シングルコードからiOS、Android、Web、デスクトップ向けアプリを高品質かつ効率的に開発することが可能です。
独自のWidgetベースのアーキテクチャを持ち、魅力的なUIを柔軟に構築することが可能です。
さらに、Dartという言語を使用してるためパフォーマンスも非常に優れています。
Dartって何？
Dartは、Googleが開発したオープンソースのプログラミング言語です。
特にクライアント側の開発（ウェブやモバイルアプリ）に最適化されています。
またオプションの静的型付けを持っており大規模なアプリ開発のバグ早期発見に役立ちます。
Dartのパッケージ管理ツールであるpubを通じて多くのサードパーティのパッケージやライブラリが提供されており、開発者はこれらを活用することで様々な機能を簡単に導入することができます。
Flutterの特長
クロスプラットフォームの魅力
クロスプラットフォームの最大の魅力は、１つのコードベースから複数のプラットフォームに対応したアプリを生成できる点にあります。
前述した通りiOS、Android、Web、デスクトップなどの異なるプラットフォームに向けて別々のコードを書く必要がなくなります。
また、１つのコードベースで複数のプラットフォームに対応しているため、開発・テスト・デバッグの時間を大幅に削減することができます。開発者としてこれ以上に嬉しいことはないでしょう。
加えてフレームワークのアップデートも頻繁に行われているため新しいOSやデバイス機能に迅速に対応することが可能です。
開発者だけでなく、ユーザーにとっても魅力的な点があります。
クロスプラットフォームツールを使用することでユーザーに一貫した体験を提供することができます。
パフォーマンスと安定性
Flutterはパフォーマンスの安定性が高く評価されています。
Dartという言語で書かれておりAhead-of-Time（AOT）コンパイルに対応しています。
ネイティブのARM（Advanced RISC Machine）マシンコードに直接コンパイルされるためJSブリッジを介さずネイティブのパフォーマンスが得られます。
総合テスト・Widgetテスト・ユニットテストといったテスト手法に対応する充実したフレームワークが提供されており、アプリの品質と安全性を高めることができます。
開発者の生産性を向上させるもので、Hot Reloadという機能があります。
パフォーマンスの直接的な要因ではありませんが、この機能を使うことでコードの変更をそくぞにアプリに反映することができるためパフォーマンスの最適化やバグの修正を迅速に行うことができます。
カスタマイズの自由度
Flutterはその全てがWidgetとして構築されています。このWidgetベースのアプローチが高度なカスタマイズを可能にしています。
さまざまなWidgetを組み合わせることで新たなWidgetを生成でき、アプリケーションの見た目や動作を簡単に変更することができます！
加えてMaterial DesignやCuperito（iOS風）のデザインシステムをサポートするWidgetも存在するので、OSごとに一貫した見た目や振る舞いをもったアプリの開発が簡単になります。
Flutter開発を始める
環境とSDKのインストール
まずはFlutterSDKのインストールから行いましょう。
Windows、macOS、Linux、ChromeOSから選ぶことができます。ご自身のマシンに合ったものをインストールしてください。
私の場合は、MacBookでiOSアプリの開発を行う必要があったのでmacOS版をインストールし合わせてXcodeとVScodeでの環境構築を行いました。
iOSアプリ開発においては、Swiftが主流としてXcodeを使用するのが一般的です。
一方、Flutterを用いたiOSアプリの開発にはXcodeは必須ですが、コーディングやデバッグに関してはVS CodeやAndroid Studioでも対応可能です。Webアプリケーションの開発経験しかないエンジニアにとって、Xcodeを使った開発は学習コストが高いと感じられることもあるでしょう。この観点からも、Flutterは魅力的な選択肢と言えます。
Widgetの概念と基本操作
Widgetの概念
Flutterにおける中心的な概念がWidgetです。
Widgetは、アプリケーションのインターフェースを構築するためのUI部品です。
テキスト・ボタン・レイアウトなどのUI要素全てがWidgetとして表されます。
ほかの言語ではあまり聞き馴染みのないワードなので抵抗があるかもしれませんが、FlutterのUI部品のことをさしています。
reactでいうcomponentと同じような役割を果たしています。
Widgetの基本操作
Widgetのプロパティ
Widgetは多くのプロパティを持っており、これらのプロパティを変更することで、Widgetの見た目や振る舞いをカスタマイズできます。
Widgetの再利用: Widgetは再利用可能なので、一度作成したカスタムWidgetを複数の場所で使用することができます。
Widgetの組み合わせとレイアウト
基本的なWidgetを組み合わせて、より複雑なUIを構築することができます。
例えば、ColumnやRowなどのレイアウトWidgetを使用して、複数の子Widgetを配置します。
デザイン
Widgetには色・形・テキストスタイルなどの属性をカスタマイズするためのプロパティが多く提供されています。自由自在にWidgetを操ることが可能です。
アニメーション
アプリ内のUIに対してなめらかな動きを追加するツールセットを提供しています。
基本的なアニメーションから高度なカスタムアニメーションまで、Flutterはアニメーションを簡単に作成し、制御するための直感的なAPIを備えています。
Widget例
【レイアウトのWiget例】
【Material DesignのWidget例】
- MaterialApp：ルートとなるWidget。Material Designの推奨するナビゲーションやテーマのサポート。
- Scaffold：基本的なレイアウトを提供する。
- AppBar：ヘッダーセクションに表示されるツールバー。
- Card：関連情報を表示するマテリアルカード。
【Cuperito（iOS風）のWidget例】
- CupertinoApp：iOS風のアプリケーションのルートWidget
- CupertionNaviagtionBar：iOS風ナビゲーションバー
- CuprertionButton：iOS風のボタン
- CupertinoSwitch：iOS風のスイッチ（トグル）
【アニメーションWidgetの例】
- AnimatedContaier：時間の経過とともプロパティを変化させることができるコンテナ
- AnimatedCrossFade：２つの子Widget間でクロスフォードアニメーションを実行する
- AnimatedPositioned：StackWidgetの中で子Widgetの位置をアニメーション化する
- AnimatedOpacity：子Widgetの不透明度をアニメーション化する
【個人的に気に入っているWidgetとその理由】
- Visibility：子Widgetを表示・非表示にする
子WidgetのレンダリングをトグルすることによってUIの一部を非表示にできるので利用しているユーザーの状態などによってUIのだし分けを実装できる
- SizedBox：特定のサイズを持つボックスを作成する
子Widgetに特定の幅や高さを矯正することができる／空白のスペースや余白としても使用できる
- GestureDetector：多様なタッチジェスチャーを検出・処理する
ボタン関連Widgetではタップのみの検出・処理となるがこれを使うことによってダブルタップ・長押し・ドラッグ・ピンチなどに対応できる
ステート管理の方法
アプリケーション開発において、データの流れやUIの更新を適切に管理することは、アプリの応答性や利便性を向上させる上で不可欠です。Flutterでは、この「状態管理」という概念が核心となっています。
Flutterの基本から話を始めると、フレームワーク内でのWidgetの分類には「StatefulWidget」と「StatelessWidget」の2つのカテゴリがあります。
StatefulWidgetとStatelessWidgetの違い
StatelessWidget
この種類のWidgetは、一度描画されるとその状態が変わらないWidgetを表します。
例えば、テキストラベルやアイコンなど、一度表示されたら変更されないUI要素に使われます。
StatefulWidget
この種類のWidgetは、状態を持つことができるWidgetを表します。
例えば、チェックボックスやテキストフィールド、スライダーなど、ユーザーのインタラクションに応じて変化するUI要素に使われます。
Provider, Riverpodなどの人気のステート管理パターン
しかし、StatefulWidgetとStatelessWidgeだけでは大規模なアプリケーションの状態管理は難しくなります。そのため、Flutterには状態管理を助けるための様々なライブラリやパターンが存在します。
Provider
Providerは、Flutterのための依存性注入とステート管理を簡単にするためのツールキットです。StateNotifierを使用することで、状態の変更をリッスンし、変更があった際にUIを再構築します。
非常にシンプルで直感的であるため、多くのFlutter開発者にとって最初の選択肢となっています。
Riverpod
Riverpodは、Providerの作者によって作られた新しいステート管理ライブラリです。
Providerのいくつかの制約を克服するように設計されており、より柔軟で強力です。
グローバルアクセスのおかげでどこからでもステートにアクセスすることができます。これによりディープリンクの実装や非同期処理を行いやすくしています。
また、明確な型を持っているため型のミスマッチや不要なキャストを防ぐことができます。
私が参画しているプロジェクトでは、Riverpodのこの柔軟性と型安全性を活かして、アプリ内でのデータの流れを効率的に、かつエラーの少ない形で管理しています。
特に大規模なアプリケーションでのステート管理の複雑さを、Riverpodを使用することで大幅にシンプルにしています。
Flutterでのデータの取り扱い
データベース接続
Firebase
Googleが提供するクラウドベースのNoSQLデータベースで、リアルタイム同期や認証機能などをサポートしています。Flutterとの統合も容易で、多くのアプリで好まれて使用されています。
SQLite
軽量なリレーショナルデータベースで、デバイスのローカルストレージ上で動作します。大規模なデータ操作は不得意ですが、シンプルなデータの保存・取得には適しています。
私の参画しているプロジェクトではこちらを使用してオフラインでもアプリが使用できるようデータを保存する機能を実装しました。データベースの操作方法が直感的であるため非常に便利に感じています。
RESTful APIとの連携
多くのモダンアプリケーションは、サーバー上のデータベースやサービスとのやり取りのためにRESTful APIを使用します。Flutterは、HTTPリクエストを行うためのhttpパッケージを提供しており、これを利用してAPIとの通信が可能です。
オフラインファーストの考え方
オフラインファーストは、アプリがオフライン時にもスムーズに動作するようにデザインされているという考え方です。ネットワーク接続が不安定な場所や接続が断たれた際も、アプリはローカルのデータを使用して動作します。再び接続が確立されたら、変更点をサーバーに同期することができます。
テストとデバッグ
アプリケーション開発の中で、品質を担保するためのテストと、問題点の特定と修正を行うためのデバッグは非常に重要です。Flutterもこの点において、開発者に多くの支援を提供しています。
Flutterのテスト戦略
Flutterはアプリケーションの品質を確保するための包括的なテストフレームワークを提供しています。テストはコードの変更に対する信頼性を高め、バグを早期に検出することを可能にしてくれます。
私が参画しているプロジェクトでは実際にflutter_testパッケージを導入しています。
ユニットテスト, Widgetテスト, 統合テストの違い
ユニットテスト
これは最も小さな単位のテストで、関数やメソッド、クラスなどの単一のコードユニットを対象にします。このテストは、コードの特定の部分が期待通りに動作することを確認するために使用されます。
Widgetテスト
Flutter特有のテストで、WidgetのUIの動作と相互作用を検証します。ユーザーインターフェースの各部分が正しく動作するかを確認するためのもので、UIの単体テストとも言えます。
統合テスト
アプリケーション全体の動作をテストするもので、ユーザーの実際の操作をシミュレートして、異なる部分や機能が適切に連携して動作することを確認します。
デバッグツール
Flutterは、アプリケーションの品質を確保し、デバッグプロセスを効率的に行うための多くのツールと機能を提供しています。これらのツールは、開発者がアプリケーションの動作を理解し、問題点を特定しやすくするためのものです。
DevTools
FlutterのDevToolsは、パフォーマンス監視、Widgetのインスペクション、そしてソースコードの可視化などの一連のツールを提供します。
メモリの使用状況やフレームレートなどのパフォーマンスメトリクスを可視化します。
Widgetの構造を可視化し、特定のWidgetのプロパティを確認することができます。
Hot Reload & Hot Restart
これらの機能を利用することで、ソースコードの変更を即座にアプリに反映させることができます。デバッグのサイクルが大幅に短縮され、開発の効率が向上します。
エラーメッセージ
Flutterは、問題が発生した場合に詳細なエラーメッセージを表示します。
エラーの原因を迅速に特定し、対応することができます。
Widgetインスペクタ
これは、FlutterアプリケーションのWidget階層を視覚的に探索できるツールです。これにより、UIの問題や配置の誤りなどを特定することが容易になります。
Flutter開発のコツ
まだまだ日本での開発事例が少ないように感じるFlutterですが、海外のFlutterコミュニティは非常に活発です。
この節では、私の経験をもとにFlutter開発のコツを伝えていければと思います。
コミュニティでのサポートや情報収集の方法
実装で詰まったり、不具合が発生した際にはStack Overflowをよく見ていました。
日本での事例が少ないためQiitaやZenよりもStack Overflowの方が文献が多い印象です。
Githubも大いに役立ちます。積極的に使用してみてください。
おすすめの学習リソース
やはりおすすめは公式ドキュメントです。入門ガイドからチュートリアル、APIドキュメントなど丁寧に解説してくれています。
またアニメーションの実装時にはFlutter YouTubeチャンネルをよく見ていました。英語のものが多いですがコードを投影してくれてる動画もあるので非常に役立ちました。
プラグインやパッケージの探し方
Flutterでは数多くのプラグインが存在するため１から機能を作成する必要のないパターンが多く存在します。pub.devというFlutter公式のパッケージリポジトリを使用することで数千のプラグインから実装にあったものを探すことができます。
カテゴリーやランキング、人気度でも検索可能です。
Flutterを採用している大手企業
Flutterは多くの開発者や企業にこの魅力を認識されるようになってきました。その結果、多くの大手企業もこのフレームワークを積極的に取り入れています。
Flutterを採用している代表的な大手企業の一部をご紹介します。
日本企業４選
- TOYOTA（自動車メーカー）
- CyberAgent（IT企業）
- DeNA（IT企業）
- MIXI（SNS企業）
海外企業４選
- Googl（IT企業：アメリカ）
- BMW（自動車メーカー：ドイツ）
- Alibaba（電子商取引企業：中国）
- ByteDance（IT企業：中国）
Flutterの未来
Flutterのロードマップと今後の展望
Googleが公式に発表しているFlutterのロードマップ（2022）を見ると、持続的な成長と、さらなる機能の拡充が予定されています。特にパフォーマンスの最適化や新しいウィジェットの追加、さらなるプラットフォーム対応が注目されています。
Flutter for Webやデスクトップへの適応
Flutterの魅力は、そのクロスプラットフォーム能力にありますが、その適応範囲はさらに広がっています。Flutter for Webを使えば、Webアプリケーションの開発も同じコードベースで行うことが可能となり、デスクトップ向けのアプリケーションも開発の視野に入ってきました。
スマートフォンだけではなく、ひとり１台PCを保有するようになった現代においてデスクトップ向けアプリの需要はさらに高まっている印象があります。
私も少しずつ学習を進めていきたい分野の一つです。
Flutterについての紹介は以上となります。
まだまだエンジニアとしての経験が浅く知らない言語もたくさんありますが、今まで使用した言語の中で一番開発が楽しいと感じたのがFlutterでした。
今回こちらの記事で魅力をまとめてみて改めて認識したツールもあります。
知れば知るほど次の開発が楽しみになるのがエンジニアの仕事をしているメリットかも知れないですね。
Flutterに少しでも興味を持っていただけたら幸いです。
