Python初心者向けの小規模なフレームワーク「Flask」のインストールと簡単な使い方

2019年11月13日

今回はPythonを初めたばかりの方やフレームワークを初めて触るという方におすすめする
ウェブアプリケーションフレームワーク「Flask(フラスク)」のインストールと使い方を解説したいと思います

※ウェブアプリケーションフレームワークは動的なウェブサイトなどの開発を簡単に行うためのフレームワークです

環境

Windows10
Python3.8

Pythonの導入が完了していることが前提です
導入されていない方は以下のリンク先の記事をご活用ください

リンク:Python3.8のダウンロードとインストール方法

インストール

コマンドプロンプトを起動して「pip install flask」と入力してください

pip install flask
----結果----
Installing collected packages: Jinja2, flask
  Found existing installation: Jinja2 2.10
    Uninstalling Jinja2-2.10:
      Successfully uninstalled Jinja2-2.10
Successfully installed Jinja2-2.10.3 flask-1.1.1

その後にインストールが問題なく行われているかの確認を「pip show flask」でできます

pip show flask
----結果----
Name: Flask
Version: 1.0.3
Summary: A simple framework for building complex web applications.
Home-page: https://www.palletsprojects.com/p/flask/
Author: Armin Ronacher
Author-email: armin.ronacher@active-4.com
License: BSD
Location: c:\work\python37\lib\site-packages
Requires: Werkzeug, Jinja2, click, itsdangerous
Required-by:

pipコマンドの使い方など「pip」についてもっと知りたいかたは以下の記事を参考にしてみてください

リンク:pipってなに?Pythonで使われているpipについて
リンク:pipコマンドの一覧と使い方

フォルダ構成

c:\work
    ↳flask
     ↳venv
     ↳source
      ↳teplates

Hello Worldの表示

「source」ファルダの直下に「hello.py」を作成する

「templates」フォルダの直下に「base.html」、「home.html」を作成する

以下を記述してください

base.html

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

home.html

{% extends "base.html" %}
{% block content %}
<a>{{ hello }}</a>
{% endblock %}

hello.py

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def hello():
    hello = 'Hello World'
    return render_template('home.html', title='Hello Flask', hello=hello)
if __name__ == '__main__':
    app.run(debug=True)

以上の記述を行ったらプログラムを実行して、http://locallhost:5000/へアクセスしてみてください

「Hello World」と表示されていると思います

パラメータについて

POST

「templates」フォルダの直下に「home.html」を作成する

POSTを使用しての情報の送信は以下のように行います

home.html

{% extends "base.html" %}
{% block content %}
<a>{{ hello }}</a>
<form action="/post" method="post">
    <p><input type="text" name="name"></p>
    <p><input type="submit" value="POST"></p>
</form>
{% endblock %}

test_post.html

{% extends "base.html" %}
{% block content %}
<h2>POST</h2>
<a>{{ name }}</a>
</form>
{% endblock %}

hello.py

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def hello():
    hello = 'Hello World'
    return render_template('home.html', title='Hello Flask', hello=hello)
@app.route('/post', methods=['POST'])
def test_post():
    if request.method == 'POST':
        if request.form['name']:
            result = request.form['name']
        else:
            result = 'Name Not Found'
    return render_template('test_post.html', name=result)
if __name__ == '__main__':
    app.run(debug=True)

http://locallhost:5000/へアクセスしてみてください

入力ボックスがありますので好きな文字を入力して「POSTボタン」を押してみてください

入力した文字が表示されていると思います

GET

「templates」フォルダの直下に「home.html」を作成する

GETを使用しての情報の送信は以下のように行います

home.html

{% extends "base.html" %}
{% block content %}
<a>{{ hello }}</a>
<form action="/post" method="post">
    <p><input type="text" name="name"></p>
    <p><input type="submit" value="POST"></p>
</form>
<form action="/get" method="get">
    <input type="text" name="test" value="default">
    <p><input type="submit" value="GET"></p>
</form>
{% endblock %}

test_get.html

{% extends "base.html" %}
{% block content %}
<h2>GET</h2>
{% endblock %}

hello.py

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def hello():
    hello = 'Hello World'
    return render_template('home.html', title='Hello Flask', hello=hello)
@app.route('/post', methods=['POST'])
def test_post():
    if request.method == 'POST':
        if request.form['name']:
            result = request.form['name']
        else:
            result = 'Name Not Found'
    return render_template('test_post.html', name=result)
@app.route('/get', methods=['GET'])
def test_get():
    return render_template('test_get.html')
if __name__ == '__main__':
    app.run(debug=True)

http://locallhost:5000/へアクセスしてみてください

「default」と入力されたボックスがありますので「GETボタン」を押してみてください

遷移後の画面のURLが「http://locallhost:5000/get#default」になっていると思います

POSTとGETの違いについて

POSTとGETの違いは以下のようになります

POST GET
リクエストBodyに付加URLに付加
視覚情報見えない見える
安全性変わらない変わらない
ブックマークできないできる
冪等性(必ず同じ結果が得られる)冪等ではない冪等である
使用用途登録に使う取得に使う

上の表に違いをザックリまとめました

これを見ても「どっちを使えばいいの?」ってなる方が大半かと思いますなので結論を言えば

すべての処理はPOSTで代用できるので、POSTを使いましょう

って感じになります

もちろんGETを使ってもいいのですがよく分からないままにGETを使ったりPOSTを使ったりすると混乱するだけです

実際に作られているものにもPOSTを使っているのはたくさんありますので深く考えなくてもよいと思います