Flutterハンズオン 3

Transcript

1. Flutterハンズオン 3 2024/08/27 社内勉強会 えばた あや
2. 今日話すこと 1. Dartの基礎構文 後半 - クラス関連 - 非同期 - 例外 - ★練習問題
3. 1. Dartの基礎構文 後半
4. Dartの基礎構文 手元で試しながら学んでいきましょう〜！ DartPad https://dartpad.dev/ ご自身で入れたエディタでもOK！
5. Dartの基礎構文 引き続き、こちらのページに載っている構文を見ていきます！ https://dart.dev/language
6. クラス - プロパティとコンストラクタを持つクラス class Spacecraft { String name; DateTime? launchDate; Spacecraft(this.name, this.launchDate); }
7. クラス - getがついているプロパティは読み込み専用のgetter class Spacecraft { String name; DateTime? launchDate; int? get launchYear => launchDate?.year; // ... }
8. クラス - コンストラクタに名前をつけることができる class Spacecraft { // ... Spacecraft(this.name, this.launchDate); Spacecraft.unlaunched(String name) : this(name, null); }
9. クラス - 以下のようにプロパティにアクセスをする class Spacecraft { // ... void describe() { print('Spacecraft: $name'); var launchDate = this.launchDate; // ... } }
10. クラス - 以下のようにクラスを呼び出す var voyager = Spacecraft('Voyager I', DateTime(1977, 9, 5)); voyager.describe(); var voyager3 = Spacecraft.unlaunched('Voyager III'); voyager3.describe();
11. 列挙型 - シンプルなenumを定義する場合 enum PlanetType { terrestrial, gas, ice }
12. 列挙型 - 列挙型を拡張することもできる enum Planet { mercury(planetType: PlanetType.terrestrial), venus(planetType: PlanetType.terrestrial), // コンストラクタ const Planet({required this.planetType}); final PlanetType planetType; }
13. 列挙型 - 定数コンストラクタ（const constructor） - コンストラクタにconstをつける - クラスが不変のオブジェクトを生成する場合、これらの オブジェクトをコンパイル時定数にすることができる enum Planet { // ... const Planet({required this.planetType}); // ... }
14. 列挙型 - getterやメソッドも定義できる ※ isGiantはgetterで読み取り専用 enum Planet { // ... bool get isGiant => planetType == PlanetType.gas || planetType == PlanetType.ice; }
15. 列挙型 - 列挙型を使用する場合 final yourPlanet = Planet.mercury; if (!yourPlanet.isGiant) { print('Your planet is not a "giant planet".'); }
16. 継承 - Dartは単一継承 -> 一つしか指定できない class Orbiter extends Spacecraft { double altitude; Orbiter(super.name, DateTime super.launchDate, this.altitude); }
17. ミックスイン - 複数指定可能で、コードを再利用する時に使用 mixin Piloted { int astronauts = 1; void describeCrew() { print('Number of astronauts: $astronauts'); } } class PilotedCraft extends Spacecraft with Piloted {···}
18. インターフェース interface class Vehicle { void moveForward(int meters) { // ... } }
19. インターフェース - implementsで作成したインターフェースを指定 class MockVehicle implements Vehicle { @override void moveForward(int meters) { // ... } }
20. 抽象クラス - 具体的な実装を持っていないクラス - 抽象クラスはimplements、extendsのどちらかでも呼び出せる abstract class Vehicle { void moveForward(int meters); }
21. 非同期 - Futureクラスを使用する - thenでコールバックを書いていく（JavaScriptっぽい！） -> delayedメソッドの処理が終わったらthenで書かれた処理をする const oneSecond = Duration(seconds: 1); Future<void> printWithDelay(String message) { return Future.delayed(oneSecond).then((_) { print(message); }); }
22. 非同期 - async/awaitで書くこともできる（これもJavaScriptっぽい！） - コールバック地獄を回避できる const oneSecond = Duration(seconds: 1); Future<void> printWithDelay(String message) async { await Future.delayed(oneSecond); print(message); }
23. 例外 - throwで例外を投げることができる if (astronauts == 0) { throw StateError('No astronauts.'); }
24. 例外 - try-catchで例外を処理する try { // 何か例外をthrowする処理 } on IOException catch (e) { print('Could not describe object: $e'); }
25. 練習問題1 - 以下を満たすクラスを作成しましょう 1. Orderクラスのプロパティにはアイテムと個数を持つ 2. orderNameというgetterを用意する 3. addメソッドを用意して、個数をインクリメントする void main() { var order = Order('ラーメン', 1); print(order.orderName); // 「ラーメンが1個」を出力 order.add(); print(order.orderName); // 「ラーメンが2個」を出力 }
26. 練習問題1　解答例 class Order { String item; int total; String? get orderName => '$itemが$total個'; Order(this.item, this.total); void add() { total++; } }
27. 練習問題2 - このソースコードはエラーで落ちます - エラーで落ちないように修正しましょう class Coffee { String _temperature; void heat() { _temperature = 'hot'; } void chill() { _temperature = 'iced'; } String serve() => _temperature + ' coffee'; }
28. 練習問題2　解答例 class Coffee { late String _temperature; void heat() { _temperature = 'hot'; } void chill() { _temperature = 'iced'; } String serve() => _temperature + ' coffee'; }
29. 練習問題2　実行例 void main() { var coffee = Coffee(); // late変数なので_temperatureの初期化がないとエラーになる coffee.heat(); print(coffee.serve()); }
30. 練習問題3 1. 非同期を使用し、ユーザを取得するfindUser関数を作成する 1. findUserは3秒かかることを擬似的に表現するために3秒待つ 2. その後、適当な名前を返却する 2. main関数でfindUserを呼び出し、出力する
31. 練習問題3 解答例 Future<String> findUser() async { await Future.delayed(Duration(seconds: 3)); return 'あや'; } void main() { findUser().then((user) => print(user)); }
32. まとめ - クラス関連、非同期、例外についての書き方を学んだ - 次回はFlutterに入ります！