先生と生徒の会話形式で理解しよう

生徒

「Flaskで、データを保存したり、表示したりするにはどうすればいいんですか？」

先生

「Flaskでは、フォームなどを使って入力されたデータを、Pythonのプログラムの中で受け取って、保存したり表示したりすることができます。」

生徒

「保存っていうのは、どこに保存されるんですか？そしてどうやって取り出すんですか？」

先生

「今回は簡単な例として、プログラムの中にデータを一時的に保存して、表示する方法をやってみましょう。まずは『データの追加』と『取得（表示）』から始めます。」

1. Flaskとは？

Flask（フラスク）は、Python（パイソン）というプログラミング言語を使って、ホームページやWebアプリを作るための道具（フレームワーク）です。

とてもシンプルで、初心者にも扱いやすいのが特長です。「フラスコ」のように軽くて中身を自由に詰められるイメージから名付けられました。

2. CRUDってなに？

CRUD（クラッド）とは、データを扱うときの基本の4つの操作のことです。

C：Create（作る・追加する）
R：Read（読む・表示する）
U：Update（更新する）
D：Delete（削除する）

今回はこの中で、初心者でもわかりやすい「Create（追加）」と「Read（表示）」を中心に学びます。

3. Flaskで最もシンプルなWebアプリを書いてみよう

まずは、Flaskを使って「こんにちは」と表示するだけの基本プログラムを作ってみます。


from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "こんにちは！これはFlaskの最初の一歩です"

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

@app.route("/") は「ホームページを表示するための入口」と考えてください。

4. データを追加（Create）してみよう

次は、ユーザーが入力した名前を受け取って、保存してみましょう。POSTという仕組みを使います。

POST（ポスト）とは、Webページから送られた情報を受け取る方法のことです。手紙をポストに入れるようなイメージです。


from flask import Flask, request

app = Flask(__name__)
data_list = []

@app.route("/add", methods=["POST"])
def add_data():
    name = request.form.get("name")
    data_list.append(name)
    return f"{name} を追加しました！"

request.form.get("name") は、フォームから送られてきた「name」という名前のデータを受け取ります。

data_list.append(name) で、受け取った名前をリストに追加しています。

5. データを表示（Read）してみよう

次は、今まで追加された名前をすべて表示するページを作ってみましょう。


@app.route("/list")
def list_data():
    return "<br>".join(data_list)

"<br>" で区切ることで、ブラウザ上で1行ずつ表示されます。

6. HTMLフォームで名前を入力してみよう

次は、実際にブラウザから名前を入力する画面を作ってみましょう。HTML（エイチ・ティー・エム・エル）という言語で書きます。


@app.route("/")
def form():
    return '''
    <form action="/add" method="post">
        名前を入力してください：<input type="text" name="name">
        <input type="submit" value="追加">
    </form>
    '''

このフォームでは、名前を入力して「追加」ボタンを押すと、/add にデータが送られます。

7. 完成したサンプルコード

ここまでのコードをすべてまとめると、以下のようになります。これを「app.py」という名前で保存して、実行してみましょう。


from flask import Flask, request

app = Flask(__name__)
data_list = []

@app.route("/")
def form():
    return '''
    <form action="/add" method="post">
        名前を入力してください：<input type="text" name="name">
        <input type="submit" value="追加">
    </form>
    <br>
    <a href="/list">追加した名前を見る</a>
    '''

@app.route("/add", methods=["POST"])
def add_data():
    name = request.form.get("name")
    data_list.append(name)
    return f"{name} を追加しました！<br><a href='/'>戻る</a>"

@app.route("/list")
def list_data():
    return "<br>".join(data_list)

このサンプルでは、名前を入力して追加し、そのあとで一覧で確認することができます。

8. Flaskのルート（@app.route）とは？

Flaskでは、@app.route という書き方を使って「どのURLでどの関数を動かすか」を指定します。たとえば：

@app.route("/") → ホームページ
@app.route("/add") → データ追加ページ
@app.route("/list") → データ表示ページ

このように、URLごとに処理を分けることができるのがFlaskの便利なところです。

9. データはどこに保存されているの？

今回のサンプルでは、名前をdata_listという「リスト」に保存しています。これはPythonの中だけで一時的に使える入れ物です。

プログラムを終了するとデータは消えてしまいますが、初心者の学習にはぴったりの方法です。

将来的には、データベースというもっと本格的な保存場所を使いますが、今は「プログラムの中に入れている」と覚えておけば大丈夫です。

まとめ

