Flutterハンズオン 2

Transcript

1. Flutterハンズオン 2 2024/08/20 社内勉強会 えばた あや
2. 今日話すこと 1. Dartとは？ 2. Dartの基礎構文 前半 - 変数 - 制御フロー文 - 関数 - ★練習問題
3. 1. Dartとは？
4. Dartとは - Googleによって開発された言語 - あらゆるプラットフォームで高速なアプリケーションを開発するために 最適化された言語 - オブジェクト指向、クラスベース、ガベージコレクションを備えた、 Cスタイルの構文を持つ - ネイティブコードまたはJavaScriptにコンパイルできる
5. Dartとは - JavaScriptの代替となることを目的に作られた - 型は必須だけど、型推論 -> 型安全 - nullを許可しない限り、値はnullにできない -> null安全
6. 2. Dartの基礎構文 前半
7. Dartの基礎構文 手元で試しながら学んでいきましょう〜！ DartPad https://dartpad.dev/ ご自身で入れたエディタでもOK！
8. Dartの基礎構文 こちらのページに載っている構文を見ていきます！ https://dart.dev/language
9. Hello World - main関数から実行される - print関数を使う void main() { print('Hello, World!'); }
10. 変数 - 変数はvarで宣言できる - この場合、型推論になる - シングルクォーテーションが標準 var name = 'Voyager I'; var year = 1977; var antennaDiameter = 3.7;
11. 変数 - ListやMapは感覚的にかける var flybyObjects = ['Jupiter', 'Saturn', 'Uranus', 'Neptune']; var image = { 'tags': ['saturn'], 'url': '//path/to/saturn.jpg' };
12. 変数 - 型を明示的に書くこともできる - Object型は型の制限がない場合に使用 String name = 'Bob'; Object name = 'Bob';
13. 変数 - 型の後ろに?を追加するとnullableになる String? name; print(name); // nullが出力される String name = null; // エラーになる
14. 変数 - intで宣言をした後に数値を入れないと怒られる - non-nullableのため int num; num = 2; print(num);
15. late - 遅延初期化 - 変数の宣言後に初期化される late String description; void main() { description = 'Feijoada!'; // ここでdescriptionを初期化 print(description); }
16. late - 宣言時に初期値を書くことができる - 変数が使用されない場合は初期化されない late String temperature = readThermometer();
17. final - 変数を変更する予定がない場合 - 実行時に値を確定する final name = 'Bob'; // Without a type annotation final String nickname = 'Bobby';
18. 定数 - constを使用する - 値の変更はできない - コンパイル時に値を確定する const bar = 1000000; // Unit of pressure (dynes/cm2) const double atm = 1.01325 * bar; // Standard atmosphere
19. if if (year >= 2001) { print('21st century'); } else if (year >= 1901) { print('20th century'); }
20. for for (var i = 1; i <= 10; i++) { print(i); } var collections = [1, 2, 3]; for (final collection in collections) { print(collection); }
21. forEach var collection = [1, 2, 3]; collection.forEach((val) => print(val)); // 1 2 3 // 以下は省略した書き方 collection.forEach(print);
22. while while (year < 2016) { year += 1; }
23. 練習問題1 import 'dart:math'; void main() { // 1. Stringのresult変数を定義する // 以下はtrue/falseをランダムに生成するメソッド var random = Random().nextBool(); // 2. もしrandom変数がtrueならresult変数に「結果はtrueです」を // 入れ、falseなら「結果はfalseです」を入れる // 3. result変数を出力する }
24. 練習問題1　解答例 import 'dart:math'; void main() { String result; var random = Random().nextBool(); if (random) { result = '結果はtrueです'; } else { result = '結果はfalseです'; } print(result); }
25. 関数 - 戻り値の型は関数名の頭にて指定できる - 戻り値の型は省略可能だが、公式は指定することを勧めている int fibonacci(int n) { if (n == 0 || n == 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } var result = fibonacci(20);
26. 関数の短縮構文 - 処理が1行しかない関数の場合は書き方を省略できる bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;
27. 名前付き引数 - {}を使って指定することで、関数呼び出し時に引数名を指定できる - 引数に何も指定しない場合はオプショナルになるので?が必要 void enableFlags({bool? bold, bool? hidden}) {...} enableFlags(bold: true, hidden: false); enableFlags(bold: true); // hiddenはnullになる
28. 名前付き引数 - 引数にデフォルト値を指定できる - その場合は何かしら値が入るのでnon-nullableになる void enableFlags({bool bold = false, bool hidden = false}) { … } enableFlags(bold: true); // hiddenにはfalseが入る
29. 名前付き引数 - requiredをつけると関数呼び出し時に名前付き引数での呼び出しが必須 になる void enableFlags( {required bool bold, required bool hidden} ) {...} enableFlags(bold: true, hidden: false); enableFlags(bold: true); // hiddenがないので怒られる
30. 名前付き引数 - requiredと?を使用することで名前付き引数が必須でnullを許可できる void enableFlags( {required bool? bold, required bool? hidden} ) {...} enableFlags(bold: null, hidden: null);
31. Optional positional parameters - []で囲むとオプショナルな引数になる String say(String from, String msg, [String? device]) { var result = '$from says $msg'; if (device != null) { result = '$result with a $device'; } return result; } say('Bob', 'Howdy'); // 「Bob says Howdy」が返却される say('Bob', 'Howdy', 'smoke signal'); // 「Bob says Howdy with a smoke signal」が返却される
32. 第一級オブジェクト - 関数を別の関数のパラメータとして渡すことができる void printElement(int element) { print(element); } var list = [1, 2, 3]; list.forEach(printElement); // 以下と同じ意味になる list.forEach((val) => printElement(val));
33. 無名関数 - 以下でいうと、mapの中身が無名関数 const list = ['apples', 'bananas', 'oranges']; var uppercaseList = list.map((item) { return item.toUpperCase(); }).toList();
34. 無名関数 - 処理が1つしかない場合は、=>でreturnを省略できる ※ 文字列に変数やメソッドを埋め込む際は$を使用する var uppercaseList = list .map((item) => item.toUpperCase()) .toList(); uppercaseList.forEach( (item) => print('$item: ${item.length}') );
35. 複数の値を返す関数 - カッコで指定する (String, int) foo() { return ('something', 42); }
36. 練習問題2 - 関数を使って、lateが遅延初期化していることを確認する String getOrder() { // 1. 「注文が入りました」と出力する // 2. 「ラーメン」を返却する } void main() { // 3. late変数orderを定義、初期値はgetOrder関数を指定 // 4. order変数を出力する }
37. 練習問題2　解答例 - 関数を使って、lateが遅延初期化していることを確認する String getOrder() { print('注文が入りました'); return 'ラーメン'; } void main() { late var order = getOrder(); print(order); }
38. 練習問題2　遅延初期化の確認 - 関数を使って、lateが遅延初期化していることを確認する void main() { // 1. lateを削除して実行 -> 出力されるものを確認 late var order = getOrder(); // 2. 以下をコメントアウトして実行 -> 出力されるものを確認 print(order); // 3. order変数にまたlateをつけて実行 -> 出力されるものを確認 }
39. 練習問題3 // 1. 以下の条件を持つ、intを返却するadd関数を作成する // - 名前付き引数 // - intの引数first、関数を呼び出す際に指定必須 // - intの引数second、nullable // - intの引数third、デフォルト値が10 // - first、second、thirdを足した数を返却する
40. 練習問題3 void main() { // 2. 以下がエラーなく実行できることを確認する print(add(first: 1, second: 2, third: 3)); print(add(first: 1, second: 2)); print(add(first: 1)); }
41. 練習問題3　解答例 int add({required int first, int? second, int third = 10}) { return first + (second != null ? second : 0) + third; }
42. 練習問題3　解答例 void main() { print(add(first: 1, second: 2, third: 3)); // 6 print(add(first: 1, second: 2)); // 13 print(add(first: 1)); // 11 }
43. 練習問題4 // 1. 以下を満たす関数を作成する void main() { ramen('硬め', '濃いめ', '多め'); // 「麺: 硬め, 味: 濃いめ, 油: 多め」が出力される ramen(); // 「麺: 普通, 味: 普通, 油: 普通」が出力される }
44. 練習問題4　解答例 void ramen([ String noodle = '普通', String taste = '普通', String oil = '普通' ]) { print('麺: $noodle, 味: $taste, 油: $oil')); }
45. 練習問題5 void main() { // 1. 好きな数値を羅列したList型のlist定数を定義する // 2. 無名関数を用いてlistの各値に10を掛けた値を出力する }
46. 練習問題5　解答例1 - 10を掛けた値を毎回出力する例 void main() { const list = [1, 2, 3]; list.forEach((item) => print(item * 10)); }
47. 練習問題5　解答例2 - 10を掛けたListを作成し、最後に出力をする例 void main() { const list = [1, 2, 3]; var addedList = list.map((item) => item * 10).toList(); print(addedList); }
48. まとめ - Dartの変数や制御フロー文は直感的でわかりやすい - 関数の書き方が複数あり少し複雑