Web制作、Web開発の歩き方

初心者のためのDjango入門

■第3話:DjangoのTemplateとForm機能

(最終更新日:2022.05.28)

Djangoフレームワークのイメージ
この記事は6分で読めます!
(絵が小さい場合はスマホを横に)

「Templateって枯れた技術だよね?」

モダンなWeb開発ではフルスタックフレームワークのTemplate機能を使わず、 フロント(表示)の部分はReactやVueに任せて、APIサーバーとして使うのが現在主流である。 よって、このTemplateは時代遅れの枯れた技術とも言える。しかし、今まで長く使われてきた分、セキュリティ面は非常にしっかりとしている。 (加えてフロントとバックエンドが分かれていないモノリス故のセキュリティの高さもあるが。) Django自体はApacheやNginxといったWebサーバー上で動くため、Node.jsが使えないレガシーな環境でもWeb開発ができる。 技術の幅は広がるはずだ。 今回はこのDjangoのTemplateとFormの機能を学んでいこう。仕組みから学ぶことは多いはずだ。


1.DjangoのTemplate

DjangoのTemplateはデフォルトの設定だと、 作成しているアプリのtemplatesディレクトリ内にhtmlファイルを作成することで、Webページを作ることができる。

まずbase.htmlを作る。これは、全てのページに共通する骨組み部分である。 下記のコードを見てもらえばわかると思う。 ヘッダー等の定型部分をここに書き、{% block content %} {% endblock content %}の部分に各htmlファイルのコンテンツが入る。 {% block header %} {% endblock header %}には、各htmlファイルでヘッダーの文字等を指定できる。 骨組み部分(base.html)に、ユニークな各htmlのコンテンツを差し込むという構成である。

templatesディレクトリの構成とbase.html

次に各コンテンツに当たるhtmlファイルを見てみよう。下記の左はユーザー登録完了後の画面を生成するregistration.htmlになる。 最初にextendsで骨組みとなるbase.htmlを呼び出す。block content、endblock contentに囲まれた部分が差し込むコンテンツになる。 加えて、Viewから送られた変数をこのhtmlテンプレート上で展開できる。一番上に「if user.is_authenticated」とあるが、 Viewから送られたuserが認証されているかどうかを確認している。

このようにif文やfor文、関数を実行する場合は、{% %}で囲み、Template中で処理することができる。 変数を呼び出す場合は右のstore.html中にあるように、{ { store.address } }と言った感じで波括弧で括る。 ここでは、データベースから取り出したstoreテーブルのカラム要素をfor文で展開している。 (正確にはModel→View→Templateの順にバケツリレーしたデータを受け渡して、storeテーブルのデータをstore.htmlに受け渡している。) このようにTemplateでは、Viewから受けとったデータをhtml上に展開することができる。

registration.html(左)とstore.html(右)

2.DjangoのForm機能

次にDjangoのフォーム機能を説明する。下記はDjangoで用いるforms.pyファイルの中身である。 これは、ほとんどModelに相当する機能だと思ってもらっていい。 Form値として入力するfieldを指定している。nameとmailとageだ。データベースTableのフィールドにも相当する。 これを最終的にTemplate上に展開し、ブラウザ上に表示したものが下図になる。

Djangoのforms.pyの例(上)、そのformに対応するHTML(下)

Form入力画面の作成は、通常のMVTと同じ流れをくむ。 forms.pyファイルのhelloform関数中で、モデル(forms.py)からForm値を受け取り、それをテンプレート(helloform.html)に展開している。 すると、上記に既に示したForm入力のHTMLが表示される。form.as_pはPタグで展開しろという命令で、 これをform.as_tableにすれば、Tableで展開することができる。非常にシンプルにForm入力画面を実装できる。

Formのviews.py(左)とhelloform.html(template)(右)

3.まとめ

Djangoを用いると、SQLのCRATE TABLEとデータのINSERT、セキュリティを考慮したフォーム機能までを一貫して少ないコードで、 Pythonだけで作れてしまう。データベース依存を排除し、オブジェクト指向で完結する。この点が非常に優れている。

▼参考図書、サイト

 「Djangoのツボとコツがゼッタイにわかる本」 大橋亮太 秀和システム
 「現場で使えるDjango管理サイトのつくり方」 横瀬明仁
   【Django】お問い合わせフォーム(forms.py)の作成手順・各種入力機能紹介 DXCEL WAVE