Chapter 05

チュートリアル編2:Flutterの概要

kazutxt
kazutxt
2022.02.24に更新

このチャプターでは、Flutterの概要について解説します。

全体像を把握するために、どんなことができるのか、どういう要素があるのか、どんな仕組みがあるのかを効率よく重要な要素に絞って解説します。

Flutterってそもそも何?

Flutterとは、2017年にGoogleが発表したオープンソースのモバイルアプリケーションのフレームワークです。
リリース当初はAndroidとiOSが対象だったのですが、2021年にWebにも正式対応しました。
これにより、Flutterを用いることで、Android/iOS/Webの3種類を全く同じコードで開発することができ、非常に高い生産性を実現できるものになっています。

2022年現在は、Windows/Mac/Linuxのデスクトップアプリや組み込みの開発を行うこともできます。

もっと詳しく知りたい方へ

Flutterって何が嬉しいの?

Flutterのメリットはいくつもありますが、代表的なものには以下のようなものがあります。

Flutterはフリーなオープンソースです。 そのため、全てのソースは公開されており、開発者以外からも機能追加やバグフィックスなどのプルリクエストなどを出すことができ、常に改善が行われています。

Flutterはクロスプラットフォームなフレームワークです。 そのため、Android/iOS/Webなどのアプリごとに開発や試験をする必要はなく、Flutterだけで完結させることができます。
一方でネイティブのアプリと遜色ないほど、最新の機能や細かいチューニングをすることもできます。

FlutterはGoogleが開発を行っています。 そのため、非常に洗礼された使い勝手や性能、生産性、汎用性を実現しています。加えてGoogleが提供しているGoogleCloudPlatform(GCP)特に、mBaaSであるFirebaseとの相性が特によく、プラグインと数行で連携ができます。

もっと詳しく知りたい方へ

Flutterって使われているの?

Flutterのコミュニティは非常にアクティブで、2022/1時点で、Githubのスター数が134k(apache/httpdが2.9k,React-Nativeが100k)。ほぼ毎日コミットが行われ、1週間で100以上のコミットが安定して行われています。

そして、2021年5月の時点で、過去30日でリリースされたGooglePlayの1/8のアプリがFlutterでできていることをGoogleが発表し、その比率は日々上がっているようです。

また、Google社の製品自体もFlutter化が進み、2021/9にGooglePayをFlutterでリライトしたことで、パフォーマンスの向上とソースコードが統一され35%のコードが縮小でき、技術的負債も90%減ったとの発表がありました。

https://github.com/flutter/flutter

Flutterってどんな言語で書くの?

Flutterは独自のDartという言語で記述します。
Dartは、Flutterで利用されるプログラム言語です。
マルチパラダイムの言語で、近代的なプログラミング言語がもつ機能を備えています。
Dartは、Android/iOS/Webのそれぞれの言語にコンパイルでき、それぞれの環境で動作します。

もっと詳しく知りたい方へ

Flutterって開発どうやるの?

flutterSDKとIDE(VSCodeなど)をインストールしたあとに、下記の作りたい環境に合わせてツールをインストールします。

  • Android:AndroidStudio
  • iOS:XCode
  • Web:Chrome

最後に、Flutter doctorというコマンドを実行すると状況が確認できます。

cmd.sh
% flutter doctor
[] Flutter (Channel stable, 2.0.3, on Mac OS X 10.15.7 19H114 darwin-x64, locale ja-JP)
[] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[] Xcode - develop for iOS and macOS
[] Chrome - develop for the web
[] Android Studio (version 4.0)
[] VS Code (version 1.54.3)
[] Connected device (2 available)
もっと詳しく知りたい方へ

Flutterってどうやって画面をつくるの?

VSCodeのコマンドパレットから「Flutter New Application Project」をするとプログラムの雛形が出来上がります。

buildメソッドの中に、必要な要素(Widget)を入れて画面を作成します。
Widgetには、RowやColumnや、ボタン、リンク、アニメーション、スワイプ、カメラ起動など様々なものがあります。

main.dart

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text("初めてのテキスト"),
    );
  }

引用:https://www.flutter-study.dev/widgets/about-widget/

もっと詳しく知りたい方へ

Flutterって動作確認(テスト/デバッグ)どうやるの?

VSCodeのコマンドパレットから「Flutter New Application Project」をして新しいプロジェクトを作った後で、「実行 > デバッグ」をすると、エミュレータが起動し、動作確認ができます。
USBなどで実機をつないで確認することもでき、デバッグ時には解析ツールを使うことで、内部動作やトレースしたりすることもできます。
単体/Widgetの試験やエミュレータを使ったインテグレーションテストも可能です。


単体試験でブレイクポイントで止めた時の例


インテグレーションテストの例

上記のようなテストケース以外にも、デバッグモードで起動して自由に操作することももちろん可能です。

もっと詳しく知りたい方へ

Flutterってリリースどうやるの?

