Zenn
💁‍♂️

教えてChatGPT

2023/01/25に公開
Flutter
正規表現
tech

正規表現を使ってみたい

皆さん、正規表を知ってますか?
郵便番号を特定したりするあの暗号みたいな文字ですね。考えるのが難しい...
でもChatGPTに聞いたら、教えてくれました!

今回やったのは、「半角文字かつ数字が文字数10文字以下になるように入力してください」という正規表現ですね。Dartのコードにするとこんな感じです。

void main() {
  // 次の例は、文字列中の正規表現に最初にマッチするものを見つけるものです。
  RegExp exp = RegExp(r'^[0-9a-zA-Zぁ-んァ-ヶー一-龠０-９\s]{0,10}$');// 半角文字かつ数字が文字数１０文字以下ならOK
  String str = '12345かきくけこ!';// １０文字以下の日本語入力可能な正規表現。１１文字以上はエラーが出る!
  RegExpMatch? match = exp.firstMatch(str);
  print(match![0]);//090
}

FlutterのDemoアプリも作成しました

https://youtu.be/3iYrTZWSA6s

人間が考えるのは難しい😇
でも、AIなら候補をいくつか出してくれる。Demoアプリも作ってみました。良い出来なのかわからないですが、FormのValidationの種類を増やせそうですね。

ところでChatGPTってなんですか?

わかりやすく言うと、人間の代わりに記事を書いてくれたり、コードを書いてくれるAIのサービスですかね。万能ではないですが、正規表現は得意らしく代わりに考えてもらいました😅

今回使用したソースコード

エラーメッセージを表示するコード。別ファイルに書いております。条件と一致しないと画面に現れます。

service/regExp.dart
class regExpText {
  static String? regText(String? value) {
    if (value != null) {
      String pattern = r'^[0-9a-zA-Zぁ-んァ-ヶー一-龠０-９\s]{0,10}$';
      RegExp regExp = RegExp(pattern);
      if (!regExp.hasMatch(value)) {
        return '半角文字かつ数字が文字数10文字以下になるように入力してください!';
      }
    }
  }
}

アプリの入力画面のコード。こちらで正規表現を使用して、入力が正しいか検証を行います。

ui/regularExpressions.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:ui_sample/service/regExp.dart';

// TextEditingControllerのProviderを定義.
final textProvider = StateProvider.autoDispose((ref) {
  return TextEditingController(text: '');
});

class RegularExpressions extends ConsumerWidget {
  const RegularExpressions({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // TextEditingControllerのProviderを呼び出す.
    final textC = ref.watch(textProvider.notifier).state;

    return Scaffold(
      appBar: AppBar(
        title: const Text('正規表現'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              controller: textC,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              validator: regExpText.regText,
              decoration: const InputDecoration(
                  filled: true, hintText: '10文字以下で半角文字と数字を入力'),
            ),
            const SizedBox(
              height: 16,
            ),
            ElevatedButton(
              onPressed: () {
                // 正規表現を使用して、if文でtrueかfalseかで、実行するプログラムを変更する.
                String pattern = r'^[0-9a-zA-Zぁ-んァ-ヶー一-龠０-９\s]{0,10}$';
                RegExp regExp = RegExp(pattern);
                if (regExp.hasMatch(textC.text)) {
                  print('条件が正しいのでデータが入力されました: ${textC.text}');
                } else {
                  print('入力条件が正しくありません!');
                }
              },
              child: const Text("登録"),
            ),
          ],
        ),
      ),
    );
  }
}

アプリを実行するコード

main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:ui_sample/ui/regularExpressions.dart';

void main() {
  runApp(
    const ProviderScope(child: MyApp()),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      restorationScopeId: 'app',
      title: _title,
      home: RegularExpressions(),
    );
  }
}

入力後のlog

I/flutter ( 9299): 条件が正しいのでデータが入力されました: abcde12345
I/flutter ( 9299): 入力条件が正しくありません!
I/flutter ( 9299): 入力条件が正しくありません!

まとめ

なぜ正規表を使おうと思ったのか?
Flutter別荘に合宿に参加したioriさんが正規表現を使っていたので、興味があって挑戦してみました。
こちらのサイトも参考になりました。皆さんも色々と試してみてください!
https://flutter.salon/dart/regexp/

Discussion