【Python】フレームワークFlaskの基本をマスター

2024年4月10日

かい

みなさんこんにちは！Web系エンジニアのかいです。

Pythonには使いやすくシェアの伸びが期待できる軽量なWebフレームワークであるFlaskがあります。

Flaskの特徴を知りたい
Flaskのインストール方法が知りたい
Flaskの基本的な使い方が知りたい

という方に向けて、今日はみなさんに、PythonのwebフレームワークであるFlaskについてその特徴や使用方法を説明していこうと思います！

Flaskとは
Flaskのインストール
Flaskを使ってみる
HTMLを反映させてみる
CSSなどで装飾してみる

実際のFlaskの使い方にも触れていこうと思いますので、これからFlaskを始めようと考えている人はぜひ参考にしてみてください！

本記事を読む前に、Pythonがどんなプログラミング言語なのかをおさらいしておきたい人は次の記事を参考にしてください。

→ Pythonとは？特徴やできること、活用例をわかりやすく簡単に解説

なお、その他のPythonの記事についてはこちらにまとめています。

Flaskとは

引用元：fLASK http://flask.pocoo.org/

まずは、簡単にFlaskとは何か、その特徴について説明しようと思います。

FlaskはWebフレームワークで軽量で機能がそこまで備わっていないということが最大の特徴です。Webフレームワークというと、RubyのRailsやPythonではDjangoなどが有名ですね。

しかし、Djangoなどは機能などがありすぎて逆に使いにくい上にFlaskに比べるとかなり重いというデメリットがあり、個人的にはFlaskの方が好きです。機能が多く備わっていないということは、逆に自由がきくということでかつ余分な機能がないので簡単に習得することができ学習コストは低いと言えるでしょう。

Flaskをインストールしよう

ではまずは、インストールしないことには始まりませんのでFlaskをインストールしておきましょう。

ターミナルを起動して、以下のpipコマンドを実行します。

pip3 install Flask

とはいっても普通にpipで入れてやればよいです。デフォルトが3系になっている場合は

pip install Flask

で問題ありません。

Flaskを使ってみよう

それでは、恒例ではありますがFlaskでHello worldを表示させてみましょう。

まずはコードを載せておきます。

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    hello = "Hello world"
    return hello

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

簡単にレビューすると、2行目でappにFlaskを定義して使えるようにしておきます。

4行目の@などはそういうものですので覚えてしまってください。そして、app.route(‘/‘)でルートのアドレスにそれ以下のものを設置します。今回であれば5~7行目のHello Worldを出力している関数のところです。

9行目はおまじないのようなもので、プログラムが呼ばれたときに、以下の動作をさせますよというものです。今回でしたらapp.run()ですね。

それでは実行してみましょう。

$ python3 hello.py
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

と表示されているのでこのアドレスへとんでみるとHellow Worldが表示されていることがわかりますね。Webフレームワークは自分でWebサーバーなどを立てなくて良いので簡単ですね。

ここまでが最低限の使い方です。

この後は少し応用して、HTMLはCSSを反映させてみましょう。

HTMLを反映させてみよう

HTMLを反映させるにはHTMLファイルをtemplatesフォルダに入れておく必要があります。Flaskはデフォルトではtemplatesフォルダをテンプレートの置き場として認識します。

ということでまずは、templatesフォルダにindex.htmlという名前のファイルを作ります。内容は以下の通り。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO</title>
</head>
<body>
    <p>Sayhello</p>
</body>
</html>

それでは、hello.pyの方のコードをみていきましょう。

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def hello():
    html = render_template('index.html')
    return html

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

ミソとなるのは6行目のrender_template関数でHTMLを読み込んでいるというところです。

しっかりと１行目でrender_templateをimportしておくのを忘れないようにしましょう。

実行してみましょう

python3 hello.py
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

URLをみてみると、しっかりとSayhelloが表示されていてHTMLを読み込んでいることが分かりますね。

ちなみに、Flaskを使うとHTMLに変数を与えることもできて、

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def hello():
    html = render_template('index.html', a = '変数なう')
    return html

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

このように、render_templateオプションに変数を与えて、HTMLでは

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO</title>
</head>
<body>
    <p>Sayhello</p>
    <p>{{a}}</p>
</body>
</html>

このように記載してやると変数として扱うことができます。

実行すると、しっかりと表示されていますね。

CSSで装飾してみよう

先ほどはtemplatesがHTMLなど処理してくれると説明しましたが、CSSやJSなどはstaticフォルダが認識するようデフォルトで設定されています。

ちなみにこの設定は変更することもできます。

ということでまずはstaticフォルダを作成しましょう。

mkdir static

そしてCSSを扱うためHTMLを書き直します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO</title>
    <link rel="stylesheet" href="/static/hello.css">
</head>
<body>
    <p class="hello">Sayhello</p>
    <p>{{a}}</p>
</body>
</html>

そして普通にCSSを設定します。

ここではstaticフォルダにhello.cssというファイルを作って、以下の内容を書いておきましょう。