なぜ Flutter だとスピーディーに開発できるのか？

アプリ開発の要は「品質」と「スピード」。

最近では、移り変わりの激しいユーザーニーズに対応する為に、開発スピードを重視する傾向にあります。

そこで、Google が開発したフレームワークが「Flutter」です。

【Flutter 公式ドキュメント】
https://flutter.dev/docs

Flutter に採用されている Dart ってどんなプログラミング言語？

Flutter は、プログラミング言語に「Dart」を採用しています。

Dart は、もともと JavaScript の代替として Google が開発した言語。

そのため、JavaScript や Java と共通点が多く、プログラミング経験者はもちろん、初心者でも扱いやすい仕様になっています。

Dart を使う4つのメリット

Dart には、以下のようなメリットがあります。

これら4つのメリットが、Flutter のスピーディーなアプリ開発を支えているのです。

それでは、ひとつずつ見ていきましょう！

事前コンパイラ（AOT）

Dart は、高速なネイティブコードを生成する「事前コンパイラ (Ahead Of Time)」を採用しています。

そのため、Flutter は動作が高速になるだけでなく、幅広いプラットフォームでネイティブに対応することが可能です。

同時開発で開発時間を短縮

つまり、「iOS」「Android」「Web」の開発を同時に行えるので、開発時間を大幅に削減できるのです。

実際、Flutter と Flutter for Web の間で、最大70％のコードが再利用可能となっています。

実行時コンパイラ（JIT）

Dart は「実行時コンパイラ(Just In Time) 」も採用しています。

実は、前述の AOT コンパイルを行うと、開発サイクルが大幅に遅くなります。

というのも、プログラムを変更してから結果を確認するまで、全てをネイティブコードに変換しなければならないからです。

高速な開発スタイルとワークフローを実現

この問題を解決してくれるのが、JIT コンパイルの「ホットリロード」です。

通常 1 秒以内にコードをリロードして、プログラムを実行し続けることができます。

実行時に、解析やコンパイルのために一時停止することもありません。

統一されたレイアウト

Flutter には、HTML や XML のようなレイアウト言語は不要です。

以下で示すように、「レイアウト要素」と「UI 要素」の両方をウィジェットで表現できるからです。

1Center( // レイアウト要素
2  child: Text('Sample') 　// UI要素
3)

コンポーネントが 1 つの言語で 1 か所にまとめられているため、単一コードで柔軟な開発ができるのです。

静的型付け言語

Dart は、「動的型付け」と「静的型付け」の両方に対応しています。

1. 動的型付け言語：データ型の宣言は不要
2. 静的型付け言語：データ型の宣言が必要

静的型付けのメリット

一般的には、静的型付けを利用したコードを使う機会の方が多いでしょう。

静的型付けを使うと、以下のようなメリットがあります。

1. コンパイルエラーでバグを見つけやすい
2. ドキュメントが参照しやすい

デバッグが容易な静的型付けで Dart を書けば、スピーディーに開発する事ができます。

サンプルコード

今回は、弊社を紹介するサンプルコードを作成しました。

シンプルなビューであれば、１時間足らずで作成できますよ！

以下からサンプルコードが参照できます。

【DartPad】
https://dartpad.dev/257b234f0038b4b3d08212a9ae887eb4

中央上部にある Run ボタンをクリックして、実行結果を確認してみてください。

デザインをカスタマイズ

Flutter では、ThemeData を利用して、アプリ全体でテーマを統一する事ができます。

ベースのテーマを継承しつつカスタマイズ可能なので、短いコードで好みのデザインを表現できますよ。

1final ThemeData myTheme = ThemeData(
2  primarySwatch: MaterialColor(4280361249, {
3    50: Color(0xfff2f2f2),
4    100: Color(0xffe6e6e6),
5    200: Color(0xffcccccc),
6    300: Color(0xffb3b3b3),
7    400: Color(0xff999999),
8    500: Color(0xff808080),
9    600: Color(0xff666666),
10    700: Color(0xff4d4d4d),
11    800: Color(0xff333333),
12    900: Color(0xff191919)
13  }),
14  brightness: Brightness.dark,
15  primaryColor: Color(0xff212121),
16  accentColor: Color(0xff64ffda),
17);

MaterialApp の theme にmyTheme を渡し、レイアウト要素を表現する ListView 内にそれぞれの UI を配置しています。

1MaterialApp(
2  title: 'Flutter Demo',
3  debugShowCheckedModeBanner: false,
4  theme: myTheme,
5  home: Scaffold(
6    appBar: AppBar(
7      title: Text('会社紹介'),
8    ),
9    body: ListView(
10      children: [
11        Image.network(
12          'https://rightcode.co.jp/wp-content/uploads/2019/02/540-540_5.jpg',
13          width: 600,
14          height: 240,
15          fit: BoxFit.cover,
16        ),
17        titleSection,
18        buttonSection,
19        textSection,
20      ],
21    ),
22  ),
23);

さいごに

今回は「開発スピード」に焦点を当て、Flutter をご紹介しました。

Flutter を利用することで、 スピーディーに iOS とAndroid のネイティブアプリが開発できるようになります。

本記事が Flutter アプリ開発のお役に立てれば幸いです！

こちらの記事もオススメ！