#dartlang_jp のFlutterハンズオンで再度Flutterを触ってみた

この前の日曜日にFlutterのハンズオンに参加してきました。

dartisans-jp.connpass.com

  • 講師
    • ntaooさん 読み方は特に決めてないそうですが、「えぬたおさん」でいいとのこと。
  • 資料

docs.google.com

docs.google.com

dart自体から実際のFlutterアプリまで、かなり盛りだくさんな内容でした。

以前に一度公式のtutorialはこなしていたのですが、プラスαで学べる事が多かったのでまとめておきます。

講義

Dart

FlutterからDartを知ったのですが、Dart自体はもともとWeb用の言語だったそうです。2004年頃からWeb以外もターゲットにした汎用プログラミング言語としての道を歩み始めたとのこと。
また、開発時はJIT, リリース時はAOTコンパイルを実行する点、言語レベルで非同期処理を実装している点などが特徴みたいです。
全体的な文法はJavaとJSにそっくりです。言語自体は意図的に面白くなくしており、簡単に習得できるように設計されています。

Flutter

Flutter自体は前回も触れましたが、復習もかねて。

  • 特徴
  • 構造
    • coreとなるEngine部分はC++で書かれている
    • documentもしっかりある
  • パッケージ管理システム
    • Pub package manager
    • https://pub.dartlang.org/
    • ユニバーサルに使えるコアパッケージと各プラットフォーム向けに使えるパッケージがある

参照

ハンズオン

作ったもの

f:id:t-miliya612:20180520220251p:plain

hacker news(https://news.ycombinator.com/)のニュースリーダーです。実際に外部APIを叩いています。
f:id:t-miliya612:20180519190553j:plain

ニュースをタップすると、WebViewが開いてページを表示できます。
f:id:t-miliya612:20180519190644j:plain

また、ニュースをお気に入りに登録できます。お気に入りリストも見ることが出来ます。
f:id:t-miliya612:20180519190618j:plain

さらに、Pull(Swipe?)-To-Rrefreshも実装。ネイティブをやっていく自信がなくなってきますね。
f:id:t-miliya612:20180519191216j:plain

ゆっくり調べながらやっていたら当日終わらなくて、後日改めてやり直したコードがこちら。コメント多めです。

github.com

学び

ほんとに何から何までWidgetであること

特にDividerなんて顕著ですが、marginから何から全部がWidgetとして扱われます。HTML書いている時にpaddingにするかmarginにするか悩むことが多かったのですが、Flutterだとその辺何も考えずに決められそうでいい感じです。

ネイティブのUIの充実

アイコンとPullToRefreshで実感しました。今回はボタンなどは使用していないためあんまりMaterial感を体験できていないのですが、ネイティブで書くより互換性を気にせずもりもり書けるのはちょっと爽快感があります。 ちなみに、AndroidminSdkVersionはデフォルトで16に設定されていました。環境によって違うのでしょうか。
また、アイコンですが、Iconsクラス配下に大量に用意されています。以下のサイトに一覧があるのですが、数えてみたら 985個もありました。笑う。

docs.flutter.io

つらかったところ

書いていくうちに、インデントとカッコの対応が崩れた瞬間の絶望感。。他の言語よりも崩れたときの復帰がしんどい印象でした。Android StudioのDartAnalysisを使えばかなりわかりやすくなりますが、これがなかったらと思うと……恐ろしいですね。
f:id:t-miliya612:20180519190824p:plain

正直初めは何やってるのか全く分かりませんでしたが、2回目をやり直したらだいぶ目が慣れてきました。 marginからdividerから何までWidgetであるということを忘れなければ大丈夫だと思います。
また、やっぱりネイティブと比べてしまうと不安定なところはあります。例えば、ListViewを勢い良くスクロールすると……たまに落ちたします。この辺のキャパシティというか、何も考えずに書いてもある程度いい感じにやってくれるのは、もしかするとネイティブの方なのかなぁ、などと。

lintについて

ハンズオンでは参考程度くらいでしか触れられていないのですが、Flutter(Dart)のlintについてです。
デフォルトでは、override時のアノテーション(@override)は添えていなくてもエラーが出ないようになっています。ただ、慣れていないうちにタイポ等もろもろつらかったので、試しに追加してみました。手順は以下の通りです。

  1. projectのrootにanalysis_options.dartを作成する。
    • これ、もとは.analysis_optionsだったみたいなのですが、変更加えるそうなので前者がおすすめだそうです。
  2. 中身をこんな感じに書く。
analyzer:
  strong-mode: true
  errors:
    todo: ignore
  exclude:
    - flutter/**
    - lib/api/*.dart

linter:
  rules:
    - avoid_empty_else
    - cancel_subscriptions
    - close_sinks
    - annotate_overrides

以上です。簡単ですが、忘れず設定しておきたいです。
詳しくは、以下のリンクを参照してください。

www.dartlang.org

Linter for Dart

感想

Flutter公式のtutorialにプラスした部分もあり、かなり実用的なハンズオンでした。このアプリ普通に使えますね……。そして、何故か忘れがちですがこれがAndroidiOS両方で動いているというの、改めて恐ろしいです。
ただ、やっぱりそろそろファイル1枚に書いていくスタイルが厳しくなってくる分量だと思うので、まずはこれを分割していくところが次のステップでしょうか。
また、今後はチャットアプリなど外部のAPIにPOSTしていくようなものも触ってみたいです。次は話題のFirebaseですかね……!
講師のntaooさん、主催の方々、ありがとうございました!


追記

講師のntaooさんよりコメントいただきました!
コーディングの際に、プラグインのおかげで強力なalt+enterの補完が使えるそうです。詳しくは以下のリンクとこの記事のコメント欄を参照してください。

flutter.io