【初めての Flask】Python で Web アプリ？特徴や使い方、Django との違いについても徹底解説！

本記事では、初めて Flask を活用して Web アプリケーションを開発したい方に向けて、特徴やインストール方法を紹介しています。
さらに Flask を使用したアプリケーション実行および拡張機能の利用方法についても解説しています。

また、もう一つの Python のフレームワークである Django との違いについて解説していますので、ぜひ最後までご覧ください！

DX を推進する AI ・データサイエンス人材育成コース

プログラミング未経験から、AI やデータサイエンスを学ぶことのできる 6 ヶ月間のコースです。転職実績も豊富で、自走できる AI人材を多く輩出しています。

説明会はこちらから

Flask とは

Flask の概要

Flask（フラスク）は Armin Ronacher 氏によって 2010 年に開発された Python の Web アプリケーションフレームワーク(※)です。
機能がシンプルで使いやすく、覚える項目が少ないため、Python 初心者向けのフレームワークと言われています。

(※)「アプリケーションフレームワーク」とはアプリケーションを開発する際の土台となる機能を搭載したソフトウェアのことです。
フレームワークを使用することで、一からアプリケーションを開発する手間を省くことができるというメリットがあります。

Flask のメリット・デメリット

Flask のメリット

Flaskのメリットは以下のとおりです。

マイクロフレームワーク(※)であるため、開発に必要な時間や手間を削減できる。
機能がシンプルで覚える項目が少ないので、学習コストが低く初心者でもWeb アプリケーション開発が可能。
拡張機能が充実しているため、必要な機能を組み込みカスタマイズすることができる。
小規模かつ自由度の高いWeb アプリケーション開発が可能。そのため、プロトタイプ開発などでよく活用される。

(※)「マイクロフレームワーク」とは、特定分野を開発するために必要な機能が最小限にまとめられたフレームワークのことを指します。

Flask のデメリット

Flask のデメリットは以下のとおりです。

小規模向けに開発された必要最低限のフレームワークであるため、自動化など大規模向けの拡張機能が搭載されていない。
数多くのプラグインが揃っているため、不要な機能拡張によって動作が重くなり、ページ速度が遅延する可能性がある。
Flask のドキュメントは英語メインのため、日本語対応が少ない。

Flask の始め方

Python のインストールから Flask のアプリケーション実行までをコードを交えて解説していきます。

Python のインストール

Python の公式ドキュメントから最新バージョンのパッケージをインストールします。
インストールが完了したら、Mac OS の場合はターミナル、Windows の場合はコマンドプロンプトを開きます。
そして以下のコマンドを実行し、Python がインストールされていることを確認します。

Pythonのバージョン確認

#Pythonのバージョン確認
$ python3 --version
Python 3.12.2

Python 仮想環境の構築

次に、仮想環境を構築していきましょう。
Python の「仮想環境」とは、プロジェクトごとに独立したPython環境を作成することができる機能のことです。

仮想環境を利用することで、システム全体の Python 環境に影響を与えずに、プロジェクトごとに独立した環境を構築できます。
これにより、「ライブラリどうしのバージョンの相性が悪く、エラーばかり出る…。」といった問題を回避することができます。

以下の流れで仮想環境は構築していきます。

ターミナルやコマンドプロンプトの参照位置を任意のディレクトリに移動
python の仮想環境を作成
仮想環境をアクティブ化

仮想環境の構築

#Flaskプロジェクトを作成する任意のディレクトリに移動
$ cd /Users/username/projects/myproject

#python の仮想環境を作成(任意のプロジェクト名で作成)
$ python3 -m venv flask-project

#仮想環境をアクティブ化
$ source venv/bin/activate

このような手順で仮想環境を構築すると、myproject ディレクトリ内に flask-project というディレクトリが自動で追加され、python を環境汚染の無いきれいな状態で利用することができます。

今回は、ここで構築した仮想環境を Flask プロジェクトとして利用していきます。

Flaskのインストール

次に、用意した仮想環境内に Flask をインストールします。

Flaskのインストール

#Flaskのインストール
$ pip3 install flask
Collecting flask
（中略）
Successfully installed flask-3.0.3

「Successfully installed (flaskのバージョン)」と出力されれば成功です！
次に、flask がインストールされているかを確認してみましょう。

Flask のバージョン確認

#Flask がインストールされているか確認するため、バージョンを確認
$ flask --version
Flask 3.0.3

先ほどインストールした flask のバージョンが出力されれば成功です！

Visual Studio Code のインストール

Visual Studio Code のインストールを行っていない方は、公式サイトからダウンロードしましょう。
インストール方法や設定方法はこちらの記事で紹介していますので、ぜひ参考にしてみてください！

