時代に翻弄されるエンジニアのブログ

ゲームプログラマをやっています。仕事やゲームや趣味に関してつらつら書きたいと思います。

爆速アプリ開発 Flutter を試してみた

こんにちは、今週は皆さんどのようにお過ごしですか?僕は爆速でアプリを開発したいと常に考えていました(笑)

いきなりですが、アプリ開発で一番遅いと思う動作はなんですか?






僕はコンパイルです。コンパイルがとにかく遅いです。そんな問題をことごとく解決してくれるフレームワークを発見しました。

それは Flutter といいます。

Flutterの説明

Flutter はモバイルアプリ開発に使えるフレームワークです。現在 beta 版が公開されています。言語はDart。開発効率化や多言語化などいろいろな機能がありますが一番魅力的なのはホットリロード機能です。

ホットリロード機能とは、なんとコンパイルすることなくアプリをテストできる機能です。では、そんな Flutter のインストールからAndroid アプリ開発を通して実際に ホットリロード機能を使用するところまで紹介致します。

インストール手順

公式サイト
Easy and fast SDK for beautiful apps - Flutter

Macのインストール手順
Flutter Setup for macOS - Flutter

  1. まず以下のコマンドでフレームワークをインストールします。
git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
  1. インストールが終わったら、Flutterの起動に必要な環境の検査を行います。
flutter doctor

以下の画像のように "x" がついた項目が不足している要素となります。
f:id:tkymx83:20180304140729p:plain

  1. Android Studio の設定

今回はAndroid開発にAndroid Studio を使用します。
※ Flutter は Android Studio 3.0 以上を対象にしています。

起動したら、プラグインとして Flutter と Dart言語を入れます。
※ Androud Studio -> Prefferences -> Plugins で以下のように検索してインストールしてください。

f:id:tkymx83:20180304141151p:plain
f:id:tkymx83:20180304142807p:plain

これで準備は完了です。

アプリの新規作成方法

プラグインをいれて、Android Studio を再起動するとメニューに Flutter の新規プロジェクトの作成ボタンが追加されています。

f:id:tkymx83:20180304141346p:plain

新規作成ボタンを押し、ウィザードを進めていくとプロジェクトが生成されます。

f:id:tkymx83:20180304141500p:plain

一旦この状態で下記画像の実行ボタンを押すとデバイスが設定されていればアプリが起動します。

f:id:tkymx83:20180304141550p:plain

ホットリロード の凄さ

ホットリロードはアプリを起動した状態で、ソースコードを変更し、保存もしくはホットロードボタン(画像中央の雷のマーク⚡)を押すことでアプリ側に変更が反映されます。

f:id:tkymx83:20180304142530p:plain

保存は command + S でも大丈夫です。保存された瞬間にホットリロードが開始され、コンソールに以下のように表示されたら成功となります。

f:id:tkymx83:20180304142653p:plain

まとめ

コンパイルが必要にならない時代がついに来たと感動しています。気なるのはこの機能が大規模開発にも使えるかどうかです。ソースの一括置き換えをしてみましたが、4秒ほどで反映されたため、使用できないシーンはあまりないのかもしれません。しかし、変更量やソースコード量が多くなった時に何秒この動作にかかるのかが気になる点になります。