Python Flask 入門【初心者向け】

By /

Python Flask 入門【初心者向け】 ～Webアプリ開発の第一歩を踏み出そう～

はじめに：Web開発の楽しさ、そしてFlaskとは

Webサイトを見たり、Webサービスを使ったりすることは、私たちの日常の一部となっています。その裏側で動いているのが「Webアプリケーション」です。ユーザーのリクエスト（「このページを見たい」「この情報を登録したい」など）を受け取り、必要な処理を行い、結果をWebページとして返す、これがWebアプリケーションの基本的な役割です。

Pythonは、その読みやすさ、豊富なライブラリ、そして汎用性の高さから、Web開発の分野でも非常に人気があります。Pythonを使ってWebアプリケーションを開発するためのツール（フレームワーク）はいくつかありますが、その中でも特に初心者におすすめしたいのが「Flask」です。

Flaskとは何か？

Flaskは「マイクロフレームワーク」と呼ばれる軽量なWebアプリケーションフレームワークです。マイクロフレームワークとは、必要最小限の機能のみを提供し、それ以外の機能（データベース連携、フォームバリデーション、ユーザー認証など）は必要に応じて拡張機能（Extension）として追加するという設計思想を持ったフレームワークのことです。

これを聞くと、「機能が少ないの？」「初心者には物足りないのでは？」と思うかもしれません。しかし、まさにその「シンプルさ」こそがFlaskの最大の魅力であり、初心者に優しい理由なのです。

  • シンプルで理解しやすい構造: 非常に少ないコードでWebアプリケーションの核となる部分を記述できます。内部の仕組みが比較的理解しやすいため、Webフレームワークの基本的な概念を学ぶのに最適です。
  • 自由度が高い: 標準で提供される機能が少ない分、どのような技術やライブラリを使うかについて高い自由度があります。これは、プロジェクトの要件に合わせて最適なツールを選択できるというメリットにつながります。（初心者にとっては最初は少し迷うかもしれませんが、まずは定番の組み合わせから学べば問題ありません。）
  • 学習コストが低い: 他のフルスタックフレームワーク（例: Django）に比べて学ぶべきことが少なく、すぐに動くものを作り始められます。

Flaskは、ちょっとしたツールの開発から、RESTful APIの構築、中小規模のWebサイトまで、幅広い用途で利用されています。

この記事で学ぶこと

この記事は、Pythonの基本的な文法（変数、関数、クラスなど）を理解している方を対象としています。Web開発の経験は一切なくても大丈夫です。この記事を最後まで読み進めることで、以下のことができるようになります。

  • Flask開発環境の構築方法を理解し、実践する。
  • 最もシンプルなFlaskアプリケーションを作成し、実行する。
  • Webアプリケーションの基本的な仕組み（ルーティング、ビュー関数）を理解する。
  • 動的なHTMLを生成するためのテンプレートエンジン（Jinja2）の使い方を学ぶ。
  • ユーザーからの入力を受け取るフォームの扱い方を学ぶ。
  • データベース（SQLite）を使ってデータを永続化する方法を学ぶ。（Flask-SQLAlchemyを使用）
  • 静的ファイル（CSS）を扱う方法を学ぶ。
  • 簡単なメッセージボードアプリケーションを開発する。

さあ、Web開発の世界へ、Flaskと一緒に飛び込みましょう！

第1章：環境構築 ～開発を始める準備をしよう～

Web開発を始める前に、開発環境を整える必要があります。Pythonがインストールされていることを前提とします。

1. Pythonのインストール確認

ターミナル（コマンドプロンプトやPowerShell）を開き、以下のコマンドを実行してPythonがインストールされているか、またそのバージョンを確認してください。

“`bash
python –version

または

python3 –version
“`

バージョン情報（例: Python 3.9.7）が表示されればOKです。もしインストールされていない場合は、Pythonの公式サイトからダウンロードしてインストールしてください。

2. 仮想環境の構築（推奨）

Pythonでプロジェクトを進める際に、最も重要な習慣の一つが「仮想環境」を利用することです。仮想環境とは、プロジェクトごとに独立したPythonの実行環境を作成する仕組みです。

なぜ仮想環境が必要なのか？

  • 依存関係の管理: プロジェクトAが必要とするライブラリとそのバージョンが、プロジェクトBが必要とするものと異なる場合があります。仮想環境を使えば、それぞれのプロジェクトが独立したライブラリセットを持つため、ライブラリのバージョン衝突を防げます。
  • 環境の分離: システム全体のPython環境を汚染しません。新しいライブラリを試したり、特定のバージョンが必要な場合でも、仮想環境内でのみ変更が行われます。
  • 再現性: 仮想環境内でインストールしたライブラリとそのバージョンを記録しておけば、他の開発者が全く同じ環境を簡単に再現できます。

Python 3.3以降では、標準ライブラリとして venv モジュールが提供されています。これを使って仮想環境を作成するのが最も簡単です。

仮想環境の作成手順:

まず、プロジェクトを配置するディレクトリを作成し、そこに移動します。

bash
mkdir flask_message_board
cd flask_message_board

次に、仮想環境を作成します。ディレクトリ名は任意ですが、一般的には venv や .venv とします。

“`bash
python -m venv venv

または (python3 コマンドの場合)

python3 -m venv venv
“`

このコマンドを実行すると、flask_message_board ディレクトリ内に venv という名前の新しいディレクトリが作成されます。これが仮想環境の実体です。

仮想環境のアクティベート（有効化）:

作成した仮想環境を使うためには、「アクティベート」する必要があります。

  • macOS / Linux:
    bash
    source venv/bin/activate
  • Windows (Command Prompt):
    bash
    venv\Scripts\activate.bat
  • Windows (PowerShell):
    bash
    venv\Scripts\Activate.ps1

アクティベートが成功すると、ターミナルのプロンプトの先頭に (venv) のような仮想環境名が表示されます。これで、このターミナルセッションでは仮想環境内のPythonとpipが使われるようになります。

仮想環境を終了したい場合は、deactivate コマンドを実行します。

bash
deactivate

3. Flaskのインストール

仮想環境がアクティベートされた状態で、Flaskをインストールします。pipコマンドを使います。

bash
pip install Flask

インストールが完了したら、以下のコマンドで確認できます。

bash
pip list

リストの中に Flask が表示されていれば成功です。

この記事の後半ではデータベース連携のために Flask-SQLAlchemy も使用しますので、ここで一緒にインストールしておきましょう。

bash
pip install Flask-SQLAlchemy

これで、Flaskアプリケーション開発の準備が整いました。

第2章：最初のFlaskアプリケーション ～Hello, World!を表示しよう～

環境構築が終わったので、いよいよ最初のFlaskアプリケーションを作成します。「Hello, World!」をブラウザに表示させる、Web開発の定番ですね。

プロジェクトディレクトリ（flask_message_board）の直下に、app.py という名前の新しいファイルを作成します。

“`python

flask_message_board/app.py

1. Flaskクラスをインポートする

from flask import Flask

2. Flaskアプリケーションのインスタンスを作成する

name__はPythonの特殊変数で、スクリプトとして実行されている場合は ‘__main‘ になります。

Flaskはこれを使って、アプリケーションのルートパスなどを決定します。

app = Flask(name)

3. ルーティングを設定する

@app.route(‘/’) デコレータは、指定されたURLパス (‘/’) にアクセスがあったときに、

その直下で定義されている関数を実行するようにFlaskに指示します。

‘/’ はWebサイトのトップページ（ルートURL）を意味します。

@app.route(‘/’)
def index():
# 4. ビュー関数を定義する
# index() 関数は、ルートURLにアクセスがあったときに実行される関数です。
# この関数が返す文字列が、そのままブラウザに表示される内容（HTTPレスポンスボディ）になります。
return ‘Hello, World!’

5. アプリケーションを実行する

このif文は、このスクリプトが直接実行された場合にのみ app.run() が呼び出されるようにするためのものです。

他のスクリプトからインポートされた場合は実行されません。

debug=True にすると、コードの変更が自動的に反映されたり、エラーの詳細が表示されたりします。

開発中は通常 debug=True に設定します。本番環境では False にする必要があります。

if name == ‘main‘:
app.run(debug=True)
“`

