この記事では、Webアプリケーションフレームワーク、Django(ジャンゴ)について解説します。
目次
Djangoって何?
Djangoはwebアプリケーションフレームワークです。webアプリケーションフレームワークというと難しいですが、要はwebアプリを作るときに必要な機能をまとめたものです。
django以外にも、Ruby on Rails や Node.js もwebアプリのフレームワークです。
情報を表示するだけのサイトであれば、webアプリは必要ありません。
ユーザの動作によって、サイトの表示を変えたり、データをサーバに送るなどの動的な機能が欲しい場合にはwebアプリを作成する必要があります。
webアプリの機能の例
・ログイン・ログアウト機能
・掲示板のメッセージ投稿機能
・ドロップダウンメニューの表示
他にも色々ありますが、全てのサイトでこういった機能はありますよね。
ほとんどのページはwebアプリで出来ていると考えて良いと思います。
templateって何？
templateはdjangoの1つの機能です。テンプレートを使うことで動的にHTMLを生成できます。
templateの基本機能
・フィルタ
・タグ
・コメント
・テンプレートの継承
変数(variable)
変数を表示したいときに使います。
{{ variable }}
変数の属性値にアクセスする時はドットを使います。
{{ section.title }}
sectionオブジェクトのtitle属性が表示されます。
フィルタ
変数を加工したい場合はフィルタを使います。例えば、文字列を小文字に変えたい場合は
{{ name|lower }}
と書きます。
リストの長さを表示したい場合は以下のように書きます。
{{ value|length }}
valueが[a,b,c,d]のリストだったら、4を出力します。
タグ(tag)
タグを使うと、HTMLの中にPythonのfor文やif文が書けるようになります。
for文
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% endfor %}
</ul>
アスリートの名前を羅列するプログラムです。
if文
{% if athlete_list %}
Number of athletes: {{ athlete_list|length }}
{% else %}
No athletes.
{% endif %}
athlete_listが空でなければアスリートの数を表示するプログラムです。
コメント
1行のコメントする時に使います。{# #}の中に入れる文字列は何でも良いです。
{# greeting #}hello
テンプレートの継承
テンプレートの継承は少し難しいです。しかし、ほとんどのwebアプリで使われているのでここを理解しておくと後々有利ですよ。
親テンプレートでサイトの骨組みを作っておいて小テンプレートでその中身を埋めるのがテンプレートの継承です。
親テンプレート
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
{% block %}を使って以下の3つのブロックを定義しています。ここの箇所を子テンプレートを使って上書きしてくださいねという意味です。
{% block title %} {% endblock %}
{% block sidebar %} {% endblock %}
{% block content %} {% endblock %}
子テンプレート
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block content %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
{% extends %}タグで継承していることを教えます。親のテンプレートにタグの中身を代入するためのコードです。
HTML出力結果
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>My amazing blog</title>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</div>
<div id="content">
<h2>Entry one</h2>
<p>This is my first entry.</p>
<h2>Entry two</h2>
<p>This is my second entry.</p>
</div>
</body>
</html>
ブログ名がMy amazing blogになっていますね。これは子テンプレートで定義した値です。
blog_entriesの中身が出力されています。継承された値が出力されていることが分かります。
まとめ
・テンプレートはHTMLを生成するための機能
・テンプレートの基本は変数とタグ
以上です。お疲れ様でした。
