UdacityのBuild Native Mobile Apps with Flutterコースを受けてみる その1

チュートリアルを一通り終えたので、おすすめされていたUdacityの Flutter コース(無料)を受けてみています。英語なので必死にメモを取りつつやっているので、ここに残しておこうと思います。

今回はイントロダクションから最初の演習まで。

チュートリアル flutter.dev

Udacityのコース www.udacity.com

1. Introduction

• FlutterはGoogleのモバイルUIフレームワークで、ひとつのコードでiOS/Androidアプリの高速なビルドができる
• Flutterはオープンソース
• Flutterは以下のものを含む
  • モダンなリアクティブフレームワーク
  • 高速な2Dレンダリングエンジン
  • 開発ツール
  • 既製のWidgets
• 今回のコースの焦点は以下の通り
  • iOS/Androidで高品質なインタラクティブアプリを構築する
  • 構造化と設計
  • 効率的なFlutterのツールの使い方
• 学べること
  • 既製または独自のUI Widgets
  • アプリのステータス管理(データの取扱やアニメーション含む)
  • マテリアルデザイン、拡張可能なデザイン
  • ユーザインタラクションとジェスチャー
  • パッケージ(HTTP通信やJSONなどのライブラリ)

2.Why Flutter?

• ユーザはスムーズなアニメーションや良いパフォーマンスを期待しているが、それだけでは成功するアプリとしては不十分
• ユーザに愛されるアプリになるためには、品質やパフォーマンスを妥協せず、素早い新機能実装が求められる
• Flutterは一つのコードで、各プラットフォームのバイナリを出力するので、開発効率とパフォーマンス両方を得られる

3.Why Dart?

• Dartは簡潔、型付け、オブジェクト指向の言語
• Swift, C#, Java, JavaScriptをやっていたら親しみやすいかも
• Dartがモバイル開発に適している理由としては、まずアクティブな開発環境や本番環境でパフォーマンスが良いこと
  • JITと事前コンパイルをサポートしている
  • JITコンパイルでは、直接起動中のデバイスにリコンパイルされるので、ホットリロードが実現されている。それにより、高速な開発サイクルが可能になっている
  • 事前コンパイルは、ARMコードに直接コンパイルされるため、高速なスタートアップや予想通りのパフォーマンスを発揮できる。これはリリースビルドに適している
  • また、Dartは静的型付け、堅牢な型システム(※)のため、コンパイル時にバグを見つけやすい
    • ※ sound type system の意味がわからなかったのでググったところ、この場合のsound は頑丈な、や堅牢な、という意味合いのようす。
    • dartのドキュメント https://dart.dev/guides/language/type-system#what-is-soundness
    • 同じ質問がstackoverflowにもあった https://stackoverflow.com/questions/49360792/what-is-a-sound-programming-language

4.Set Up Your Environment

• https://flutter.io/setup ここに従って環境をセットアップする
• AndroidStudioを使う場合は3.1.xのバージョンにすること
• エミュレータのセットアップはこちら https://developer.android.com/studio/run/managing-avds
• もしわからない場合はPixel2と最新のSDKを入れるようにする
• エラーが起こったときは、Github issues、StackOverflowで #Flutter タグを参照する(もしくはissueを立てたりする)
• 参考のリンク先
  • Documentation: https://docs.flutter.io/
  • Github: https://github.com/flutter/flutter
  • StackOverflow: https://stackoverflow.com/questions/tagged/flutter
  • Gitter: https://gitter.im/flutter/flutter

5.Build a Flutter App

• 正しくセットアップできたかの確認も兼ねてサンプルアプリ(HelloRectangle)をビルドする
• AndroidStudioの Create a new Flutter project で作るか、コマンドラインから flutter create hello_rectangle でも作れる
• 様々なファイルが自動生成されるが、これは各プラットフォームごとにディレクトリが作られていることにも注意する
• 色々気になるけど、ひとまず lib/main.dart を見ればOK
• ここからFlutterアプリが起動される
• https://github.com/flutter/udacity-course/blob/master/course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart ここのコードをmain.dart(自動生成されたコードは消しておく)にコピペ
• エミュレータor実機でrunする

6. Quiz: Build the Hello Rectangle App(演習問題)

• ゴール
  • AndroidStudioがセットアップされることの確認
  • Flutterプラグインがインストールされていることの確認
  • アプリの実行
• ステップ
  1. アプリ作成(コマンドラインorAndroidStudioのメニューから)
  2. lib/main.dart の内容を削除する
  3. https://github.com/flutter/udacity-course/blob/master/course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart ここからHelloRectangleアプリのコードを lib/main.dart にコピペする
  4. 実機もしくはエミュレータでビルドし、アプリを起動する
• 確認すること
  • タイトルがあるか
  • AppBarにタイトルがあるか
  • 四角形は画面中央に表示されているか
  • テキストが中央に表示されているか

次は 7.Flutter's Reactive Framework から