この記事では、オープンデータを活用したアプリの企画や雛形作成に生成AIを使った話を紹介します。オープンデータ活用系のハッカソンなどに参加してみたいという方は、もしかするとアイディア出しのヒントになるかもしれません。この記事は「CivicTech ＆ GovTech Advent Calendar 2024」5日目のポストとして作成しています。

作ったもの

京都市を走る地下鉄の最終電車発車時間まであと何分かを出すだけのシンプルなアプリです。Next.jsで実装し、AWS Amplify( Gen2 )にてホストしています。

アプリの企画は、生成AIで

オープンデータを使ったアプリ開発に挑戦したいという気持ちはありつつも、アプリの企画をする時間が作れずに１・２年近く先延ばしになっていました。このままではおそらく作らず仕舞いになるだろうということで、挑戦したのが、ダウンロードしたオープンデータを生成AIに投げ込むことです。今回はClaudeにダウンロードしたCSVファイルをアップロードし、データを元にアプリの企画を考えさせました。

いくつかのアイディアが出揃ったので、提案された内容からアプリの企画と要件を整理していきます。Claudeの場合、Artifactsという機能でReactアプリなどのコードを生成してくれますので、そちらでモックアップを見ながら要件を詰めていきました。

継続的な保守のためのデータ変換スクリプト

Claude Artifactsで生成したコードは、CSVファイルのデータを変数としてJSファイルに持とうとします。いちいちCSVファイルを読む手間を考えると、妥当な判断だといえるでしょう。ただしこの方法では、ダイア改正が実施された際のデータ更新が煩雑となります。そのため、CSVを直接読み込んでJSONを返すAPIを用意しています。これによってCSVファイルをデプロイすれば、新しい時刻データを返せるようになっています。

リリースまでに手こずったところ

Next.jsのApp RouterとPage Routerで異なる仕様の追従

まずハマったのはNext.jsアプリのビルドでした。リクエストパラメータを利用するタイプのREST APIを作る際、パラメータの取得が非同期になっていることに気づかず、そこでビルドエラーを何度も繰り返しました。正解はawait paramsのように引数のパラメータをawaitすることだったのですが、Page Routerの実装での印象に引っ張られて気づくのに時間がかかりました。

type Props = {
  params: Promise<{
    line: string;
    dayType: string;
    direction: string;
  }>;
};
export async function GET(
  request: NextRequest,
  { params }: Props
): Promise<NextResponse> {
  try {
    const { line, dayType, direction } = await params;

AWS Amplifyでのビルドにつかうnode.jsバージョンを更新する

これも気づくのに時間がかかったのですが、Next.js App Routerでのビルドに利用できるNode.jsバージョンが、AWS Amplifyではデフォルトで提供されていません。そのため、Angularのときにハマって対応した方法を参考に、ビルドバージョンの変更が必要でした。

生成AIが作成したコードのレビュー

一番時間がかかったのはここです。致命的なエラーについては体幹でほとんどありませんでしたが、逆にそれが厄介だなとも感じました。というのもアプリの動作としては問題なく動いているが、不必要なuseEffectが仕込まれていたり、CSVから読み取るべき値を定数にしていたりと、コードをちゃんと読まないと気づかない問題点が散見されたためです。モックアップ作成や雛形を作る作業、体感としては富士山の五号目までは生成AIで気軽に進める印象ですが、やはりその先の仕上げ作業については自分の知識や経験が求められるなと思います。

とはいえ、アプリのアイディア出しやUIデザインのモックアップには大変活躍しました。データから逆算して企画する際などには、これからも活用しようと思います。

今後について

ひとまずデプロイできたので、作成したアプリのポートフォリオリストなどを作ってみようかと思っています。その後、終電のアラートとして通知機能なりLINEあたりとの連携などを考えていけるといいなぁとは思っています。