[🔰初心者向け🔰]Flutter/dartで学ぶプログラミング ~型安全性って？~

ぽちぽちのつどいGW Advent(?) Calendar5日目の記事です！

今日は気分をかえて初心に帰ろうと思います。
私もプログラミングに触れて勉強し始めてもう4年以上が経過しているらしいので初心に帰ってプログラミングについて勉強しなおそう！ということでGPT先生を相棒に今回は勉強します

そもそも型ってなんだよ😡

GPT先生：
型はデータの種類

• 「こんにちは」は文字列（String）
• 123は整数（int）
• trueとかfalseは真偽値（bool）

なるほど文字列で宣言した変数には文字列しか入らないらし整数なら整数ということらしい。

dart

String name='tolto';
int age=20;
bool isActiv=false;

// ⭕️ :name='user1';
// ❌ :name=123;

// ⭕️ :age=12;
// ❌ :age='user1';

型安全性って？

今回はログイン認証を例に考えてみます。
Flutterアプリでログイン画面があると仮定した場合を想定して今回はユーザーが入力するのを

• メールアドレス（String）
• パスワード（String）

に絞ります。
このとき、Flutter（Dart）でこんな風に変数を用意

dart

String email = '[e-mail]';
String password = 'mypassword123';

型安全性がない場合どうなるのか
もし「型」がめちゃくちゃでもOKだと

dart

email = 12345;  // メールアドレスに数字を入れる

こうなってしまうとメールアドレスは本来「文字」でできてるから数字だけじゃログインできるわけがないということが発生してしまいます。
ここで登場するのが**「型安全性」**です。
Dartは型安全な言語だからこういう間違いをちゃんとエラーにしてくれます。
では実際のコードを見てみましょう。

main.dart

void login(String email, String password) {
  print('ログイン中: $email');
}

void main() {
  login('[e-mail]', 'pass1234');  // OK！
  login(12345, true); // これはエラー
}

このように間違った「型」のデータを使おうとしたらDartが教えてくれます。
わーお便利〜〜〜！

ここまで読んで「え？これだけかよ全然実用面での想像つかねえよ」と思ってる人もいると思うのでもうすこし実用的な部分へ掘り下げてみます。

型安安全性を保ったメソッド

以下のようにdartでは引数に型を宣言しなくてもエラーを出さずにコンパイルできます。

dart

void login(mail, pass) {
  print('メール: $mail, パス: $pass');
}

GPT先生：
【でも、それって型安全なの？】
結論から言うと…
この書き方だと「型安全ではない」！
なぜかというと、Dartは**型を書かないと、dynamic（何でもありの型）**として扱っちゃうから。

だそうです。
つまり

dart

void login(dynamic mail, dynamic pass) { ... }

と同じ意味になってしまっているので

dart

login(12345, true);  // 数字と真偽値

これでもdartは怒らないのでコンパイルできてしまう。
これだとユーザーからのデータがメチャクチャでも事前に弾くことができないので意図した動作をしなくなってしまう危険性がある訳です。
なので関数の宣言をする時は

dart

void login(String email, String password) {
  print('ログイン中: $email');
}

こうすることで型が書かれた安全なコードになります。

GPT先生：
だから「ちゃんと型を書く」ことが、安全でバグの少ないアプリを作るコツ

なるほど...確かに重要だ！となった訳ですが
ここまで読んで「俺にはまだまだもの足りないぜ・・・!もっと実用的なのを知りたいんだ！」っていう人向けに応用編を書きます。

実用的な型安全①：応用編

Flutterには偉大なRemiさんがいます。そうですRiverodやproviderを作ったあの人です。
そのRemiさんが作ったのがFreezedでこれを使えば安全かつ楽に補助クラスを生成して再利用できます。また今回の趣旨とは外れますがFreezedを使えば楽にJSONのエンコードやデコードもできるので詳しく調べてみてください。

インストール

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  freezed: ^2.5.2
  freezed_annotation: ^2.4.4

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0
  json_serializable: ^6.5.4
  build_runner: ^2.4.13

コーディング

今回は補助クラスとしてLoginEntityを作成します。

このコードはJSONのエンコード/デコードはできません

entity.dart

import 'package:freezed_annotation/freezed_annotation.dart';

part 'login_entity.freezed.dart';

@freezed
class LoginEntity with _$LoginEntity {
  const factory LoginEntity({
    required String email,
    required String password,
  }) = _LoginEntity;
}

これをコピーしたらエラーだらけだと思いますが焦らないで！次に以下のコマンドをターミナルで実行してください。

flutter pub run build_runner build --delete-conflicting-outputs 

