1. HOME
  2. ブログ
  3. IT技術
  4. 【第5回】FastAPIチュートリアル: toDoアプリを作ってみよう【予定詳細ページ作成編】

【第5回】FastAPIチュートリアル: toDoアプリを作ってみよう【予定詳細ページ作成編】

FastAPIチュートリアル: toDoアプリを作ってみよう~第5回~

前回の記事「【第4回】FastAPIチュートリアル: toDoアプリを作ってみよう【管理者ページ改良編】」の続きです。

今回も、toDo アプリを作る過程で、FastAPI の使い方を学んでいきましょう!

第1回はこちら

予定の詳細ページ

前回、管理者ページを作り、/todo/{username}/{year}/{month}/{day} というURLパターンを各日付にリンクさせました。

今回は、このURLパターンについて、FastAPI で処理を書いていきます。

最終的な目標は、予定の「登録」「削除」「終了」ができるようなページを作成することです。

URLパターンのルーティング

FastAPI では、以下のようにURLパターンはルーティングします。

とても直感的でわかりやすいです。

(一番最後のコードは、新たに templates/detail.html を作成して記述)

このように、FastAPIではURLパターンは引数で取得可能です。

例えば、http://127.0.0.1:8000/todo/admin/2019/4/1なら…

URLパターンの表示テスト

のように表示されます。

ログインユーザのみ訪問可能にする

しかし、このままでは、先ほどのリンクに直接訪問してきた人がいた場合、予定が丸見えです。

プライバシーの保護のためにも、このページも管理者しか訪問できないようにする必要があります。

admin()関数のように「Basic認証」を導入すればOKです。

しかし、同じようなことを何回も書くのは面倒なので認証関数を作成しましょう。

新しく auth.py を作り、以下のように認証部分を取り出します。

すると、admin() も以下のように書き直すことができます。

( from auth import auth を忘れずに!)

detail()も修正

detail() も同様です。

以下のように書き直すことで、ログイン中のユーザのみ訪問可能となります。

(ログイン中のユーザが他人の予定を見ることも弾くようにします)

from starlette.responses import RedirectResponse を新たにインポートして…

確認する時は、ブラウザのクッキーを削除してみたりして確認してください。

現在の予定一覧を取得する

次に、予定詳細ページで「現在入っている予定」を表示させるようにしましょう。

やることはさほど難しくありません。

URLパターンから受け取った情報から、該当タスクを取得しビューに反映させるだけです。

したがって

のように書き直せば、ビューに該当タスクを渡すことができます。

次に、ビューでタスクを展開しましょう。

確認

「予定を遂行したか」の処理は「/done」というURLに投げることにしました。

動作確認

/done をコーディングする

次に、先ほどのURLをコーディングします。

内容はタスクの「終了したか(done)」を変更させるだけですが、このURLもログインユーザ限定にするためにこれも認証関数などを挟みます

ポイントは、フォームでデータを受け取るので、関数は async をつける必要があります。

また、他のログインユーザから、他人の予定を無差別に「終了」とされるのを防ぐ工夫も施す必要があります。

今回は「ログインユーザIDで取得したタスクの中から、受け取ったIDが一致した場合」にしましたが、URLパターンで実装するのもアリだと思います。

確認

うまく動作すれば、このような表示に変わります。

終了したタスク

第5回:さいごに

今回は、予定詳細ページの充実を図りました。

しかし、まだまだ機能としては不十分です。

新たな予定の登録」や「予定の削除」機能があってこそtoDoアプリケーションです。

では、次回はこの辺りを実装していきたいと思います!

第6回の記事はこちら

ResponderとFastAPIを実際に使って比較してみた

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア