
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Django Template Language &#8212; Django 4.1.8.dev20230308103347 ドキュメント</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
    <link rel="stylesheet" type="text/css" href="../../_static/default.css" />
    <script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
    <script src="../../_static/jquery.js"></script>
    <script src="../../_static/underscore.js"></script>
    <script src="../../_static/doctools.js"></script>
    <script src="../../_static/translations.js"></script>
    <link rel="index" title="索引" href="../../genindex.html" />
    <link rel="search" title="検索" href="../../search.html" />
    <link rel="next" title="組み込みタグとフィルタ" href="builtins.html" />
    <link rel="prev" title="テンプレート" href="index.html" />



 
<script src="../../templatebuiltins.js"></script>
<script>
(function($) {
    if (!django_template_builtins) {
       // templatebuiltins.js missing, do nothing.
       return;
    }
    $(document).ready(function() {
        // Hyperlink Django template tags and filters
        var base = "builtins.html";
        if (base == "#") {
            // Special case for builtins.html itself
            base = "";
        }
        // Tags are keywords, class '.k'
        $("div.highlight\\-html\\+django span.k").each(function(i, elem) {
             var tagname = $(elem).text();
             if ($.inArray(tagname, django_template_builtins.ttags) != -1) {
                 var fragment = tagname.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>");
             }
        });
        // Filters are functions, class '.nf'
        $("div.highlight\\-html\\+django span.nf").each(function(i, elem) {
             var filtername = $(elem).text();
             if ($.inArray(filtername, django_template_builtins.tfilters) != -1) {
                 var fragment = filtername.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>");
             }
        });
    });
})(jQuery);</script>

  </head><body>

    <div class="document">
  <div id="custom-doc" class="yui-t6">
    <div id="hd">
      <h1><a href="../../index.html">Django 4.1.8.dev20230308103347 ドキュメント</a></h1>
      <div id="global-nav">
        <a title="Home page" href="../../index.html">Home</a>  |
        <a title="Table of contents" href="../../contents.html">Table of contents</a>  |
        <a title="Global index" href="../../genindex.html">Index</a>  |
        <a title="Module index" href="../../py-modindex.html">Modules</a>
      </div>
      <div class="nav">
    &laquo; <a href="index.html" title="テンプレート">previous</a>
     |
    <a href="../index.html" title="API Reference" accesskey="U">up</a>
   |
    <a href="builtins.html" title="組み込みタグとフィルタ">next</a> &raquo;</div>
    </div>

    <div id="bd">
      <div id="yui-main">
        <div class="yui-b">
          <div class="yui-g" id="ref-templates-language">
            
  <div class="section" id="s-the-django-template-language">
<span id="the-django-template-language"></span><h1>The Django Template Language<a class="headerlink" href="#the-django-template-language" title="このヘッドラインへのパーマリンク">¶</a></h1>
<p>このドキュメントはDjangoテンプレートシステムの文法を説明しています。もしあなたがもっと技術者的な観点でどう動かすかやどう拡張するかを知りたい場合は、<a class="reference internal" href="api.html"><span class="doc">The Django template language: for Python programmers</span></a> をご覧ください。</p>
<p>Django のテンプレート言語は、パワーと使いやすさのバランスを取るように設計されています。HTMLでの作業に使用されるものが快適に感じられるように設計されているのです。あなたが他のテキストベースのテンプレート言語に対して <a class="reference external" href="https://www.smarty.net/">Smarty</a> や <a class="reference external" href="https://palletsprojects.com/p/jinja/">Jinja2</a> のような露出的な処理を習得しているのなら、Django テンプレートをより身近に感じられるはずです。</p>
<div class="admonition-philosophy admonition">
<p class="first admonition-title">設計思想</p>
<p>あなたがどんなプログラミング経験を持ってるにしろ、HTMLの中にコードを埋め込む言語を使っていたにしろ、DjangoテンプレートシステムはただHTMLのなかにPythonを貼り付けるだけのシステムではないことを心に留めたいと思われたでしょう。これは&quot;テンプレートシステムは、プログラム論理構造を表すのでなく、あくまでプレゼンテーションを表現することを意味する。&quot;というデザイン設計から来ています。</p>
<p class="last">Django のテンプレートシステムは、いくつかのプログラミング構造 - ブールテスト用の <a class="reference internal" href="builtins.html#std-templatetag-if"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">if</span></code></a> タグ、ループ用の <a class="reference internal" href="builtins.html#std-templatetag-for"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">for</span></code></a> タグなどと同様に機能するタグを提供しています。しかしこれらは、単純に対応する Python コードとしては実行するわけではなく、テンプレートシステムは、任意の Python の式を実行しません。タグ、フィルタ、および下の文法リストのみがデフォルトではサポートされています。(しかし、必要に応じて <a class="reference internal" href="../../howto/custom-template-tags.html"><span class="doc">あなた独自の拡張機能</span></a> をテンプレート言語に追加することも可能です。)</p>
</div>
<div class="section" id="s-templates">
<span id="templates"></span><h2>テンプレート<a class="headerlink" href="#templates" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>A template is a text file. It can generate any text-based format (HTML, XML,
CSV, etc.).</p>
<p>テンプレートに含まれるのは、テンプレートが読み込まれたとき実際の値で置き換えられる <strong>変数</strong> と、テンプレートのロジックを制御する <strong>タグ</strong> です。</p>
<p>下は幾つかの基本を示している少ない見本です。各要素については、このドキュメントの後半で説明します。</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s2">&quot;base_generic.html&quot;</span> <span class="cp">%}</span>

<span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}{{</span> <span class="nv">section.title</span> <span class="cp">}}{%</span> <span class="k">endblock</span> <span class="cp">%}</span>

<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span>
<span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">section.title</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>

<span class="cp">{%</span> <span class="k">for</span> <span class="nv">story</span> <span class="k">in</span> <span class="nv">story_list</span> <span class="cp">%}</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">story.get_absolute_url</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="p">&gt;</span>
    <span class="cp">{{</span> <span class="nv">story.headline</span><span class="o">|</span><span class="nf">upper</span> <span class="cp">}}</span>
  <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">story.tease</span><span class="o">|</span><span class="nf">truncatewords</span><span class="s2">:&quot;100&quot;</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