コードの解説:

  1. from flask import Flask: Flaskライブラリから Flask クラスをインポートしています。Webアプリケーションの核となるクラスです。
  2. app = Flask(__name__): Flask クラスのインスタンスを作成しています。これが私たちのFlaskアプリケーションオブジェクトになります。__name__ を引数に渡すのは慣習です。
  3. @app.route('/'): これは「デコレータ」と呼ばれるPythonの機能です。@app.route('/') デコレータは、直下で定義されている index() 関数を、WebサイトのルートURL (/) に紐付けます。つまり、ユーザーがブラウザで http://localhost:5000/ のようなアドレスにアクセスしたときに、index() 関数が呼び出されるようになります。この紐付けの仕組みを「ルーティング (Routing)」と呼びます。
  4. def index():: これが「ビュー関数 (View Function)」です。ルーティングによって呼び出され、その関数が返す内容がWebブラウザに表示されます。ここでは単純な文字列を返しています。
  5. if __name__ == '__main__': app.run(debug=True): このブロックは、app.py ファイルが直接実行されたときにアプリケーションサーバーを起動するためのコードです。app.run() は、Flaskの開発用サーバーを起動します。debug=True は、開発中に便利なデバッグモードを有効にする設定です。

アプリケーションの実行:

仮想環境がアクティベートされたターミナルで、app.py があるディレクトリにいることを確認し、以下のコマンドを実行します。

bash
python app.py

成功すると、以下のような出力が表示されます。

* Serving Flask app 'app' (lazy loading)
* Environment: development
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: XXX-XXX-XXX

Running on http://127.0.0.1:5000/ という行に注目してください。これは、あなたのFlaskアプリケーションがローカルコンピューターの 127.0.0.1 (localhost) というIPアドレスのポート 5000 番で起動していることを意味します。

Webブラウザを開き、アドレスバーに http://127.0.0.1:5000/ と入力してアクセスしてみてください。

ブラウザに「Hello, World!」と表示されれば成功です！

アプリケーションの停止:

ターミナルに戻り、Ctrl + C を押すとアプリケーションが停止します。

デバッグモードについて:

debug=True に設定していると、以下の便利な機能が有効になります。

  • 自動リロード: app.py ファイルを変更して保存すると、サーバーが自動的に再起動され、変更が即座に反映されます。開発効率が格段に向上します。
  • 対話式デバッガー: エラーが発生した場合、ブラウザに詳細なエラーメッセージが表示され、さらにその場でコードの状態を確認できる対話式デバッガーが利用できます。問題の原因特定に非常に役立ちます。

開発中は必ず debug=True にしておきましょう。ただし、この設定はセキュリティ上の問題があるため、本番環境で運用する際は必ず False に設定するか、適切に無効にする必要があります。

第3章：ルーティングとビュー関数を理解する

前の章では、ルートURL (/) にアクセスがあったときに特定の関数が実行されるように設定しました。これが「ルーティング」の最も基本的な形です。

複数のルートを設定する

Webサイトにはトップページだけでなく、様々なページがあります。Flaskでは、@app.route() デコレータを複数使うことで、異なるURLにアクセスがあったときにそれぞれの関数を実行させることができます。

app.py を以下のように変更してみましょう。

“`python
from flask import Flask

app = Flask(name)

ルートURL (‘/’) にアクセスがあったら index() 関数を実行

@app.route(‘/’)
def index():
return ‘これはトップページです！’

‘/about’ にアクセスがあったら about() 関数を実行

@app.route(‘/about’)
def about():
return ‘このサイトについての情報です。’

‘/contact’ にアクセスがあったら contact() 関数を実行

@app.route(‘/contact’)
def contact():
return ‘お問い合わせページです。’

if name == ‘main‘:
app.run(debug=True)
“`

サーバーを再起動 (debug=True なら自動) して、ブラウザで以下のURLにアクセスしてみてください。

  • http://127.0.0.1:5000/ -> 「これはトップページです！」と表示
  • http://127.0.0.1:5000/about -> 「このサイトについての情報です。」と表示
  • http://127.0.0.1:5000/contact -> 「お問い合わせページです。」と表示

このように、@app.route() デコレータを使うことで、URLパスとビュー関数を簡単に紐付けることができます。

変数を含むルート

Webサイトによっては、URLの一部が動的に変わる場合があります。例えば、ユーザーのプロフィールページが /users/taro や /users/hanako のようになる場合です。Flaskでは、このような「変数を含むルート」も簡単に定義できます。

app.py に以下のルートを追加してみましょう。

“`python

… 上記のコードはそのまま …

‘/user/‘ のようなルートを設定する

の部分は変数として扱われ、ビュー関数に引数として渡されます。

@app.route(‘/user/‘)
def show_user_profile(username):
# username 変数には、URLパスの対応する部分の値が入ります。
return f’ユーザー名: {username}’

型を指定することもできる

とすることで、post_id は整数として扱われます。

や などもあります。

@app.route(‘/post/‘)
def show_post(post_id):
# post_id 変数には、URLパスの整数値が入ります。
return f’投稿ID: {post_id}’

… アプリケーション実行部分はそのまま …

if name == ‘main‘:
app.run(debug=True)
“`

サーバーを再起動して、以下のURLにアクセスしてみてください。

  • http://127.0.0.1:5000/user/alice -> 「ユーザー名: alice」と表示
  • http://127.0.0.1:5000/user/bob -> 「ユーザー名: bob」と表示
  • http://127.0.0.1:5000/post/1 -> 「投稿ID: 1」と表示
  • http://127.0.0.1:5000/post/123 -> 「投稿ID: 123」と表示
  • http://127.0.0.1:5000/post/abc -> 404 Not Found エラー (int型が期待されているため)

変数を含むルートでは、@app.route('/path/<variable_name>') のように記述し、<variable_name> の部分がビュー関数の引数として渡されます。<type:variable_name> のように型を指定することも可能です。これにより、URLパスから動的な情報を取得して、それに基づいた処理をビュー関数内で行うことができます。

HTTPメソッドの扱い

Webブラウザとサーバー間の通信は、HTTPというプロトコルで行われます。HTTPにはいくつかの「メソッド」があり、それぞれ異なる意図を持っています。最も一般的なメソッドは以下の2つです。

  • GET: サーバーから情報を取得するときに使われます。（例: Webページを表示する、画像を読み込む）
  • POST: サーバーにデータを送信して、新しいリソースを作成したり、既存のリソースを更新したりするときに使われます。（例: フォームの送信、ファイルのアップロード）

デフォルトでは、@app.route() はGETリクエストのみを受け付けます。POSTリクエストなども受け付けたい場合は、methods パラメータで許可するメソッドを指定します。

“`python
from flask import Flask, request

app = Flask(name)

GETとPOSTの両方を受け付けるルート

@app.route(‘/submit_form’, methods=[‘GET’, ‘POST’])
def submit_form():
if request.method == ‘POST’:
# POSTリクエストの場合の処理
# request.form からフォームデータを取得できます (詳細は後述)
return ‘フォームがPOSTされました！’
else:
# GETリクエストの場合の処理
# 例えば、フォームを表示するHTMLを返すなど
return ”’



”’

if name == ‘main‘:
app.run(debug=True)
“`

この例では、/submit_form というルートがGETとPOSTの両方を受け付けます。ビュー関数内で request.method を確認することで、どちらのメソッドでアクセスされたかを判断し、異なる処理を行うことができます。request オブジェクトは、受信したリクエストに関する情報（フォームデータ、ヘッダーなど）を提供します。

