Python | 1 日 120 分 × 7 日アプリ学習：Flaskで作る超簡単Webアプリ（中級編）

Web APP Python
スポンサーリンク

1日目のゴール

1日目のテーマは
「Flaskで“自分のPCの中だけで動く超ミニWebサーバー”を立ち上げて、URLごとに表示内容を変えられるようになる」
ことです。

ここで言う「Webアプリ」は、いきなり本番公開するようなものではなく、
あなたのPCの中だけで動く、小さな実験用アプリです。

今日のゴールは、次の2つです。
ブラウザで http://127.0.0.1:5000/ を開くと「こんにちは Flask!」と出る
/hello や /about など、URLごとに違うページを返せる

これができたら、もう立派に「Webアプリを作った」と言っていいです。

Flaskってそもそも何者？

WebサーバーとWebアプリのざっくりイメージ

まず、言葉のイメージを揃えます。

ブラウザ（ChromeやEdgeなど）に
https://example.com と打つと、ページが表示されます。
このとき裏側では、ブラウザが「サーバー」に対して
「このURLのページをください」とお願いしています。

その「サーバー側のプログラム」を、Pythonで書けるようにしてくれるのが Flask です。

Flaskは、こういうことをやってくれます。

ブラウザからのリクエストを受け取る
どのURLに来たのかを見て、対応する関数を呼ぶ
その関数が返した文字列を、ブラウザに返す

あなたは「どのURLに来たら、どんな文字列を返すか」だけを考えればいい、
という状態にしてくれるのが Flask だと思ってください。

事前準備：Flaskのインストール

pipでFlaskを入れる

ターミナル（またはコマンドプロンプト）で、次のコマンドを実行します。

pip install flask

エラーが出ずに終わればOKです。
すでに入っている場合は、「Requirement already satisfied」といった表示になります。

最初の一歩：超ミニWebサーバーを立ち上げる

最小構成のFlaskアプリを書いてみる

まずは、最小限の Flask アプリを書いてみましょう。
app.py という名前のファイルを作って、次のコードを書きます。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "こんにちは Flask! これは最初のWebページです。"

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

ここから、重要な部分を一つずつかみ砕いて説明します。

Flaskアプリの「本体」を理解する

app = Flask(__name__) の意味

Flask クラスから app というオブジェクトを作っています。

from flask import Flask

app = Flask(__name__)
Python

ここでやっていることは、
「Flaskに“アプリ本体”を作ってもらう」ということです。

__name__ は「このファイルの名前」を表す特別な変数で、
Flaskが内部で「どこから実行されているか」を知るために使います。
今は「Flaskを書くときは、だいたいこう書く」と覚えておけばOKです。

この app が、
「ルーティングを登録したり、サーバーを起動したりする中心人物」になります。

ルーティングの基本：@app.route("/")

「どのURLに来たら、どの関数を呼ぶか」を決める

ここが今日の超重要ポイントです。

@app.route("/")
def index():
    return "こんにちは Flask! これは最初のWebページです。"
Python

@app.route("/") は、
「/ というURLにアクセスが来たら、この下の関数を呼んでね」
という意味です。

/ は「トップページ」を表します。
ブラウザで http://127.0.0.1:5000/ にアクセスすると、
この index 関数が呼ばれます。

index 関数は、ただのPython関数です。
でも、Flaskにとっては「このURLに対応する処理」として登録されています。

関数が return した文字列が、そのままブラウザに表示されます。
つまり、今のコードでは、
トップページにアクセスすると「こんにちは Flask! これは最初のWebページです。」と表示されます。

ここでの本質は、
「URL → 関数 → 返り値（文字列）」という流れを作っている、ということです。

サーバーを起動する：app.run(debug=True)

自分のPCの中だけで動くWebサーバー

コードの最後の部分を見てみましょう。

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

if __name__ == "__main__": は、
「このファイルが直接実行されたときだけ、以下を実行する」というおまじないです。

app.run(debug=True) が、
「開発用のWebサーバーを起動する」命令です。

このファイルをターミナルから実行します。

python app.py

すると、ターミナルにこんな感じの表示が出ます。

 * Running on http://127.0.0.1:5000
 * Press CTRL+C to quit

この状態でブラウザを開き、
アドレスバーに http://127.0.0.1:5000/ と入力してみてください。

