研修でflaskを使用したので、ナレッジをまとめる。

# はじめに
研修で、flaskを使用してAPIを実行するアプリケーションを作成した。
flaskを使用することで、webアプリケーションのバックグラウンドをpythonで記述することができるようだ。

# install と import
```shell:shell
pip install flask
```

でインストールをすることができる。
importする際には、

```python:import
from flask import Flask
```

とインポートする。

# 基本の使い方
初めに、app.pyファイルを作成する。

**flaskを実行したディレクトリ中のapp.py**が実行される。

app.pyファイルの中身について説明をする。

```python:app.py
app = Flask.app()
```

初めに`/`が呼ばれるため、`@app.route("/")`を使用し関数`index()`を定義する。

```python:app.py(続き)
@app.route("/")
def index():
    return "Hello, World"
```

実行する為には、`flask run`コマンドを使用する。

```zsh
flask run
```

次のようなWebページ（ http://127.0.0.1:5000 ）が生成される。

![スクリーンショット 2025-05-17 12.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4062621/d3e9ad5f-b1c0-4bbb-bf20-c11184ef7fdc.png)

これは、ローカルホストとして実行している。よって、このURLを共有しても他のインターネットに接続しているユーザーはブラウザにアクセスすることができない。

# HTMLの表示
flaskを使用することで、htmlで作成したファイルを表示させることもできる。その為には、次のようなディレクトリ構造を作成する必要がある。
```
app.py
templates/index.html
```
`template`ディレクトリ中にhtmlファイルを作成する。

```html:template/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストWebアプリ</title>
</head>
<body>
    <h1>index.html表示してます</h1>
</body>
</html>
```

`app.py`も次のように書き換える
```python:app.py
import sys, os
from flask import Flask ,render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")
```
実行結果は次のようになる。

![スクリーンショット 2025-05-17 17.07.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4062621/2a8e3ce8-cb54-4120-9322-e7855fae76c0.png)

# ボタン機能の追加

簡単なボタンを作成し、ボタンが押された場合に文字列を表示させるように追記する。
なお、表示させる文字列は、app.py側で指定できるようにする。

まずは、新しいhtmlファイルを作成する。
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストWebアプリ</title>
</head>
<body>
    <h1>index.html表示してます</h1>
    <!-- ボタンフォーム：POSTで同じURLに送信 -->
    <form method="POST" action="/button">
        <button type="submit">ボタン</button>
        <!-- ボタンが押されたときに表示されるメッセージ -->
        <p>{{ message }}</p>
    </form>
</body>
</html>
```

formを追加している。formの`action`を`button`と設定している。この変数名を使用し、flask側で処理を実行する。

次に、python側の変更点についてみていく。

```python:app.py
import sys, os
from flask import Flask ,render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    return render_template("index.html")

@app.route("/button", methods=["GET", "POST"])
def button():
    message = "app.pyからのメッセージ"
    if request.method == "POST":
        return render_template("index.html", message = message)
```
このように、`@app.route()`の引数として`/button`を使用している。
また、戻り値として、`message`を追加している。

上記`app.py`を実行すると次の結果を得られる。

![スクリーンショット 2025-05-17 21.42.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4062621/27d590f8-46a8-429e-965e-2290a9bab4af.png)
ボタンを押下すると、、、
![スクリーンショット 2025-05-17 21.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4062621/a3ae59b4-9841-4098-99bd-fc5b4ede2f8e.png)
のように表示される。

他にもhtmlのformを使用することでさまざまな動作を作成することができる。

# まとめ

JavaScriptをあまり使用したことがないため、JavaScriptを使用した実例は避けたが、今後、JavaScriptを使用していく上で有用な方法があれば紹介する。

action属性の名称を設定するだけで簡単に動作するので扱いやすいと感じた。