【超簡単】Django 数字を3桁おきにカンマで区切る方法

プログラミング
Masa
Masa

こんにちは!Masaです。

今回はDjangoで数字を表示する際に、3桁おきにカンマで区切る方法を紹介します。

この記事はこんな方におすすめ!
  • Djangoで数字をカンマで区切った状態で表示したい人
  • Djangoの技術を学びたい人

Djangoで数字を3桁おきに区切る方法

いきなりですが、1億円を表示するとき

  • 100000000円
  • 100,000,000円

どちらが読みやすいでしょうか。

自分はカンマで区切られている方が断然読みやすいと思います。

Djangoでアプリケーション作成の際も大きな数字を表示することがあります。
デフォルトの機能では、カンマの表示はしてくれません。

そこで今回は数字をカンマ付きで表示できる方法を解説していきます。

自動でカンマを表示してくれる”humanize”

Djangoのテンプレートファイルでカンマの区切り機能は、“humanize”というテンプレートフィルターで提供されます。

“humanize”を導入していきましょう!

settings.pyに追加する

まず初めにプロジェクトフォルダにある“settings.py”INSTALLD_APPS‘django.contrib.humanize’を追記をします。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'example_app',
    'django.contrib.humanize' #追加
]

同時に、何桁おきに区切るかという指定もここで行います。
“settings.py”の任意の場所に以下のコードを追加して下さい。

NUMBER_GROUPING = 3

これで設定は以上です。
次にテンプレート側を解説します。

テンプレートでカンマによる区切りを指定する

テンプレート上で必要な作業は2点あります

以下はテンプレートのサンプルです。

{% extends 'example_app/base.html' %}
{% load humanize %} <!--ポイント-->

{% block main %}
<h3>車種と値段</h3>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">車種</th>
        <th scope="col">値段</th>
      </tr>
    </thead>
    <tbody>
      {% for item in car %}
      <tr>
        <td>{{ item.name }}</td>
        <td>¥{{ item.price | intcomma }}</td> <!--ポイント-->
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

1点目は2行目です。

{% load humanize %}

これにより、先ほど設定した‘humanize’を適用できます、

2点目は17行目です。
17行目では値段の表示を行っています。

¥{{ item.price | intcomma }} 

カンマで区切りを入れたい数字には、「数字 | intcomma」とすることで区切りが入るようになります。

これにより以下のように表示され、カンマで区切られるようになっています。

まとめ

今回は、数字を3桁おきにカンマで区切る表示方法でした。

カンマで区切るには

  1. settings.pyでINSTALLED_APPSに”django.contrib.humanize”を追加する
  2. settings.pyに”NUMBER_GROUPING = 3″を追加する
  3. テンプレートファイルの頭に{% load humanize %}を記述する
  4. カンマで区切りを入れたい数字には、{{ 数字 | intcomma }}と記述する

とすれば完璧です!

最後まで読んでいただきありがとうございます。
自己学習に役立てていただけたら嬉しく思います
またSNSやブログでシェアしていただくことや、誤植などをコメントで指摘いただけたら幸いです。

コメント

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