Flaskを使ったデータ追加と取得の仕組みは、Webアプリを作るうえで特に重要な基礎であり、今回の学習を通して「ユーザーが入力した情報をどう扱うか」という流れをしっかり理解できました。とくに、フォームからデータを受け取り、Pythonのコード内で処理し、それを画面に表示するという一連の動作は、多くのWebサービスで必ず使われています。今回の取り組みでは、初心者でも取り組みやすいようにデータベースではなくPythonのリストに保存する仕組みを用い、Flaskでの基本的なルート設計、CRUDの最初の二つである「Create」と「Read」の動作を自然に体験できました。また、Flaskの構造はとてもシンプルで、@app.routeを使ってURLと関数を紐づけるだけでページを増やすことができます。そのため、小さなアプリケーションから始めて徐々に機能を増やしていくやり方がおすすめです。ユーザーが入力した情報をrequest.formで受け取る流れは、フォームを扱う際の基本であり、今後ログイン機能や投稿機能などを作る際にも広く応用できます。こうした基礎を丁寧に押さえておくことで、より複雑なアプリケーションを作るときにもスムーズに発展させられます。今回の内容をまとめるために、学習で扱った仕組みをひとつにまとめたサンプルコードを以下に用意しました。すでに学んだCREATEとREADを中心に、HTMLフォームの返却やルーティングがどのように連動しているかが確認できる構成になっています。繰り返し実行しながら動作を確かめると、Flaskアプリの内部でどのようにデータが流れているかより明確に把握できます。

今回の学びをまとめたサンプルプログラム


from flask import Flask, request

app = Flask(__name__)
data_list = []

@app.route("/")
def input_form():
    return '''
    <form action="/add" method="post">
        おなまえを入力してください：<input type="text" name="name">
        <input type="submit" value="追加">
    </form>
    <br>
    <a href="/show">登録したなまえを見る</a>
    '''

@app.route("/add", methods=["POST"])
def add():
    name = request.form.get("name")
    if name:
        data_list.append(name)
    return f"{name} を追加しました！<br><a href='/'>戻る</a>"

@app.route("/show")
def show():
    return "<br>".join(data_list)

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

上記のサンプルでは、フォームを表示するルート、データを受け取って追加するルート、追加されたデータを一覧で確認するルートの三つを使用しています。この構成はFlaskアプリの基本形として非常に使いやすく、名前の代わりにメッセージやタイトル、メモなど別の値を扱えば、簡単な掲示板やメモ帳アプリに応用できます。初心者のうちにこの流れを繰り返し学ぶことで、「データがどこから来て、どう保存され、どう表示されているか」という感覚をつかむことができ、今後の学習がよりスムーズになります。さらに、今回のようにリストへ保存するやり方は、学習段階では扱いやすく直感的ですが、実際のWebサービスではデータベースを用いて「長期間の保存」「大量のデータ管理」「検索や並べ替えの便利さ」などを実現します。しかし、基礎を理解していない状態で急にデータベースを使うと混乱しやすいため、今回のようなステップは非常に効果的です。初心者がWebアプリ制作に慣れていくには、「まずはリストで動く仕組みを理解し、その後データベースに移行する」という流れが最も自然で確実な進め方です。また、HTMLフォームでデータを送信する流れは、画面遷移やPOSTリクエストの仕組みを知る大切な機会になり、ブラウザからサーバーへ情報がどう届くのかを体験できます。これらをひとつひとつ学びながら進めていくことで、Flaskを使ったCRUDアプリケーションをより本格的に構築できるようになるでしょう。これから先、「更新（Update）」「削除（Delete）」にも挑戦することで、CRUD操作がすべて理解でき、より自信を持ってアプリ作りができるようになります。

先生と生徒の振り返り会話

生徒

「きょうの学習で、フォームから送られたデータをPythonで受け取って保存する流れがよく分かりました。思っていたより簡単でした！」

先生

「それは良かったです。まずはCreateとReadをしっかり理解することが大切ですよ。データの流れが分かれば、もっと複雑なアプリにも挑戦できます。」

生徒

「@app.routeがページごとに役割を分けているのも分かりやすかったです。どのURLで何が動くのかが見えてきました。」

先生

「その理解はとても大事です。小さなアプリでもルートが増えてくると混乱しがちなので、URLと処理を整理しながら作る癖をつけておくと良いですよ。」

生徒

「次はデータベースを使った保存もやってみたいです。もっとしっかり残せる仕組みも学んでみたいです！」

先生