解説記事の構成
| No. | タイトル | |
|---|---|---|
| 1 | PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（１）【環境構築編】 | |
| 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デザインパターン入門編】 | |
| 5 | PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（５）【Django shellでDB操作入門編】 | |
| 6 | PythonのWebアプリケーション（Django）を初心者にもわかりやすく解説（６）【MTVデザインパターン完成編】 | ← |
開発環境
- OS: Mac OS Sierra (10.12)
- Python 3.5.2
Macの環境を前提として話を進めていきます。
Pythonのバージョン確認は以下の通りです。
$ python3 --version
Python 3.5.2
Model と Template の連携
作成したModelの情報をTemplate側に反映したり、Tamplate側でModelを操作したりといった連携について書いていきます。
この章までを一通り終えれば、Webアプリケーションに必要なスキルセットがざっと一通り身についたといえるのではないでしょうか。
そのつぎのステップとして、デザインや本番環境へのデプロイができるようになれば、実際のサービスをリリースすることが出来ます。
Viewの編集
Model と Template の連携を行う View を編集していきます。
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 と同じです。
重要な点はここですね
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側で表示させてみましょう。
<html>
<p>Hi there!</p>
<p>It works!</p>
{{ posts }}
</html>
このように、pythonで書いている部分は {{ }}の二重括弧で囲めば良いようです。
ちなみに、もちろんサーバーを起動しておく必要があり、サーバー起動のコマンドはお忘れ無いでしょうか？
$ python3 manage.py runserver
アクセスする先は、http://127.0.0.1:8000/ のローカルサーバーであることも大丈夫ですよね？
このように、Django shellで見覚えのあるクエリセットが取得できたでしょうか。
では、これをリストにして表示していきましょう。
<html>
<p>Hi there!</p>
<p>It works!</p>
<ul>
{% for post in posts %}
<li>{{post}}</li>
{% endfor %}
</ul>
</html>
forやifの制御構文は {% %} で囲めば良いようですね。
以下のように表示されれば成功です。
記事のタイトルが表示されました。
せっかくなのでタイトルだけでなく、記事の内容も表示できるようTemplate側を編集していきましょう。
<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 はテキスト中の改行を段落に変換するフィルタを通すと意味です。便利ですね。
これで Model と Template を View 経由で連携させる練習が終わりです。
ここまで終えてみていかがでしたでしょうか。
Webサイトを構成しているパーツが見えてきたのではないでしょうか。
もしかすると、これだけ勉強して、これだけしかできないの？と思った方もいらっしゃるのではないでしょうか。
そういう方は、ご安心下さい。
HTMLとCSSでデザインをすることを勉強すれば、一気にこのWebページは綺麗に仕上げることができます。
見た目には華やかではないのですが、このMVTを連携させるだけでも、サーバーサイドエンジニアと呼ばれるひとつのポジションが出来るほど、大変で必要とされる仕事なのです。
この記事が Django を使ったWebアプリケーション作成の駆け出しとなることを願っています。
応用編
LINE BOTの作り方を世界一わかりやすく解説（１）【アカウント準備編】
参考文献
おまけ
フォローお待ちしています！
- Qiita: Carat 吉崎
- twitter：@carat_yoshizaki
- はてなブログ：Carat COOのブログ
- ホームページ：Carat
サービス紹介
「数学→プログラミング→Webアプリケーション」まで一気に学べる機械学習のマンツーマン家庭教師サービス「キカガク」に興味のある方はお気軽にご連絡ください。