Djangoのtemplateでifをすっきり書いてみる(yesnoフィルター)

October 11, 2018

Djangoで開発を続けていくうちにだんだんとtemplateが複雑になり読みづらくなることがあります。
なので今回はちょっとでもtemplateがすっきり見えるように努力して書いてみます。

何の工夫もないコード

<ul class="navbar-nav mr-auto">
    {% if is_index %}
    <li class="nav-item active"><!--trueの時にactiveを付与したい -->
        <a class="nav-link" href="{% url 'index' %}">エンジニアもどきの技術メモ</a>
    </li>
    {% else %}
    <li class="nav-item">
        <a class="nav-link" href="{% url 'index' %}">エンジニアもどきの技術メモ</a>
    </li>
    {% endif %}
    {% if is_all_memo %}
    <li class="nav-item active"><!--trueの時にactiveを付与したい -->
        <a class="nav-link" href="{% url 'article_all' %}">すべてのメモ</a>
    </li>
    {% else %}
    <li class="nav-item">
        <a class="nav-link" href="{% url 'article_all' %}">すべてのメモ</a>
    </li>
    {% endif %}
</ul>

liタグにactiveが指定してある以外は、同じコードです。
同じことが何度も書いてあって非常に良くないです。デザインを変更する場合には何度も何度も書き直さないといけません。絶対にどこか見落とします。

次にysenoフィルターを利用してすっきり書いてみます。

ysenoフィルターを使って書く

<ul class="navbar-nav mr-auto">
    <li class="nav-item {{ is_index | yesno:'active,'}}">
        <a class="nav-link" href="{% url 'index' %}">エンジニアもどきの技術メモ</a>
    </li>
    <li class="nav-item {{ is_all_memo | yesno:'active,'}}">
        <a class="nav-link" href="{% url 'article_all' %}">すべてのメモ</a>
    </li>
</ul>

ifを使った場合と比べるとコードの量が半分近くになりかなりすっきりしました。

yesnoフィルター

ysenoフィルターは以下のように使います。

{{ value|yesno:'trueの場合の値, falseの場合の値'}}

trueの場合の値とfalseの場合の値をカンマで区切って渡す形です。
以下のコードと同じ意味です。

if value:
    return 'trueの場合の値'
else:
    return 'falseの場合の値'

今回はactiveを付与したかっただけなので'avtive,'にしましたが、falseの時に別の値を付与したければ'active,normal'などとすればできます。
templateはできるだけキレイに保ちたいので今回のようなケースではyesnoフィルターは重宝しますね。