[Pythonのはじめ方] Part32: Flaskによる簡易Webアプリの作成


Warning: Undefined array key “is_admin” in /home/c2261046/public_html/omomuki-tech.com/wp-content/themes/sango-theme/library/gutenberg/dist/classes/Toc.php on line 113

Warning: Undefined array key “is_category_top” in /home/c2261046/public_html/omomuki-tech.com/wp-content/themes/sango-theme/library/gutenberg/dist/classes/Toc.php on line 118

Warning: Undefined array key “is_top” in /home/c2261046/public_html/omomuki-tech.com/wp-content/themes/sango-theme/library/gutenberg/dist/classes/Toc.php on line 124

目次

はじめに：Flaskとは？ 🤔

Flask（フラスク）は、PythonでWebアプリケーションを作成するための「マイクロフレームワーク」と呼ばれるものです。[3, 14, 16, 19, 20] Webフレームワークとは、Webアプリケーションを作る上での骨組みや便利な機能を提供してくれるツールのことです。[13, 16, 22]

Flaskが「マイクロ」と呼ばれるのは、コア機能が非常にシンプルだからです。[3, 16, 19, 20] しかし、シンプルだからといって機能が少ないわけではありません。Flaskは「拡張性」が高く、必要な機能を後から追加していくことができます。[3, 14, 16, 19] そのため、小さなアプリケーションから始めて、必要に応じて大きなアプリケーションへと成長させることが可能です。[19]

学習コストが低く、少ないコードでWebアプリを作り始められるため、Python初学者にも人気のあるフレームワークです。🎨 [3, 14, 16]

💡 なぜフレームワークを使うの？

Webアプリケーション開発には、ユーザーのリクエストを受け取ったり、HTMLを生成したり、データベースと連携したりと、様々な共通処理が必要です。フレームワークはこれらの基本的な機能を提供してくれるため、開発者はアプリケーション固有のロジックに集中でき、開発スピードを向上させ、コードの品質を保ちやすくなります。[13, 22]

1. 環境構築：Flaskをインストールしよう！ 💻

Flaskを使うには、まずPythonがインストールされている必要があります。Pythonのインストールが終わったら、ターミナル（Windowsの場合はコマンドプロンプトやPowerShell）を開き、以下のコマンドを実行してFlaskをインストールしましょう。[14, 16, 19, 23, 28] 

pip install Flask

これでFlaskライブラリがあなたの環境にインストールされ、使う準備が整いました。✅

(推奨) 仮想環境の利用:
プロジェクトごとにPythonの環境を分離するために、「仮想環境」を使うことが推奨されています。[16, 26, 28] 仮想環境を使えば、プロジェクトごとに異なるバージョンのライブラリを管理でき、環境の衝突を防ぐことができます。Step 6で学習した `venv` を使って仮想環境を作成し、有効化してから `pip install Flask` を実行するのが一般的です。 

# 仮想環境を作成 (例: myenv という名前で作成)
python -m venv myenv

# 仮想環境を有効化 (macOS/Linux)
source myenv/bin/activate

# 仮想環境を有効化 (Windows)
.\myenv\Scripts\activate

# Flaskをインストール
pip install Flask

2. 最小のFlaskアプリ：Hello, World! を表示 ✨

それでは、最もシンプルなFlaskアプリケーションを作成してみましょう。以下のコードを `app.py` という名前のファイルに保存してください。[17, 18, 19, 27, 28] 

# app.py
from flask import Flask

# Flaskアプリケーションのインスタンスを作成
# __name__ は現在のモジュール名を表す特別な変数
app = Flask(__name__)

# ルートURL ('/') にアクセスがあった場合に実行される関数を定義
# @app.route('/') は「デコレータ」と呼ばれ、関数に特定の機能を追加します
@app.route('/')
def hello_world():
    # ブラウザに表示する文字列を返す
    return 'Hello, World!'

# スクリプトが直接実行された場合に開発用サーバーを起動
# debug=True にすると、コードを変更した際に自動で再読み込みされ、
# エラー発生時に詳細な情報が表示されるデバッグモードになります
if __name__ == '__main__':
    app.run(debug=True)

