Yuri’s Tech Note

技術系アウトプット

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

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


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

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

 

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

講義

Dart

2011年にGoogle社によって開発されたWeb向けのオブジェクト指向プログラミング言語
JavaScriptの代替え目的で開発されているため書き口はJavaScriptJavaと似ているが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

 

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

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

 

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

 

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

twitter.com

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

 

感想

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

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

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

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

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

*1:JITコンパイラ(=Just In Time):
アプリケーション実行時のタイミングでコンパイル
実行速度が早く、プラットフォームに依存しないプログラムの配布が可能。

*2:AOTコンパイラ(=AheadOfTime):

アプリケーション実行前に事前にコンパイル

 OSやハードウェアの仕様を正確に把握できるため、ネイティブの機械語を生成することができ、その生成したネィティブコードをプロセッサにあわせて最適化することができる。