【88日目】Django_日時データを扱ってみる_プログラミング学び日記

　このnoteは、31歳未経験からエンジニアを目指して勉強していく記録を綴っているものです。現在はAdTechでカスタマーサクセスを担当しつつ、色んなチャンスに恵まれ、CS業務や子育てと並行しながらチャレンジしています。

　これからプログラミングを始める方にとってのTipsやモチベアップに繋げられるように頑張りたいと思っています。
--------------------------------------------

本日も前回の続きで、Todoアプリをブラッシュアップしています。
↓前回

ここ数日の目標に掲げていた、Todoアプリのタスクを追加/編集した際に、どのタスクが追加/編集されたものなのか一目で分かるようにしたい、を無事に達成できました。

↓タスクを新規作成した時のブラウザ

青文字のメッセージと、タスクの左横に★印をつけて、どのタスクが作成されたのか分かるようにしています。

また、これは画面をリロードすると元のトップページ（と同じ表示）に戻ります。

↓同じ画面でリロードした場合

新規作成だけでなく、タスクを編集した場合も同様に動きます。
↓タスクを編集した場合（ステータス変更など）

左横の★を付けるやり方は前回の記事で触れていますので、そちらをご参照いただければと思います。

今回はメッセージを出したり消したりをどうしているかについてまとめていきます。ただし肝となるコードは昨日作った自作タグを同様です。

テンプレートのpタグ内でfor文を使う

まずはこれが肝でした。pタグの中でfor文を書きます。

[after_create.html]
 
<h1><div class="mt-5">Todo List</div></h1>
<small class="text-muted">今日のタスクを作成しましょう！</small>


<p class="text-primary fw-bold h2" align="center">
    {% for task in tasks %}    
    {% update_message task.updated_at|date:'y/m/d H:i:s' %}
    {% endfor %}
</p>

  # update_message ：自作タグ
　# tasks          ：変数(データが入っている)
　# updated_at     ：フィールド名(更新日時が入っている)

<br>
<a class="btn btn-primary" href="{% url 'create' %}">新規作成</a>

仮に以下のように書くと、p（=paragragh）が複数作られてしまい、見た目が崩れてしまいます。

{% for task in tasks %}
<p class="text-primary fw-bold h2" align="center">{% update_message task.updated_at|date:'y/m/d H:i:s' %}</p>
{% endfor %}

テンプレート側で繰り返し処理をしているので、複数の結果が返って来てしまうように見えますが、実際に表示されるのは「1件のタスクが・・・」等の1文のみです。

これは何故かというと、次に紹介するタグ側のコードで、「更新から3秒以内ならこの1文を返す」と設定しているためです。3秒以内に複数のレコードを編集することはできないので、常に1つの文だけが表示されます。

自作タグを作る

タスクを新規作成した後と、タスクを編集した後それぞれ用にタグを2つ作ります。

[extra_tags.py]
 
@register.simple_tag
def add_message(updatetime):
    upd = datetime.datetime.strptime(updatetime, '%y/%m/%d %H:%M:%S')
    now = datetime.datetime.now()
    time_over = now + datetime.timedelta(seconds=-3)
    if upd >= time_over:
        return "1件のタスクが新たに追加されました"
    else:
        return ""

@register.simple_tag
def update_message(updatetime):
    upd = datetime.datetime.strptime(updatetime, '%y/%m/%d %H:%M:%S')
    now = datetime.datetime.now()
    time_over = now + datetime.timedelta(seconds=-3)
    if upd >= time_over:
        return "1件のタスクが更新されました"
    else:
        return ""

ロジックは前回の記事で紹介したものと同じで、日時の型を合わせて比較できるようにしています。

実際は上記以外にも、見た目を整えるためにCSSをちょこちょこ調整しています。

次は締切日の入力をカレンダーから選べるようにしようと頑張ってますが、全然やったことなJavaScriptの領域で、大苦戦中です…！
明日には解決したいが、、、

これまで修了したコース等

【YouTube_Django関係】
Pythonでウェブサービスを作ろう！ #1
テンプレートをマスターしよう！ #2
静的ファイルを配信しよう ！#3
本番公開しよう！ #4
データベースと接続しよう！ #5
ブログを作って学ぶモデル入門！ #6
これが汎用ビューの力！ #7
Djangoフォームを自由自在に操ろう！ #8
djagoを最大限使って効率よくログインを作ろう！ #9
ログイン完成！サインアップ & メール認証 #10
データベースマイグレーション前編 #15
データベースマイグレーション後編 #16

【Paiza】
JavaScript体験篇　　　　　　　7/15講座
Aランクレベルアップメニュー　24/49問
データセット選択メニュー　　　4/17問
配列メニュー　　　　　　 　　61/64問
ループメニュー１　　　　　　20/20問
ループメニュー２　　　　　　12/20問
条件分岐メニュー　　　 　　　25/25問
二重ループメニュー　　 　　　19/19問
配列活用メニュー　　　 　　　26/26問
文字列処理メニュー　　 　　　30/30問
Bランクレベルアップメニュー　62/62問
Cランクレベルアップメニュー　30/30問
ランクB合格
ランクC合格

【書籍／ブログ】
Django入門 | 初心者でも1時間でWebアプリ(Todoアプリ)を作成するコース
基礎からのMySQL　　　　 514/514頁
Web技術の基本　　　　　 189/189頁　※2周目中
京大のPython教科書　　　 116/201頁
Pythonデータベースプログラミング　194/194頁
Pythonエンジニアファーストブック読了

【Progate】
Python Ⅰ~Ⅴ
Python アプリ版　コースⅠ~Ⅴ
SQL Ⅰ~ Ⅳ
SQL アプリ版　コースⅢ
HTML&CSS 初級編

【その他】
Pythonの環境構築
VSCodeの環境構築
MySQLの環境構築（MAMP）
Git / GitHubの環境構築
HEROKUの環境構築