Python

【Flask入門1】環境構築・ルーティング・render_templateまで【Python】

Flask 入門 Python ルーティング render_template
PythonでWebアプリケーションを作成したい人
PythonでWebアプリケーションを作成したい人
PythonでWebアプリを作成するために、Flaskの勉強をしたいな…。

初心者でも分かりやすいFlaskの入門講座はないかな…。

この記事では、上記のような悩みを解決していきます。

 

この記事の想定読者

  • PythonでWebアプリを作りたい人
  • Webアプリケーション用フレームワークのFlaskを使いたい人
  • Pythonの基礎的な学習は出来ているけど、その先がまだまだな人

想定している読者は、上記のとおりです。

 

この記事では『PythonのフレームワークであるFlask』について書いていきます。

Pythonの基礎学習を終えたけど、いまいちWebアプリの作り方は分からないですよね。「Flaskを使えば出来るらしい」から勉強してみたいなって感じだと思います。

そして、Flaskの入門記事を探してみるのですが、なかなか日本語で書かれている記事ってないんですよね。

 

なので、今回は「日本語で分かりやすく」Flaskの入門記事を書いていきます。

この記事を読み終えれば、Flaskの基礎的な使い方が分かるようになり、簡単なアプリケーションを作成できるようになります。

 

※Flask入門の記事を書いていたら2万字とかになってしまい、かなりの分量になってしまったので、分割することにしましたm(_ _)m

この記事が学習できたら、「パート2」に進んでくださいm(_ _)m

 

当サイトのFlask入門で作成するモノ

簡易版Twitter

Webアプリを作るとなったら、割とテンプレな気がしますが、簡易版のTwitterを作成していきます。

簡易版のTwitterを作りつつ、Flaskの操作を理解することを目的としています。

 

【Flask入門】アプリケーション作成のために環境構築する

 

これからFlaskを使ったアプリケーションを作成していきますが、その前にまずは環境構築が必要ですね。

仮想環境を作成していきましょう。

 

Anacondaを使って記事を書いていきます

この記事では、「Anacondaを使ってPythonの環境構築してある」ことを前提に書いていきます。

もちろん、Virtualenvとかで仮想環境を作成してもOKです。

 

なお、AnacondaによるPythonの環境構築方法については、下記の記事が参考になります。

Anaconda インストール mac
【Mac向け】AnacondaをインストールしてPython環境の構築『macを使っているんだけど、Pythonの環境構築が意味不明だ...。』『Anacondaを使って環境構築したいな...。』このような悩みを解決する記事になっています。...

 

仮想環境の作成

conda create -n micro_twitter

この一行を、ターミナルないしコマンドプロンプトに入力します。

「”micro_twitter”という名前の仮想環境を作成する」という意味です。

 

仮想環境を作成したら、使える状態にする必要があります。下記のコマンドを、ターミナルに入力すればOKです。

conda activate micro_twitter

 

下の画像のようになっていれば、micro_twitterを使える形になっています。

Flask activate

※hayatoの部分は、もちろんご自身の名前ですm(_ _)m

 

ここまで出来たら、さっそくFlaskをインストールしていきます。

conda install flask

あとあと追加でインストールするライブラリがありますが、いったんFlaskだけ入れればOKです。

裏で動くサーバーなども一緒にインストールされます。

 

これでFlaskを使う準備が完了しました。おそらく、劇的に簡単だったハズ。

 

【Flask入門】Flaskで作成したアプリを動かしてみる

 

ここまで出来ると、とりあえず動かす形に持っていくのは、あと一歩です。

 

スクリプトを書くファイルを作成します。ターミナルに下記のコードを入力すればOKです。

touch hello.py

もちろん、普通に右クリックして”hello.py”という名前のファイルを作成してもOKですよ。

 

“hello.py”というモジュール名のファイルを作成したら、Flask公式ページの「最小規模のアプリケーション例」に書いてある下記のコードをコピペします。

from flask import Flask
app = Flask(__name__)

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

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

上の4〜6行目の部分で、「“/”(ホーム)にアクセスしたら、hello_world関数を呼び出す」という処理をおこなっています。

そして、hello_world関数は”Hello World!”を返すので、”/”にアクセスしたら「Hello World」と表示されているはずです。

 

“hello.py”に上記のコードが書けたら、下記のコマンドをターミナルに入力しましょう。

python hello.py

そうすると、下のような画面になるかと思います。

Flask run server

素直にポート番号5,000番へアクセスしましょう。

※Flaskのデフォルト番号は、5,000番です。

 

そうすると、下の画像のように、Hello Worldが表示されるはずですよ!

Flask hello world

“/”にアクセスしたので、hello_world関数の中の「Hello World」が呼び出されました。

 

これで、とりあえずFlaskを動かすまで出来ましたね。

Flaskだと、”Hello World!”までの道のりが非常にラクです。

 

こんな感じで、どんどんFlaskを使っていきましょう。

 

コードを少し改造

すみません、少しだけコードを変更させてくださいm(_ _)m

from flask import Flask
app = Flask(__name__)

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

def main():
    app.debug = True
    app.run()

if __name__ == '__main__':
    main()

 

こんな感じで、「モジュール内ではmain()関数を呼ぶだけ」の記述に変更しました。

