【第1回】FastAPIチュートリアル: ToDoアプリを作ってみよう【環境構築編】
2021.12.20
FastAPIチュートリアル: toDoアプリを作ってみる
FastAPI は、最近注目を集めている WebAPIフレームワークです。
以下記事でも、ご紹介している Responder と似ているところもあります。
しかし、FastAPI は、高速にレスポンス可能な WebAPI を構築することに優れています。
今回作るもの
しかし、今回、FastAPIを使って作るのは、プログラムを対象としたAPIではなくユーザ(人)を対象とした、いわゆる「MVCアプリケーション（サービス）」です。
MVCの概略図 （このような形はMVC2とも呼ばれる）
（Flaskでは、MVT: Model View Template と呼ばれますが、ほとんど同じです。）
もちろん、FastAPIを作るからには、API的要素も加えてみます。
この連載を通して学んでいただきたいこと
- FastAPIの使い方
- バックで動いているstarletteの使い方
- Webアプリケーションの作り方
本記事からスタートする連載「FastAPIチュートリアル: ToDoアプリを作ってみる」では、シンプルなtoDoアプリ作成を通して、上記の3点を学んでいただきたいと考えています。
環境構築
それでは、お約束の環境構築から始めていきます！
前提として、Pythonは3.6以上である必要はありますので、アップデートを予めしておいてください。
FastAPIをインストール
では、pipコマンドからFastAPIをインストールしましょう！
1 | $ pip install fastapi |
このとき、SQLAlchemy と Uvicorn が入っていなければ、ついでにインストールしてください。
1 | $ pip install sqlalchemy uvicorn |
これで、FastAPI が使えるようになりました！
注意
FastAPI をインストールした後は、Responder が動作しなくなることがあります。(逆も然り)
これは、どちらも裏で starlette と言うフレームワークが動いており、それぞれ動作するバージョンが異なるために生じます。
もし動かなくなったら、もう一度使いたいフレームワークをインストールしなおしてみてください。
プロジェクトを作成する
では、プロジェクトディレクトリを作成していきます。
特に名前はなんでも構いません。
この記事では「fastAPI_Tutorial」にしています。
Djangoとは違い、プロジェクト作成コマンドはなく、プロジェクトを１から全て構築していく必要があります。
これは大変な反面、無駄がなく、FastAPIの良い一面でもあります。
必要なファイルを作成する
次に、最低限必要なファイルとコードを作成していきましょう。
まずは、以下の3つのファイルを作成してください。
- run.py (サーバ立ち上げ用)
- urls.py (URLのルーティング用)
- controllers.py (レスポンス処理用)
（名前はなんでもOKですが、分かりやすくこのような名前にしています。）
controllers.py
順番が逆になりますが、まずは、controllers.py に以下の内容を書きましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | from fastapi import FastAPI from starlette.requests import Request app = FastAPI( title='FastAPIでつくるtoDoアプリケーション', description='FastAPIチュートリアル：FastAPI(とstarlette)でシンプルなtoDoアプリを作りましょう．', version='0.9 beta' ) def index(request: Request): return {'Hello': 'World'} |
このファイルでは、FastAPIインスタンスを生成し、この後紹介するurls.pyでURLに紐づく関数を定義しています。
今はまだ、簡単なJSONを返す処理になっていますが、いずれ変えていきたいと思います。
urls.py
ここでは、先ほども言ったように、URLを登録します。
仮に、このように記述してみます。
1 2 3 4 5 | from controllers import * # FastAPIのルーティング用関数 app.add_api_route('/', index) |
これで、http://127.0.0.1:8000/にアクセスした時に、controllers.py の def index() に処理が投げられるというわけです。
ちなみに、 app.add_api_route() は、FastAPIクラスのメンバ関数ですが、裏で動いているstarletteのルーティング関数 app.add_route() でも良いです。
run.py
このファイルは、今後触ることはなく、単にサーバを立ち上げるだけの関数です。
1 2 3 4 5 6 | from urls import app import uvicorn if __name__ == '__main__': # コンソールで [$ uvicorn run:app --reload]でも可 uvicorn.run(app=app) |
FastAPI のサーバ立ち上げは、Uvicorn というライブラリで立ち上げる必要があります。
このとき、 uvicorn.run(app=app, port=8888) のようにポートを変更することも可能です。
サーバを立ち上げてみる
では、以下のコマンドで run.py を実行し、サーバを立ち上げてみましょう。
1 | $ python run.py |
すると、
1 2 3 | INFO: Started server process [9912] INFO: Waiting for application startup. INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit) |
と表示されるはずです。
確認
http://127.0.0.1:8000 にアクセスしてみましょう！
1 | {"Hello":"World"} |
と表示されれば、FastAPI は正しく動作しています。
ちなみに、http://127.0.0.1:8000/docsにアクセスすると、自動でAPIドキュメントが生成されます。(これは便利！)
テンプレートエンジンを使う
今のままでは、素の文字列が表示されるだけのつまらないアプリです。
そこで、Jinja2 のテンプレートエンジンを使って、もう少しマシなビューを作りましょう。
Jinja2（ジンジャツー）
渡された変数を元に動的にページを生成するツールです。
これは、裏で動いているstarletteにインポートされています。
controllers.pyに加筆
まずは、テンプレートを使うために、controllers.py に必要事項を加筆します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | from fastapi import FastAPI from starlette.templating import Jinja2Templates # new from starlette.requests import Request app = FastAPI( title='FastAPIでつくるtoDoアプリケーション', description='FastAPIチュートリアル：FastAPI(とstarlette)でシンプルなtoDoアプリを作りましょう．', version='0.9 beta' ) # new テンプレート関連の設定 (jinja2) templates = Jinja2Templates(directory="templates") jinja_env = templates.env # Jinja2.Environment : filterやglobalの設定用 def index(request: Request): return templates.TemplateResponse('index.html', {'request': request} # new 変更！ |
これで、URL「/」でtemplates/index.htmlをレスポンスするようになりました。
これ以降、ビューは全て「templates」ディレクトリに作成していくのでディレクトリを作りましょう！
templates/layout.html
ビューを作っていきます。
まずは、全てのビューに共通する部分を作成します。
デザインは、 Bootstrap4 を使ってラクをしたいと思います（笑）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <meta charset="UTF-8"> <title>Simple toDo Application</title> </head> <body> <div style="display: flex; flex-direction: column; min-height: 80vh"> <div class="container"> {% block content %} <!-- メインコンテンツ --> {% endblock %} </div> </div> <br> <hr> <footer> <div align="center"> <p>Copyright © RightCode Inc. All right reserves.</p> <p>Powered by FastAPI 0.36.0 & starlette 0.12.9</p> </div> </footer> </body> </html> |
このように実装してみました。
この部分に、それぞれの固有のビューが入ります。
1 2 3 | {% block content %} <!-- メインコンテンツ --> {% endblock %} |
ちなみに、何もメインコンテンツがないと、以下のような見た目です。
レイアウト (templates/layout.html)
フッターは、コンテンツが何も無い場合でも、下部に表示されるようにしています。
templates/index.html
それでは、トップページを簡単に書いてみましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | {% extends "layout.html" %} {% block content %} <br> <div class="row"> <div class="col-md-10"> <h1>Welcome to Simple toDo application</h1> </div> <div class="col-md-2"> <a href="/admin" class="btn btn-primary">Login</a> </div> </div> <hr> <p>This is a simple toDo application powered by <b>FastAPI</b>!</p> {% endblock %} |
現段階でのトップページ（templates/index.html）
ひとまず、こんな感じにしておきます！
templates/admin.html
管理者ページも、適当に作っておきましょう。
まずは、URLを追加し、コントローラも簡単に書きます。
1 2 3 4 | # urls.py # FastAPIのルーティング用関数 app.add_api_route('/', index) app.add_api_route('/admin', admin) # new |
1 2 3 4 5 6 | # controllers.py def admin(request: Request): return templates.TemplateResponse('admin.html', {'request': request, 'username': 'admin'}) |
1 2 3 4 5 6 7 8 9 10 | <!-- templates/admin.html --> {% extends "layout.html" %} {% block content %} <br> <h2>Administrator page</h2> <hr> <p>Hi, {{ username }}.</p> {% endblock %} |
まだ、特に何もしない処理ですが、ビューに 'username' という名前で、変数を渡してビューで展開しています。（ <p>Hi, {{ username }}.</p> ）
ここは、いずれログインユーザによって変化するようにします。
現段階での管理者ページ (templates/admin.html)
第2回へつづく！
今回は、ここまで！
第1回目は、FastAPIにおける基本的な「MVCアプリケーション」の「V」と「C」について作り方を解説しました。
次回は、管理者ページの充実と、モデル(M)の作成を行いたいと思います。
お楽しみに！
第2回の記事はこちら
ResponderとFastAPIを実際に使って比較してみた
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
