Dart/FlutterハンズオンでNews閲覧アプリ作ってきた

5月13日にヒカリエで開催されたDart/Flutter入門者向けハンズオンに参加してきました。

イベントの概要は以下の通りです。

・講義: DartとFlutterについて概要を掴む
・開発: シンプルなニュース閲覧アプリを実際に作成する

講義のまとめと開発を実際にしてみた個人的な感想をまとめてみました。

講義

Dart

2011年にGoogle社によって開発されたWeb向けのオブジェクト指向プログラミング言語。
JavaScriptの代替え目的で開発されているため書き口はJavaScriptやJavaと似ているがJavaScriptができないことやパフォーマンスに注力して開発が進められている。

クライアントサイドとサーバサイドの両方で使用することができるので、Web・アプリ・サーバーを全部Dartで記述できる。
それどころかまだ公にはされていないがデスクトップアプリもDartでかけるような構想が描かれているらしい。

動的型付けと静的型付け論争が起こる昨今、Dartでは動的片付けと静的型付けを変数ごとに任意選択する事ができる共存の道を提供している。

コンパイラに工夫があり、開発中は中間コードをコンパイルするJIT コンパイル*、リリースでは事前に行われるネィティブコードに最適化してコンパイルするAOTコンパイル*を使い分けている。

*1 JIT コンパイル

*2 AOTコンパイル

Dartの構文については公式サイトが手厚く情報を載せてくれている。

Language Tour | Dart

Flutter

クロスプラットフォームでアプリを開発するための開発フレームワーク。
UIはGPUを利用して描画する独自のWigetシステムを採用している。
WigetシステムはReactにインスパイアされており、UIは木構造的に組まれ、stateで状態管理を行う。
ホットリロード機能と差分ビルドで快適に開発ができる。

ネィティブの機能を使うには公式から提供されているプラグインを使用する。

GitHub - flutter/plugins: Plugins for Flutter, including FlutterFire, maintained by the Flutter team

開発環境: IntelliJ, Visual Code Studio, Android Studio
パッケージ管理システム: Pub package manager

開発

素晴らしくまとめられた資料をもとに各自ドキュメントを読み進めながらもくもくしました。

docs.google.com

学習できる内容は下記の５点です。

Flutterプロジェクトの作成
基本的なレイアウトシステム
基本的なインタラクション
HTTP通信
プラグイン、パッケージの利用

そして完成形はこちらです。

今日の成果物！FlutterでNews閲覧アプリ作った∩^ω^∩
レイアウト組むところからプラグインを導入してHTTP通信するところまでできたので楽しかった！ pic.twitter.com/HSawxq37i0
— Yuri@b-monエンジニア🥊 (@yuri_htt) 2018年5月13日

こちらの資料の作成及び本日の講師の方はこちら

twitter.com

DartやFlutterに興味がある方は是非フォローしておいた方が良いと思います。

感想

業務ではReact Nativeを開発しているので大筋では類似点がいくつもあり、勘所を掴んでサクサク進めることができました。

個人的にUIの組み方はだいぶ異なる印象を受けました。
React NativeではJSXによるViewの構造がタグ見たままなので把握がしやすいなと思う反面、そのタグ自体がイケてないよね。という人もいました。
私は構造の把握とスタイルが分離できる点に可読性の高さを感じています。

魅力的だったのはAndroid StudioでAndroid端末だけでなくiOSシミュレーターも起動できるので、Xcodeを起動せずにAndroid Studioだけで両端末確認できるのが画面の領域的にもパソコンの処理能力的にも便利だなという点です。

現在React Nativeでけっこう大きな規模のアプリを開発していて、やはりプロパティを大量に受け取る画面、Viewが大量にrender()される画面では動作がもっさりすることが見受けられます。

もし、JavaScriptよりもDartでは堅牢にコードを書くことができ、描画のパフォーマンスもあきらかに良いとしたら、Flutterでの書き換えを検討してもよいのかもしれません。