ここら辺は、とりあえず気にしなくても良いかなと思います。今はFlaskを使うことに専念しましょう(`・ω・´)!

 

【Flask入門】複数ページをルーティングする

 

先ほどは、「“/”にアクセスしたらhello_world関数を呼び出す」という処理を書きました。

ただ、Webアプリケーションでページが1枚しかないってことは、あまりないハズです。

 

たとえば、ログイン機能を実装するのであれば、ログインするためのページが必要になりますよね。

ログインがあるということは、登録の画面もありそうです。

 

こんな感じで、Webアプリケーションの作成は、複数ページが必要になってきます。

ここでは、トップ画面の他に、「このページについて」を表示するページを作成してみます。

 

イメージ

人工衛星を見よう このページについて

イメージとしては、上の画像のような感じです。(人工衛星を見ようより)

 

そして、このようなページを増やすには、“@app.route()”を増やしてあげればOKですね。

 

先に結論だけ書くと、下記のようになります。(地味にhello_world関数の名前を、homeに変えています。)

from flask import Flask
app = Flask(__name__)

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

@app.route('/about')
def about():
    return "About us"


def main():
    app.debug = True
    app.run()

if __name__ == '__main__':
    main()

新しく増えたのが8〜10行目で、「“http://〇〇/about”にアクセスされたらabout関数を呼び出す処理」をおこなっています。

about関数を呼び出すと、”About us”を返すようになっていますね。

Flask aboutページ

これで、「トップ画面」と「このページについて」を作成できました。

 

なお、“@app.route()”で指定したアドレスにアクセスされた場合、設定してある関数が呼ばれるわけですが、「“@app.route()”は複数あっても問題ない」です。

from flask import Flask
app = Flask(__name__)

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

@app.route('/about')
def about():
    return "About us"


def main():
    app.debug = True
    app.run()

if __name__ == '__main__':
    main()

上記のコードでは、トップ画面のアクセスを「”/”でもいけるし、”/home”でもいける」状態にしてあります。

このように複数ルーティングすることも可能です。

 

【Flask入門】マークアップしよう

 

ここまでルーティングをおこなってきたわけですが、このままだとかなりシンプルですよね。

トップ画面に表示されている”Hello World!”も、かなり字が小さい気がします。

 

そんなときには、HTML(HyperText Markup Language)を使ってあげればOKです。

トップ画面の”Hello World!”をh1要素にしてみます。

from flask import Flask
app = Flask(__name__)

@app.route('/')
@app.route('/home')
def home():
    return "<h1>Hello World!</h1>"

@app.route('/about')
def about():
    return "About us"


def main():
    app.debug = True
    app.run()

if __name__ == '__main__':
    main()

こんな感じで、h1タグで囲んであげればOKです。

ポイントは「” “の中に書いてあげる」ってところですね。

 

逆にいうと、” “の中であれば、他の要素の追加もできるようになります。

 

でも、これから複数ページを仕上げていくのに、return後の” “内にツラツラと書いていくと、コードが見えづらくなってしまいます。

そもそもPythonファイルなのにHTMLの方がコード量が多くなってしまい、完全に意味不明になります。

これでは、なんだか不毛ですよね。

 

【Flask入門】「render_template」を使ってHTMLを呼び出す

 

PythonファイルにHTMLを大量にコーディングするのは微妙すぎるので、「PythonファイルからHTMLファイルを呼び出す」ようにしましょう。

 

こうすれば、PythonとHTMLのコードが別れていて、可読性も高く、今後ルーティングが増えても分かりやすいコードになります。

 

先ほどPythonファイルで呼び出していた結果は、下記のようなHTMLファイルで書けますよね。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

これでも、先ほどと同じように“Hello World!”が表示されるはずです。

 

「このページについて」の部分は、「Hello World!→About us」に変えただけです。

 

あとはPythonファイルから、上記のコードを書いたHTMLファイルを呼び出してあげればOKです。

 

下準備

hello.pyと同じ位置にtemplatesディレクトリを作成して、その中にHTMLファイルを作っていきましょう。

  • @app.route(“/”), @app.route(“/home”)用 : home.html
  • @app.route(“/about”)用 : about.html

 

僕は下のように、1つのディレクトリ内に、hello.pyとtemplatesディレクトリを入れておきました。

Flask ディレクトリ 構成

※HTMLを入れておく”templates”は、名前固定です。他の名前では動作しませんので、気をつけてくださいm(_ _)m

 

後々ファイルが大量に増えていくので、今のうちに練習用のディレクトリに入れておくのがオススメです。

ここまで出来たら準備は完了しており、あとは「PythonファイルからHTMLファイルを呼び出すだけ」です。

 

まず、importの部分で”render_template“を使えるようにしておきます。

from flask import Flask, render_template

これで、HTMLを呼び出すのに必要なrender_templateを使えるようになりました。

 

あとは、関数の中身で返していたreturn部分を下記のように変更するだけです。

#home関数のreturn
return render_template('home.html')

#about関数のreturn
return render_template('about.html')

 

全体のコードとしては、下記のような感じになります。

from flask import Flask, render_template
app = Flask(__name__)
 
@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')
 
def main():
    app.debug = True
    app.run()
 
if __name__ == '__main__':
    main()

 

これで2ページに対して、PythonファイルからHTMLファイルを呼び出している状態になりました。

以後、Pythonファイルに直接HTMLファイルを書くことはなく、「render_templateを使ってHTMLを呼び出す」ようにしましょう。

 

ひとまずここまでで、続きは別記事にて書いていきます(`・ω・´)!