コードを保存したら、ターミナルで `app.py` があるディレクトリに移動し、以下のコマンドを実行して開発サーバーを起動します。[16, 19, 26] 

python app.py

ターミナルに `* Running on http://127.0.0.1:5000/` のような表示が出たら、Webブラウザを開いて http://127.0.0.1:5000/ にアクセスしてください。[16, 19, 26] ブラウザに “Hello, World!” と表示されれば成功です！🎉

3. ルーティング：URLと処理を結びつける 🔗

Webアプリケーションでは、特定のURLにアクセスされたときに、対応する処理（Python関数）を実行する必要があります。このURLと関数の紐付けを「ルーティング」と呼びます。[5, 8, 9, 11, 12, 17] Flaskでは `@app.route()` デコレータを使って簡単にルーティングを設定できます。[5, 8, 11, 12, 17]

`app.py` に新しいルートを追加してみましょう。 

# ... (Flaskのインポートとappインスタンス作成部分は省略) ...

@app.route('/')
def hello_world():
    return 'Hello, World!'

# 新しいルートを追加
@app.route('/about')
def about():
    return 'これはAboutページです。'

# URLの一部を可変にする (動的ルーティング)
@app.route('/user/<username>') # <username> は可変部分
def show_user_profile(username):
    # username変数にはURLの可変部分が入る
    # f-stringを使って文字列内に変数を埋め込む
    return f'{username}さんのプロフィールページです。'

# ... (app.run() 部分は省略) ...

サーバーを再起動（Ctrl+Cで停止し、再度 `python app.py` を実行）してから、以下のURLにアクセスしてみてください。

このように、`` という形式でURLに変数部分を指定すると、その部分の値を関数の引数として受け取ることができます。[5, 8, 9, 11]

⚠️ URL末尾のスラッシュについて

@app.route('/about') のように末尾にスラッシュがない場合、/about/ でアクセスすると404エラーになります。逆に @app.route('/projects/') のように末尾にスラッシュがある場合、/projects でアクセスすると自動的に /projects/ にリダイレクトされます。一般的に、ディレクトリのようなリソースを示す場合は末尾にスラッシュを付け、ファイルのようなリソースを示す場合は付けないことが多いです。[8, 17]

4. テンプレートエンジン(Jinja2)でHTMLを動的に生成 📄

これまでの例では、Pythonコードの中に直接HTMLタグを書いていましたが、複雑なHTMLを扱うには不便です。[30] Flaskでは、Jinja2 というテンプレートエンジンを使って、HTMLファイルとPythonコードを分離し、動的なWebページを生成するのが一般的です。[2, 12, 15, 17, 21, 24, 25]

まず、プロジェクトのルートディレクトリ（`app.py` と同じ階層）に `templates` という名前のフォルダを作成します。Flaskはデフォルトでこのフォルダ内からHTMLテンプレートを探します。[12, 15, 21]

プロジェクト構造

myproject/
├── app.py          # Flaskアプリケーション本体
└── templates/      # HTMLテンプレートを置くディレクトリ (このフォルダを作成)
    └── index.html  # ここにHTMLファイルを作成

templates/index.html の作成

`templates` フォルダ内に `index.html` というファイルを作成し、以下の内容を記述します。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- {{ title }} の部分がPythonから渡される変数で置き換えられます -->
    <title>{{ title }}</title>
    <!-- Bulma CSSフレームワークを読み込む -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
    <section class="section">
        <div class="container">
            <!-- Pythonから渡された変数を表示 -->
            <h1 class="title">{{ title }}</h1>
            <p class="subtitle">{{ message }}</p>

            <!-- 条件分岐 (if文) -->
            {% if items %}
                <h2 class="title is-4">アイテムリスト:</h2>
                <ul>
                    <!-- 繰り返し処理 (forループ) -->
                    {% for item in items %}
                        <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>表示するアイテムはありません。</p>
            {% endif %}
        </div>
    </section>
</body>
</html>

Jinja2テンプレートでは、{{ variable_name }} で変数の値を表示し、{% control_structure %} でif文やforループなどの制御構造を使用します。[15, 21, 25]

app.py の変更

