今回のコースで学習すること

今回のコースでは、Todoリストアプリの作成を行います。

以下のようにタスクを追加したり、タスクのチェックができる機能を実装します。

Todoリストアプリの作成を通して、以下の内容の学習を行います。

ルーティング
HTTPのGET、POST
データベースの操作
テンプレートエンジンjinja2

では、早速始めましょう！

Todoリストアプリ作成の準備

ここでは、Todoリストアプリ作成の準備を行います。

前回の復習も兼ねて、環境の準備からHello Worldを表示してみましょう。

仮想環境の構築

まずは環境の準備を行います。

自身のPCで実施している方は、ディレクトリ(フォルダ)を作成して、そのフォルダに移動します。

mkdir todo-app
cd todo-app

その後、ターミナルで以下のコマンドを実行し、pythonの仮想環境を作成し、有効にしましょう。

python3 -m venv myenv

#Mac、Linux、ブラウザの実行環境の場合
source myenv/bin/activate

#Windowsの場合
myenv\Scripts\activate

仮想環境を有効化すると、コマンドラインのプロンプトが変わり、仮想環境が有効であることが表示されます。

この状態で、Flaskのインストールを行います。

Flaskのインストール

以下のコマンドを実行して、Flaskのインストールを行います。

 pip install Flask

app.pyの編集

続いて、app.pyの作成を行います。

まずは、”Hello World!”を表示させましょう。ここからTodoリストへ改修していきます。

# app.py
from flask import Flask

app = Flask(__name__)

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

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

Flaskの起動

最後にFlaskを起動させましょう。

python app.py

Webブラウザでhttp://127.0.0.1:5000にアクセスして、”Hello World!”と表示されたら成功です。

Todoリスト一覧ページの作成

続いて、Todoリストの一覧ページを作成します。

app.pyの編集

まず、app.pyを編集します。

現在、/(URLのルート)にアクセスすると、Hello Worldが表示されます。

これを、HTMLが表示されるようにします。

まず、2行目のimportの部分を以下のように修正します。

# app.py
from flask import Flask, render_template, request, redirect, url_for

これは、Flaskで使う必要なプログラムを読み込む設定です。

それぞれ、以下のような機能があります。

render_template・・・指定されたHTMLテンプレートをクライアントに返すために使用されます。
request・・・クライアントから送信されたHTTPリクエストデータにアクセスするために使用されます。
redirect・・・クライアントを指定したURLにリダイレクトするために使用されます。リダイレクトとは、他のURLへ転送することです。
url_for・・・指定したエンドポイントに対応するURLを生成するために使用されます。

続いて、@app.route(‘/’)の下の2行を以下のように修正します。

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

これは、/(URLのルート)にアクセスするとindex.htmlを返すように設定しています。render_template([html名])は、templatesディレクトリ配下の指定したHTMLを返します。

app.pyの全文は以下のようになります。

# app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

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

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

index.htmlの作成

つづいて、index.htmlを作成します。

これは、Webページに表示されるフロントの部分です。

templatesディレクトリを作成して、その配下にindex.htmlを作成します。

index.htmlの中身は以下のように記述します。

<!-- templates/index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Flask Todo App</title>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
        <li>task1</li>
        <li>task2</li>
    </ul>
</body>
</html>

これでindex.htmlの作成は完了です。