1. HOME
  2. ブログ
  3. IT技術
  4. 【第6回】FastAPIチュートリアル: toDoアプリを作ってみよう【予定の追加・削除編】

【第6回】FastAPIチュートリアル: toDoアプリを作ってみよう【予定の追加・削除編】

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

前回の記事「【第5回】FastAPIチュートリアル: toDoアプリを作ってみよう【予定詳細ページ作成編】」の続きです。

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

第1回はこちら

予定の追加

前回に引き続き、管理者ページの改良を行なっていきます。

今回は、予定詳細ページから「予定の追加と削除」ができるようにするのが目標です。

では、まずは「予定の追加」から行っていきたいと思います!

ビューを改良

まずは、予定詳細ページ(detail.html)に、新たにフォームを追加します。

予定の追加は「/add」というURLに投げることにしました。

見た目的にはこのような感じになっています。

予定の追加フォーム

/addをコーディング

次に、実際に処理を書いていきましょう!

ルーティングは、いつものごとくです。

コントローラも、大した処理は必要ありません。

フォームデータをうまく処理するだけなので、以下のように書くことができます。

動作確認

適当に予定を追加して...

予定が追加されました

予定の削除

間違えて予定を入れてしまった場合、「予定の削除」機能が必要です。

その機能を追加していきましょう!

予定詳細ページに削除ボタンを追加する

今回は、削除機能はフォームではなく、削除ボタン(リンク)で処理することにしました。

予定一覧のテーブルに、新たな列を追加してみましょう。

削除URLは「/delete/{task_id}」としました。

見た目はこのような感じになっています。

削除ボタンの追加

/delete/{task_id}のコントローラを書く

ルーティングです。

もう大丈夫ですね。

そうしたらコントローラを書きますが、今回はURLパターンで削除したいタスクを取得するだけです。

ただ、部外者が勝手にタスクを削除できないように工夫しましょう。

どうでしょうか?

ここまでくると、データベースの扱いは慣れてきたかと思います。

SQLAlchemyでは、データベースの処理( session.query() や session.add() 、 session.delete() )の後は、 session.close() する、という一連の処理を覚えておきましょう。

データベースに変更を反映させる場合はクローズする前に、 session.commit() です!

第6回:さいごに

今回は、予定詳細ページから「追加」「削除」「変更」機能を追加しました。

これで一通り、「toDoアプリの機能」は実装できましたね!

デザインはあなたで考えてみて下さい!

あとは、どのように機能を増やして、UIを変えて使いやすくするかは、読者の皆様次第です。

例えば、管理者ページのカレンダーで、前後2年分のカレンダーが表示できるようにするのも良いですし、今日の日付を強調したりするのも良いかもしれません。

また、アプリケーションのランディングページ(トップページ)が質素すぎるので、もっと「ユーザの心を掴むようなデザイン」にするのも必要そうです。

本連載では、その部分はやりません。

そのため、余力がある人はぜひチャレンジしてみてくださいね!

なお、FastAPIについての開発依頼・お見積もりはこちらまでお願いします。

次回は最終回!

ちなみに、本連載は次回で最終回となります!

最後は、JSONレスポンスを取得できるようにして、WebAPIとしても機能するようにしていきます!

最終回の記事はこちら

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

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

書いた人はこんな人

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

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

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

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

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

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア