【Django入門】templateとHTMLを使ってWebページを表示しよう

今回は、PythonのDjangoで使われるtemplateの書き方、使い方について解説します。Djangoで使われるMTVモデルでも重要な部分を担うtemplateについて、学習していきましょう。

この記事では、

  • MTVモデルとは何か
  • templateとは何か
  • templateの使い方
  • templateの応用

を通して、より実践的な使い方を学んでいきましょう。

MTVモデルとは

今回学ぶtemplateの前に、まずはMTVモデルと呼ばれる設計思想について学んでいきましょう。DjangoはMTVモデルを採用しています。

MTVとは、

  • Model(データベースに格納されているデータ)
  • Template(テンプレートファイルによって定義されたそれぞれのページのデザイン)
  • View(どのページを表示させるかを決定する処理)

の頭文字を取ったものです。

詳しくは以下のページで詳しく解説しました!是非ご覧ください!

MVTを図にしてみるとこのようになります。

よく似た設計にMVC(Model、View、Controller)というモデルもあります。

MVCモデルの場合は、

  • Model(データベースに格納されているデータ)
  • View(ページをどのように見せるのかを決定する処理)
  • Controller(ユーザーからの入力をModelに伝える処理)
  • になります。

    MVCモデルを採用しているフレームワークには、Ruby on Railsがあります。

    templateとは

    これから学んでいくtemplateは具体的にどのような役割をするのか、見ていきましょう。

    templateでは主にHTMLを使って表示するページを作っていきます。具体的にはHTMLにブロックと呼ばれる変数や命令を埋め込んで、より自由度の高いWebページを作ることが出来ます。

    通常のHTMLでは使えないようなif文やfor文なども使うことが出来ます。

    templateを作る準備

    それでは早速、templateを使ってみましょう。

    Djangoのインストール方法

    まずはDjangoをインストールしましょう。

    DjangoはPythonのパッケージとして提供されています。インストール方法はこちらの記事をご覧ください。

    【Django入門】あなたのパソコンにDjangoをインストール!
    更新日 : 2019年1月29日

    プロジェクトとアプリケーションの作成

    インストールが出来たら、次はプロジェクトとアプリケーションを作成していきます。

    詳しくはこちらの記事で解説されているのでご覧下さい。

    【Django入門】Djangoアプリの設計哲学!MTVモデルをmodelsを通して学ぼう!
    更新日 : 2019年1月29日

    settings.pyの設定をしよう

    templateを使う場合は、もう一つ準備が必要になります。

    Djangoにtemplateファイルを置く場所(ディレクトリ)を知らせなければなりません。

    そこで、mySite/settings.pyを編集しましょう。

    TEMPLATESの’DIRS’に、「os.path.join(BASE_DIR, ‘templates’),」という命令を追加します。

    これは、templatesというディレクトリにtemplateファイルを入れていくことを宣言しています。

    BASE_DIRはDjangoに用意されている変数です。os.path.join関数は、Pythonで簡単にパスを作ってくれる関数になります。

    要するに、’DIRS’にはtemplatesディレクトリのパスが入っていると考えて良いでしょう。

    ここでは便宜上、templatesというディレクトリ名にしていますが、作るWebアプリケーションによって変えることも出来ます。

    変えた場合は、settings.pyも同じように変更しましょう。

    templateディレクトリを作成しよう

    先程はどこに、どの名前のディレクトリを置くかを指定しました。

    肝心のtemplatesディレクトリは、manage.pyと同じ階層に作ります。

    現在は、

    というディレクトリ構成になっています。

    そして、その中にtemplateファイルを作っていきます。templateファイルと聞くと少し構えてしまうかもしれません。

    しかしHTMLファイルにとても良く似た書き方をするのでそこまで心配する必要はありません。

    HTMLについてはこちらの記事をご覧ください。

    HTMLとは?初心者でも10分で理解出来る知っておくべき基礎知識
    更新日 : 2019年5月9日

    こちらのサンプルコードを見てみましょう。

    とてもシンプルなファイルの中身になりますが、これでも立派なHTMLファイルで、ブラウザで表示をすることが出来ます。

    templateファイルは、このHTMLファイルをもとに、様々な機能を付け足していくことが出来ます。

    templateならではの機能は、もう少し後の章で解説します!

    views.pyとurls.pyを設定しよう

    templateファイルを読み込む準備はできました。

    これからは、viewとURLを紐つけていきます。viewについてはこちらも併せて知っておくと、理解が進むと思います。

    【Django入門】viewsを使ってページを表示させよう
    更新日 : 2019年1月29日

    まずは、myapp/views.pyを編集します。

    そして、myapp/urls.pyをこのように編集します。

    mySite/urls.pyは、最初はありませんが、自分で作る必要があります。

    このように編集しましょう。

    これで、すべての準備は完了です。

    mySiteディレクトリで以下のコマンドを実行します。

    実行すると、サーバーが起動します。

    ブラウザで http://localhost:8000/myapp/templates/ に移動して「This is template test.」と表示されればtemplateを使う準備は完了です。

    (※ポート(ここでは8000)は上のコマンドを実行するとターミナルに表示されたものを使ってください。)

    templateの作り方

    templateはただのHTMLを表示するだけではなく、様々な機能を使うことができます。

    templateで変数を使おう

    templateで変数を使うには、templateファイルにも変数を書く必要があります。

    「{{app}}」が変数です。

    この変数に値を追加する作業を、views.pyで行います。

    myapp_dataという辞書型に、appというkeyでDjangoという文字列が入っています。

    これをrender関数に渡すことで、変数が反映されます。

    templateでコメントを書こう

    templateファイルの中ではコメントを書くことができます。

    「{# #}」で囲われた中はコメントと見なされて何を書いてもプログラムには影響しません。

    普通のHTMLファイルよりも複雑になりやすいtemplateファイルでは使っていくことをおすすめします。

    templateに配列を渡そう

    templateファイルは配列を扱うこともできます。

    {% for 変数 in リスト %}から{% endfor %}までがfor文です。

    書き方がとてもPythonに似ていますね。

    views.pyはこのように編集をします。

    普通の変数と同じように扱えることがこれで分かっていただけたかと思います。

    templateを使いこなそう

    templateにはまだまだたくさんの機能が備わっています。ここからはちょっと進んだ内容に挑戦してみましょう。

    templateでif文を使おう

    templateでif文を使うことができれば、表示する内容を条件によって変えることが出来るようになります。

    こちらのコードを見てみましょう。

    「{% if %}」と「{% else %}」、「{% endif %}」が使われています。

    これで、状況によって表示内容を変えることが出来るようになりました。

    templateの変数でfilterを使おう

    filterは様々な機能がすでに用意されています。

    このtemplateファイルを見てみてください。

    「{{変数|filter}}」のようになっている部分がfilterです。

    この例ではappという変数に対してすでに用意されているlengthという長さを調べるfilterをかけています。

    先程も説明したようにこのfilterにはたくさんの種類があります。

    詳しくはこちらをご覧ください。

    templateで継承しよう

    ページが複数ある場合、ヘッダーやフッターなど、共通している部分がいくつかあると思います。

    その場合、templateファイルを親と子に分けて、継承をするとより簡潔に、見やすいコードが書けます。継承などについては、こちらの記事で詳しく解説されているのでぜひご覧ください。

    【Python入門】クラスの使い方を簡単解説で楽々マスター
    更新日 : 2019年7月31日

    まずは親のtemplateファイルをbase.htmlという名前で保存します。

    「{% block ブロック名 %}」と「{% endblock %}」で変更が加えられる部分を囲み、その部分以外は共通化して継承することが出来ます。

    この場合のbodyはブロック名なので、パーツごとに分けて適切な名前をつけましょう。

    次に、実際に継承を行う子ページのindex.htmlに変更を加えましょう。

    1行目の「{% extends “親テンプレート名” %}」で継承をしています。

    またbodyというブロック名が見えますが、これは継承したブロックをオーバーライドしています。

    ここにページで共通ではない固有の内容を書きます。

    これで、継承をつかったページが出来上がりました。

    まとめ

    Djangoで使われるtemplateについて解説しました。

    とても長い内容でしたが、Djangoのtemplateという仕組みについてはわかっていただけたかと思います。templateはできることが多いので、使い方を忘れたらこの記事を再度読み、思い出してみてください!

    templateファイルで使われる変数も、Pythonに近い構文で書かれているのは覚えるのがとても楽になりますね。ページそのものの表現が豊かになるtemplateファイルを使って、ぜひWebページを作ってみてください。

    LINEで送る
    Pocket

    最短でエンジニアを目指すなら侍エンジニア塾

    cta_under_bnr

    侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

    あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

    無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

    無料体験レッスンの詳細はこちら

    書いた人

    ryo

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説