<div class="admonition-philosophy admonition">
<p class="first admonition-title">設計思想</p>
<p class="last">Why use a text-based template instead of an XML-based one (like Zope's
TAL)? We wanted Django's template language to be usable for more than
just XML/HTML templates. You can use the template language for any
text-based format such as emails, JavaScript and CSV.</p>
</div>
</div>
<div class="section" id="s-variables">
<span id="s-template-variables"></span><span id="variables"></span><span id="template-variables"></span><h2>変数<a class="headerlink" href="#variables" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>Variables look like this: <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">variable</span> <span class="pre">}}</span></code>. When the template engine
encounters a variable, it evaluates that variable and replaces it with the
result. Variable names consist of any combination of alphanumeric characters
and the underscore (<code class="docutils literal notranslate"><span class="pre">&quot;_&quot;</span></code>) but may not start with an underscore, and may not
be a number. The dot (<code class="docutils literal notranslate"><span class="pre">&quot;.&quot;</span></code>) also appears in variable sections, although that
has a special meaning, as indicated below. Importantly, <em>you cannot have spaces
or punctuation characters in variable names.</em></p>
<p>変数の属性にアクセスするには、ドットを ('<code class="docutils literal notranslate"><span class="pre">.</span></code>') を使用します。</p>
<div class="admonition-behind-the-scenes admonition">
<p class="first admonition-title">背景</p>
<p>技術的には、テンプレートシステムがドットを検出した際、以下の参照項目をこの順番で実行しようとします:</p>
<ul class="simple">
<li>辞書検索</li>
<li>属性やメソッドの検索</li>
<li>数値のインデックス検索</li>
</ul>
<p>結果の値が呼び出し可能である場合は、引数なしで呼び出されます。呼び出しの結果は、テンプレートの値となります。</p>
<p>この検索の手順は、辞書検索を上書きするオブジェクトにおいて、予期しない動作を引き起こす可能性があります。例えば、`` collections.defaultdict`` すべてをループ処理をしようとする、次のコードスニペットを考えてみましょう:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">k</span><span class="o">,</span> <span class="nv">v</span> <span class="k">in</span> <span class="nv">defaultdict.items</span> <span class="cp">%}</span>
    Do something with k and v here...
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
</pre></div>
</div>
<p class="last">最初に辞書検索が行われるため、その挙動が動作してしまい、意図していた <code class="docutils literal notranslate"><span class="pre">.items()</span></code> メソッドを使用せずに、デフォルト値を提供してしまいます。この場合、最初に辞書を変換することを検討してください。</p>
</div>
<p>In the above example, <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">section.title</span> <span class="pre">}}</span></code> will be replaced with the
<code class="docutils literal notranslate"><span class="pre">title</span></code> attribute of the <code class="docutils literal notranslate"><span class="pre">section</span></code> object.</p>
<p>もし存在しない変数を使いたい場合、テンプレートシステムは`デフォルトで``''`` (the empty string)が置かれている場所に、string_if_invalid` のオプション値を挿入します。</p>
<p>Note that &quot;bar&quot; in a template expression like <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">foo.bar</span> <span class="pre">}}</span></code> will be
interpreted as a literal string and not using the value of the variable &quot;bar&quot;,
if one exists in the template context.</p>
<p>Variable attributes that begin with an underscore may not be accessed as
they're generally considered private.</p>
</div>
<div class="section" id="s-filters">
<span id="filters"></span><h2>フィルター<a class="headerlink" href="#filters" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>You can modify variables for display by using <strong>filters</strong>.</p>
<p>Filters look like this: <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">name|lower</span> <span class="pre">}}</span></code>. This displays the value of the
<code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">name</span> <span class="pre">}}</span></code> variable after being filtered through the <a class="reference internal" href="builtins.html#std-templatefilter-lower"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">lower</span></code></a>
filter, which converts text to lowercase. Use a pipe (<code class="docutils literal notranslate"><span class="pre">|</span></code>) to apply a filter.</p>
<p>Filters can be &quot;chained.&quot; The output of one filter is applied to the next.
<code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">text|escape|linebreaks</span> <span class="pre">}}</span></code> is a common idiom for escaping text contents,
then converting line breaks to <code class="docutils literal notranslate"><span class="pre">&lt;p&gt;</span></code> tags.</p>
<p>Some filters take arguments. A filter argument looks like this: <code class="docutils literal notranslate"><span class="pre">{{</span>
<span class="pre">bio|truncatewords:30</span> <span class="pre">}}</span></code>. This will display the first 30 words of the <code class="docutils literal notranslate"><span class="pre">bio</span></code>
variable.</p>
<p>Filter arguments that contain spaces must be quoted; for example, to join a
list with commas and spaces you'd use <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">list|join:&quot;,</span> <span class="pre">&quot;</span> <span class="pre">}}</span></code>.</p>
<p>Django provides about sixty built-in template filters. You can read all about
them in the <a class="reference internal" href="builtins.html#ref-templates-builtins-filters"><span class="std std-ref">built-in filter reference</span></a>.
To give you a taste of what's available, here are some of the more commonly
used template filters:</p>
<dl class="docutils">
<dt><a class="reference internal" href="builtins.html#std-templatefilter-default"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">default</span></code></a></dt><dd><p>If a variable is false or empty, use given default. Otherwise, use the
value of the variable. For example:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">value</span><span class="o">|</span><span class="nf">default</span><span class="s2">:&quot;nothing&quot;</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>If <code class="docutils literal notranslate"><span class="pre">value</span></code> isn't provided or is empty, the above will display
&quot;<code class="docutils literal notranslate"><span class="pre">nothing</span></code>&quot;.</p>
</dd>
<dt><a class="reference internal" href="builtins.html#std-templatefilter-length"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">length</span></code></a></dt><dd><p>Returns the length of the value. This works for both strings and lists.
For example:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">value</span><span class="o">|</span><span class="nf">length</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>If <code class="docutils literal notranslate"><span class="pre">value</span></code> is <code class="docutils literal notranslate"><span class="pre">['a',</span> <span class="pre">'b',</span> <span class="pre">'c',</span> <span class="pre">'d']</span></code>, the output will be <code class="docutils literal notranslate"><span class="pre">4</span></code>.</p>
</dd>
<dt><a class="reference internal" href="builtins.html#std-templatefilter-filesizeformat"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">filesizeformat</span></code></a></dt><dd><p>Formats the value like a &quot;human-readable&quot; file size (i.e. <code class="docutils literal notranslate"><span class="pre">'13</span> <span class="pre">KB'</span></code>,
<code class="docutils literal notranslate"><span class="pre">'4.1</span> <span class="pre">MB'</span></code>, <code class="docutils literal notranslate"><span class="pre">'102</span> <span class="pre">bytes'</span></code>, etc.). For example:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">value</span><span class="o">|</span><span class="nf">filesizeformat</span> <span class="cp">}}</span>
</pre></div>
</div>
<p><code class="docutils literal notranslate"><span class="pre">value</span></code> が 123456789 のとき、出力は <code class="docutils literal notranslate"><span class="pre">117.7</span> <span class="pre">MB</span></code> になります。</p>
</dd>
</dl>
<p>Again, these are just a few examples; see the <a class="reference internal" href="builtins.html#ref-templates-builtins-filters"><span class="std std-ref">built-in filter reference</span></a> for the complete list.</p>
<p>You can also create your own custom template filters; see
<a class="reference internal" href="../../howto/custom-template-tags.html"><span class="doc">How to create custom template tags and filters</span></a>.</p>
<div class="admonition seealso">
<p class="first admonition-title">参考</p>
<p class="last">Django's admin interface can include a complete reference of all template
tags and filters available for a given site. See
<a class="reference internal" href="../contrib/admin/admindocs.html"><span class="doc">The Django admin documentation generator</span></a>.</p>
</div>
</div>
<div class="section" id="s-tags">
<span id="tags"></span><h2>タグ<a class="headerlink" href="#tags" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>Tags look like this: <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">tag</span> <span class="pre">%}</span></code>. Tags are more complex than variables: Some
create text in the output, some control flow by performing loops or logic, and
some load external information into the template to be used by later variables.</p>
<p>Some tags require beginning and ending tags (i.e. <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">tag</span> <span class="pre">%}</span> <span class="pre">...</span> <span class="pre">tag</span> <span class="pre">contents</span>
<span class="pre">...</span> <span class="pre">{%</span> <span class="pre">endtag</span> <span class="pre">%}</span></code>).</p>
<p>Django ships with about two dozen built-in template tags. You can read all about
them in the <a class="reference internal" href="builtins.html#ref-templates-builtins-tags"><span class="std std-ref">built-in tag reference</span></a>. To give
you a taste of what's available, here are some of the more commonly used
tags:</p>
<dl class="docutils">
<dt><a class="reference internal" href="builtins.html#std-templatetag-for"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">for</span></code></a></dt><dd><p>Loop over each item in an array.  For example, to display a list of athletes
provided in <code class="docutils literal notranslate"><span class="pre">athlete_list</span></code>:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">for</span> <span class="nv">athlete</span> <span class="k">in</span> <span class="nv">athlete_list</span> <span class="cp">%}</span>
    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">athlete.name</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>