さっき return した文字列が、そのまま表示されていれば成功です。

ここでのポイントは、
「Pythonのプログラムが、ブラウザからのリクエストに応答している」
という感覚をつかむことです。

ルーティングを増やしてみる：複数ページを作る

/hello や /about を追加する

1つのURLだけだと、まだ「Webアプリ」という感じがしません。
今度は、URLごとに違うページを返してみましょう。

app.py を次のように書き換えます。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "トップページです。<br> /hello や /about にもアクセスしてみてください。"

@app.route("/hello")
def hello():
    return "こんにちは！これは /hello ページです。"

@app.route("/about")
def about():
    return "このアプリは Flask の練習用ミニWebアプリです。"

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

ここでやっていることは、とてもシンプルです。

@app.route("/hello")
@app.route("/about")

と書くことで、
/hello と /about というURLに対応する関数を増やしています。

ブラウザで次のURLを試してみてください。

http://127.0.0.1:5000/
http://127.0.0.1:5000/hello
http://127.0.0.1:5000/about

それぞれ違うメッセージが表示されればOKです。

ここでの重要ポイントは、
「URLごとに関数を用意して、@app.route で結びつける」
というルールを体で覚えることです。

ルーティングの本質をもう一度整理する

「住所」と「処理」を結びつける仕組み

ルーティング（routing）という言葉は、
「どこから来たリクエストを、どこに届けるかを決める仕組み」
という意味です。

Flaskでは、

URL（/ や /hello）
に対して
関数（index や hello）

を結びつけることで、
「このURLに来たら、この処理をする」というルールを作っています。

イメージとしては、
郵便物の「宛先住所」と「配達先の部屋」を対応づけている感じです。

@app.route("/hello") は、
「/hello 宛の郵便が来たら、この関数に届けてね」
という指定です。

関数は、
「どんな返事を返すか」を決める人です。
その返事（文字列）が、そのままブラウザに届きます。

例題：簡単な「自己紹介サイト」を作ってみる

トップ・プロフィール・連絡先の3ページ

1日目の仕上げとして、
超シンプルな「自己紹介サイト」を作ってみましょう。

トップページ /
プロフィールページ /profile
連絡先ページ /contact

の3つを用意します。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return """
    <h1>ようこそ、MONOのサイトへ</h1>
    <p>このサイトは Flask の練習用に作った超シンプルWebアプリです。</p>
    <p><a href="/profile">プロフィール</a> / <a href="/contact">連絡先</a></p>
    """

@app.route("/profile")
def profile():
    return """
    <h1>プロフィール</h1>
    <p>名前: MONO</p>
    <p>趣味: プログラミング学習、アプリづくり</p>
    <p><a href="/">トップに戻る</a></p>
    """

@app.route("/contact")
def contact():
    return """
    <h1>連絡先</h1>
    <p>お問い合わせは、まだダミーです。</p>
    <p>そのうち本物のフォームを作りましょう。</p>
    <p><a href="/">トップに戻る</a></p>
    """

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

ここで新しく出てきたのは、
HTMLタグ（<h1> や <p> や <a>）を文字列の中に書いていることです。

Flaskは、
「文字列をそのままブラウザに返す」だけなので、
その文字列がHTMLであれば、ブラウザがちゃんと解釈して表示してくれます。

この段階では、
「HTMLは“ブラウザが理解できる特別な文字列”なんだな」
くらいの理解で十分です。

1日目で絶対に押さえてほしい本質

「URL → 関数 → 文字列」という流れ

今日いちばん大事なのは、
Flaskアプリの流れを、シンプルな言葉で説明できることです。

ブラウザが、あるURLにアクセスする
Flaskが「そのURLに対応する関数」を探して呼び出す
関数が return した文字列が、そのままブラウザに表示される

この3ステップさえ頭に入っていれば、
もう「Webアプリの入り口」は完全に突破できています。

2日目以降は、
ここに「HTMLテンプレート」や「URLパラメータ」などを足していきます。
でも、どれだけ機能が増えても、
根っこにあるのは今日やった

URL
関数
返り値（文字列またはHTML）

という流れです。

ここまで来たあなたは、
もう「Flaskを触ったことがある人」ではなく、
ちゃんと「自分の手でWebサーバーを立ち上げた人」です。
この感覚、ちゃんと自分で認めてあげてほしい。

次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました