ChatGPTにPython、Flask、htmlテンプレートを利用した簡易電卓アプリを書いてもらった

Python Flask

ChatGPTにPython、Flask、htmlテンプレートを利用した簡易電卓アプリを書いてもらいました。

ChatGPTへの指示文:

PythonのFlaskで簡単な電卓機能を持つWebアプリのコードを書いてください。計算内容を入力する画面をindex.html、計算結果を表示する画面をresult.htmlとしてください。

回答:

以下は、PythonのFlaskを使って簡単な電卓機能を持つWebアプリを作成するためのサンプルコードです。このコードは、2つの数値と1つの演算子を入力すると、計算結果を表示する単純な電卓アプリです。


from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/', methods=['GET', 'POST'])
def calc():
    num1 = request.form['num1']
    num2 = request.form['num2']
    operator = request.form['operator']
    result = 0

    if operator == '+':
        result = int(num1) + int(num2)
    elif operator == '-':
        result = int(num1) - int(num2)
    elif operator == '*':
        result = int(num1) * int(num2)
    elif operator == '/':
        result = int(num1) / int(num2)

    return render_template('result.html', result=result)

if __name__ == '__main__':
    app.run(debug=True)

このコードでは、FlaskのFlaskクラスを使用してアプリケーションを定義し、@app.route()デコレータを使用して、2つのエンドポイントを作成します。 最初のエンドポイントは、'/'パスにマップされ、index()関数を実行します。この関数は、render_template()関数を呼び出して、index.htmlテンプレートを表示します。このテンプレートは、数値と演算子を入力するためのフォームを表示します。 2番目のエンドポイントは、'/calc'パスにマップされ、calc()関数を実行します。この関数は、POSTメソッドで数値と演算子を受け取り、適切な計算を行ってresult.htmlテンプレートを表示します。request.formを使用して、フォームのデータを取得し、if文を使用して、選択された演算子に応じて適切な計算を行います。最後に、render_template()関数を使用して、result.htmlテンプレートを表示し、計算結果を表示します。

以下は、index.htmlテンプレートとresult.htmlテンプレートです。

index.html


<!DOCTYPE html> 
<html> 
<head> 
	<title> Calculator</title> 
</head> 
<body> 
	<h1> Calculator</h1> 
	<form method="POST" action="/"> 
		<label for="num1"> First number:</label> 
		<input type="number" id="num1" name="num1" required> <br> <br> 

		<label for="operator"> Operator:</label> 
		<select id="operator" name="operator" required> 
			<option value="+"> +</option> 
			<option value="-"> -</option> 
			<option value="*"> *</option> 
			<option value="/"> /</option> 
		</select> <br> <br> 

		<label for="num2"> Second number:</label> 
		<input type="number" id="num2" name="num2" required> <br> <br> 

		<input type="submit" value="Calculate"> 
	</form> 
</body> 
</html>
result.html

<!DOCTYPE html>
<html>
<head>
	<title>Calculator Result</title>
</head>
<body>
	<h1>Calculator Result</h1>
	<p>The result of the calculation is: {{ result }}</p>
	<a href="/">Back to calculator</a>
</body>
</html>
結果:

pythonのコードを適当な名称(calc.py)で保存して、そのフォルダ直下に templatesフォルダを作成して、そこに index.html 、result.html を保存します。そして、ターミナルからpython3 calc.py を実行します以下のように表示されれば成功。http://127.0.0.1:5000 にアクセスします。

以下のようにブラウザに計算アプリが表示されて、無事に計算もできました。