</div>
</dd>
<dt><a class="reference internal" href="builtins.html#std-templatetag-if"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">if</span></code></a>, <code class="docutils literal notranslate"><span class="pre">elif</span></code>, and <code class="docutils literal notranslate"><span class="pre">else</span></code></dt><dd><p>Evaluates a variable, and if that variable is &quot;true&quot; the contents of the
block are displayed:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">athlete_list</span> <span class="cp">%}</span>
    Number of athletes: <span class="cp">{{</span> <span class="nv">athlete_list</span><span class="o">|</span><span class="nf">length</span> <span class="cp">}}</span>
<span class="cp">{%</span> <span class="k">elif</span> <span class="nv">athlete_in_locker_room_list</span> <span class="cp">%}</span>
    Athletes should be out of the locker room soon!
<span class="cp">{%</span> <span class="k">else</span> <span class="cp">%}</span>
    No athletes.
<span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>In the above, if <code class="docutils literal notranslate"><span class="pre">athlete_list</span></code> is not empty, the number of athletes
will be displayed by the <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">athlete_list|length</span> <span class="pre">}}</span></code> variable. Otherwise,
if <code class="docutils literal notranslate"><span class="pre">athlete_in_locker_room_list</span></code> is not empty, the message &quot;Athletes
should be out...&quot; will be displayed. If both lists are empty,
&quot;No athletes.&quot; will be displayed.</p>
<p>You can also use filters and various operators in the <a class="reference internal" href="builtins.html#std-templatetag-if"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">if</span></code></a> tag:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">athlete_list</span><span class="o">|</span><span class="nf">length</span> <span class="o">&gt;</span> <span class="m">1</span> <span class="cp">%}</span>
   Team: <span class="cp">{%</span> <span class="k">for</span> <span class="nv">athlete</span> <span class="k">in</span> <span class="nv">athlete_list</span> <span class="cp">%}</span> ... <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">else</span> <span class="cp">%}</span>
   Athlete: <span class="cp">{{</span> <span class="nv">athlete_list.0.name</span> <span class="cp">}}</span>