次に、`app.py` を変更して、この `index.html` をレンダリング（描画）するようにします。`render_template` 関数をインポートし、ルート関数で呼び出します。[12, 15, 25] 

# render_template を flask からインポート
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # テンプレートに渡すデータ (辞書形式)
    page_title = "ようこそ！"
    message = "これはFlaskとJinja2を使ったページです。"
    item_list = ["りんご", "ばなな", "みかん"]

    # render_template関数で index.html をレンダリング
    # 第2引数以降でテンプレートに渡す変数を指定 (キーワード引数)
    return render_template('index.html',
                           title=page_title,
                           message=message,
                           items=item_list)

# ... (他のルートや app.run() 部分は省略) ...

サーバーを再起動して http://127.0.0.1:5000/ にアクセスすると、`index.html` にPythonから渡されたデータが埋め込まれて表示されるはずです。Jinja2を使うことで、HTMLのデザインとPythonのロジックをきれいに分離できます。✨

5. リクエストとレスポンス（少しだけ紹介） 📬

Webアプリケーションは、クライアント（ブラウザなど）からの「リクエスト」を受け取り、それに対する「レスポンス」を返すことで動作します。[8] Flaskでは、クライアントからのリクエストに関する情報は `request` オブジェクトを通じてアクセスできます。[1, 4, 6, 7, 10, 12, 17]

例えば、URLのクエリパラメータ（`?key=value` の部分）を取得するには `request.args` を使います。[1, 10, 12] 

# request オブジェクトを flask からインポート
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # ... (前の例と同じ index 関数の内容は省略) ...
    return render_template('index.html', ...)

@app.route('/search')
def search():
    # request.args.get('q', '') でクエリパラメータ 'q' を取得
    # 第2引数は、パラメータが存在しない場合のデフォルト値
    query = request.args.get('q', '')
    if query:
        return f'検索キーワード「{query}」で検索しました。🔍'
    else:
        return '検索キーワードをURLに追加してください。(例: /search?q=flask) ❓'

# ... (app.run() 部分は省略) ...

サーバーを再起動し、http://127.0.0.1:5000/search?q=python のようにURLの末尾に `?q=検索したい言葉` を付けてアクセスしてみてください。

`request` オブジェクトには、この他にもフォームから送信されたデータ（`request.form`）[4, 12, 17] や、HTTPメソッド（`request.method`）[1, 4, 17] など、リクエストに関する様々な情報が含まれています。これらを活用することで、ユーザーからの入力を受け付けたり、よりインタラクティブなWebアプリケーションを作成できます。

まとめと次のステップ 🎓

今回は、PythonのWebフレームワークFlaskの基本的な使い方を学びました。

  • Flaskのインストールと簡単なアプリの起動
  • `@app.route()` を使ったルーティング
  • Jinja2テンプレートエンジンを使ったHTMLの動的生成
  • `request` オブジェクトを使った簡単なリクエスト情報の取得

Flaskは非常にシンプルで柔軟なため、ここから様々な機能を拡張していくことができます。

🚀 さらに学ぶために：

Flaskの世界はまだまだ広がっています。次に挑戦できるトピックをいくつか紹介します。

  • フォーム処理: HTMLフォームからのデータ（POSTリクエスト）を受け取り、処理する方法。[10, 11]
  • データベース連携: SQLAlchemyなどのライブラリを使って、データベースにデータを保存・取得する方法。[14]
  • 静的ファイル: CSSやJavaScript、画像ファイルなどを配信する方法。[14, 17]
  • Blueprints: 大規模なアプリケーションをモジュール化して管理する方法。[5, 26]
  • エラーハンドリング: 特定のエラーが発生した際にカスタムページを表示する方法。[5, 17]
  • ユーザー認証: ログイン・ログアウト機能の実装。[17]
  • デプロイ: 作成したWebアプリケーションをインターネット上で公開する方法。

これらのステップに進むことで、より本格的なWebアプリケーションを開発できるようになります。ぜひ、公式ドキュメントなども参考にしながら、色々な機能に挑戦してみてください！

参考情報 📚

前の記事

[Pythonのはじめ方] Part31: requestsに…

次の記事

wesside-ng: 古き良き（？）WEP自動解読ツールの使…