【86日目】Django_自作タグの作成その2_プログラミング学び日記

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

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

前回は自作タグを「作って動かしてみた」だけですが、今回から目的に近づけ始めました。

前回↓

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

少し動的っぽいページになりますが、このくらいならJavaScriptとか使わなくてもいけるんじゃないかと思って頑張っています（実際いけそうです）。

本日はまだ途中で、とりあえず「ステータスが”対応中”のタスクに★を付ける」というところまで成功しました。

タグはどのようなコードになったか

templatetags直下に作ったextra_tags.pyというファイルに自作タグを書いています。今回は「処理状況」に応じて返す値を変えたいので、処理状況を引数で受け取り、if文で条件分岐する流れです。

[extra_tags.py]
　
from django import template

register = template.Library() # Djangoテンプレートタグライブラリ

@register.simple_tag
def update_mark(updatestatus):
        upd = str(updatestatus)
        if upd == "対応中":
                return "★"
        else:
                return " "

最初のポイントは「upd」で引数をstr型に変換している点です。型変換については以前の記事でも触れましたが、DjangoではModel特有の型みたいになってデータが行き来してるようで、そのままではif文が動きません。そのためここでstr型に変換しています。

次に、対応中なら「★」を返して、それ以外なら空白を返すようにしています。最初は★を返すパターンのみ記載していたのですが、それだと★以外のところが「None」と表示されてしまい、空白を返すようにしました。力業っぽいですが、、、

テンプレート側はどう記載するのか

テンプレート側は、引数を受け取る場合は「{% 関数名 '引数' %}」がベーシックな書き方です。そのため最初は以下のように記載していました。

↓間違った書き方です

[after_create.html]

{% update_mark 'task.status' %}  # for task in tasksで繰り返し処理している 
 

[views.py]

class TodoList(ListView):
    model = Todo
    context_object_name = "tasks"

しかし変数を引数に渡す場合、''は不要でした。''をつけると「task.status」という文字列が引数として渡されてしまいます。

↓正しい書き方です

[after_create.html]

{% update_mark task.status %}  # for task in tasksで繰り返し処理している 
 

[views.py]

class TodoList(ListView):
    model = Todo
    context_object_name = "tasks"

↓htmlの該当部分は以下のような感じです。

[after_create.html]
 
        <tbody>
            {% for task in tasks %}
            <tr>
                <td>{% update_mark task.status %}</td>
                <td>{{ task.title }}</td>
                <td>{{ task.deadline }}</td>
                <td>{{ task.status }}</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>
        </tbody>

statusが対応中なら★が、それ以外なら空白が左端に入ります。

次にやること

ここまでで目的に向けた下準備が完了しました。無事に動かせることが分かったので、明日以降は以下の手順で仕上げていきます。

①Todoモデルに「更新日時」のフィールドを追加してマイグレーション
②自作タグ内で「更新日時」が現在時刻の〇秒以内だったら「★」を返すように設定
③どのタスクが更新されたものなのか一目で分かるかどうか確認

もう一息！！
ですが明日は一日ワンオペ育児だから時間が取れるか微妙です笑

まぁ頑張りましょう！

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

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