2024年4月15日ローカル開発の一歩目！Visual Studio Code (VSCode) のインストール方法を解説！（日本語対応も）

Visual Studio Code などのコードエディタは、入力したコードの見やすさや予測変換によるスペルミスを防ぐことができ、コードを効率的に開発することができます。

Visual Studio Code でプロジェクトを開く

VS Code がインストールできたら、開いてみましょう！
はじめはこちらのような画面が表示されますので、フォルダを開くボタンをクリックします。

先程作成した Flask プロジェクトを選択肢、VSCode 上で開きます。

このような画面が表示されれば成功です。先程作成した仮想環境がプロジェクト内にフォルダとして保存されていることいることが確認できますね！

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

簡単なコードを記入して、Flask のアプリケーションを実行します。
まずは、VSCode で「run.py」という Python のスクリプトファイルを作成します。
ファイルを追加するボタンをクリックし、ファイル名を「run.py」とします。

この run.py に以下のコードを入力します。
Flask を用いて Web ページに「Hello World!」と表示させるコードです。

run.py

#"Hello World!"と表示されるWebアプリケーション
from flask import Flask
app = Flask(__name__)

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

if __name__ == '__main__':
    app.run()

run.py 内にコードを入力したら、VSCode内でターミナルを開きます。

ターミナルを開くことができたら、以下のコマンドを入力します。
python で run.py を実行するというコマンドです。

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

#Flask のアプリケーションを実行
$ python3 run.py
 * Serving Flask app 'app'
 * Debug mode: off
 * Running on http://127.0.0.1:5000