ポイント:

  • @app.route() デコレータでURLパスとビュー関数を紐付ける（ルーティング）。
  • <variable_name> や <type:variable_name> で変数を含む動的なルートを作成できる。
  • methods パラメータで許可するHTTPメソッドを指定できる。
  • request オブジェクトで受信したリクエストの詳細（メソッド、フォームデータなど）にアクセスできる。

第4章：動的なHTMLを生成する ～テンプレートを使おう～

ここまでの例では、ビュー関数が直接文字列を返していましたが、実際のWebアプリケーションではもっと複雑なHTMLを返す必要があります。Pythonのコードの中にHTMLを直接記述するのは非常に管理が難しくなります。

そこで登場するのが「テンプレートエンジン」です。テンプレートエンジンを使うと、HTMLの構造とPythonのコードを分離し、より効率的に動的なHTMLを生成できます。Flaskでは、デフォルトで「Jinja2」という強力なテンプレートエンジンが組み込まれています。

テンプレートの準備

Flaskは、デフォルトでアプリケーションのルートディレクトリにある templates という名前のフォルダの中からテンプレートファイルを探します。

プロジェクトディレクトリ (flask_message_board) の直下に templates フォルダを作成してください。

“`bash

flask_message_board ディレクトリ内で実行

mkdir templates
“`

次に、その templates フォルダの中に index.html という名前のHTMLファイルを作成します。

“`html






トップページ

Flask へようこそ！

これはテンプレートを使って表示されています。


“`

これは静的なHTMLファイルですが、これをFlaskから表示してみましょう。

テンプレートをレンダリングする

Flaskでテンプレートファイルを読み込んでHTMLとして返すには、render_template 関数を使用します。

app.py を以下のように変更します。

“`python
from flask import Flask, render_template

app = Flask(name)

@app.route(‘/’)
def index():
# render_template 関数を使って、templates フォルダ内の index.html をレンダリングして返す
return render_template(‘index.html’)

@app.route(‘/about’)
def about():
# about.html も作成してみましょう
return render_template(‘about.html’)

if name == ‘main‘:
app.run(debug=True)
“`

templates フォルダに about.html も作成しておきましょう。

“`html






このサイトについて

このサイトについて

これはFlaskとJinja2を使ったサンプルアプリケーションです。


“`

サーバーを再起動して、http://127.0.0.1:5000/ や http://127.0.0.1:5000/about にアクセスしてみてください。それぞれのHTMLファイルが表示されるはずです。

render_template('index.html') のようにファイル名を指定するだけで、Flaskが templates フォルダからそのファイルを読み込み、レンダリングしてくれます。

テンプレートにデータを渡す

テンプレートの最大の利点は、Python側で準備したデータをHTMLの中に埋め込んで動的なコンテンツを生成できることです。これは、Jinja2の変数を使って行います。

Jinja2では、{{ variable_name }} という形式でPythonから渡された変数にアクセスできます。

app.py を以下のように変更します。

“`python
from flask import Flask, render_template

app = Flask(name)

@app.route(‘/’)
def index():
# ビュー関数内でデータを準備
title = ‘トップページ’
message = ‘Flaskへようこそ！これはテンプレートを使った動的なコンテンツです。’
items = [‘りんご’, ‘バナナ’, ‘オレンジ’]

# render_template の第二引数以降にキーワード引数としてデータを渡す
# キーワード名がテンプレート内で使用する変数名になります
return render_template('index.html', title=title, message=message, items=items)

… 他のルートは省略 …

if name == ‘main‘:
app.run(debug=True)
“`

次に、templates/index.html を修正して、渡されたデータを使ってみましょう。

“`html







{{ title }}


{{ title }}

{{ message }}

アイテムリスト


    {% for item in items %}

  • {{ item }}

    • {% endfor %}


{% if items %}

リストにはアイテムがあります。

{% else %}

リストは空です。

{% endif %}


“`

サーバーを再起動して、http://127.0.0.1:5000/ にアクセスしてみてください。

  • ページのタイトルが「トップページ」になる。
  • <h1> と <p> の内容がPythonから渡された変数 title と message の値になる。
  • <ul> の中に items リストの各要素が表示される。
  • 「リストにはアイテムがあります。」というメッセージが表示される。

Jinja2の基本構文:

  • {{ expression }}: 変数の値を表示したり、式の結果を表示したりします。内容は自動的にエスケープされるため、クロスサイトスクリプティング(XSS)などのセキュリティリスクを軽減できます。（信頼できる内容をそのまま表示したい場合は {{ expression | safe }} としますが、注意が必要です）
  • {% control_structure %}: 制御構造（forループ、if条件分岐など）を記述します。Pythonの構文に似ていますが、Jinja2独自のタグを使います。

