トップ＞ Webアプリ開発

Webアプリ開発入門｜Flaskで作って公開するまで

文法の次は実践です。この記事では、Flaskという小さな道具で「名前を入れると挨拶する」だけのWebアプリを作り、自分のパソコンで動かして、公開までの全体像をつかみます。完成よりも「一周した」という経験が大事な回です。

笑うPython男

いよいよ「ブラウザで動くもの」を作るよ。難しそう？　大丈夫、最小のアプリは10行もない。世間ではWebアプリと言うと大げさだけど、仕組みは「お願いされたら返す」だけだからね。

Step 0：Flaskか、FastAPIか

PythonのWebフレームワークの代表は Flask と FastAPI です。（フレームワーク自体の解説と3つの比較は「フレームワークとは」のページにまとめました）最初の一台は Flask がおすすめです。理由は「仕組みが目に見える」から。URLと関数の対応がそのまま書けるので、Webの基本（リクエストとレスポンス）が体で分かります。FastAPIは、APIを速く・型安全に作りたいときに強い道具です。順番としては「Flaskで一周 → 必要になったらFastAPI」で問題ありません。

Step 1：Flaskを入れて、最小のアプリ

前の記事で作った仮想環境を有効化して、Flaskを入れます。

pip install flask

app.py というファイルを作り、次を書きます。

from flask import Flask app = Flask(__name__) @app.route("/") def home(): return "こんにちは、Webアプリの世界！" if __name__ == "__main__": app.run(debug=True)

実行して、ブラウザで http://127.0.0.1:5000 を開きます。

python app.py

文字が表示されたら成功です。今やったことの意味はこれだけ：「/ という住所へのお願い（リクエスト）に対して、home関数の返事（レスポンス）を返した」。Webアプリの正体は、この繰り返しです。

Step 2：名前を受け取って挨拶する

次に、URLに名前を含める形に進化させます。

@app.route("/hello/<name>") def hello(name): return f"こんにちは、{name}さん！"

http://127.0.0.1:5000/hello/taro を開くと「こんにちは、taroさん！」と表示されます。<name> の部分が、関数の引数として渡る仕組みです。前の記事で学んだ「辞書」「関数」が、そのまま効いてきます。

Step 3：HTMLらしくする

文字列だけでは寂しいので、HTMLを返せるようにします。Flaskでは render_template_string を使うと、まずは1ファイルのまま試せます。

from flask import Flask, render_template_string @app.route("/hello/<name>") def hello(name): return render_template_string( "<h1>こんにちは、{{ name }}さん！</h1>", name=name)

{{ name }} の部分に、Python側の値が差し込まれます。本格的に作るときはHTMLを別ファイル（テンプレート）に分けますが、考え方は同じです。

笑うPython男

ね、思ったより地味でしょ？　Webアプリって、派手な見た目の裏側は「住所ごとに返事を分ける」だけなんだよ。地味な基礎を笑う人は、だいたい途中で詰まる。ボクは知ってる。

Step 4：公開までの全体像

自分のパソコンで動くアプリを「みんなが見られる場所」に置くのが公開（デプロイ）です。流れは次のとおりです。

pip freeze > requirements.txt で、必要なライブラリ一覧を書き出す
コードをGitHubなどの置き場所に上げる
公開先のサービス（Render、PythonAnywhere など）がそれを読み取り、サーバーで動かす
公開用のURLが発行され、誰でもアクセスできるようになる

公開先の無料枠について：各サービスには無料で試せる枠がありますが、条件（起動時間、スリープの有無など）は変わりやすいものです。登録の前に、必ず公式サイトで現在の無料枠の条件を確認してください。「いつの間にか有料プラン」になっていないか、支払い情報の登録を求められたら一度立ち止まるのが安全です。

なお、練習のうちは無理に公開しなくて構いません。「自分のパソコンで動く」が、この記事のゴールラインです。公開時に気になる「どのWebサーバーで動かすか」は、「Webサーバーの選び方」のページで解説しています。

つまずきポイント3つ（先回り）

ブラウザが「接続できません」になる → アプリが起動していない／ポート番号が違う、のどちらかです。ターミナルに表示されたURLをそのまま開くのが確実です。
コードを変えたのに画面が変わらない → ブラウザのキャッシュか、サーバーの再起動漏れです。debug=True なら自動で読み直されますが、困ったら一度止めて起動し直してください。
ModuleNotFoundError: No module named 'flask' → 仮想環境の有効化忘れが定番です。次のTips集でも扱います。

次の記事：つまずきTips集（エラー別の処方箋）

ModuleNotFoundError、文字化け、パスの罠など、よくある詰まりどころを1件ずつ潰します。

次の記事へ進む