[🔰初心者向け🔰]Flutter/dartで学ぶプログラミング ~nullを許すとは~

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

今日も昨日に続いて初心者向けの内容にします。
アプリ開発をしていく上で避けては通れない道null私も始めたての頃「nullってなんだ？？？？」「マーベルにそんな奴いたけど？」とか思ってた訳ですが今回は改めてnullについて調べてみました。
今回もGPT先生に教えてもらいながら書きます。

みんなnullって言うけど何者？

とりあえずnullをGoogle翻訳で翻訳してみた。

空白という意味なんですね。なんとなく見えてきました。

GPT先生：
null＝何も入ってない状態。

おーなるほどGoogle翻訳と同じような結果ですね。
実際のコード上だとこうなります。

dart

String? userName = null;

GPT先生：
これは「名前を入れる場所はあるけど、今はまだ入ってないよ」ってこと。

nullにつてなんとなく見えてきました。ここで一つ疑問が出てきます。
「このコードStringの後ろに?がついてる？？？」ってなりますよねってことで次はこの？についてです。

nullを許すってどういうこと？

ここまで読んでるとなんとなくnullを許すについての意味がわかってきてるかなと思います。
じゃぁ今回も例によってログイン認証を例に確認して行きます。
アプリにログインしていない時アプリ側では「今のところログインしてる人はいません」と処理されています。この時user=nullとなります。
もしこの時userNameのnullを許していないとエラーの原因になり落ちてしまう可能性があります。

dart

String userName = null; // ❌ エラー

GPT先生
これは「絶対に名前が入ってるはず！」って決めてるのに、
実際には入ってない → エラーになる！

「じゃぁどすればいいんだ😡」って怒る気持ちを抑えてもらってここで登場するのがnullを許すです。そうですさっきからちらちら出てきてる?です。

dart

String? userName = null; // OK

そうこれが最初に出てきた?の正体でありnullを許したコードです。

実際のログインで考える。

実際にログインを実装する時はFlutterだとFirebase AuthやSupabase authが多いと思います。
それぞれのFlutterパッケージにはUserクラスが用意されています。それらを使えばログインしているかしていないかを瞬時に判断できます。

dart

/// Firebase
User? user = FirebaseAuth.instance.currentUser;
/// Supabase
User? user = Supabase.instance.client.auth.currentUser;

出てきました?これはuserがまだログインしていない可能性を考慮した?です。
ログイン前

dart

user==null

ログイン後

dart

user!=null

==は同じ!=は~~ではないの意味です。
この場合もし?が抜けているとコンパイルエラーになって動かないです。
これはFlutter SDKの返り値がnullを許しているので許していない?が抜けているコードだと怒られるという訳です。

dart

User user = FirebaseAuth.instance.currentUser; // ❌ コンパイルエラー

実装をしていくとなると以下のようになります。

dart

if (user == null) {
  // ログインしてない → ログイン画面に遷移
} else {
  // ログイン済み → ホーム画面へ
}

GTP先生
・User? と書くのは「ログインしてない時もある」ことを前提にしてるから
・Authを使う場合は、nullになる可能性をちゃんと扱うことが重要！
・nullチェックを忘れるとアプリがクラッシュすることもあるので要注意！

うーん🧐🧐🧐なるほど。アプリ開発で必要な感じがしてきました。

Flutter(UI実装)でのnull許容

実際にFlutterをやってるUI側でもnullを許す必要が出てきます。
例えばゲストモードを実装している場合ゲストのユーザーはuserNameが存在しないのでnull許容でゲストを表示する必要があると思います。

dart

String? userName;
Text(userName ?? 'ゲスト');

GPT先生:
?? は「なければこれ」

しかし実際に開発するとそれだけではないことがわかります。ユーザーが選択しているのかいないのかやログインしているかいないかで表示を変更する必要があると思います。その時使用するのが:と?です。三角演算子とか言われたりします。

dart

User? user;

user == null
  ? ElevatedButton(
      onPressed: () {
        // ログイン画面へ遷移
      },
      child: Text('ログイン'),
    )
  : Text('ログイン中 ${user.name}');

GPT先生：
? は「もし〜なら」の分岐（三項演算子）
user を null許容(User?)にしてるからこそ、状態に応じたUIが出せる

UIもnullかそうでないかで分けて変更することができることがわかったと思います。
これを使えばロード中か否かを判別してロード中ならクルクルを表示して完了したらコンテンツを表示するようにすれば良いことがわかるかと思います。

しかし実際の開発現場ではnullを許すという場面はログインだけではありません。
最後に私が実際に使用した例を見てみましょう。

実際に使ってみよう!

この時はSNS系のアプリを開発しており写真の投稿機能を実装した時をみてみます。
SNSではinstagramのような絶対に写真を求められる場合とXやGoogleMapの評価みたいに写真があってもなくても良い場合の２パターンが考えられると思いますがどちらのアプリを作成するにしても写真が選択されいるかいないかを判別する必要があると思います。

dart

import 'dart:io';
/*----------------*/
File? selectedImage = null;　/// fileが選択されてるかnullで判断

この後imagePicker(端末内の画像にアクセス)で選択したファイルはXfileなのでFileに変換する処理を書きます。
この時もpickedFileはnullの可能性があるので?でnullを許すようにします。

dart

import 'package:image_picker/image_picker.dart';
/*----------------*/
Future<void> album() async {
  final picker = ImagePicker();
  final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
  if (pickedFile != null) {
    setState(() {
      selectedImage = File(pickedFile.path);
    });
  }
}

UI実装を見てみます。UI側では先ほどの:と?の三角演算子を使ってnullかどうかを判定して画像選択ボタンと画像を切り替えています。
画像の上にバツボタンを設置してバツボタンを押した時にselectedImageをnullにしてまた画像の選択ボタンにするという実装にします。

dart

selectedImage != null
      ? Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            IconButton(
              onPressed: () {
                setState(() {
                  selectedImage = null;
                });
              },
              icon: const Icon(Icons.close),
            ),
            Align(
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  vertical: 2,
                  horizontal: 32,
                ),
                child: Image.file(
                  selectedImage!,
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ],
        )
      : TextButton(
          onPressed: () => album(),
          child: const Text(
            '画像を選択',
            style: TextStyle(
              fontSize: 24,
              color: Colors.blue,
            ),
          ),
        ),

以上が実際の使用例の一部です。他にも実装例はあると思いますが今回は先日私が実際に行った実装例になりました。

まとめ

nullと言うのは何も入ってない状態のことを指し、String? userName のように「ユーザー名がまだ入力されていないかもしれない」状況を型システムで表現することです。またUI上で「画像を選択していない」「オプション入力なので空でも OK」など、実際のアプリフローに即した柔軟な取り扱いができるようになります。
これをうまく活用すれば様々なアプリを開発できるようになると思います。

というわけで、ぽちぽちのつどいGW Advent(?) Calendar ９日目はnullについて学びました。