PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（６）【MTVデザインパターン完成編】

# 解説記事の構成

|No.|タイトル||
|:--:|:--|:--:|
|1|[PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（１）【環境構築編】](http://qiita.com/carat_yoshizaki/items/f3c79e38b802c7fc8863)||
|2|[PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（２）【プロジェクト作成編】] (http://qiita.com/carat_yoshizaki/items/926f702198bdfe8c6bd2)||
|3|[PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（３）【アプリケーション作成・DB設定編】] (http://qiita.com/carat_yoshizaki/items/c9a5299b77b99ff07e4a)||
|4|[PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（４）【ルーティング設定・MTVデザインパターン入門編】](http://qiita.com/carat_yoshizaki/items/fbd235008d7484089270)||
|5|[PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（５）【Django shellでDB操作入門編】](http://qiita.com/carat_yoshizaki/items/8c57144dfd37e005fb17#_reference-8f82e1176420484c2fdd)||
|6|[PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（６）【MTVデザインパターン完成編】](http://qiita.com/carat_yoshizaki/items/f0b4f7d7fa3899f2d424)|←|


# 開発環境

* OS: Mac OS Sierra (10.12)
* Python 3.5.2

Macの環境を前提として話を進めていきます。

Pythonのバージョン確認は以下の通りです。

```bash
$ python3 --version
Python 3.5.2
```


# Model と Template の連携

作成したModelの情報をTemplate側に反映したり、Tamplate側でModelを操作したりといった連携について書いていきます。
この章までを一通り終えれば、Webアプリケーションに必要なスキルセットがざっと一通り身についたといえるのではないでしょうか。
そのつぎのステップとして、デザインや本番環境へのデプロイができるようになれば、実際のサービスをリリースすることが出来ます。

# Viewの編集

Model と Template の連携を行う View を編集していきます。

```py:blog/views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post

# Create your views here.
def post_list(request):
    posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
    return render(request, 'blog/post_list.html', {'posts': posts})
```

最初のインポートはDjango shellのときにも紹介したので、大丈夫ですよね。
ちなみに、```.models``` の ```.``` は ```カレントディレクトリ```、もしくは、```カレントアプリケーション``` を表しています。
```.models``` は ```blog.models``` と同じです。

重要な点はここですね

```py
    posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
    return render(request, 'blog/post_list.html', {'posts': posts})
```

クエリセットを参照している変数 ```posts``` をrender経由でTemplateに渡しています。
このように、Viewの中で宣言した変数はTemplateで参照できます。
これが、ModelとTemplateの連携の鍵になります。

# Templateの編集

すごく単純ですが、View側でTemplateに渡した ```posts``` を受け取り、Template側で表示させてみましょう。

```blog/templates/blog/post_list.html
<html>
    <p>Hi there!</p>
    <p>It works!</p>
    {{ posts }}
</html>
```

このように、pythonで書いている部分は ```{{ }}```の二重括弧で囲めば良いようです。

ちなみに、もちろんサーバーを起動しておく必要があり、サーバー起動のコマンドはお忘れ無いでしょうか？

```bash:サーバーの起動
$ python3 manage.py runserver
```

アクセスする先は、http://127.0.0.1:8000/ のローカルサーバーであることも大丈夫ですよね？

<img width="643" alt="スクリーンショット 2016-11-11 15.13.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/e08cc8c7-0fa6-eeee-20a4-d4833bab49fc.png">

このように、Django shellで見覚えのあるクエリセットが取得できたでしょうか。

では、これをリストにして表示していきましょう。

```py:blog/templates/blog/post_list.html
<html>
    <p>Hi there!</p>
    <p>It works!</p>
    <ul>
      {% for post in posts %}
        <li>{{post}}</li>
      {% endfor %}
    </ul>
</html>
```
　
`for`や`if`の制御構文は `{% %}` で囲めば良いようですね。
以下のように表示されれば成功です。

<img width="299" alt="スクリーンショット 2016-11-11 15.15.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/d32e0bb1-eb68-a59c-9069-ca5413f212fa.png">


記事のタイトルが表示されました。
せっかくなのでタイトルだけでなく、記事の内容も表示できるようTemplate側を編集していきましょう。

```html+django:blog/templates/blog/post_list.html
<html>
  <!-- title -->
  <div>
    <h1>
      <a href="/">
        Qiita: Djangoサンプル
      </a>
    </h1>
  </div>

  <!-- post の内容 -->
  {% for post in posts %}
    <div  style="margin-top:50px;">
      <h2>title:<a href="">{{ post.title }}</a></h2>
      <p>published: {{ post.published_date}}</p>
      <p>{{ post.text | linebreaks }}</p>
    </div>
  {% endfor %}
</html>
```

`| linebreaks` はテキスト中の改行を段落に変換するフィルタを通すと意味です。便利ですね。

<img width="508" alt="スクリーンショット 2016-11-11 15.28.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/75e2ba78-d036-9c40-ee4d-cdb02cf14b0d.png">

これで Model と Template を View 経由で連携させる練習が終わりです。

ここまで終えてみていかがでしたでしょうか。
Webサイトを構成しているパーツが見えてきたのではないでしょうか。
もしかすると、これだけ勉強して、これだけしかできないの？と思った方もいらっしゃるのではないでしょうか。
そういう方は、ご安心下さい。
HTMLとCSSでデザインをすることを勉強すれば、一気にこのWebページは綺麗に仕上げることができます。

見た目には華やかではないのですが、このMVTを連携させるだけでも、サーバーサイドエンジニアと呼ばれるひとつのポジションが出来るほど、大変で必要とされる仕事なのです。

この記事が Django を使ったWebアプリケーション作成の駆け出しとなることを願っています。

# 応用編
[LINE BOTの作り方を世界一わかりやすく解説（１）【アカウント準備編】](http://qiita.com/carat_yoshizaki/items/bd4277d3943200beab26)


# 参考文献

* [Django](https://www.djangoproject.com/)
* [Django Girls Tutorial「クエリセット２」](https://djangogirlsjapan.gitbooks.io/workshop_tutorialjp/content/dynamic_data_in_templates/)
* [Django Girls Tutorial「テンプレートに表示しよう」](https://djangogirlsjapan.gitbooks.io/workshop_tutorialjp/content/django_templates/)

# おまけ

フォローお待ちしています！

* Qiita: [Carat 吉崎](http://qiita.com/carat_yoshizaki)
* twitter：[@carat_yoshizaki](https://twitter.com/carat_yoshizaki)
* はてなブログ：[Carat COOのブログ](http://carat-tech.hatenablog.com/)
* ホームページ：[Carat](http://caratinc.jp)

サービス紹介
「数学→プログラミング→Webアプリケーション」まで一気に学べる機械学習のマンツーマン家庭教師サービス「[キカガク](https://kikagaku.net)」に興味のある方はお気軽にご連絡ください。