1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

新卒エンジニアがChatGPT Codexを使って1日でwebアプリを作成・公開してみた!

Last updated at Posted at 2025-10-28

はじめに

初めまして!ひろひろと申します.
今年度から国内のSierにてSEとして働き始めました.

「エンジニアはインプットと同じくらいアウトプットが大事」と教わったので,これから沢山アウトプットしていこうと思います!

記念すべき最初の記事では,今話題のChatGPT Codexを使って一日でwebアプリを作成・公開するまでの過程を紹介しています.

作成したアプリは「ユーザーが指定した国内河川の河道を地図上に表示する」といったものです.

・アプリURL:https://rivermap-creatorforweb-cyxbkyxpcqywqnubfxarww.streamlit.app
・GitHub:https://github.com/hiroHIRO629/RiverMap-Creator_forWeb

著者のスペック

非情報系の大学院卒.
大学時代に教授が作成したソースコードを読んだり,ChatGPT先生(ちょうどGPT3.5から4になった頃)に教わりながらPythonを学びました.

大学では,Pythonを使って主にデータの整形や可視化を行っており,特に空間情報(地形データ)を扱うことが多かったです.また,会社の研修でGitの基本的な使い方を教わり,GitHub Copilotを使ったアプリ開発も経験しました.

アプリ開発の前提

1日で作成してみた!と言ってしまいましたが,アプリの基本的な仕組みは既に作成済みでした.

・Github:https://github.com/hiroHIRO629/RiverMap-Creator

ただ,現行の構成だと
「性能の低いマシンだと動作が不安定」
「高スペックなマシンが必要なため,無料で一般公開できないこと」
といった問題がありました.

これらの問題を解決し,同様の機能を持ったアプリを1日で無料一般公開することが今回の目的となります.

ChatGPT CodexをVSCode上で扱う

私はChatGPT Plus(20USD/月)を契約しているので,追加課金なしでCodexが使用できました.ChatGPTの画面左側サイドバーにある「Codex」をクリックすると,次のような画面が表示されます.スクリーンショット 2025-10-27 0.14.24.png

「自分のIDEで試す」ボタンを押してみると,VSCodeが起動し,「Codex – OpenAI’s coding agent」という拡張機能のインストールが求められました.

スクリーンショット 2025-10-27 21.07.24.png

インストールしてみると,VSCodeの左側サイドバーにChatGPTのアイコンが追加され,VScode上で直接ChatGPTが使えるようになります.

アプリ開発の開始

とりあえず,VSCode上で該当のソースコードを開いて,やりたいことをそのままCodexにざっくりと伝えてみました.

現行のアプリは以下のような状態です.
ーーーーーーーー
・pygmtを用いて地図を作成するアプリ
・pythonのstreamlitを用いて,ローカルの環境内だとwebアプリっぽく動作する.
・pygmtがかなりメモリを食うので,アプリを動かすマシンによっては,動作がかなり遅くなる.
ーーーーーーーー
これを以下のようなものにしたいです.
ーーーーーーーー
・pygmtを用いなくても良いので,なるべくメモリを食わずに,マシンの性能が低くても動作するアプリ
・無料で一般公開できる

すると,数十秒後に提案内容とサンプリ実装例を提示してくれました.
(何も指摘していないのに,勝手にディレクトリ構造まで把握して,アプリに必要な河川の空間情報を持つ元データの概要まで読み取ってくれました.)

スクリーンショット 2025-10-27 21.32.11.png

提案の要点としては:
・より負荷の少ない軽量なライブラリに置き換える
・現在のUIはほぼ再利用可能
・Streamlit Community Cloudを使えばGitHub連携で無料公開できる
とのことでした.

👉Streamlit Community Cloud:https://share.streamlit.io

修正とデプロイ

提示されたコードをそのままコピペして実行してみたところ,全く動きませんでした
そこで,エラーメッセージをそのままCodexに貼り付けてみると,
自動で該当箇所を修正してくれました.

スクリーンショット 2025-10-27 21.51.28.png

ここから,「実行▶️エラー▶️修正」のサイクルを1~2時間以上繰り返しました.
その途中で,codexのmodeを選択するボタンがあることに気づき,Agent(full access)を選択してみると,コードの編集から,コマンドの実行まで全て自動でやってくれるようになりました.

スクリーンショット 2025-10-27 21.57.10.png

ここからはかなり作業が捗り,自身のGitHubリポジトリに該当アプリのパッケージをpushする所まで完了しました(気づけば作業開始から約5時間くらいは経過してた...)

そこからStreamlit Community Cloud上にデプロイする工程やUIの微調整など,細かい作業を行った結果,無事一日で,作ったアプリを一般公開することができました!!!(朝の9時頃から作業開始して,夕方16時くらいに完了.昼ごはんを食べるのは忘れてました😀)

私自身,本格的なアプリ開発の経験がない事や,Codexへのプロンプト内容をあまり考えずに行ったことを考慮すると,ちゃんとした知識や経験を持つエンジニアの方なら,数分〜数時間程度で完了する作業かもしれません.

まとめ

今回は,新卒エンジニアがAIの力を借りて(どちらかというとAIが私の力を借りて)1日でアプリを作成・公開するといったものでした.今後,より生成AIの性能が良くなることを考慮すると,嬉しいような悲しいような感情になりました.それでも「AIに使われる側ではなく,使う側になれる」ように,まずはいろんな分野の基礎技術の習得を行なっていこうと思います.その過程でも沢山AIを使って効率的な学習をしていきたいです!

最後まで読んでいただきありがとうございました😃

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?