出来上がったアプリは、以下のコマンドでそれぞれの資材にビルドすることができます。

  • flutter build appbundle(Android用)
  • flutter build iOS(iOS用)
  • flutter build Web(Web用)

その後、GooglePlay,AppStore,Webサーバの準備をして、資材をアップロードすることで、リリースをすることができます。
(申請方法の詳細や条件、アプリへの署名などの詳細を知りたい方は、下記のもっと知りたい方へのページをご参照ください)

もっと詳しく知りたい方へ

Flutterってスマホの機能とか使えるの?

パッケージを使って簡単にできます。
カメラ、位置情報、TTS(Text To Speech)/STT(Speech To Text)など様々な機能が利用できます。
初回時のユーザへの利用許諾なども自動で行われ、Android/iOSの動作の違いを意識する必要もありません。

snipet.dart
imagePicker.getImage(source: ImageSource.camera);

もっと詳しく知りたい方へ

Flutterってクラウド連携とかできるの?

パッケージを使って簡単にできます。Firebaseの場合はより簡単にできます。
FirebaseはmBaaSとよばれるモバイルバックエンド用のサーバサービスです。
モバイルで使われる認証やDBなどの裏側の処理を簡単に実装することができます。

ユーザ認証、DB、ストレージ、機械学習/画像認識、PUSH通知など様々な機能が利用できます。


連携のイメージ

引用:https://www.flutter-study.dev/firebase/about-firebase

ユーザ認証を例に上げると、以下の1行ずつで実現できます。

snipet1.dart
// 登録
final User user = (await FirebaseAuth.instance.createUserWithEmailAndPassword(
  email: email, password: password)).user;

// 認証
User user = (await FirebaseAuth.instance.signInWithEmailAndPassword(
  email: email,password: password)).user;

もっと詳しく知りたい方へ

Flutterって細かい部分までいじれるの?

Flutter/Widgetの内部構造を理解することで、ライフサイクルやWidgetツリー、メタプログラミングやリフレクションをつかい、機能や性能を突き詰めることができます。

最新の機能もベータチャンネルで先行リリースされることが多くすぐに使えるようになります。
また、日本で発売されていないデュアルディスプレイのスマートフォンにFlutterが正式対応するなど、追従速度そのものも非常に早いといえます。

もっと詳しく知りたい方へ

Flutterってどんなことを勉強すればいいの?

本書のチュートリアル/初級編から学習を始めると良いと思います。
FlutterやDartを触ったことが無い方でも、初級編まで終えると基本が理解できるようになっています。

また、Flutterには、エンジニアのスキルロードマップがあります。

いくつかのパートから構成されていますが、Flutterのなかから、得意なものや聞いたことがあるものをきっかけに勉強していくのもよいと思います。

もっと詳しく知りたい方へ

Flutterって多言語対応とかできるの?

下記のような言語設定ファイルを事前に準備することにより、スマホの言語設定に合わせたLocalizationを適応することができます。

app_jp.arb
{
  "@@locale": "ja",
  "hello": "ようこそ {name}",
  "login": "ログイン",
  "info": "情報",
  "allow": "許可"
}

もっと詳しく知りたい方へ

Flutterって広告つけれるの?

admobで広告をつけることができます。
初期化をして、AdBannerを使うだけで広告を表示できます。
(事前にadmobのアカウントの作成やアプリとの紐付けの必要はあります)

main.dart
void main() {
  //初期化
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class _MyHomePageState extends State<MyHomePage> {
 //中略
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        AdBanner(size: AdSize.largeBanner),
      ),
}

もっと詳しく知りたい方へ

FlutterってCI/CDとかどうするの?

(GithubActionやAWSのCodePipelineなどでもよいですが)CodemagicというMobile向けのCI/CDサービスを利用するのがおすすめです。
CodemagicはFlutterの専門のCI/CDとして始まったため、かなりFlutterのCI/CDが扱いやすくなっています。

https://codemagic.io/start/
もっと詳しく知りたい方へ

Flutterってノーコード/ローコードとかないの?

FlutterFlowやFlutterStudioを使うことで、WidgetをGUIで並べるだけでソースコードを生成するサービスがあります。
このサービスだけで開発を完遂するのは難しいかもしれませんが、画面周りや最初のプロトタイプイメージを作るのには役に立ちます。

https://flutterflow.io/

https://flutterstudio.app/
もっと詳しく知りたい方へ

Flutterってデザインパターンあるの?

アプリの性質に合わせていくつかのパターンがあります。

・Streamを使ったBLoC(Business Logic Component)
・Provider/Riverpodを使った状態管理
・Hooksを使った状態管理

もっと詳しく知りたい方へ

Flutterってゲームは作れないの?

FLAMEという2Dゲームのエンジンが正式にサポートされました。

https://flame-engine.org/

どんなサイトを見ながら作るといいの?

公式サイトやギャラリーサイトを見ながらイメージを掴むと良いと思います。

もっと詳しく知りたい方へ