Flutterを半日くらいやって良さげだと思ったこと

# Flutter?

https://flutter.io/

flutterという単語は旗のはためきや蝶々がひらひらする様子の意味ですが
google翻訳では「ときめきます」と訳されます。

<img width="480" alt="スクリーンショット 2018-03-02 14.38.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/a6be733d-b3ab-9a05-dee6-33f14523ac6a.png">

Flutter SDKを使用してDartでコードを書けば、
ネイティブコードのiOS/Androidビルドが吐かれるそうです。
2018/2/27にベータ版が公開になりました。

React「！」
Xamarin「！」
Monaca「！」
cordova「！」
Titanum「！」
Air「！」
Hexe「！」



# Dart?

- Googleによって開発されたJavaScriptの上位互換のような言語。
- ダート走行など未舗装や汚いことを表すDirtとは一切関係ない。的当てのダーツ(Darts)の方。
- 2011年にできたが、2012年あたりからTypeScriptと比較されて席を奪われてしまう(私感)

2018/2/22にDart 2発表。

Announcing Dart 2: Optimized for Client-Side Development
https://medium.com/dartlang/announcing-dart-2-80ba01f43b6

# 半日位やってみて良さげだと思った5選

## 1. IDEとしてAndroid Studioが使える

<img width="640" alt="スクリーンショット 2018-03-01 22.36.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/8a6ce0d3-4791-e61a-65e7-eb960be5087b.png">


Android Studio 3.0にFlutter Pluginをいれ、PCにiPhoneを接続すると..!
なんとAndroid Studio上でiPhoneを認識します。
そしてXCode buildが走ります。
個人的にはWindowsでiTunesが使えるようになったときくらい衝撃でした。

普段からAndroid開発をしている人にとってはスムーズに開発することが出来ます。
JetBrain製品がそのまま使える贅沢!

## 2. Material Designが標準装備

2017年にiOSでMaterial Designが使用できる[Material-components-iOS](https://material.io/components/ios/)がでましたが、
FlutterではAndroid/iOSの両方が1つのコードで動作します。

サンプルアプリで以下のようなコードがあるのですが、
`Colors.blue`が`#0000FF`ではなくMaterial Designの青色`#2196F3`になっています。
今までアプリ標準のカラーパレットはほとんど使用する機会なかったのですが、
"標準"のデザインで見栄えの良いアプリが作れそうです。

<img width="480" alt="スクリーンショット 2018-03-02 21.05.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/808d64fc-dd02-0fa7-9671-75f640c5db70.png">




## 3. Hot Reload機能

公式の推しに書いてあるのですが
WebアプリやゲームエンジンUnityのようにすぐ実行結果が反映されるのは便利です。
Androidではネイティブアプリのビルド自体も速くなっていますが、
Flutterでは再起動なしで即座に反映されます。

＝
余談ですが自分のiPhoneではWebSocketExceptionになりHot Reload使えませんでした。
似たようなissueも出ているようです。
「Connect via network」設定で直る人もいるとのこと。
https://github.com/flutter/flutter/issues/13832

##  4. セットアップのサポート

ネイティブ型のマルチプラットフォームの宿命だと思いますが
flutterでもXCode, Android SDK, Ruby (cocoapodでつかう), Python(Six Moduleでつかう)
など環境構築項目が多いです。

ただしflutterでは`flutter doctor`コマンドで次に行うアクションが表示されるので
詰まらずに環境構築できました。

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (on Mac OS X 10.13.3 17D47, locale ja-JP, channel beta)
[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ✗ Missing Xcode dependency: Python module "six".
      Install via 'pip install six' or 'sudo easy_install six'.
[✓] Android Studio (version 3.0)
[!] VS Code (version 1.19.3)
[✓] Connected devices
```
`！`や`✗`で表示されている箇所を修正すれば、いずれ正しく動作します。

## 5. (googleの)プラグインによる拡張

Flutterは先述のMaterial Designの他にもFirebaseなどgoogle製プラグインが充実しており
他のマルチプラットフォームよりも容易にネイティブ連携が行なえます。
今後もgoogle系のプラグインが増えれば
『便利なプラグインができる→開発者が集まる→便利なプラグインが・・』
という良いループに入るかも..

# 個人的に注目すること

まっとうに使うのであればButtonなどのWidgetを組み合わせてアプリ開発をおこなうべきですが、
個人的には2D(ゲーム)フレームワークとしてのFlutterに注目したいです。
数年前はcocos2d-xがぶいぶい言わせていた領域ですが、
C++の敷居が高い、Android NDK必須など初心者向けとはいえない状況になっていました。
今は2DでもモバイルゲームはUnity一択のような状況ですが、
プラグインが充実してパフォーマンスが向上していけばFlutterでゲーム作る人も増える..かも..?

とりあえずflutterでゲームを作っている人のコードを読んでいます。

https://github.com/vlidholt/game

<img width="640" alt="スクリーンショット 2018-03-03 12.26.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/0beee079-7309-c3ed-8c9d-1d675b2e0cba.png">

# 感想

最近iOSもMaterial Designに寄せたいと思うことがあり、個人的にFlutterはじめようと思いました。
マルチプラットフォームは出ては消えのサイクルが早いですがFlutter信用したいです。

＃ なぜKotlinじゃなくてDartなんだろうとか思ってません。