ChatGPTを使ってFlutterでアプリ開発してみる

はじめに

ここ最近、ChatGPTが騒がれています。
色々な情報や人々の考えや意見を見て、私自身はこの先エンジニアだけじゃなく、ホワイトカラーの人々の職業ってほぼなくなるんじゃないかと危機感を抱いてます。
(同じく危機感を抱いている方はこの記事を読むといいかもしれません）
その未来がどのくらいで来るかは分かりませんし、来ないかもしれませんが、準備しておいて損はない気がします。
「仕事がなくなる」と書くとマイナス面に思えますが、ChatGPTは優秀な社会人くらいの力があると考えると、それを使えば、個人でもサービスやアプリをどんどん出せると言うことでもあります。ChatGPTを優秀な部下と捉えれば、個人で会社並みの働きをすることが可能。つまり、誰もが会社を持っている、くらいのパワーが出せるかもしれません。
上記の考えから、個人的な結論として、ChatGPTについてプラスマイナスの両面、どちらで考えても学んでおいたほうがいいと言う考えとなりました。

前置きが長くなりましたが、ChatGPTについて学んでおいたほうがいいよねってことで、ChatGPTを使ってアプリを開発していこうと思います。
多分、複数記事になると思ってます。
なお、ChatGPTを使ってシステムを開発するという試みは他の方もされており、以下の記事も参考にしています。

アプリ作成手順一覧

目指すのは、ChatGPTなどを使ったアプリの高速開発をすることなので、やり方を確立させるべく現状考えている手順を書いていきます。
以降は、この手順ごとに内容を充実させていこうと思ってます。
(手順については現状考えている手順なので更新していきます)

• アプリの方向性決定
• 要件定義
• 設計
• 実装
• 単体テスト
• 結合テスト
• システムテスト
• リリース

アプリの方向性決定

どういうアプリを作りたいかを決定するフェーズです。
今回の場合、どういうアプリを作りたいか明確だったのでChatGPTを使わず自力で考えたのですが、思いつかない場合はこの段階からChatGPTを使うといいと思います。
他にもっと使えるプロンプトがあると思いますが、一旦、送る内容は下記が使えるかなと思います。
（また検証したら更新したいと思います）

あなたはプロのエンジニアです。
私はアプリを開発したいのですが、どのようなアプリにすればいいかアドバイスが欲しいです。
必要な情報が足りなければ質問してください。

上記を送信すると質問来なかったので、続けて以下を送ると質問が来ました。

どういうアプリを作りたいのかわからないので、明確にするために質問してください

質問に答えていくとどういうアプリを作りたいか明確になって来ると思います。

要件定義

要件定義は以下のプロンプトで作成できました。

「作りたいアプリの内容」のアプリの要件定義書を作成してください

例えば、筋トレの記録をするアプリの要件定義書を作成してください見たいな感じです。
出てきた後、詳細に書いてくださいや、〇〇の機能を追加してくださいといった感じにカスタマイズもできます。
また、コンセプトなども伝えるとそれを盛り込んだ内容を作成してくれます。

あと、前提として、要件定義と設計はたたき台くらいのレベル感で捉えています。
確認はしてますが、ありとあらゆる可能性を吟味はしておらず、実装を進めていく上で、変更・修正していく予定です。

設計

設計について述べていきます。

前提

設計については、どういったアプリ構成になるかで設計する対象が変わってくるかと思います。
例えば、バックエンドを使わないのであればAPI設計は必要ないし、データベースを使わないのであればDB設計は必要ありません。
すでにアーキテクチャの構想がある場合は、必要なものだけ設計をお願いしていく形になります。

要件定義を元に、DBを設計してください。

どのような設計をしたらいいかわからない場合はアーキテクチャの設計からお願いするといいと思います。

要件定義をもとに、アーキテクチャの設計をしてください。

テクニック

レビュー

ちょっとしたテクニックとして、レビューをしてもらうこともできます。
以下のようにお願いすると、

あなたはプロのエンジニアとして、この内容に抜け漏れがないか3回チェックしてください

どういう観点でチェックしたかとともに結果が返ってきます。

以下に、データベース設計を再度確認し、抜け漏れがないかチェックを行いました。

1回目のチェック:
各テーブルのカラムと型が適切か
テーブル間のリレーションシップが正しいか

2回目のチェック:
アプリ要件に対して必要なデータがすべてカバーされているか
テーブル名やカラム名がわかりやすく、一貫性があるか

3回目のチェック:
各テーブルにプライマリーキーや外部キーが適切に設定されているか
データ型がアプリケーションで扱いやすい形式になっているか

これらのチェックを行った結果、現時点でのデータベース設計に大きな抜け漏れは見つかりませんでした。ただし、開発が進むにつれて要件が変更されることもありますので、定期的にデータベース設計を見直し、適切な状態を保つことが重要です。

ER図

DBの設計に関しては、個人的ですがmermaidを使って書いてますので、mermaidで出力してもらうようにしました。

mermaidで書いてください

実装

いよいよ実装に入っていきます。
要件定義で述べましたが、要件定義と設計はたたき台レベルとして捉えてますので、実装していく上で適宜変更していこうと思ってます。
まずは大枠を作ったというイメージですね。

上記のイメージを前提として、今回作った設計書は下記になります。

• アーキテクチャ設計書
• DB設計書
• 画面設計書
• 機能設計

今回のアプリはクライアント側だけで完結する内容になりましたので、アーキテクチャの部分はクライアントサイドがFlutter、データベースにsqliteを使うことになりました。

実装に必要なもの

実装する上で必要なものをChatGPTに洗い出してもらいました。

このアプリを実装するのに必要な項目を洗い出してください

すると下記のような回答が得られました

開発環境のセットアップ

Flutterのインストールと設定
開発用エディタ（例：Visual Studio Code）のインストールと設定
エミュレータや実機でのデバッグ環境の構築
アプリの基本構造の作成

アプリの全体構造を定義するためのコードを作成
各画面の遷移を実装
デザインテーマや共通スタイルの設定
ローカルデータベースの設定

SQLiteを利用したデータベースの構築
ユーザープロファイル、プログレスデータ、バッジデータに関するテーブルとスキーマを作成

画面のUIを作成
・・・以下省略

環境構築など一部不要な部分はありますが、これ以降のステップでは各項目ごとに実装をお願いしていきます。

アプリの全体構造を定義するためのコードを実装してください

すると下記のコードが出てきました。
(一部、名称等変更してます)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  static List<Widget> _widgetOptions = <Widget>[
    PlayScreen(),
    BadgeScreen(),
    SettingsScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Children Maze App'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.play_arrow),
            label: 'Play',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.badge),
            label: 'Badges',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

class PlayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Play Screen'),
    );
  }
}

class BadgeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Badge Screen'),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Settings Screen'),
    );
  }
}

仮置きのページの実装だけなので、特に問題なさそうです。
一旦本記事ではここまでとし、以降の記事で実装項目を順番に進めていき、どんな感じになるかをみていきたいと思います。

おわりに

要件定義や設計など、本格的に出してくれるので叩き台レベルとしては十分な気がしました。
この辺、一から作っていくとフォーマットや粒度が不揃いになった経験があるので、最初に作ってもらって、そこから質問や要望を伝えて、詳細を詰めていき、最後に自分自身で修正なり、追記していくなりをしていくのが良さそうですね。
次回記事では、実装周りをどこまでできるかを試していきたいと思います。