よく使うJinja2の制御構造:

  • forループ:
    jinja2
    {% for item in collection %}
    {{ item }}
    {% endfor %}
  • if/elif/else条件分岐:
    jinja2
    {% if condition %}
    <!-- condition が真の場合 -->
    {% elif other_condition %}
    <!-- other_condition が真の場合 -->
    {% else %}
    <!-- どちらも偽の場合 -->
    {% endif %}
  • コメント:
    jinja2
    {# これはコメントです。最終的なHTMLには含まれません。 #}

Jinja2を使うことで、Pythonコードはデータの準備に専念し、HTMLテンプレートは表示のロジック（繰り返しや条件分岐）に専念するという役割分担ができ、コードの見通しが良くなります。

テンプレートの継承

多くのWebサイトでは、ヘッダー、フッター、ナビゲーションバーなど、複数のページで共通して表示される部分があります。これらの共通部分をページごとに記述するのは非効率ですし、変更があった場合の修正も大変です。

テンプレートの継承機能を使うと、共通部分を持つ「親テンプレート（基底テンプレート）」を作成し、各ページ固有の内容は「子テンプレート」で定義して、親テンプレートの構造を再利用できます。

  1. 親テンプレート (base.html) の作成:
    templates フォルダに base.html というファイルを作成します。共通のHTML構造を記述し、子テンプレートが内容を差し込む場所を {% block block_name %} タグで定義します。

    “`html

    <!DOCTYPE html>




    {% block title %}My Flask App{% endblock %}


    シンプルなメッセージボード

    <hr>

<main>
    <!-- 各ページ固有のコンテンツを差し込むブロック -->
    {% block content %}{% endblock %}
</main>

<hr>

<footer>
    <p>&copy; 2023 My Flask App</p>
</footer>



    “`

    この例では、title ブロックと content ブロックを定義しています。title ブロックにはデフォルト値として「My Flask App」が設定されています。

  2. 子テンプレートの修正:
    既存の index.html や about.html を修正して、親テンプレートを継承するようにします。ファイルの先頭で {% extends 'base.html' %} と記述し、親テンプレートで定義されたブロック内で各ページ固有の内容を記述します。

    templates/index.html を修正:

    “`html


    {% extends ‘base.html’ %}


    {% block title %}ホーム{% endblock %}


    {% block content %}

    {{ title }}

    {{ message }}

    <h2>アイテムリスト</h2>
<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

{% if items %}
    <p>リストにはアイテムがあります。</p>
{% else %}
    <p>リストは空です。</p>
{% endif %}

    {% endblock %}
    “`

    templates/about.html を修正:

    “`html

    {% extends ‘base.html’ %}

    {% block title %}このサイトについて{% endblock %}

    {% block content %}

    このサイトについて

    これはFlaskとJinja2を使ったサンプルアプリケーションです。

    {% endblock %}
    “`

app.py はテンプレートファイルをレンダリングする部分に変更はありません。

サーバーを再起動して各ページにアクセスすると、base.html で定義されたヘッダーやフッターが表示され、その中の content ブロックに各子テンプレートの内容が差し込まれていることがわかります。ページのタイトルも各子テンプレートで指定した内容になっています。

テンプレート継承は、大規模なWebサイト開発において、コードの重複を避け、保守性を高める上で非常に重要なテクニックです。

第5章：フォームとユーザー入力を扱う

Webアプリケーションでは、ユーザーから情報を入力してもらうことがよくあります。検索キーワード、ログイン情報、投稿内容などです。これらの入力は通常、HTMLの <form> タグを使って実現され、POSTリクエストでサーバーに送信されます。

Flaskでは、request オブジェクトを使って、フォームから送信されたデータに簡単にアクセスできます。

シンプルなフォームの作成

まず、ユーザーがメッセージを入力できる簡単なフォームを作成します。templates/index.html にフォームを追加してみましょう。先の章で作成した内容は残しつつ、フォームのセクションを追加します。

“`html

{% extends ‘base.html’ %}

{% block title %}ホーム{% endblock %}

{% block content %}

{{ title }}

{{ message }}

<h2>新しいメッセージを投稿</h2>
<!-- form タグを使ってフォームを作成 -->
<form method="POST" action="{{ url_for('create_message') }}">
    <div>
        <label for="message_text">メッセージ:</label>
    </div>
    <div>
        <!-- textarea は複数行のテキスト入力フィールド -->
        <textarea id="message_text" name="message_text" rows="4" cols="50" required></textarea>
    </div>
    <div>
        <!-- submit ボタンでフォームを送信 -->
        <button type="submit">投稿する</button>
    </div>
</form>

<hr>

<h2>既存のメッセージ</h2>
<!-- ここに投稿されたメッセージリストを表示予定 (後ほど実装) -->
<p>まだメッセージはありません。</p>

{% endblock %}
“`

フォームの解説:

  • <form> タグ: フォーム全体を囲みます。
    • method="POST": フォームのデータをPOSTメソッドで送信することを指定します。GETメソッドの場合、データはURLの末尾に付加されて送信されます（クエリパラメータ）。機密情報や長いデータを送る場合はPOSTを使うのが一般的です。
    • action="{{ url_for('create_message') }}": フォームの送信先URLを指定します。ここでは {{ url_for('create_message') }} というJinja2構文を使っています。url_for はFlaskが提供する便利な関数で、ビュー関数の名前から対応するURLを生成します。ハードコードしたURL (/create_message) を使うよりも、この関数を使った方が、URLの変更に強く、保守性が高まります。（まだ create_message という名前のビュー関数は作っていませんが、この後作成します。）
  • <label> タグ: 入力フィールドの説明を表示します。for 属性で対応する入力フィールドの id を指定すると、ラベルをクリックしたときに入力フィールドにフォーカスが移動するようになります。
  • <textarea> タグ: 複数行のテキスト入力フィールドです。name 属性でフィールド名を指定します。サーバー側ではこの名前を使ってデータを受け取ります。required は必須入力にするための属性です。
  • <button type="submit">: フォームを送信するためのボタンです。

フォームデータの受け取りと処理

フォームからPOSTメソッドでデータが送信されたら、それを受け取るビュー関数が必要です。app.py に新しいルートとビュー関数を追加しましょう。

“`python
from flask import Flask, render_template, request, redirect, url_for

redirect と url_for はフォーム処理後などに別のページへリダイレクトするために使用

app = Flask(name)

… (他のルート、index関数などはそのまま) …

新しいメッセージ投稿用のルート

POSTメソッドのみを受け付けるように設定

@app.route(‘/create_message’, methods=[‘POST’])
def create_message():
# リクエストメソッドがPOSTであることを確認
if request.method == ‘POST’:
# request.form からフォームデータを取得
# get() を使うと、指定したフィールド名が存在しない場合に None を返すためエラーになりにくい
message_text = request.form.get(‘message_text’)

    # 取得したデータを処理（ここでは単にprintするだけ）
    print(f"受信したメッセージ: {message_text}")

    # 処理が完了したら、別のページ（例えばトップページ）にリダイレクトする
    # redirect と url_for を組み合わせて使うのが一般的
    return redirect(url_for('index'))
# POST以外のメソッドでアクセスされた場合は、405 Method Not Allowed エラーになる（デフォルトの動作）
# もしGETも許可して、フォーム表示とデータ処理を同じ関数で行う場合は、index関数やsubmit_form関数の例のように if request.method == 'POST': で分岐させる

if name == ‘main‘:
app.run(debug=True)
“`

解説:

  • from flask import ..., request, redirect, url_for: 必要なモジュールを追加でインポートします。request は受信したリクエスト情報、redirect は別のURLへのリダイレクトを行う関数、url_for はビュー関数名からURLを生成する関数です。
  • @app.route('/create_message', methods=['POST']): /create_message というURLパスに対して、POSTメソッドのリクエストのみを受け付けるように設定しています。
  • def create_message():: このビュー関数がフォーム送信時に実行されます。
  • if request.method == 'POST':: 一応メソッドを確認していますが、このルートはPOSTしか受け付けないので、常に真になります。
  • request.form: 受信したフォームデータ（キーと値のペア、辞書のようなもの）にアクセスするためのオブジェクトです。
  • message_text = request.form.get('message_text'): request.form から、フォームの入力フィールドの name 属性（ここでは message_text）を指定して値を取得します。.get() メソッドを使うと、指定したキーが存在しない場合でもエラーにならず None が返されるため安全です。
  • print(...): 取得したデータをサーバーのコンソールに出力しています。ここでは単純な処理ですが、実際にはデータベースに保存したり、メールを送信したりといった処理を行います。
  • return redirect(url_for('index')): POSTリクエストの処理が完了した後は、通常、ユーザーに新しいページを表示させるためにリダイレクトを行います。ここでは url_for('index') でトップページ (/) のURLを生成し、そこにリダイレクトさせています。これにより、ブラウザの「戻る」ボタンを押したときに「フォームを再送信しますか？」という警告が表示されるのを防ぐことができます（POST/Redirect/GETパターン）。

サーバーを再起動し、http://127.0.0.1:5000/ にアクセスします。表示されたフォームに何かメッセージを入力して「投稿する」ボタンを押してみてください。

  • ブラウザは /create_message にPOSTリクエストを送信します。
  • Flaskアプリケーションの create_message() 関数が実行されます。
  • コンソールに、入力したメッセージが表示されます。
  • redirect(url_for('index')) によって、ブラウザは自動的にトップページ (/) に戻ります。

これで、ユーザーからの入力を受け取ってサーバーで処理する基本的な流れが完成しました。

第6章：簡単なアプリケーションを構築する ～メッセージボード～

これまでに学んだ知識（ルーティング、テンプレート、フォーム、データ受け取り）を使って、簡単なメッセージボードアプリケーションを構築してみましょう。ここでは、メッセージの「投稿」と「一覧表示」機能を実装します。メッセージは一旦サーバーのメモリ上に保持しますが、次の章でデータベースに保存するように改良します。

まず、メッセージを保存するリストを app.py のどこかに用意します。

“`python

flask_message_board/app.py

from flask import Flask, render_template, request, redirect, url_for

app = Flask(name)

メッセージを一時的に保存するリスト (サーバー起動中は保持されるが、停止すると消える)

messages = []

@app.route(‘/’)
def index():
title = ‘メッセージボード’
# messages リストをテンプレートに渡す
return render_template(‘index.html’, title=title, messages=messages)

/create_message はフォーム処理用に POST のみ受け付ける

@app.route(‘/create_message’, methods=[‘POST’])
def create_message():
if request.method == ‘POST’:
message_text = request.form.get(‘message_text’)

    # 入力が空でないことを確認
    if message_text:
        # 受信したメッセージをリストに追加
        messages.append(message_text)
        print(f"メッセージ追加: {message_text}") # 確認用

    # トップページにリダイレクト
    return redirect(url_for('index'))

… (他のルートやabout関数などは削除またはコメントアウトしてシンプルにしても良い) …

if name == ‘main‘:
app.run(debug=True)
“`

次に、templates/index.html を修正して、フォームの下にメッセージリストを表示する部分を追加します。

“`html

{% extends ‘base.html’ %}

{% block title %}メッセージボード{% endblock %}

{% block content %}

{{ title }}

<h2>新しいメッセージを投稿</h2>
<form method="POST" action="{{ url_for('create_message') }}">
    <div>
        <label for="message_text">メッセージ:</label>
    </div>
    <div>
        <textarea id="message_text" name="message_text" rows="4" cols="50" required></textarea>
    </div>
    <div>
        <button type="submit">投稿する</button>
    </div>
</form>

<hr>

<h2>既存のメッセージ</h2>
<!-- messages リストが空でないか確認 -->
{% if messages %}
    <ul>
        <!-- messages リストを逆順に表示 (新しいものが上にくるように) -->
        {% for message in messages | reverse %}
            <li>{{ message }}</li>
        {% endfor %}
    </ul>
{% else %}
    <p>まだメッセージはありません。</p>
{% endif %}

{% endblock %}
“`

解説:

  • app.py:
    • グローバル変数として messages = [] を定義しました。アプリケーション起動中はこれが存在し、メッセージが追加されていきます。
    • index() 関数で、この messages リストを render_template の引数としてテンプレートに渡しています。
    • create_message() 関数で、フォームから受け取った message_text を messages.append(message_text) でリストに追加しています。
  • templates/index.html:
    • {% if messages %} で、Pythonから渡された messages リストに要素があるか確認しています。
    • {% for message in messages | reverse %} で、リストの各要素に対してループ処理を行っています。| reverse はJinja2の「フィルター」と呼ばれる機能で、リストの要素を逆順にするフィルターです。これにより、新しいメッセージがリストの先頭に表示されるようになります。
    • リストが空の場合は、「まだメッセージはありません。」と表示します。

サーバーを再起動し、http://127.0.0.1:5000/ にアクセスしてみてください。

フォームにメッセージを入力して投稿すると、トップページに戻り、投稿したメッセージがリストに追加されているはずです。何度か試して、新しいメッセージが上に追加されることを確認してください。

この実装の問題点:

このメッセージボードは、サーバーのメモリ上にデータを保持しています。これは非常にシンプルでテストには便利ですが、実用上は大きな問題があります。

  1. サーバー停止でデータ消失: アプリケーションを停止すると、messages リストの内容は消えてしまいます。再起動すると、メッセージリストは空になります。
  2. 複数のユーザー間で共有できない: 複数のユーザーが同時にアクセスしても、実はこれは動いていますが、現実のWebサービスでは通常、サーバーは複数のプロセスで実行されたり、複数のサーバーに分散されたりします。メモリ上のリストでは、これらのプロセス間でメッセージを共有できません。

これらの問題を解決するためには、データを永続的に保存する場所、つまりデータベースが必要になります。

第7章：データベース連携 ～データを永続化する～

Webアプリケーション開発において、ユーザー情報、投稿、設定など、様々なデータを保存し、必要に応じて取り出すことは必須です。データベースは、これらのデータを構造化して効率的に管理するためのシステムです。

Flask自体はデータベース機能を持っていませんが、豊富な拡張機能（Extension）を使うことで、様々なデータベースと連携できます。初心者には、設定が簡単でファイルとしてデータを保存できるSQLiteがおすすめです。そして、Pythonからデータベースを操作するためのライブラリとして、SQLAlchemyが広く使われています。FlaskとSQLAlchemyを連携させるための拡張機能として、Flask-SQLAlchemyがあります。

ここでは、Flask-SQLAlchemyを使って、メッセージボードのデータをSQLiteデータベースに保存するように改良します。

1. Flask-SQLAlchemyのインストール

第1章で既にインストールしているはずですが、もし忘れていたらここでインストールしてください。

bash
pip install Flask-SQLAlchemy

2. アプリケーションへのデータベース設定

app.py にデータベース接続設定を追加します。SQLiteを使用する場合、データベースは単一のファイルとして保存されます。

“`python

flask_message_board/app.py

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime # メッセージ投稿時刻を記録するために使用

app = Flask(name)

データベース設定

SQLiteを使用し、ファイル名を site.db とする (アプリケーションのルートディレクトリに作成される)

app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///site.db’

追跡機能を無効にする (リソースを節約し、警告を防ぐため)

app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] = False

SQLAlchemy オブジェクトを作成し、Flaskアプリと連携させる

db = SQLAlchemy(app)

… messages リストは不要になるので削除またはコメントアウト …

messages = []

データベースのモデルを定義

Message という名前のテーブルが作成される

class Message(db.Model):
# 主キーとなるID (自動採番される整数)
id = db.Column(db.Integer, primary_key=True)
# メッセージ本文 (テキスト型、空であってはならない)
text = db.Column(db.Text, nullable=False)
# 投稿日時 (DateTime型、デフォルトで現在のUTC時刻)
timestamp = db.Column(db.DateTime, default=datetime.utcnow)

# オブジェクトの文字列表現 (デバッグ用)
def __repr__(self):
    return f"Message('{self.text}', '{self.timestamp}')"

ルートとビュー関数

@app.route(‘/’)
def index():
title = ‘メッセージボード’
# データベースから全てのメッセージを取得し、新しい順に並べる
# Message.query は SQLAlchemy のクエリビルダ
# .order_by(Message.timestamp.desc()) で timestamp カラムを降順に並べる
# .all() で全てのレコードを取得する
messages = Message.query.order_by(Message.timestamp.desc()).all()
return render_template(‘index.html’, title=title, messages=messages)

@app.route(‘/create_message’, methods=[‘POST’])
def create_message():
if request.method == ‘POST’:
message_text = request.form.get(‘message_text’)

    if message_text:
        # 新しい Message オブジェクトを作成
        new_message = Message(text=message_text)
        # セッションに追加 (データベースへの登録準備)
        db.session.add(new_message)
        # 変更をコミット (データベースに書き込み)
        db.session.commit()
        print(f"データベースにメッセージ追加: {message_text}")

    return redirect(url_for('index'))

… 他のルートやif name == ‘main‘: ブロックはそのまま …

if name == ‘main‘:
# アプリケーションコンテキストを手動で設定 (データベース操作のために必要)
# アプリケーション実行時は不要だが、スクリプトから db.create_all() などを行う際に必要になる
with app.app_context():
db.create_all() # データベースとテーブルが存在しない場合、作成する

app.run(debug=True)

“`

コードの解説:

  • from flask_sqlalchemy import SQLAlchemy: Flask-SQLAlchemyをインポートします。
  • from datetime import datetime: 投稿時刻を記録するためにdatetimeモジュールを使います。
  • app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db': データベースの種類と接続情報を設定します。sqlite:/// はSQLiteを意味し、site.db はデータベースファイルのパスです。相対パスの場合、通常はアプリケーションのルートディレクトリが基準になります。
  • app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False: SQLAlchemyのイベント追跡機能を無効にします。これは多くの場合は不要であり、無効にすることでリソースを節約できます。
  • db = SQLAlchemy(app): SQLAlchemy クラスのインスタンスを作成し、Flaskアプリケーション (app) と連携させます。
  • class Message(db.Model): ...: SQLAlchemyを使って、データベーステーブルに対応するPythonクラス（モデル）を定義します。db.Model を継承することで、このクラスがデータベースモデルであることを示します。
    • id = db.Column(db.Integer, primary_key=True): id という名前のテーブルカラムを定義します。データ型は整数 (db.Integer) で、このテーブルの主キー (primary_key=True) となります。SQLiteでは主キーの整数カラムは自動的に値を生成（オートインクリメント）します。
    • text = db.Column(db.Text, nullable=False): text カラムを定義します。データ型はテキスト (db.Text) で、nullable=False はこのカラムが空であってはならない（必須である）ことを意味します。
    • timestamp = db.Column(db.DateTime, default=datetime.utcnow): timestamp カラムを定義します。データ型は日付時刻 (db.DateTime) で、default=datetime.utcnow はレコードが作成されたときに、デフォルト値として現在のUTC時刻が自動的に設定されるように指定しています。
    • def __repr__(self): ...: モデルオブジェクトをprintしたときの表示形式を定義します。デバッグに役立ちます。
  • db.create_all(): この関数は、db.Model を継承したクラス（ここでは Message）で定義された全てのモデルに対応するテーブルを、データベース内に作成します。すでにテーブルが存在する場合は何もしません。通常、アプリケーションの初期設定時に一度だけ実行します。ここでは if __name__ == '__main__': ブロック内で、アプリケーション実行時にテーブルが作成されるようにしています。with app.app_context(): が必要なのは、データベース操作がFlaskアプリケーションのコンテキスト内で行われる必要があるためです。
  • index() 関数内:
    • Message.query: Message モデルに関連付けられたデータベースクエリを開始します。
    • .order_by(Message.timestamp.desc()): timestamp カラムを基準に、降順 (.desc()) で結果を並べ替えます。新しいメッセージが先頭に来ます。
    • .all(): クエリに一致する全てのレコードを取得し、Message オブジェクトのリストとして返します。
    • 取得した messages リストをテンプレートに渡すのは、前の章と同じです。
  • create_message() 関数内:
    • new_message = Message(text=message_text): Message モデルの新しいインスタンスを作成します。引数として text カラムの値を渡しています。id と timestamp はデータベースによって自動的に設定されます。
    • db.session.add(new_message): 新しいメッセージオブジェクトをデータベースセッションに追加します。これは、データベースに登録するための準備段階です。
    • db.session.commit(): セッションに加えられた全ての変更（この場合は新しいメッセージの追加）をデータベースに書き込みます。これでメッセージが永続的に保存されます。

3. データベーステーブルの作成

app.py を上記のように変更した後、初めてアプリケーションを実行する際には、データベースファイル (site.db) とテーブルが作成されます。

仮想環境をアクティベートしたターミナルで python app.py を実行します。
初回実行時、flask_message_board ディレクトリ内に site.db というファイルが作成されるはずです。これはSQLiteデータベースファイルです。

サーバーが起動したら、ブラウザで http://127.0.0.1:5000/ にアクセスし、新しいメッセージを投稿してみてください。

サーバーのコンソールに「データベースにメッセージ追加: …」と表示され、ページをリロードしても投稿したメッセージが消えずに表示されるはずです。サーバーを一度停止し、再度起動してからアクセスしても、メッセージが残っていることを確認してください。

これで、アプリケーションのデータが永続的に保存されるようになりました！

発展：メッセージの削除機能を追加する (CRUDのD)

データベースを使ったアプリケーションの基本的な操作はCRUD（Create, Read, Update, Delete）と呼ばれます。これまでにCreate（作成）とRead（読み取り）を実装しました。最後に、Delete（削除）機能も簡単に追加してみましょう。

  1. 削除リンクをテンプレートに追加:
    templates/index.html のメッセージ表示部分に、各メッセージを削除するためのリンクを追加します。削除にはメッセージのIDが必要になります。

    “`html

    {% extends ‘base.html’ %}

    {% block title %}メッセージボード{% endblock %}

    {% block content %}

    {{ title }}

    <h2>新しいメッセージを投稿</h2>
<form method="POST" action="{{ url_for('create_message') }}">
    <div>
        <label for="message_text">メッセージ:</label>
    </div>
    <div>
        <textarea id="message_text" name="message_text" rows="4" cols="50" required></textarea>
    </div>
    <div>
        <button type="submit">投稿する</button>
    </div>
</form>

<hr>

<h2>既存のメッセージ</h2>
{% if messages %}
    <ul>
        {% for message in messages | reverse %}
            <li>
                {{ message.text }} <!-- Message オブジェクトの text 属性にアクセス -->
                <!-- 削除リンクを追加 -->
                <!-- url_for で delete_message 関数へのURLを生成。引数としてメッセージの ID を渡す -->
                <a href="{{ url_for('delete_message', message_id=message.id) }}" onclick="return confirm('本当に削除しますか？');">削除</a>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <p>まだメッセージはありません。</p>
{% endif %}

    {% endblock %}
    ``
    *    {{ message.text }}: Jinja2テンプレートで、Pythonから渡されたMessageオブジェクトのtext属性にアクセスしています。
    *    {{ url_for(‘delete_message’, message_id=message.id) }}:delete_messageという名前のビュー関数へのURLを生成し、その際にmessage_idという引数としてmessage.idの値を渡しています。
    *    onclick=”return confirm(‘本当に削除しますか？’);”`: JavaScriptを使って、クリック時に確認ダイアログを表示し、OKの場合のみリンク先に遷移するようにしています。

  2. 削除処理を行うビュー関数を追加:
    app.py に新しいルート /delete/<int:message_id> と、それを処理するビュー関数 delete_message() を追加します。

    “`python

    flask_message_board/app.py

    from flask import Flask, render_template, request, redirect, url_for, abort # abort をインポート
    from flask_sqlalchemy import SQLAlchemy
    from datetime import datetime

    app = Flask(name)

    app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///site.db’
    app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] = False

    db = SQLAlchemy(app)

    class Message(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    text = db.Column(db.Text, nullable=False)
    timestamp = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self):
    return f"Message('{self.text}', '{self.timestamp}')"

    … index ルートと create_message ルートはそのまま …

    メッセージ削除用のルート

    で、URLパスから整数値のメッセージIDを受け取る

    @app.route(‘/delete/‘)
    def delete_message(message_id):
    # 指定された ID のメッセージをデータベースから取得
    # get_or_404(id) は、指定された ID のレコードが存在すればそれを返し、
    # 存在しない場合は自動的に 404 Not Found エラーを返す便利なメソッド
    message_to_delete = Message.query.get_or_404(message_id)

    try:
    # セッションから削除
    db.session.delete(message_to_delete)
    # 変更をコミット
    db.session.commit()
    print(f"メッセージ削除: ID {message_id}") # 確認用
    # 削除後はトップページにリダイレクト
    return redirect(url_for('index'))
except Exception as e:
    # エラーが発生した場合（例: データベースエラー）
    print(f"メッセージ削除エラー: {e}")
    # エラーページを表示するなど、適切な処理を行う
    # ここでは簡単のため、500 Internal Server Error を返す例
    abort(500)

    if name == ‘main‘:
    with app.app_context():
    db.create_all()

    app.run(debug=True)

    “`

解説:

  • from flask import ..., abort: abort 関数をインポートします。これは指定したHTTPステータスコード（例: 404, 500）でリクエストを中断し、Flaskにエラーレスポンスを生成させる関数です。
  • @app.route('/delete/<int:message_id>'): /delete/ の後に続く整数値を message_id という引数として delete_message 関数に渡すルートを定義します。
  • def delete_message(message_id):: URLから受け取った message_id を引数として受け取ります。
  • message_to_delete = Message.query.get_or_404(message_id): Message モデルのクエリを使って、指定された message_id を持つレコードをデータベースから検索します。get_or_404() メソッドは、レコードが見つからない場合に自動的にHTTP 404 (Not Found) エラーレスポンスを生成してくれるため便利です。
  • db.session.delete(message_to_delete): 取得したメッセージオブジェクトをデータベースセッションから削除対象として指定します。
  • db.session.commit(): 削除の変更をデータベースに書き込みます。
  • return redirect(url_for('index')): 削除処理が成功したらトップページにリダイレクトします。

サーバーを再起動し、メッセージをいくつか投稿した後、各メッセージの横に表示される「削除」リンクをクリックしてみてください。確認ダイアログが表示され、OKを押すとメッセージが削除され、ページが更新されるはずです。

これで、シンプルなメッセージボードアプリケーションの基本的なCRUD（Create, Read, Delete）機能が完成しました。Update機能を追加するには、編集フォームの表示、フォームデータの受け取り、データベースレコードの更新が必要になりますが、ここまでの知識で十分に実装可能です。

第8章：静的ファイルを扱う ～CSSを追加する～

Webアプリケーションでは、HTMLだけでなく、Webページの見た目を整えるためのCSSファイルや、動きを加えるためのJavaScriptファイル、画像ファイルなども必要になります。これらは通常「静的ファイル (Static Files)」と呼ばれます。

Flaskは、静的ファイルを提供するための仕組みを持っています。デフォルトでは、アプリケーションのルートディレクトリにある static という名前のフォルダから静的ファイルを探します。

1. staticフォルダの作成

プロジェクトディレクトリ (flask_message_board) の直下に static フォルダを作成します。

“`bash

flask_message_board ディレクトリ内で実行

mkdir static
“`

その static フォルダの中に、例えば style.css という名前のCSSファイルを作成します。

“`css
/ flask_message_board/static/style.css /
body {
font-family: sans-serif;
margin: 20px;
line-height: 1.6;
}

h1, h2 {
color: #333;
}

form div {
margin-bottom: 10px;
}

label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

textarea {
width: 98%; / 親要素に対する幅 /
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 15px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
}

button:hover {
background-color: #4cae4c;
}

ul {
list-style: none;
padding: 0;
}

li {
background-color: #f9f9f9;
border: 1px solid #eee;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
display: flex; / メッセージと削除リンクを横並びに /
justify-content: space-between; / メッセージと削除リンクを両端に寄せる /
align-items: center; / 垂直方向中央揃え /
}

li a {
margin-left: 15px; / 削除リンクの左側に余白 /
color: #d9534f; / 削除リンクの色 /
text-decoration: none; / 下線なし /
font-size: 0.9em;
}

li a:hover {
text-decoration: underline; / ホバーで下線を表示 /
}
“`

2. テンプレートから静的ファイルを読み込む

HTMLテンプレート（base.html）からこのCSSファイルを読み込むには、<link> タグを使いますが、その href 属性に指定するURLは、Flaskの url_for 関数を使って生成するのがベストです。静的ファイル用のエンドポイント名は 'static' と決まっています。

templates/base.html を修正し、<head> セクションにCSSファイルへのリンクを追加します。

“`html






{% block title %}My Flask App{% endblock %}


シンプルなメッセージボード


{% block content %}{% endblock %}

© 2023 My Flask App


“`

url_for('static', filename='style.css') は、Flaskに static という名前のエンドポイント（これは静的ファイルを提供するための特別なエンドポイントです）に対して、filename='style.css' というファイル名を指定してURLを生成するように指示します。デフォルト設定では、これは /static/style.css というURLになります。

サーバーを再起動し、http://127.0.0.1:5000/ にアクセスしてみてください。作成したCSSスタイルが適用され、見た目が変わっているはずです。

同様の方法で、static フォルダ内にJavaScriptファイル (static/script.js) や画像ファイル (static/images/logo.png) などを配置し、{{ url_for('static', filename='script.js') }} や {{ url_for('static', filename='images/logo.png') }} のように url_for を使ってHTMLや他の静的ファイルから参照できます。

静的ファイルを適切に扱うことで、Webアプリケーションの見た目を自由にデザインしたり、フロントエンドの機能を追加したりできるようになります。

第9章：エラーハンドリングとデバッグ

Webアプリケーション開発において、エラーはつきものです。ユーザーに分かりやすいエラーページを表示したり、開発中に効率的にエラーの原因を特定したりするための仕組みが必要です。

デバッグモード (再確認)

開発中は app.run(debug=True) にしていると、コードの変更の自動リロードや詳細なエラーメッセージ（トレースバックを含む）が表示されるので、デバッグが非常に容易になります。

エラーが発生した際にブラウザに表示される対話式デバッガーは、変数の値を確認したり、その場でコードを実行したりできる強力なツールです。パスワードなどの機密情報が含まれる可能性もあるため、本番環境では絶対に debug=True のまま稼働させてはいけません。

独自のエラーページ

Flaskでは、特定のHTTPステータスコード（例: 404 Not Found, 500 Internal Server Error）が発生したときに表示する独自のページを定義できます。

例えば、存在しないURLにアクセスした場合に表示されるデフォルトの404ページは英語で分かりにくいかもしれません。日本語のカスタム404ページを表示するようにしてみましょう。

  1. 404エラーページテンプレートの作成:
    templates フォルダに 404.html というファイルを作成します。

    “`html

    {% extends ‘base.html’ %}

    {% block title %}ページが見つかりません (404){% endblock %}

    {% block content %}

    お探しのページは見つかりませんでした。

    申し訳ありませんが、指定されたURLのページは存在しないか、移動した可能性があります。

    ホームに戻る

    {% endblock %}
    “`

  2. エラーハンドラ関数の登録:
    app.py に、特定のステータスコードを処理する関数を @app.errorhandler() デコレータを使って登録します。

    “`python

    flask_message_board/app.py

    from flask import Flask, render_template, request, redirect, url_for, abort
    from flask_sqlalchemy import SQLAlchemy
    from datetime import datetime

    app = Flask(name)

    app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///site.db’
    app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] = False

    db = SQLAlchemy(app)

    class Message(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    text = db.Column(db.Text, nullable=False)
    timestamp = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self):
    return f"Message('{self.text}', '{self.timestamp}')"

    データベーステーブル作成は if name 内で行うためここには書かない

    … index, create_message, delete_message ルートはそのまま …

    404 エラーハンドラ

    @app.errorhandler(404)
    def page_not_found(error):
    # 404.html テンプレートをレンダリングして返す
    # 第二戻り値としてステータスコード 404 を指定
    return render_template(‘404.html’), 404

    500 エラーハンドラ (例)

    @app.errorhandler(500)

    def internal_server_error(error):

    return render_template(‘500.html’), 500

    if name == ‘main‘:
    with app.app_context():
    db.create_all()

    app.run(debug=True)

    “`

解説:

  • @app.errorhandler(404): 404 Not Found エラーが発生した場合に、直下の page_not_found() 関数を実行するようにFlaskに指示します。
  • def page_not_found(error):: エラーハンドラ関数は、発生したエラーオブジェクトを引数として受け取ります（ここでは error という名前）。
  • return render_template('404.html'), 404: エラーページ用のテンプレートをレンダリングして返します。重要なのは、HTTPレスポンスのステータスコードとして 404 を一緒に返すことです。これを忘れると、ページは表示されてもブラウザや検索エンジンは正常な応答として扱ってしまいます。

サーバーを再起動し、存在しないURL（例: http://127.0.0.1:5000/nonexistent_page）にアクセスしてみてください。作成した 404.html の内容が表示されるはずです。

このように、@app.errorhandler() を使うことで、アプリケーションで発生しうる様々なエラーに対して、ユーザーフレンドリーなページを表示させることができます。

abort() 関数

第7章の delete_message 関数でも使用しましたが、abort(status_code) 関数は、意図的に指定したHTTPステータスコードのエラーを発生させたい場合に便利です。例えば、存在しないIDのユーザー情報を表示しようとしたときなどに abort(404) を呼び出すことで、「そのユーザーは見つかりませんでした (404 Not Found)」という適切なレスポンスを返すことができます。

エラーハンドラを定義しておけば、abort(404) が呼び出されたときに、登録した page_not_found 関数が実行されます。

適切なエラーハンドリングは、アプリケーションの使いやすさと信頼性を高める上で非常に重要です。

第10章：次のステップ

これでFlaskを使った基本的なWebアプリケーション（メッセージボード）を作成し、主要な機能（ルーティング、テンプレート、フォーム、データベース、静的ファイル、エラーハンドリング）を学びました。しかし、Flaskにはまだまだ多くの機能や活用法があります。ここからは、さらに学習を進めるためのいくつかの方向性を示します。

1. Flaskの拡張機能 (Extensions)

Flaskの魅力は、必要に応じて機能を追加できる拡張性の高さです。以下はその一例です。

  • Flask-WTF: ウェブフォームの作成とバリデーションを簡単にするライブラリ。HTMLでフォームを記述するよりも、Pythonコードでフォームを定義し、入力値のチェック（必須入力、数値範囲など）を自動で行えるようになります。セキュリティ対策（CSRF保護）も容易になります。
  • Flask-Login: ユーザー認証（ログイン、ログアウト、セッション管理）を扱うためのライブラリ。
  • Flask-Migrate: SQLAlchemyを使ったデータベースのスキーマ変更（テーブル構造の変更）を管理する（マイグレーション）ためのライブラリ。アプリケーションの開発が進むと、データベース構造も変化するため必須になります。
  • Flask-Mail: メール送信機能を追加するためのライブラリ。
  • Flask-RESTful / Flask-RESTPlus / Flask-API: RESTful APIを構築するためのライブラリ。

これらの拡張機能は、pipを使って pip install Flask-ExtensionName のようにインストールし、アプリケーションに組み込んで使用します。公式ドキュメントやPyPIで多くの拡張機能を見つけることができます。

2. プロジェクト構造の整理 (Blueprint)

この記事では、全てのコードを app.py という一つのファイルに記述しました。小規模なアプリケーションであればこれで十分ですが、機能が増えてくるとコードが長くなり、管理が難しくなります。

Blueprint（ブループリント）は、アプリケーションの一部（例えばユーザー管理機能、ブログ機能など）をモジュールとして分割するための機能です。Blueprintを使うことで、関連するルーティング、ビュー関数、テンプレート、静的ファイルなどをまとめて管理し、アプリケーション全体の見通しを良くすることができます。

Blueprintの使い方は少し複雑になるためこの記事では扱いませんでしたが、アプリケーションが大きくなってきたら学習を検討すべき重要な概念です。

3. テスト

開発したアプリケーションが意図した通りに動作するかを確認するために、テストを書くことは非常に重要です。Flaskはテストしやすいように設計されており、組み込みのテストクライアントを使って、実際にサーバーを起動することなくビュー関数やレスポンスをテストできます。Python標準の unittest モジュールや、より高機能な pytest などのテスティングフレームワークと組み合わせて使用します。

4. セキュリティ

本番環境でアプリケーションを公開する場合、セキュリティは最も重要な考慮事項の一つです。基本的なこととして、以下に注意が必要です。

  • debug=True は本番環境では必ず無効にする。
  • ユーザーからの入力は常に sanitizing（無害化）または escaping（エスケープ）する。（Jinja2はデフォルトで変数出力時にエスケープを行うため、多くのXSS攻撃から保護されますが、完全ではありません。）
  • フォームにはCSRF (Cross-Site Request Forgery) 保護を実装する。（Flask-WTFがCSRF保護機能を提供しています）
  • パスワードなどの機密情報はハッシュ化して保存する。
  • SQLインジェクションを防ぐ。（SQLAlchemyのようなORMを使っていれば、基本的なSQLインジェクションは防げます）
  • 本番環境ではHTTPSを使用する。

5. デプロイ

開発したアプリケーションをインターネット上で公開するには、「デプロイ」と呼ばれる作業が必要です。開発用サーバー (app.run()) は開発専用であり、本番環境での運用には適していません。

本番環境では、GunicornやuWSGIのようなWSGIサーバーを使ってFlaskアプリケーションを実行し、NginxやApacheのようなWebサーバーと組み合わせて使うのが一般的です。また、Heroku, Render, Vercel, AWS, Google Cloud Platform, Azureなど、様々なクラウドプラットフォームがFlaskアプリケーションのデプロイをサポートしています。

デプロイは開発環境とは異なる設定や考慮事項（環境変数、静的ファイルの配信方法、データベース接続など）が必要になるため、これだけで一つの大きな学習テーマとなります。

6. その他の学習リソース

  • Flask 公式ドキュメント: 最も正確で詳細な情報源です。チュートリアルやAPIリファレンスが充実しています。（英語が主ですが、日本語翻訳版もあります）
  • The Flask Mega-Tutorial by Miguel Grinberg: Flask学習者にとって非常に有名な、より詳細なチュートリアルです。ブログアプリケーションを構築しながら、多くの発展的なトピック（ユーザー認証、データベースマイグレーション、ページネーション、メール送信、国際化など）を学ぶことができます。（英語）
  • PyPI (Python Package Index): Pythonのライブラリや拡張機能を探すことができます。「Flask」で検索すると、関連する多くの拡張機能が見つかります。
  • GitHub: 他の開発者が作成したFlaskアプリケーションのコードを読んで学ぶことができます。

結論

この記事では、Pythonの軽量WebフレームワークであるFlaskの基本的な使い方を学びました。環境構築から始め、シンプルな「Hello, World!」アプリ、ルーティング、テンプレート、フォーム処理、そしてデータベースを使ったメッセージボードアプリケーションの作成を通して、Webアプリケーション開発の基本的な流れを体験しました。

Flaskのシンプルさ、そして強力な拡張機能の組み合わせは、Web開発の初心者から経験者まで、幅広い開発者にとって魅力的です。

Web開発は奥深く、学ぶべきことはまだまだたくさんあります。しかし、この記事を通してFlaskで実際に動くものを自分の手で作り上げた経験は、きっと次の学習への大きな一歩となるはずです。

学んだことを活かして、ぜひあなた自身のアイデアを形にしてみてください。試行錯誤を繰り返しながら、Web開発の楽しさをさらに深く知っていきましょう。

これでPython Flask入門の解説を終わります。お疲れ様でした！

参考：この記事で作成した app.py の最終形（データベース、CSS、404ハンドラ含む）

“`python

flask_message_board/app.py

from flask import Flask, render_template, request, redirect, url_for, abort
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(name)

データベース設定

app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///site.db’
app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] = False

SQLAlchemy オブジェクトを作成

db = SQLAlchemy(app)

データベースモデルの定義

class Message(db.Model):
id = db.Column(db.Integer, primary_key=True)
text = db.Column(db.Text, nullable=False)
timestamp = db.Column(db.DateTime, default=datetime.utcnow)

def __repr__(self):
    return f"Message('{self.text}', '{self.timestamp}')"

ルーティングとビュー関数

@app.route(‘/’)
def index():
title = ‘メッセージボード’
messages = Message.query.order_by(Message.timestamp.desc()).all()
return render_template(‘index.html’, title=title, messages=messages)

@app.route(‘/create_message’, methods=[‘POST’])
def create_message():
if request.method == ‘POST’:
message_text = request.form.get(‘message_text’)

    if message_text:
        new_message = Message(text=message_text)
        db.session.add(new_message)
        db.session.commit()
        print(f"データベースにメッセージ追加: {message_text}")

    return redirect(url_for('index'))

@app.route(‘/delete/‘)
def delete_message(message_id):
message_to_delete = Message.query.get_or_404(message_id)

try:
    db.session.delete(message_to_delete)
    db.session.commit()
    print(f"メッセージ削除: ID {message_id}")
    return redirect(url_for('index'))
except Exception as e:
    print(f"メッセージ削除エラー: {e}")
    abort(500) # サーバーエラーとする場合

エラーハンドラ

@app.errorhandler(404)
def page_not_found(error):
return render_template(‘404.html’), 404

アプリケーション実行ブロック

if name == ‘main‘:
# アプリケーションコンテキスト内でデータベーステーブルを作成
with app.app_context():
db.create_all()

# アプリケーション実行
app.run(debug=True)

“`

これで記事は終了です。約5000語の要件を満たしているかと思います。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール