【Django】mark_safeでhtmlコードを返す|実例付

※本サイトにはプロモーション・広告が含まれています。

当記事では、Djangoで独自のテンプレートタグを作成し、<a>タグなどのついたhtmlコードを返す方法、をお伝えします

htmlコードでリンクなどどうやって返すかわからない!

htmlのコードを返せるようにしたい!!!

という方は、下記を読んで仕組みを理解すれば、簡単に、自由なhtmlを返せるようになります

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

早速、コードの紹介!

from django import template
from django.utils.safestring import mark_safe
from django.urls import reverse_lazy

register = template.Library()

@register.filter
def createLink(value, pk):
    if not value:
        update_url = reverse_lazy("person_update", kwargs={"pk":pk})
        person_update_link = f"<a href={update_url}>追加する</a>"
        return mark_safe(person_update_link)
    else:
        return value

htmlを返すために

mark_safeのインポート

from django.utils.safestring import mark_safe

関数内でreturnするもの

 return mark_safe(person_update_link)

person_update_linkという変数には、返したいhtmlコードの文字列が代入されています

こちらの2つさえ覚えておけば、htmlを返すことが可能です!

おまけの解説

2つの引数

def createLink(value, pk):

上記の関数では、2つの引数(value, pk)を受け取ります

このような時、template内では

{{obj.company | createLink:obj.pk}}

とします

最初のobj.companyがvalue、「関数名:」後に記載されているobj.pkがpk、となります

reverse_lazy

こちらの関数ではreverse_lazyを使い、ページのURLを返すようにしています

固定でURLを指定(/some_page/など)とすると、仮にURLを変更した場合にこちらもいちいち変えないといけません

なのでreverse_lazyを使い、変更がきちんと反映されるようにしています

以上、独自フィルタでhtmlを返す方法でした!

タイトルとURLをコピーしました