<span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>While the above example works, be aware that most template filters return
strings, so mathematical comparisons using filters will generally not work
as you expect. <a class="reference internal" href="builtins.html#std-templatefilter-length"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">length</span></code></a> is an exception.</p>
</dd>
<dt><a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">block</span></code></a> and <a class="reference internal" href="builtins.html#std-templatetag-extends"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">extends</span></code></a></dt><dd>Set up <a class="reference internal" href="#id1">template inheritance</a> (see below), a powerful way
of cutting down on &quot;boilerplate&quot; in templates.</dd>
</dl>
<p>Again, the above is only a selection of the whole list; see the <a class="reference internal" href="builtins.html#ref-templates-builtins-tags"><span class="std std-ref">built-in
tag reference</span></a> for the complete list.</p>
<p>You can also create your own custom template tags; see
<a class="reference internal" href="../../howto/custom-template-tags.html"><span class="doc">How to create custom template tags and filters</span></a>.</p>
<div class="admonition seealso">
<p class="first admonition-title">参考</p>
<p class="last">Django's admin interface can include a complete reference of all template
tags and filters available for a given site. See
<a class="reference internal" href="../contrib/admin/admindocs.html"><span class="doc">The Django admin documentation generator</span></a>.</p>
</div>
</div>
<div class="section" id="s-comments">
<span id="s-template-comments"></span><span id="comments"></span><span id="template-comments"></span><h2>コメント<a class="headerlink" href="#comments" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>To comment-out part of a line in a template, use the comment syntax: <code class="docutils literal notranslate"><span class="pre">{#</span> <span class="pre">#}</span></code>.</p>
<p>For example, this template would render as <code class="docutils literal notranslate"><span class="pre">'hello'</span></code>:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="c">{# greeting #}</span>hello
</pre></div>
</div>
<p>A comment can contain any template code, invalid or not. For example:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="c">{# {% if foo %}bar{% else %} #}</span>
</pre></div>
</div>
<p>This syntax can only be used for single-line comments (no newlines are permitted
between the <code class="docutils literal notranslate"><span class="pre">{#</span></code> and <code class="docutils literal notranslate"><span class="pre">#}</span></code> delimiters). If you need to comment out a
multiline portion of the template, see the <a class="reference internal" href="builtins.html#std-templatetag-comment"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">comment</span></code></a> tag.</p>
</div>
<div class="section" id="s-template-inheritance">
<span id="s-id1"></span><span id="template-inheritance"></span><span id="id1"></span><h2>テンプレートの継承<a class="headerlink" href="#template-inheritance" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>Django のテンプレートエンジンの中で最もパワフルな -- ゆえに最も複雑な -- 部分が、テンプレートの継承です。テンプレートを継承すると、ベースとなる &quot;骨組みの&quot; テンプレートにサイトの共通要素を記述し、<strong>block</strong> を定義することで子テンプレートにオーバーライドさせることができます。</p>
<p>Let's look at template inheritance by starting with an example:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;style.css&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>My amazing site<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;sidebar&quot;</span><span class="p">&gt;</span>
        <span class="cp">{%</span> <span class="k">block</span> <span class="nv">sidebar</span> <span class="cp">%}</span>
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/&quot;</span><span class="p">&gt;</span>Home<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/blog/&quot;</span><span class="p">&gt;</span>Blog<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;content&quot;</span><span class="p">&gt;</span>
        <span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>
<p>This template, which we'll call <code class="docutils literal notranslate"><span class="pre">base.html</span></code>, defines an HTML skeleton
document that you might use for a two-column page. It's the job of &quot;child&quot;
templates to fill the empty blocks with content.</p>
<p>この例では、<a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">block</span></code></a> タグにより、子テンプレートが埋めることができる 3 つのブロックが定義されています。<a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">block</span></code></a> タグの仕事は、テンプレートのこれらの部分が子テンプレートによりオーバーライドされる可能性があることをテンプレートエンジンに伝えることです。</p>
<p>子テンプレートは以下のようになります:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s2">&quot;base.html&quot;</span> <span class="cp">%}</span>

<span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>My amazing blog<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>

<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">for</span> <span class="nv">entry</span> <span class="k">in</span> <span class="nv">blog_entries</span> <span class="cp">%}</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">entry.title</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">entry.body</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>ここで重要なのは <a class="reference internal" href="builtins.html#std-templatetag-extends"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">extends</span></code></a> タグです。このタグが、このテンプレートが他のテンプレートを &quot;拡張&quot; することをテンプレートエンジンに伝えるのです。テンプレートシステムがこの点プレートを評価する際に、最初に親テンプレートを探しに行きます -- この例では &quot;base.html&quot; です。</p>
<p>この時点で、テンプレートエンジンは <code class="docutils literal notranslate"><span class="pre">base.html</span></code> 内の <a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">block</span></code></a> を認識し、子テンプレートのコンテンツと差し替えます。<code class="docutils literal notranslate"><span class="pre">blog_entries</span></code> の値に応じて、アウトプットは以下のようになります:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;style.css&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>My amazing blog<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;sidebar&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/&quot;</span><span class="p">&gt;</span>Home<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/blog/&quot;</span><span class="p">&gt;</span>Blog<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;content&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Entry one<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is my first entry.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Entry two<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is my second entry.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>
<p>子テンプレート内で <code class="docutils literal notranslate"><span class="pre">sidebar</span></code> を定義していないため、親テンプレートの値がそのまま使われていることに留意してください。親テンプレートの <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code> タグ内のコンテンツは、常にフォールバックとして使用されます。</p>
<p>継承は、必要なだけ段階を経ることができます。継承を使う一般的な方法は、以下の 3 段階のアプローチです:</p>
<ul class="simple">
<li>メインのルック・アンド・フィールを保持する <code class="docutils literal notranslate"><span class="pre">base.html</span></code> を作成します。</li>
<li>それぞれの &quot;セクション&quot; に対して、<code class="docutils literal notranslate"><span class="pre">base_セクション名.html</span></code> テンプレートを作成します。例えば、<code class="docutils literal notranslate"><span class="pre">base_news.html</span></code>、<code class="docutils literal notranslate"><span class="pre">base_sports.html</span></code> などです。これらはすべて <code class="docutils literal notranslate"><span class="pre">base.html</span></code> を拡張 (extends) し、セクション固有のスタイルやデザインを定義します。</li>
<li>ページのそれぞれのタイプに対して、個別のテンプレートを作成します。たとえばニュース記事やブログエントリーなどです。これらのテンプレートは、適切なセクションの手プレートを拡張 (extends) します。</li>
</ul>
<p>This approach maximizes code reuse and helps to add items to shared content
areas, such as section-wide navigation.</p>
<p>継承を使用する際のコツをいくつか紹介します:</p>
<ul>
<li><p class="first">テンプレート内で <a class="reference internal" href="builtins.html#std-templatetag-extends"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">{%</span> <span class="pre">extends</span> <span class="pre">%}</span></code></a> を使用する際は、その点プレート内で一番最初のテンプレートタグとして指定する必要があります。それ以外の場合、継承が正しく動作しません。</p>
</li>
<li><p class="first">ベースのテンプレートには <a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code></a> タグを多く配置するほどよいです。子テンプレートがすべてのブロックを埋める必要がないことを思い出してください。多くのブロック内に適当なデフォルトを記述しておき、必要なものを後で定義し直せばいいのです。フックは多ければ多いほどいいということです。</p>
</li>
<li><p class="first">もし同じコンテンツを複数のテンプレート内で記述していたら、そのコンテンツを親テンプレートの <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code> に移動させるべきかもしれません。</p>
</li>
<li><p class="first">親テンプレートからブロックのコンテンツを取得する必要がある場合、<code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">block.super</span> <span class="pre">}}</span></code> が利用できます。親のブロックを完全にオーバーライドせずに、コンテンツを追加したい場合に有用です。<code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">block.super</span> <span class="pre">}}</span></code> を使って挿入されたデータは自動的にエスケープされません (<a class="reference external" href="#automatic-html-escaping">next section</a> を参照してください)。これは、必要な場合は親テンプレートですでにエスケープされているからです。</p>
</li>
<li><p class="first">By using the same template name as you are inheriting from,
<a class="reference internal" href="builtins.html#std-templatetag-extends"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">{%</span> <span class="pre">extends</span> <span class="pre">%}</span></code></a> can be used to inherit a template at the same
time as overriding it. Combined with <code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">block.super</span> <span class="pre">}}</span></code>, this can be a
powerful way to make small customizations. See
<a class="reference internal" href="../../howto/overriding-templates.html#extending-an-overridden-template"><span class="std std-ref">Extending an overridden template</span></a> in the <em>Overriding templates</em> How-to
for a full example.</p>
</li>
<li><p class="first">テンプレートタグの <code class="docutils literal notranslate"><span class="pre">as</span></code> シンタックスを使用して <a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code></a> の外で生成された変数は、ブロックの内部で使用することはできません。例えば、以下のテンプレートは何も表示しません:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">translate</span> <span class="s2">&quot;Title&quot;</span> <span class="k">as</span> <span class="nv">title</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}{{</span> <span class="nv">title</span> <span class="cp">}}{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
</li>
<li><p class="first">可読性を増すために、<code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">endblock</span> <span class="pre">%}</span></code> タグにも <em>名前</em> を記述できます。例えば:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span>
...
<span class="cp">{%</span> <span class="k">endblock</span> <span class="nv">content</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>大きなテンプレートでは、このテクニックでどの <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code> が閉じられているのかが分かりやすくなります。</p>
</li>
<li><p class="first"><a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code></a> tags are evaluated first. That's why the content
of a block is always overridden, regardless of the truthiness of surrounding
tags. For example, this template will <em>always</em> override the content of the
<code class="docutils literal notranslate"><span class="pre">title</span></code> block:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">change_title</span> <span class="cp">%}</span>
    <span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>Hello!<span class="cp">{%</span> <span class="k">endblock</span> <span class="nv">title</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>
</pre></div>
</div>
</li>
</ul>
<p>最後に、同じテンプレート内で同じ名前の <a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">block</span></code></a> タグを複数定義することはできないことに留意してください。この制限は、block タグが &quot;両方向に&quot; 働くのが理由です。block タグは埋めるための穴を提供するだけではなく -- <em>親テンプレート</em> 内で穴を埋めるコンテンツを定義します。もし同名の <a class="reference internal" href="builtins.html#std-templatetag-block"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">block</span></code></a> がテンプレート内に 2 つ存在すると、どちらのブロックのコンテンツを使うべきかテンプレートの親が判断できなくなってしまうのです。</p>
</div>
<div class="section" id="s-automatic-html-escaping">
<span id="s-id2"></span><span id="automatic-html-escaping"></span><span id="id2"></span><h2>HTML の自動エスケープ<a class="headerlink" href="#automatic-html-escaping" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>テンプレートから HTML を生成する時には、変数内の文字が HTML のレンダリング結果に悪影響を与えるというリスクが常に付きまといます。例えば、テンプレートに以下のような箇所がある場合を考えてみましょう:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span>Hello, <span class="cp">{{</span> <span class="nv">name</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>一見、このコードはユーザの名前を表示するだけの無害なものと思えます。しかし次のような値が名前として入力されていれば、何が起きるでしょうか:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span><span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>
</div>
<p>この値によって、テンプレートは次のように出力されます:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span>Hello, <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span><span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>
</div>
<p>……結果として、ブラウザに JavaScript の警告ボックスをポップアップさせることができてしまいます!</p>
<p>同様に、名前に <code class="docutils literal notranslate"><span class="pre">'&lt;'</span></code> 文字が含まれていたらどうでしょうか:</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span>username
</pre></div>
</div>
<p>この値によって、テンプレートはこのように出力されます:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span>Hello, <span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span>username
</pre></div>
</div>
<p>...which, in turn, would result in the remainder of the web page being in bold!</p>
<p>Clearly, user-submitted data shouldn't be trusted blindly and inserted directly
into your web pages, because a malicious user could use this kind of hole to
do potentially bad things. This type of security exploit is called a
<a class="reference external" href="https://en.wikipedia.org/wiki/Cross-site_scripting">Cross Site Scripting</a> (XSS) attack.</p>
<p>この問題を防ぐために、二つの方法があります:</p>
<ul class="simple">
<li>一つは、信頼できない変数は必ず <a class="reference internal" href="builtins.html#std-templatefilter-escape"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">escape</span></code></a> フィルタ (後で述べます) に通すことです。このフィルタは危害を及ぼす可能性をもつ HTML 文字を無害な文字に変換します。 この方法は初期の数年間において Django のデフォルトとして採用されていました。しかしユーザー、すなわち開発者やテンプレートの作者にとっては、すべてのデータをエスケープすることを忘れぬよう注意しなければならないという負担になるのが問題です。</li>
<li>もう一つは、 Django の自動 HTML エスケープを使うというものです。この節の後半では自動エスケープの仕組みについて述べます。</li>
</ul>
<p>デフォルトでは、Django はすべてのテンプレートの変数タグの出力を自動的にエスケープするよう設定されています。具体的には、以下の 5 つの文字がエスケープされます:</p>
<ul class="simple">
<li><code class="docutils literal notranslate"><span class="pre">&lt;</span></code> を <code class="docutils literal notranslate"><span class="pre">&amp;lt;</span></code> に変換</li>
<li><code class="docutils literal notranslate"><span class="pre">&gt;</span></code> を <code class="docutils literal notranslate"><span class="pre">&amp;gt;</span></code> に変換</li>
<li><code class="docutils literal notranslate"><span class="pre">'</span></code> (single quote) is converted to <code class="docutils literal notranslate"><span class="pre">&amp;#x27;</span></code></li>
<li><code class="docutils literal notranslate"><span class="pre">&quot;</span></code> ( ダブルクォート ) を <code class="docutils literal notranslate"><span class="pre">&amp;quot;</span></code> に変換</li>
<li><code class="docutils literal notranslate"><span class="pre">&amp;</span></code> を <code class="docutils literal notranslate"><span class="pre">&amp;amp;</span></code> に変換</li>
</ul>
<p>この動作は、デフォルトで適用されていることを重ねて強調しておきます。Django テンプレートシステムを使っているかぎり、あなたはエスケープに関する問題からは守られているのです。</p>
<div class="section" id="s-how-to-turn-it-off">
<span id="how-to-turn-it-off"></span><h3>自動エスケープをオフにする<a class="headerlink" href="#how-to-turn-it-off" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>サイト単位やテンプレート単位、あるいは変数単位でデータの自動エスケープ機能を無効にしたい場合には、いくつかの方法があります。</p>
<p>どんなときに、自動エスケープをオフにする必要があるでしょうか。テンプレート変数の中身は、生の HTML として出力するように意図されたデータかもしれません。そうした場合にはコンテンツがエスケープされてほしくはないでしょう。例えば、データベースに HTML を保存していてテンプレートに直接埋め込みたい場合を考えてみましょう。また、 Django のテンプレートシステムを使って、 HTML 以外 のデータ、例えば電子メールメッセージなどを生成したい場合もあるでしょう。</p>
<div class="section" id="s-for-individual-variables">
<span id="for-individual-variables"></span><h4>変数単位での制御<a class="headerlink" href="#for-individual-variables" title="このヘッドラインへのパーマリンク">¶</a></h4>
<p>変数単位で個々に自動エスケープを無効にするには、 <a class="reference internal" href="builtins.html#std-templatefilter-safe"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">safe</span></code></a> フィルタを使います:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span>This will be escaped: <span class="cp">{{</span> <span class="nv">data</span> <span class="cp">}}</span>
This will not be escaped: <span class="cp">{{</span> <span class="nv">data</span><span class="o">|</span><span class="nf">safe</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>safe という言葉は、これ以上エスケープしないよう保護（safe）するとか、 HTML として解釈しても安全（safe）であるという意味だと考えてください。 例えば、 <code class="docutils literal notranslate"><span class="pre">data</span></code> に <code class="docutils literal notranslate"><span class="pre">'&lt;b&gt;'</span></code> が入っていた場合、出力は以下のようになります:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span>This will be escaped: <span class="ni">&amp;lt;</span>b<span class="ni">&amp;gt;</span>
This will not be escaped: <span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="s-for-template-blocks">
<span id="for-template-blocks"></span><h4>テンプレートブロック単位での制御<a class="headerlink" href="#for-template-blocks" title="このヘッドラインへのパーマリンク">¶</a></h4>
<p>To control auto-escaping for a template, wrap the template (or a particular
section of the template) in the <a class="reference internal" href="builtins.html#std-templatetag-autoescape"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">autoescape</span></code></a> tag, like so:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">autoescape</span> <span class="nv">off</span> <span class="cp">%}</span>
    Hello <span class="cp">{{</span> <span class="nv">name</span> <span class="cp">}}</span>
<span class="cp">{%</span> <span class="k">endautoescape</span> <span class="cp">%}</span>
</pre></div>
</div>
<p><a class="reference internal" href="builtins.html#std-templatetag-autoescape"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">autoescape</span></code></a> タグは、 <code class="docutils literal notranslate"><span class="pre">on</span></code> または <code class="docutils literal notranslate"><span class="pre">off</span></code> を引数にとります。 テンプレートのある範囲を自動エスケープし、さらにその一部で自動エスケープをオフにしたい場合には、次のようにできます:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span>Auto-escaping is on by default. Hello <span class="cp">{{</span> <span class="nv">name</span> <span class="cp">}}</span>

<span class="cp">{%</span> <span class="k">autoescape</span> <span class="nv">off</span> <span class="cp">%}</span>
    This will not be auto-escaped: <span class="cp">{{</span> <span class="nv">data</span> <span class="cp">}}</span>.

    Nor this: <span class="cp">{{</span> <span class="nv">other_data</span> <span class="cp">}}</span>
    <span class="cp">{%</span> <span class="k">autoescape</span> <span class="nv">on</span> <span class="cp">%}</span>
        Auto-escaping applies again: <span class="cp">{{</span> <span class="nv">name</span> <span class="cp">}}</span>
    <span class="cp">{%</span> <span class="k">endautoescape</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">endautoescape</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>自動エスケープのタグは、他のブロックタグと同様、タグを設定したテンプレートを継承している他のテンプレートや、 <a class="reference internal" href="builtins.html#std-templatetag-include"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">include</span></code></a> で取り込んだテンプレートでも有効です。例えば:</p>
<div class="literal-block-wrapper docutils container" id="id4">
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">base.html</span></code></span><a class="headerlink" href="#id4" title="このコードへのパーマリンク">¶</a></div>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">autoescape</span> <span class="nv">off</span> <span class="cp">%}</span>
<span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">endautoescape</span> <span class="cp">%}</span>
</pre></div>
</div>
</div>
<div class="literal-block-wrapper docutils container" id="id5">
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">child.html</span></code></span><a class="headerlink" href="#id5" title="このコードへのパーマリンク">¶</a></div>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s2">&quot;base.html&quot;</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>This <span class="ni">&amp;amp;</span> that<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}{{</span> <span class="nv">greeting</span> <span class="cp">}}{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
</div>
<p>ベースのテンプレートで自動エスケープが無効化されているので、子テンプレートでも自動エスケープは無効化されます。結果として、 <code class="docutils literal notranslate"><span class="pre">greeting</span></code> 変数の値が <code class="docutils literal notranslate"><span class="pre">&lt;b&gt;Hello!&lt;/b&gt;</span></code> のとき、以下の HTML が出力されます:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>This <span class="ni">&amp;amp;</span> that<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">b</span><span class="p">&gt;</span>Hello!<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="s-notes">
<span id="notes"></span><h3>Notes<a class="headerlink" href="#notes" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>一般に、テンプレートの作者は自動エスケープをあまり意識する必要はありません。 データをエスケープすべきではない場合を考えたり、データを適切にマークし、テンプレート上でうまく表示されるように考慮するのは、Python 側の開発者 (ビューやカスタムフィルタの開発者)であるべきです。</p>
<p>もしあなたが作成しているテンプレートがどういった状況で使われるのか分からず、自動エスケープが有効かどうかはっきりしない場合には、エスケープの必要な変数全てに <a class="reference internal" href="builtins.html#std-templatefilter-escape"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">escape</span></code></a> フィルタを追加してください。自動エスケープがオンの場合、 <a class="reference internal" href="builtins.html#std-templatefilter-escape"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">escape</span></code></a> フィルタがデータ を二重にエスケープするような危険性はありません。 <a class="reference internal" href="builtins.html#std-templatefilter-escape"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">escape</span></code></a> フィルタは自動エスケープされた変数には影響しなません。</p>
</div>
<div class="section" id="s-string-literals-and-automatic-escaping">
<span id="s-id3"></span><span id="string-literals-and-automatic-escaping"></span><span id="id3"></span><h3>文字列リテラルと自動エスケープ<a class="headerlink" href="#string-literals-and-automatic-escaping" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>先に説明したように、フィルタの引数は文字列であってもかまいません:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">data</span><span class="o">|</span><span class="nf">default</span><span class="s2">:&quot;This is a string literal.&quot;</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>文字列リテラルは、すべて自動エスケープ**されずに**テンプレート内に挿入され、 <a class="reference internal" href="builtins.html#std-templatefilter-safe"><code class="xref std std-tfilter docutils literal notranslate"><span class="pre">safe</span></code></a> フィルタを通して渡されたかのように振る舞います。なぜならば、テンプレートの作者はその文字列リテラルに何が書かれているかは把握していますし、テンプレートが書かれる時点でテキストが正しくエスケープされていることは確認できるからです。</p>
<p>したがって、以下のようにテンプレートを書いてください:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">data</span><span class="o">|</span><span class="nf">default</span><span class="s2">:&quot;3 &amp;lt; 2&quot;</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>以下のようにはしないでください:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">data</span><span class="o">|</span><span class="nf">default</span><span class="s2">:&quot;3 &lt; 2&quot;</span> <span class="cp">}}</span>  <span class="c">{# Bad! Don&#39;t do this. #}</span>
</pre></div>
</div>
<p>この事が、変数自身に由来するデータに対して何かを引き起こす恐れはありません。 変数の内容はテンプレート作者の管理外にあり、必要に応じて自動的にエスケープされます。</p>
</div>
</div>
<div class="section" id="s-accessing-method-calls">
<span id="s-template-accessing-methods"></span><span id="accessing-method-calls"></span><span id="template-accessing-methods"></span><h2>メソッドへのアクセス<a class="headerlink" href="#accessing-method-calls" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>オブジェクトに備わったほとんどのメソッドは、テンプレートの中からでも呼び出すことができます。これはテンプレートからアクセスできる対象は、単にクラスの属性 (フィールド名のように) やビューを通した変数だけにはとどまらないということを意味します。例えば Django ORM は Foreign キーに関係するオブジェクトの集合を見つけるために <a class="reference internal" href="../../topics/db/queries.html#topics-db-queries-related"><span class="std std-ref">&quot;entry_set”</span></a> という構文を提供しています。これによって、例えば “comment” と呼ばれるモデルが Foreign キーで ”task” というモデルに関連づけられている場合、テンプレートは task モデルに添えられた全ての comment に対して以下のようにアクセスできます:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">comment</span> <span class="k">in</span> <span class="nv">task.comment_set.all</span> <span class="cp">%}</span>
    <span class="cp">{{</span> <span class="nv">comment</span> <span class="cp">}}</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>同じように、 <a class="reference internal" href="../models/querysets.html"><span class="doc">QuerySets</span></a> は、そこに含まれているオブジェクトの個数を数えるため <code class="docutils literal notranslate"><span class="pre">count()</span></code> というメソッドを提供しています。これによって、 task と関連づけられた全てのコメントの数を取得することも出来ます:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">task.comment_set.all.count</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>You can also access methods you've explicitly defined on your own models:</p>
<div class="literal-block-wrapper docutils container" id="id6">
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">models.py</span></code></span><a class="headerlink" href="#id6" title="このコードへのパーマリンク">¶</a></div>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">Task</span><span class="p">(</span><span class="n">models</span><span class="o">.</span><span class="n">Model</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">foo</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
        <span class="k">return</span> <span class="s2">&quot;bar&quot;</span>
</pre></div>
</div>
</div>
<div class="literal-block-wrapper docutils container" id="id7">
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">template.html</span></code></span><a class="headerlink" href="#id7" title="このコードへのパーマリンク">¶</a></div>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{{</span> <span class="nv">task.foo</span> <span class="cp">}}</span>
</pre></div>
</div>
</div>
<p>Django ではテンプレート内でのプログラム的な処理を意図的に制限しているため、テンプレートからメソッドに引数を渡すことはできません。データはビューの中で計算され、テンプレートへは表示のためだけに渡されるべきだからです。</p>
</div>
<div class="section" id="s-custom-tag-and-filter-libraries">
<span id="s-loading-custom-template-libraries"></span><span id="custom-tag-and-filter-libraries"></span><span id="loading-custom-template-libraries"></span><h2>カスタムタグとカスタムフィルタのライブラリ<a class="headerlink" href="#custom-tag-and-filter-libraries" title="このヘッドラインへのパーマリンク">¶</a></h2>
<p>アプリケーションによっては、カスタムのタグやフィルタライブラリを提供しています。これらをテンプレートで使いたい場合、そのアプリケーションが <a class="reference internal" href="../settings.html#std-setting-INSTALLED_APPS"><code class="xref std std-setting docutils literal notranslate"><span class="pre">INSTALLED_APPS</span></code></a>  に追加されていることを確認し (以下の例では <code class="docutils literal notranslate"><span class="pre">'django.contrib.humanize'</span></code> が追加されているものとします) 、そしてテンプレート側で <a class="reference internal" href="builtins.html#std-templatetag-load"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">load</span></code></a> タグを使います:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">load</span> <span class="nv">humanize</span> <span class="cp">%}</span>

<span class="cp">{{</span> <span class="m">45000</span><span class="o">|</span><span class="nf">intcomma</span> <span class="cp">}}</span>
</pre></div>
</div>
<p>この例では、 <a class="reference internal" href="builtins.html#std-templatetag-load"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">load</span></code></a> タグは <code class="docutils literal notranslate"><span class="pre">humanize</span></code> という名前のタグライブラリを読み込み、 <code class="docutils literal notranslate"><span class="pre">intcomma</span></code> フィルタを使えるようにしています。 <a class="reference internal" href="../contrib/admin/admindocs.html#module-django.contrib.admindocs" title="django.contrib.admindocs: Django's admin documentation generator."><code class="xref py py-mod docutils literal notranslate"><span class="pre">django.contrib.admindocs</span></code></a> が有効にされている場合、あなたの admin は現在インストールされているアプリケーションのドキュメント文字列を参照してカスタムライブラリの一覧を得ることができます。</p>
<p><a class="reference internal" href="builtins.html#std-templatetag-load"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">load</span></code></a> タグは複数のライブラリ名を同時に読み込めます。ライブラリ名は スペースで区切って下さい:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">load</span> <span class="nv">humanize</span> <span class="nv">i18n</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>カスタムのテンプレートライブラリを作成する方法については、 <a class="reference internal" href="../../howto/custom-template-tags.html"><span class="doc">How to create custom template tags and filters</span></a> を参照してください。</p>
<div class="section" id="s-custom-libraries-and-template-inheritance">
<span id="custom-libraries-and-template-inheritance"></span><h3>カスタムライブラリとテンプレートの継承<a class="headerlink" href="#custom-libraries-and-template-inheritance" title="このヘッドラインへのパーマリンク">¶</a></h3>
<p>カスタムタグやフィルタライブラリをロードした場合、タグやフィルタは現在のテンプレートだけで利用でき、テンプレート継承パスにおける親テンプレートや子テンプレートでは利用できません。</p>
<p>例えば <code class="docutils literal notranslate"><span class="pre">foo.html</span></code> に <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">load</span> <span class="pre">humanize</span> <span class="pre">%}</span></code> というタグが入っていても、子テンプレート ( <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">extends</span> <span class="pre">&quot;foo.html&quot;</span> <span class="pre">%}</span></code> を使っているテンプレート) で humanize という名前のテンプレートタグやフィルタを使えるわけではありません。子テンプレート側で対応するには独自に <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">load</span> <span class="pre">humanize</span> <span class="pre">%}</span></code> を入れる必要があります。</p>
<p>これはメンテナンス性と健全性を高めるための仕様です。</p>
<div class="admonition seealso">
<p class="first admonition-title">参考</p>
<dl class="last docutils">
<dt><a class="reference internal" href="index.html"><span class="doc">The Templates Reference</span></a></dt><dd>Covers built-in tags, built-in filters, using an alternative template
language, and more.</dd>
</dl>
</div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      
        
          <div class="yui-b" id="sidebar">
            
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
  <div>
    <h3><a href="../../contents.html">目次</a></h3>
    <ul>
<li><a class="reference internal" href="#">The Django Template Language</a><ul>
<li><a class="reference internal" href="#templates">テンプレート</a></li>
<li><a class="reference internal" href="#variables">変数</a></li>
<li><a class="reference internal" href="#filters">フィルター</a></li>
<li><a class="reference internal" href="#tags">タグ</a></li>
<li><a class="reference internal" href="#comments">コメント</a></li>
<li><a class="reference internal" href="#template-inheritance">テンプレートの継承</a></li>
<li><a class="reference internal" href="#automatic-html-escaping">HTML の自動エスケープ</a><ul>
<li><a class="reference internal" href="#how-to-turn-it-off">自動エスケープをオフにする</a><ul>
<li><a class="reference internal" href="#for-individual-variables">変数単位での制御</a></li>
<li><a class="reference internal" href="#for-template-blocks">テンプレートブロック単位での制御</a></li>
</ul>
</li>
<li><a class="reference internal" href="#notes">Notes</a></li>
<li><a class="reference internal" href="#string-literals-and-automatic-escaping">文字列リテラルと自動エスケープ</a></li>
</ul>
</li>
<li><a class="reference internal" href="#accessing-method-calls">メソッドへのアクセス</a></li>
<li><a class="reference internal" href="#custom-tag-and-filter-libraries">カスタムタグとカスタムフィルタのライブラリ</a><ul>
<li><a class="reference internal" href="#custom-libraries-and-template-inheritance">カスタムライブラリとテンプレートの継承</a></li>
</ul>
</li>
</ul>
</li>
</ul>

  </div>
  <div>
    <h4>前のトピックへ</h4>
    <p class="topless"><a href="index.html"
                          title="前の章へ">テンプレート</a></p>
  </div>
  <div>
    <h4>次のトピックへ</h4>
    <p class="topless"><a href="builtins.html"
                          title="次の章へ">組み込みタグとフィルタ</a></p>
  </div>
  <div role="note" aria-label="source link">
    <h3>このページ</h3>
    <ul class="this-page-menu">
      <li><a href="../../_sources/ref/templates/language.txt"
            rel="nofollow">ソースコードを表示</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3 id="searchlabel">クイック検索</h3>
    <div class="searchformwrapper">
    <form class="search" action="../../search.html" method="get">
      <input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
      <input type="submit" value="検索" />
    </form>
    </div>
</div>
<script>$('#searchbox').show(0);</script>
        </div>
      </div>
              <h3>Last update:</h3>
              <p class="topless">3月 08, 2023</p>
          </div>
        
      
    </div>

    <div id="ft">
      <div class="nav">
    &laquo; <a href="index.html" title="テンプレート">previous</a>
     |
    <a href="../index.html" title="API Reference" accesskey="U">up</a>
   |
    <a href="builtins.html" title="組み込みタグとフィルタ">next</a> &raquo;</div>
    </div>
  </div>

      <div class="clearer"></div>
    </div>
  </body>
</html>