そしたら同じ階層にlogin_entity.freezed.dartが生成されたことが確認できるかと思います。
ここまできたら関数を作成します。さっきまでと同様にログインの関数です。

dart

Future<String> login(LoginEntity entity) async {
  try {
    // ここに認証処理があると想定（API通信など）
    print('ログイン中: ${entity.email}');
    return "ok";
  } catch (e) {
    return "エラー";
  }
}

関数ないではentity.emailやentity.passwordで呼び出すことでメールやパスワードを呼び出せます。
勘がいい人は気づいているかと思いますが引数の宣言がLoginEntityだけになりました。
呼び出すときは以下のようになる訳です。

dart

login(
    LoginEntity(email: '[e-mail]', password: '123456'),
);

これがもし文字列ではなかった場合ここでエラーがでるので型が安全といえます。
またLoginEntityは別のファイルなのでグローバルに管理ができて他のファイルでもお案じ型を再利用できる訳です。

すっげ〜〜って思いますよね。しかも再利用できるなんて環境にも優しい()とか思ってるかなと思います。
最後に超実用編として実際にAPI通信する程でRiverpod,Dio,Freezedで簡単に通信をする方法を紹介します。

実用的な型安全②：超実用編

ここまでわかれば多分初心者ではなく中級レベルに一歩足を踏み入れたといっても過言ではないのですが型安全かつ実用的なコードを紹介します。
LoginEntityをAPI通信に対応させるため｀FromJson`を使用します。
そうですさっきちょっと出てきたJSONのエンコード/デコードに使う便りなやつです。
API通信は基本的にJSONでやり取りをするために使用します。

login_entity.dart

import 'package:freezed_annotation/freezed_annotation.dart';

part 'login_entity.freezed.dart';
part 'login_entity.g.dart';

@freezed
class LoginEntity with _$LoginEntity {
  const factory LoginEntity({
    required String email,
    required String password,
  }) = _LoginEntity;

  factory LoginEntity.fromJson(Map<String, dynamic> json) => _$LoginEntityFromJson(json);
}

これで楽にJSONのエンコード/デコードをやりつつ型も安全に使えます。

Dioを使ってログインAPI呼び出し

Flutterでは通常API通信にはDioというパッケージを使用します。
このパッケージを使えばエラーハンドリングを簡単に行うことができるようになります。

https://pub.dev/packages/dio

dio.dart

import 'package:dio/dio.dart';

class Endpoint {
  final Dio _dio;
  Endpoint(this._dio);

  Future<String> login(LoginEntity entity) async {
    try {
      final response = await _dio.post(
        '/login',
        data: entity.toJson(),
      );
      return response.data['token'] as String;
    } catch (e) {
      throw Exception('ログイン失敗: $e');
    }
  }
}

GPT先生：
entity.toJson() で型安全にJSON変換。
→ 型が合っていないと、ここで自動的にエラーになる！

とのことでこうすることで安全にログイン処理が可能になります。

Riverpod 2.0:自動生成を使って状態管理

Flutterでのプロジェクトの多くはRiverpodで状態管理を行います。状態管理についてはまた今度気が向けばアドベントカレンダーでやります。
まずdioを提供するproviderを定義

final dioProvider = Provider((ref) => Dio(BaseOptions(baseUrl: 'https://api.example.com')));

次にEndpointを提供

final endpointProvider = Provider((ref) => Endpoint(ref.watch(dioProvider)));

最後にログインをするためのproviderを定義すれば完了です

login_controller.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';

part 'login_controller.g.dart';

@riverpod
class LoginController extends _$LoginController {
  @override
  FutureOr<void> build() {}

  Future<void> login(LoginEntity entity) async {
    state = const AsyncLoading();
    try {
      final endpoint = ref.read(endpointProvider);
      final result = await endpoint.login(entity);
      state = AsyncData(result);
    } catch (e, st) {
      state = AsyncError(e, st);
    }
  }
}

使い方

dart

ref.read(loginControllerProvider.notifier).login(
  LoginEntity(email: '[e-mail]', password: '123456'),
);

このコードをログインボタンの押下時などに使えばログインができるようになります。

まとめ

「型があることで安全」かつ「開発者のミスが減る」ということがわかったと思います。
実用的な型安全②については一部趣旨とは逸れている気がしたので少し適当な部分があるとおもいますがまぁこの記事をGPTくんに投げて説明してもらってください(笑)

読む前より少し型安全について詳しくなっていれば幸いです。

ぽちぽちのつどいGW Advent(?) Calendar ５日目は型安全性について勉強しました！