Chapter 02

Flutterアプリ開発の全体像

今回は、 Flutter におけるアプリ開発の全体像を見ていきましょう。

アプリ開発の方法は色々ありますが、その中でFlutter はどんな位置付けなのか、どんな特徴やメリットがあるのかを解説していきます。

Flutter大学のYoutubeでは下記の内容です。

スマホアプリ開発におけるFlutterの位置づけ

それぞれのOSのアプリを開発するために提供されているプログラミング言語を使用する場合、AppleのiOS開発のための「Swift」、GoogleのAndroid開発のための「Kotlin」というプログラミング言語を用いて開発(ネイティブ開発)をします。

当然、SwiftでAndroidアプリを開発することやKotlinでiOSアプリを開発することはできません。

対して、Flutterは一つのソースコードでiOS・Androidのアプリを開発することができる「クロスプラットフォーム」(マルチプラットフォーム)に位置づけられるGoogleが開発したフレームワークです。

フレームワークとは開発を楽に行えるように用意されたプログラムなどのひな形のことで、Flutterは主にアプリ開発におけるUI構築のためのフレームワークです。

クロスプラットフォームのフレームワークはFlutter以外にも様々なものがあり、Facebookが提供しているReactNativeやMicrosoftが提供しているXamarinなどが代表的なものとして挙げられます。

その中でもFlutterは「ホットリロード」による高速な開発、「Widget」によるシンプルかつ表現力の高いUI構築、同じくGoogleが開発した言語Dartによる「高いパフォーマンス」が特徴のフレームワークです。

Flutter開発のメリット

Flutter開発を行うと、他のクロスプラットフォーム開発技術と比較して、どうしてより効率的に高いパフォーマンスのアプリが開発できるのでしょうか?Flutter開発の特徴やメリットについて詳しく見ていきましょう。

①ホットリロードによる高速な開発環境

Flutterには、ホットリロードという機能があります。ホットリロードを使うことによりコードを更新するたびにアプリに即座に反映できるるため、高速で開発が行えます。

ネイティブ開発であれば、コードを反映するためには基本的に再ビルドする必要があり、さらにアプリの規模が大きくなればなるほどビルドには時間がかかります。

Flutterの場合はシミュレータ(PC内の仮想のデバイス)や実機のスマホに一度ビルドすれば、その後はホットロードを使うことができるのでコードを更新するたびにビルドをする必要がありません。

②独自のUIコンポーネント「Widget」

Flutterは「Widget」というUIパーツを呼び出してUIを実装します。

単なる見た目のパーツだけではなく、レイアウトや文字・画像などの配置、画面遷移や状態管理など全てをWidgetで実装します。

Widgetは自由度が高く種類が豊富なのに加え、カスタマイズしやすいことからライブラリも豊富なため、さまざまなUIを表現することができます。
WidgetはFlutterのアプリ開発において重要な要素となるため、次の項目で詳しく説明します。

③言語は「Dart」を使用

Flutterでは、「Dart」という言語を使用します。DartもまたGoogleが開発した言語であり、Flutterのフレームワーク自体もDartで作られています。

他のクロスプラットフォームはReactNativeならJavascript(Typescript)やXamarinならC#といった組み合わせですが、フレームワーク、言語ともに同じ提供元はFlutterのみです。

Dart自体はJavaによく似た言語であるため、Android開発者の方や、Javaに触れたことのある方には特に馴染みやすい言語となっています。

下記は、Dartで書かれたサンプルプログラムです。

void main() {
  for (var i = 0; i < 4; i++) {
    print('hello $i');
  }
}

Widget とは

WidgetはFlutterで使うUIコンポーネントのことを言います。

先程の項目にも書いたように単なる見た目だけではなく、レイアウトや文字・画像などの配置、画面遷移や状態管理などをこのWidgetで実装するため、アプリを作る際はこのWidgetをいかに使いこなせるかがとても重要になってきます。

Widgetはツリー状で構成されるため、Widgetの中に更にWidgetを重ねて組み合わせることによりUIを構築していきます。

※「Flutter」を押すとFlutterのコード、「Result」を押すとアプリの画面がプレビューできます。

こちらは上部の青色のバーにタイトル、真ん中に2行のテキストがあるだけのシンプルなサンプルになります。

コード内でScaffold、CenterCoumnTextと書かれているのがWidgetです。

これらWidgetはアプリ内で次の役割をしています。

  • 自分で作成した画面全体のWidget(MyApp)
  • Android系の見た目や挙動で統一するためのWidget(MaterialApp)
  • アプリのタイトル欄と背景を用意(Scaffold)
  • 要素を真ん中寄せにする(Center)
  • 要素を縦に並べる(Column)
  • 文字を表示する(Text)

これらのWidgetはMyApp -> MaterialApp-> Scaffold -> Center -> Column -> Textという順番で重なっています。この重なりをWidgetツリーと呼びます。

WidgetツリーはAndroid StudioのFlutter Outlineで確認することができます。

以下は、記事内のサンプルアプリのWidgetツリーです。

Flutterではこのようにそれぞれの機能をもったWidgetを重ねてアプリを開発していきます。

まとめ

今回の記事ではアプリ開発におけるFlutterの立ち位置や、メリット、Flutterの特徴であるWidgetについて触れましたが、Flutterでアプリを開発する全体像が何となくつかめたでしょうか?

次の記事では基本的なWidgetの使い方を解説していきます。

参考文献

https://www.youtube.com/watch?v=-G7nW26N7_4