見出し画像

【83日目】Django_テンプレートを編集する_条件分岐_プログラミング学び日記

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

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


本日もTodoアプをブラッシュアップする取組です。
前回の記事はこちらです。



今回はテンプレート側で条件分岐させて、Todoのステータスが「完了済」だったら非表示にするようにしていきたいと思います。

変更前の画面がこちら。完了済のものも表示されてしまっています。

完了済を非表示にするとこうなります↓


削除しても消えるのですが、それだとデータベースからも消えてしまいます。非表示にしておくだけならどういうタスクをこなしていったのかというデータは残るので、振り返りなどもできそうです。


で、これ自体はすごく簡単に実装できます。

テンプレートで条件分岐して表示内容を改善する

Pythonのif文を使います。ただしDjangoだとフォーマットが少し異なっています。以下のようにendifで終了させる点が特徴的です。

[Djangoでのif文の記述]
 
# usernameを変数として、その内容によって処理を変える場合
{% if username == "YM" %}
<h1>自分です</h1>
{% elif username %}
<h1>{{ username }}さん、ようこそ!</h1>
{% else %}
<h1>匿名さん、ようこそ!</h1>
{% endif %}

今回は「完了済」以外の場合に表示させたいので、if文も単純です。task.statusに目当ての値が入ってくる(これは前回の学びです)ので、その値が「完了済」かどうかで条件分岐します。完了済以外なら表示して、完了済なら何もしない、という処理です。

[todo_list.html]
 
~中略~
 
        <tbody>
            {% for task in tasks %}
            {% if task.status|stringformat:"s" != "完了済" %}
            <tr>
                <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>
            {% endif %}
            {% endfor %}
        </tbody>

stringformatという見慣れないコードがありました。これが今回のポイントです。

stringformatとは?

Djangoのビルトインフィルター(組み込みフィルター)の1つです。引数に指定されたフォーマット指示子に従って変数をフォーマットしてくれます。フォーマット指示子はPythonのフォーマット指示構文と同じで、例えば以下があります。

"s" : 文字列(str型に変換)
"a" : 文字列(asciiコードに変換)
"d" : 10進整数
"f" : 10進浮動小数点数

Pythonの文法そのままで書くときは上記の前に「%」を付けますが、Djangoのstringformatフィルターで使う場合は不要です。



今日はめちゃくちゃ簡単でした。
ただ、1つやると更にやりたいことが出てくるもので、次は「完了済」の表示/非表示をブラウザ上のボタンで切り替えられないか調べてみようと思います。

Javaとか全くやったことないので、動的に表示を変えるのはまだ私には難しいかもしれませんが、、

一旦調べてみて、無理そうだったら他の改修を進めようと思います。



参考


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

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

【Paiza】
Aランクレベルアップメニュー 24/49問
データセット選択メニュー 4/17問
配列メニュー      59/64問
ループメニュー1 20/20問
ループメニュー2 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の環境構築

この記事が気に入ったらサポートをしてみませんか?