超初心者用: Djangoでウェブアプリを作る　③ホームページを作る

Djangoでページを作るときには大きく分けて3つの段階あります。

  1. URLの定義
  2. views を書く
  3. templates を書く

まずはURLを定義します。そのURLを見てDjangoにどのサイトを表示させるのかを教えます。

次に、それぞれのURLが特定のviewにマップします。 view function はページに必要なデータを操作します。その view function の中でページを作成する template が呼ばれます。

この仕組みを理解するために簡単なホームページを作ってみましょう。

URLをマッピングする

まずURLをマッピングするのはホームページが一番最初です。

ベースとなるhttp://localhost:8000/をユーザーが入力したときにホームページを表示させるようにします。

まずは practicing_log フォルダの urls.py を開いてください。

from django.conf.urls import url, include
from django.contrib import admin  <--すでにある
     
urlpatterns = [
    url(r'admin/', admin.site.urls),　　<--すでにある
    url(r'', include('practicing_logs.urls')),
]

from django.conf.urls import url, include

プロジェクトとadmin siteのURLを管理する function と modules をインポートします。

urlpatterns = [　]

この中にこれから定義するURLを入れていきます。

url(r'', include('practicing_logs.urls'))

ここでは practicing_logs modules を追加しています。


デフォルトのurls.py ファイルは practicing_log フォルダの中にあります。次は、practice_logs フォルダの中に 2つ目のurls.py を作成する必要があります。

#practicing_logs/urls.py
         
"""practicing_logs のためのURLパターンを定義する"""
from django.conf.urls import url
from . import views
         
app_name = 'practicing_logs'
urlpatterns = [
    # Home page
    url(r'^$', views.index, name='index'),
]

urls.py が2つあるので、簡単に区別すことができるように先頭にコメントをしておきましょう。

from django.conf.urls import url

URLs を view にマッピングするために必要な url function をインポートします。

from . import views

views module をインポートします。「.」はこのファイルと同じ階級の中から探すという意味です。

app_name = 'practicing_logs'

practicing_logs app のURLをほかの app と区別するためにこのように名前付けします。今は1つの app しかありませんが、数が増えたときに便利さがわかります。

urlpatterns = [ ]

ここでは、practicing_logs app の中の個々のURLを定義します。

url(r'^$', views.index, name='index'),

url function は3つの arguments を持っています。1つ目は、regular epression です。DjangoはURLが与えられたときに、ここを見てどのページがリクエストされているのかを決めます。

r'^$' を詳しく見ていきます。「r」は string を row string として解釈することを意味しています。「^」は string の初めの位置を知らせています。「$」は終わりを示しています。今回は、^と$の間には何もありません。つまりホームページとなる、 http://localhost:8000/を表しています。これ以外のURLではこのページは表示されず、エラー画面が返ってきます。

2つ目の argument はどの view function を実行するのかを特定しています。URLが合致した時に、views.index を実行します。3つ目はこのページの名前を定義します。今回は「index」いちいちURLを書くのではなく、この名前を使います。

views.py に記入

view function はリクエストされた情報を受け取り、ページを作成するためのデータをブラウザを作るための templates に送ります。

practicing_logs 内の views.py に書き込んでいきます。

#views.py   

from django.shortcuts import render

def index(request):
   """Practicing Log のホームページ"""
   return render(request, 'practicing_logs/index.html')

先ほど定義したURLと入力されたものと一致するときに、views.py の中から index() function を探します。今回は何のデータも送る必要もないので render() を呼ぶだけです。render() は request とページを作る template の arguments を持っています。次は template を作っていきます。

Templateを書く

template とはウェブページの構造を作るものです。ここでページがどのような見た目になるかを決めます。また、view から送られてきたデータを自由に画面に表示させることができます。今回は何のデータも送ってないのでシンプルです。

practicing_logs フォルダの中に templates フォルダを作ります。次に、templates フォルダに practicing_logs フォルダを作ります。practicing_logs が2つもあるのは変な感じがしますが、多くの app になったときのためにこのようにします。新しく作った practicing_logs フォルダ内に index.html を作ります。

<!--index.html-->
<p>Practicing Log</p>
<p>Practicing Log helps you keep track of your practicing, for any topic you're practicing about.</p>

これはHTMLファイルで、これをもとにホームページを作成します。今、http://localhost:8000/ に飛ぶと、今まで見たデフォルトのDjangoページではなく、今作ったページを見ることができます。Base URL の後に何も記述されていないということは、r'^$' ということです。これが一致するところから views.index() を呼び、その中の index.html を返すことでこのページが表示されました。

簡単にかくと、

  1. http://localhost:8000/
  2. r'^$'
  3. views.index()
  4. index.html
  5. ホームページに表示

f:id:kendamaaa:20200425123335j:plain

こんなシンプルなページ1つを作るのにかなり複雑でしたが URL, views, template に分けて作ることができました。規模が大きくなればなるほど、この利益を実感することができます。例えば、データスペシャリストは models に、プログラマーは view に、ウェブデザイナーは templates に焦点を当てます。