Webブラウザでサーバーの URL(http://127.0.0.1:5000)にアクセスすると、Hello World!と表示されます。

Webブラウザ上で表示されない場合はキャッシュを削除するか、シークレットモード(キャッシュが残らない状態)でアクセスすると表示されます。

Flaskの使い方

Flask で本格的に開発を行っていくために、基本のフォルダ構成や拡張機能の利用方法について解説します。

Flaskの基本的なディレクトリ構成

Flask のディレクトリ構成は、用途により構成が異なります。
今回は初心者が開発するシンプルなページを想定したフォルダ構成をご紹介します。

Flaskの基本フォルダ構成

flask-project
 ├app/
 │　├templates/
 │　├static/
 │　└app.py
 ├venv
 └run.py

各項目について説明します。

flask-project：Flask のプロジェクト名
app/：このディレクトリ配下に Web ページに表示する要素を記述
templates/：HTML ファイルを格納するディレクトリ
static/：HTML ファイルを装飾する CSS や画像ファイルを格納するディレクトリ
app.py：アクセス URL に対してどの Web ページ表示するか判断するロジックを記載
venv：仮想環境を作った際のライブラリなどが含まれるディレクトリ
run.py：Web サーバを立ち上げるスクリプトファイル

Flask での Web アプリケーションの作り方

Flask の Web アプリケーションは先ほどの「Flask の基本的なフォルダ構成」をもとに解説します。
Web アプリケーションの作り方の手順は以下です。

Flask のプロジェクトを作成
プロジェクト配下にフォルダを作成
index ファイルに HTML を記述
アクセスされた URL ごとに Web ページを出し分ける機能を記述
Web サーバを立ち上げる

先ほど作成した flask-project を編集して、アプリケーション形式にしていいます！
まずは上記でご紹介した構成になるように、VSCode上でディレクトリやスクリプトファイルを作成していきましょう。

次に、templates ディレクトリ内に index.html ファイルを作成し、Webサイトを構成する HTML を記述します。

index.html

<html>
    <head>
    </head>
    <body>
    <h1>test_page</h1>
    </body>
</html>

次に、app.py にコードを記述し、url によって表示するコンテンツを出し分けする機能を作っていきます。

app.py

#Flaskとrender_template（HTMLを表示させるための関数）をインポート
from flask import Flask,render_template

#Flaskオブジェクトの生成
app = Flask(__name__)

#「/」へアクセスがあった場合に、"Hello World"の文字列を返す
@app.route("/")
def hello():
    return "Hello World!"

#「/index」へアクセスがあった場合に、「index.html」を返す
@app.route("/index")
def index():
    return render_template("index.html")

そして、run.py を以下のように変更します。
先程は、ルートディレクトリにアクセスしたときに「Hello World!」と表示されるコードを記述していましたが、その機能は app.py に記述したため、run.py は「app.py を呼び出す」という処理に変更しています。

run.py

from app.app import app

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

ここまでコードを記述できたら、run.py を実行して Flask アプリケーションを起動します。

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

$ python3 run.py
 * Running on http://127.0.0.1:5000

Web ブラウザでサーバー(http://127.0.0.1:5000) にアクセスすると、「Hello World!」と表示されます。

一方でこちらは、index ディレクトリに(http://127.0.0.1:5000/index) にアクセスすると、「test_page」と表示されます。

URL によるコンテンツの出し分けができました！

Flaskの拡張機能の利用方法

Flask の拡張機能は、Python でライブラリをインストールするときと同じように、pip コマンドでインストールして使用することができます。
拡張機能の名称や使い方については「拡張機能の一覧」に記載されています。

Flaskの拡張機能の利用方法

#pipコマンドで拡張機能をインストール
$ python3 -m pip install <拡張機能>

#コード文頭で拡張機能を呼び出す
$ from <拡張機能> import <拡張機能>

拡張機能をより詳しく知りたい方はFlaskの公式ドキュメントの日本語版がありますので、参照ください。

今回は、Flask で使用される代表的な拡張機能である認証機能の利用について解説します。

まずは以下のコマンドで「flask-httpauth」という拡張機能モジュールをインストールしていきます。

拡張機能のインストール

#ページにアクセスする際の認証機能
$ python3 -m pip install flask-httpauth
Successfully installed flask-httpauth-4.8.0

flask-httpauth がインストールできたら、先ほど作成した app.py に以下の「#追記」または「#変更」とコメントされている部分のコードを追加します。（※ユーザー名とパスワードは任意）

app.py

#Flaskとrender_template（HTMLを表示させるための関数）をインポート
from flask import Flask,render_template

#追記：flask_httpauth のインポート
from flask_httpauth import HTTPBasicAuth

#Flaskオブジェクトの生成
app = Flask(__name__)

#追記：認証機能を変数に代入
auth = HTTPBasicAuth()

#追記：認証に使用するユーザ名とパスワードを設定
users = {
    "test_user": "test_password"
}

#追記：認証関数
@auth.get_password
def get_pw(username):
    if username in users:
        return users.get(username)
    return None

#「/」へアクセスがあった場合に、"Hello World"の文字列を返す
@app.route("/")

#追記：基本認証を通過したユーザーに"Hello World!"と返す
@auth.login_required
def hello():
    return "Hello World!"

#「/index」へアクセスがあった場合に、「index.html」を返す
@app.route("/index")
def index():
　　　 #変更：基本認証を通過したユーザーに"Hello (ユーザー名)!"と返す
    return "Hello, %s!" % auth.username()

各コードの説明はコメントに記載しているので、詳しくはそちらをご確認ください。
app.py に「#追記」または「#変更」とコメントされている部分のコードを追加することができたら、run.py を実行します。

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

$ python3 run.py
 * Running on http://127.0.0.1:5000

サーバーにアクセスすると、認証情報を聞かれます。

先ほど app.py で記述したユーザー名とパスワードを入力してログインをクリックします。

設定したユーザ名とパスワードが一致した場合はHello World! と表示されます。

また、認証が成功した状態で index ディレクトリに(http://127.0.0.1:5000/index) にアクセスすると、「Hello, (ユーザー名)!」と表示されます。

このように、Flaskを用いることで自身の開発したアプリケーションに、簡単に認証機能をつけることができます。

もう一つのWebフレームワークDjangoとの違い

flask が小規模かつ自由度の高いWeb アプリケーション開発向けである一方、Django（ジャンゴ）は大規模かつ複雑なWebアプリケーション開発向けのフレームワークとされています。

Django はアプリケーション開発に必要な機能を全て備えたフルスタックフレームワークであるため、拡張機能なしでアプリケーション開発ができます。

使用されるシチュエーション

Django は大規模かつ複雑なアプリケーション開発に適したフレームワークです。
そのため、自動化が必要な管理システムに使用されるケースがあります。

学びやすさ

Django は日本語対応しており、ドキュメントも揃っている傾向にあります。
Flaskよりも覚える機能は多いですが、日本人にとって学びやすい環境が用意されていると言えるでしょう。

より詳しい情報は Django の公式ドキュメントを参照ください。

パフォーマンス

Django は機能が多く搭載されているがゆえ、動作処理速度は Flask に劣ります。
そのため以下のように規模や用途に合わせたフレームワークを選択する必要があります。

大規模で自動的にシステムを稼働すること検討する場合は Django
小規模で必要最低限のシステムを稼働することを検討する場合は Flask

まとめ

今回は、Flask の特徴からアプリケーションの作り方、Django との違いを解説しました。
Flask の特徴は手軽に費用をかけず初心者でもアプリケーションを開発することができるという点です。

本記事を読んでFlaskに興味を持った方は、この記事を参考にぜひアプリケーション開発を実践してみてくださいね！

DX を推進する AI ・データサイエンス人材育成コース

説明会はこちらから