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

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

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

前回の続きで、Todoアプリをブラッシュアップしています。
もう出来ると思ってましたが、今やりたいことの最終形までは届きませんでした、、

↓前回

現在どういう目的に向かっているのかというと、Todoアプリのタスクを追加/編集した際に、どのタスクが追加/編集されたものなのか一目で分かるようにしたい、というものです。

今回は、タスクを追加した際に、追加したタスクの横に「★」が表示されるようにすることができました。

↓こんな感じです。

どうやって実装したかというと、

①モデルに「更新日時」フィールドを追加
②その時刻情報を自作タグの引数として受け取る
③自作タグの中で、「更新日時 >= 現在時刻-3秒」なら★を付ける（3秒以内に作成されたタスクなら★が付く）

というような感じです。

①モデルに「更新日時」フィールドを追加

これはサクサクと追加するのみです。Todoモデルにフィールドを追加して、マイグレーションして終わりです。

[models.py]
 
class Todo(models.Model):
    title = models.CharField(
        "タスク名", 
        max_length=30, 
        help_text='【社名】を記載してください')
　
　～　中略　～
　    
    created_at = models.DateTimeField(
        verbose_name="登録日時", 
        auto_now_add=True)

    updated_at = models.DateTimeField(
        verbose_name="更新日時",
        auto_now=True
    )
    

    def __str__(self):
        return self.title

マイグレーションの詳しいやり方は過去にまとめたので、気になる方は見てみてください。

②その時刻情報を自作タグの引数として受け取る

モデル内のデータとして「更新日時」が入ってくるようになったので、それを引数として受け取り、自作タグ内で処理をします。

まずはそのテンプレート側です。以下のように、引数を渡すとき日時の型を指定しています。これは、引数に渡すタイミングでstr型（文字列）なってしまい、ここで指定しておかないと後工程で時刻の情報として処理できなくなるためです。

[after_create.html]
 
{% time_judge task.updated_at|date:'y/m/d H:i:s' %}</td>
  # time_judge ：自作タグ
　# task       ：変数(データが入っている)
　# updated_at ：フィールド名(更新日時が入っている)

↓少し周辺まで拡大すると、以下のようなコードになっています

[after_create.html]
 
        <tbody>
            {% for task in tasks %}
            {% if task.status|stringformat:"s" != "完了済" %}
            <tr>
                <td>{% time_judge task.updated_at|date:'y/m/d H:i:s' %}</td>
                <td>{{ task.title }}</td>
                <td>{{ task.deadline }}</td>
                <td>{{ task.status }}</td>
                <td>{{ task.updated_at|date:'y/m/d H:i:s' }}</td>
                <td>
                    <a href="{% url 'detail' task.pk %}">詳細</a>
                    <a href="{% url 'update' task.pk %}">編集</a>
                    <a href="{% url 'delete' task.pk %}">削除</a>
                </td>
            </tr>
            {% endif %}
            {% endfor %}
        </tbody>

③自作タグで「更新日時 >= 現在時刻-3秒」なら★を付ける

次に自作タグ側です。更新日時を受け取って、datetime型に直してから現在時刻-3秒と比較しています。

[extra_tags.py]
 
@register.simple_tag
def time_judge(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 "★"
    else:
        return ""

テンプレート側で時刻の型を指定しているため、ここで時刻情報を適切に受け取ることができます。このようにしないと色々とエラーが起きました。

最後、★じゃなかった場合は「""」で空白を返すようにしています。これは、こうしないとブラウザで「None」と表示されてしまい美しくないためです。

このように実装すると面白いのが、更新直後は★が付きますが、リロードすると消えるのです。

↓更新直後

↓リロード後

星が消えています！
ただ、こうなると同様に消したいのが青色のメッセージです。

ここをいじくるのに結構苦戦してまして、また明日チャレンジしたいと思います。

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

【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の環境構築