17
Help us understand the problem. What are the problem?

posted at

updated at

Djangoの入力フォームにBootstrapを適用するときのスマートな最適解

あらすじ

Bootstrapを適用するのに「タグの指定がキレイになる方法」を探していてたどり着いた最終形です。

Djangoの公式チュートリアルを読みながら入力フォームを実装し、Bootstrapを適用してみました。
ところが、どうしても冗長で煩雑なコードになってしまうのです。
試行錯誤した結果、きれいに書く方法を見つけたのでご紹介します。

なんか思ってたのと違った方法

Djangoのテンプレートに、Bootstrapのform-groupやform-controlを設定できないとき
を参考にログインフォームでも試してみました。
これだとどうしても、labelにBootstrapが適用されません。

上手くいった方法

{{ form }}だけで済む箇所の中にBootstrapのためのclass指定をしたくて、{% for item in form %}{% endfor %}のように分解しています。ここまでは上記の思ってたのと違った方法と同じです。

重要なのは、for item in formitemには、「充分過ぎるくらい情報が詰まっている」ということです。
DjangoAdminのページ内で設定できる項目はすべて網羅しています。
データのIDと表示名、データ型まで、すべてです。
これをインテリセンスを駆使して、チェーンでプロパティを指定する。

それを各所に散りばめてあげましょう。そうすると、DjangoのAdminページ内で編集した後に、コードを変えずに、キレイに画面に反映されます。
Adminページで項目を増減しても、必須項目のチェックをオンオフしても、いちいちコードを書き換える必要はありません。
なんてスマートな記述なのでしょう。

といったものの、Django利用者としては、まだまだ素人です。
もっといいやり方があればコメント欄などで教えていただけると嬉しいです。

{% comment %} 以上略 {% endcomment %}
<form method="post" action="{% url 'login' %}" class="form-group">
    {% csrf_token %}
    {% for item in form %}
        <div class="form-group">
            <label for="{{item.id_for_label}}">{{item.label}}</label>
            <input 
                type="{{item.field.widget.input_type}}"
                class="form-control" 
                {% if item.field.required %}required{% endif %} 
                name="{{item.name}}" 
                id="{{item.id_for_label}}">
        </div>
    {% endfor %}
    <button type="submit" class="submit btn btn-primary">Login</button>
    <input type="hidden" name="next" value="{{ next }}"/>
</form>
{% comment %} 以下略 {% endcomment %}

表示結果

Inked127.0.0.1_8000_accounts_login_(iPhone 6_7_8) (1)_LI.png

工夫したところ

  • requiredを付ける付けないのところ
  • labelタグの関連づけにnameではなく、id_for_labelを使ったところ
  • input type にも動的指定ができた
  • 結果としてすべて動的な記述ができたこと
  • マジックナンバー的なハードコーディングがなくなった

どちらもリファレンスのフォントが汚くて読みたくなかったから見つけるのは難しいため、
Vscodeのデバッガでオブジェクトの中身を調べました。その結果見つけたプロパティから文字列を取り出して利用するようにしました。

本来はライブラリの公式ドキュメントをよく読んで実装するべきですが、
今回は逆で、デバッガで機能を発見し、機能毎のリファレンスを読みに行くという流れにしました。

Bootstrapの適用方法

BootstrapのCDNを組み込む

ここを参考にして秒で終わらせました。
1行書くだけだし、早いのでオススメです。

Starter-Template | Bootstrap

他の方法

django-extentionを使用すると他にも方法があるみたいです。
出来るだけシンプルな構成を保ちたい人は避け、
複雑な構成でも完全にコントロールできる人はチャレンジすると良さそうです。

ログインページ本体

個人的に機能の実装をするときに以下が一番わかりやすかったです。参考になりました。
Django2 でユーザー認証(ログイン認証)を実装するチュートリアル -2- サインアップとログイン・ログアウト

環境

Django 2.2
python 3.8
たぶん最新の環境なら通用します。

Excelsior!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
17
Help us understand the problem. What are the problem?