ノーコードでもなく、ローコードでもなく、質問するだけで動くWebアプリが作れるすごさを実感中
色々なところで有効活用されまくっているChatGPTですが、改めて使ってみるとこれは大変なことだなと再認識させられているところです。
そんな気持ちになった使い方を少し共有してみます。
ChatGPTに在庫管理のWebアプリを作ってもらう
したい事を伝えて要件を教えてもらう
ChatGPTの画面を開いて、以下の質問を投げかけます。
PythonでFlaskとSQLite3を使って在庫管理をするシステムを構築したいと思っています。在庫管理システムに必要な要件を列挙して下さい。
回答は以下のとおり。
在庫管理システムに必要な要件を以下に列挙します:
ユーザー認証: ユーザーがログインし、システムにアクセスするための認証機能が必要です。ユーザーごとにアクセス権限を設定することも考慮してください。
在庫アイテムの管理: 在庫アイテムを追加、編集、削除できる機能が必要です。アイテムの属性としては、名前、説明、数量、価格などが考えられます。
在庫アイテムの表示: 在庫アイテムの一覧表示機能が必要です。アイテムの検索やソート機能も便利です。
在庫数量の更新: アイテムの数量を追加したり、減らしたりできる機能が必要です。数量が0になった場合には、アイテムを自動的に非表示にするなどの処理も検討してください。
在庫履歴の管理: 在庫アイテムの変更履歴を保存する機能が必要です。履歴には、変更日時、変更前数量、変更後数量、変更したユーザーなどの情報が含まれると良いでしょう。
レポート機能: 在庫の状態を可視化するためのレポート機能が必要です。例えば、在庫アイテムの総数、特定のアイテムの数量、売れ筋商品などの情報を表示できると便利です。
データの永続化: 在庫データを永続化するために、データベースを使用します。SQLite3を選択した場合、データベースの作成、テーブルの作成、データの挿入や更新、検索などの操作が必要です。
ユーザーインターフェース: Flaskフレームワークを使用するため、システムにアクセスするためのウェブベースのユーザーインターフェースが必要です。適切なルーティングやテンプレートを設計してください。
エラーハンドリングとバリデーション: 入力データのバリデーションやエラーハンドリング機能を実装して、データの正当性と安全性を確保してください。
これらの要件を実装することで、PythonのFlaskフレームワークとSQLite3を使用した在庫管理システムを構築できます。
必要な機能を教えてもらう
以下の質問を投げかけます。
上記を踏まえて、Webアプリケーションに備えなければいけない機能を列挙して下さい。
回答は以下のとおり。
Webアプリケーションに備えるべき機能を以下に列挙します:
ルーティング: ユーザーのリクエストに対して適切な処理を行うためのルーティング機能が必要です。URLと関連する処理やデータのマッピングを行い、適切なページや機能にユーザーを導くことができます。
テンプレートエンジン: ユーザーに表示するHTMLページの生成に使用されるテンプレートエンジンが必要です。テンプレートエンジンを使用することで、動的なコンテンツを含むレスポンスを生成することができます。
フォーム処理: ユーザーからの入力データを受け取り、バリデーションや処理を行うためのフォーム処理機能が必要です。データの妥当性を検証し、必要な処理を実行することで、セキュリティとデータの一貫性を確保できます。
ユーザーセッション管理: ユーザーのセッション情報を管理する機能が必要です。ログイン状態の維持やユーザーの識別、アクセス権の管理などに使用されます。
エラーハンドリング: アプリケーション内でエラーが発生した場合に適切に処理し、ユーザーにフレンドリーなエラーメッセージを表示する機能が必要です。例外処理やログ出力などを行うことで、デバッグや問題解決が容易になります。
セキュリティ対策: ユーザーのデータやシステムの安全性を確保するためのセキュリティ対策が必要です。パスワードのハッシュ化、クロスサイトスクリプティング（XSS）やクロスサイトリクエストフォージェリ（CSRF）対策、入力データのバリデーションなどを実装することが重要です。
ユーザーインタフェースのデザイン: ユーザビリティを向上させるために、使いやすく魅力的なユーザーインタフェースをデザインする必要があります。適切なレイアウト、ナビゲーション、カラースキーム、アイコンなどを選定し、ユーザーの体験を向上させることができます。
ログ管理: アプリケーションの動作やエラーに関する情報をログとして記録する機能が必要です。ログを適切に管理し、トラブルシューティングや監査のための情報を取得できます。
キャッシュ管理: パフォーマンス向上のために、頻繁にアクセスされるデータや処理結果をキャッシュする機能が必要です。キャッシュを使用することで、データベースや外部APIへのアクセス回数を減らし、応答時間を短縮できます。
ユーザーインプットのバリデーション: ユーザーからの入力データのバリデーションを実施し、不正なデータの送信やエラーの発生を防止する機能が必要です。データの正当性を確認し、必要なフォーマットや制約に合致するかを検証します。
これらの機能を備えたWebアプリケーションを構築することで、ユーザーフレンドリーで安全な在庫管理システムを実現できます。
作ってもらう
厚かましくお願いしてみる。
上記をふまえて、Webアプリケーションのサンプルコードを提示して下さい。
回答は以下の通り。
以下に、FlaskとSQLite3を使用して在庫管理システムのサンプルコードを示します。ただし、完全な実装を提供するためには必要な機能が含まれていない場合がありますので、実際のプロジェクトではさらなるカスタマイズやエラーハンドリングが必要です。また、セキュリティについては適切な対策が必要です。
from flask import Flask, render_template, request, redirect, url_for, flash
import sqlite3
app = Flask(__name__)
app.secret_key = 'secret_key' # セッション管理のためのシークレットキー
# SQLite3データベースのパス
DATABASE = 'inventory.db'
def create_tables():
"""必要なテーブルをデータベースに作成する関数"""
conn = sqlite3.connect(DATABASE)
c = conn.cursor()
# 在庫アイテムテーブルの作成
c.execute('''
CREATE TABLE IF NOT EXISTS items (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
description TEXT,
quantity INTEGER NOT NULL,
price REAL NOT NULL
)
''')
# 在庫変更履歴テーブルの作成
c.execute('''
CREATE TABLE IF NOT EXISTS history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
item_id INTEGER NOT NULL,
prev_quantity INTEGER NOT NULL,
new_quantity INTEGER NOT NULL,
changed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
changed_by TEXT,
FOREIGN KEY (item_id) REFERENCES items (id)
)
''')
conn.commit()
conn.close()
def get_db_connection():
"""SQLite3データベースへの接続を返す関数"""
conn = sqlite3.connect(DATABASE)
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
"""在庫アイテムの一覧表示"""
conn = get_db_connection()
items = conn.execute('SELECT * FROM items').fetchall()
conn.close()
return render_template('index.html', items=items)
@app.route('/item/add', methods=['GET', 'POST'])
def add_item():
"""在庫アイテムの追加"""
if request.method == 'POST':
name = request.form['name']
description = request.form['description']
quantity = request.form['quantity']
price = request.form['price']
conn = get_db_connection()
conn.execute('INSERT INTO items (name, description, quantity, price) VALUES (?, ?, ?, ?)',
(name, description, quantity, price))
conn.commit()
conn.close()
flash('アイテムが追加されました', 'success')
return redirect(url_for('index'))
return render_template('add_item.html')
@app.route('/item/<int:item_id>/edit', methods=['GET', 'POST'])
def edit_item(item_id):
"""在庫アイテムの編集"""
conn = get_db_connection()
item = conn.execute('SELECT * FROM items WHERE id = ?', (item_id,)).fetchone()
conn.close()
if not item:
flash('指定されたアイテムが見つかりません', 'error')
return redirect(url_for('index'))
if request.method == 'POST':
name = request.form['name']
description = request.form['description']
quantity = request.form['quantity']
price = request.form['price']
conn = get_db_connection()
conn.execute('UPDATE items SET name=?, description=?, quantity=?, price=? WHERE id=?',
(name, description, quantity, price, item_id))
conn.commit()
conn.close()
flash('アイテムが更新されました', 'success')
return redirect(url_for('index'))
return render_template('edit_item.html', item=item)
@app.route('/item/<int:item_id>/delete', methods=['POST'])
def delete_item(item_id):
"""在庫アイテムの削除"""
conn = get_db_connection()
conn.execute('DELETE FROM items WHERE id = ?', (item_id,))
conn.commit()
conn.close()
flash('アイテムが削除されました', 'success')
return redirect(url_for('index'))
if __name__ == '__main__':
create_tables()
app.run(debug=True)上記のサンプルコードは、Flaskフレームワークを使用して在庫管理システムの基本的な機能を実装しています。具体的には、在庫アイテムの一覧表示、アイテムの追加・編集・削除などが含まれています。
また、SQLite3を使用してデータベースを作成し、在庫アイテムの情報を格納しています。データベースへの接続やクエリの実行は、関数を介して行われています。
さらに、`templates`ディレクトリにHTMLテンプレートが配置されており、Flaskの`render_template`関数を使用して動的なコンテンツを生成しています。
このサンプルコードはベースとなる実装ですので、必要に応じてカスタマイズやエラーハンドリングなどを追加してください。また、セキュリティ対策やバリデーションなどの側面にも注意が必要です。
不足するファイルもお願いしてみる
以下のお願いをしてみる。
テンプレートファイルも提示して下さい。
回答は以下の通り。
以下に、在庫管理システムのためのテンプレートファイルのサンプルを示します。
`index.html`（在庫アイテム一覧表示用のテンプレート）
<!DOCTYPE html>
<html>
<head>
<title>在庫管理システム</title>
</head>
<body>
<h1>在庫管理システム</h1>
<a href="{{ url_for('add_item') }}">アイテム追加</a>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<table>
<thead>
<tr>
<th>名前</th>
<th>説明</th>
<th>数量</th>
<th>価格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item['name'] }}</td>
<td>{{ item['description'] }}</td>
<td>{{ item['quantity'] }}</td>
<td>{{ item['price'] }}</td>
<td>
<a href="{{ url_for('edit_item', item_id=item['id']) }}">編集</a>
<form method="post" action="{{ url_for('delete_item', item_id=item['id']) }}" style="display:inline">
<button type="submit" onclick="return confirm('本当に削除しますか？')">削除</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>`add_item.html`（在庫アイテム追加用のテンプレート）
<!DOCTYPE html>
<html>
<head>
<title>在庫管理システム - アイテム追加</title>
</head>
<body>
<h1>在庫管理システム - アイテム追加</h1>
<a href="{{ url_for('index') }}">戻る</a>
<form method="post" action="{{ url_for('add_item') }}">
<label for="name">名前:</label>
<input type="text" name="name" id="name" required><br>
<label for="description">説明:</label>
<textarea name="description" id="description"></textarea><br>
<label for="quantity">数量:</label>
<input type="number" name="quantity" id="quantity" required><br>
<label for="price">価格:</label>
<input type="number" step="0.01" name="price" id="price" required><br>
<button type="submit">追加</button>
</form>
</body>
</html>`edit_item.html`（在庫アイテム編集用のテンプレート）
<!DOCTYPE html>
<html>
<head>
<title>在庫管理システム - アイテム編集</title>
</head>
<body>
<h1>在庫管理システム - アイテム編集</h1>
<a href="{{ url_for('index') }}">戻る</a>
<form method="post" action="{{ url_for('edit_item', item_id=item['id']) }}">
<label for="name">名前:</label>
<input type="text" name="name" id="name" value="{{ item['name'] }}" required><br>
<label for="description">説明:</label>
<textarea name="description" id="description">{{ item['description'] }}</textarea><br>
<label for="quantity">数量:</label>
<input type="number" name="quantity" id="quantity" value="{{ item['quantity'] }}" required><br>
<label for="price">価格:</label>
<input type="number" step="0.01" name="price" id="price" value="{{ item['price'] }}" required><br>
<button type="submit">更新</button>
</form>
</body>
</html>上記のテンプレートファイルは、Flaskのテンプレートエンジンによって動的なコンテンツを生成するためのHTMLを含んでいます。データを表示したり、フォームを作成したりするためのテンプレート記法を使用しています。
テンプレート内では、Flaskの関数や変数にアクセスするための`{{ ... }}`や`{% ... %}`の記法を使用しています。また、フラッシュメッセージの表示やリンク、フォームの送信などの動作もテンプレート内で実装されています。
これらのテンプレートファイルを適切なディレクトリに配置し、Flaskアプリケーションと組み合わせることで、在庫管理システムのユーザーインターフェースを実現できます。
動かしてみる
提示してもらったファイルを書かれている通りに保存してみます。
保存しているフォルダ（ここでは「2023-07-08_在庫管理」）に移動して、実行してみる。
$ cd 2023-07-08_在庫管理
$ python app.py
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 932-078-776ブラウザを立ち上げて、「http://127.0.0.1:5000/」にアクセスしてみる。
こいつ、動くぞ！
感想
同等レベルのサンプルコードを従来の検索サイトで探すと見つかるまでにそれなりに時間がかかるのですが、ChatGPTは求める答えに辿り着くまでの時間が極端に短いです。
初学者にとってものすごく学びやすい環境になったのではないかと感じます。