挫折しないDjangoチュートリアル【PythonでWeb開発入門・初心者】

アイキャッチ画像
  • 公式サイトよりもとっつきやすいDjangoチュートリアルはないの?
  • Djangoアプリ開発における基本的なプログラミングの流れとは?
  • Djangoファイルの基本的なコード・コマンドの操作とは?

本記事ではこのような疑問を解決します。

Djangoは機能面が充実しており、PythonによるWeb開発の中で1番の人気を誇るフレームワークです。

逆に、Djangoは機能面が充実している分、学習コストが多くかかってしまうという難点もあります。

そして、公式のDjangoチュートリアルは初心者が取り掛かるにはとても難しいです。

そこで今回は、初心者でも挫折しないDjangoチュートリアルを使って、Djangoファイルの基本操作を解説していきます。

※本記事は随時更新されます。

Djangoファイル作成の基本的な操作

Djangoファイル作成において、基本的な操作を大きく2つにわけると、「初期設定」「URL・処理・テンプレートの作成」になります。

そもそもDjangoに限らずWebサービスの作成過程はファイルに関する設定をして、URLと処理をつくり、その2つを結びつけて画面に表示するテンプレートを作成するというのが通常です。

では「初期設定」と「URL・処理・テンプレートの作成」それぞれの中身を見てみましょう。

初期設定

・プロジェクトフォルダ・アプリフォルダを生成する

・設定ファイルの記述を変更・追加する

・デフォルトのUserモデルを作成する

・Django管理画面にログインするために管理ユーザーアカウントを作成する

・仮想サーバーを立ち上げてホーム・管理画面を確認する

URL・処理・テンプレートの作成

・目的に応じてデータベーステーブルを作成する

・モデルをDjango専用管理画面に登録する

・URLで呼び出す処理の設定をする

・URLで呼び出される処理の設定をする

・処理に応じて表示する画面のテンプレートを作成する

なお、本記事で扱うDjangoファイルの構成は以下の通りです。

 sampleproject
 ├── sampleapp
 │   ├── __init__.py
 │   ├── admin.py
 │   ├── apps.py
 │   ├── migrations
 │   │   └── (中身省略)
 │   ├── models.py
 │   ├── tests.py
 │   └── views.py
 ├── sampleproject
 │   ├── __init__.py
 │   ├── __pycache__
 │   │   └── (中身省略)
 │   ├── asgi.py
 │   ├── settings.py
 │   ├── urls.py
 │   └── wsgi.py
 ├── templates
 │   ├── sampleapp
 │    ├── base.html
 │    ├── list.html
 │    └── detail.html
 └── manage.py 

また、Djangoの基礎理解についてはこちらの記事を参考にしてみてください。

Webフレームワークの仕組みであるMTVモデルなどを解説しています。

関連記事

Djangoとは?Djangoの特徴やできることは? 本記事ではこのような疑問を解決します。Pythonの学習を終えて、実際にアプリの開発をしてみたいという方は多いです。そして、Pythonによるアプリ開発に関してググると「Djan[…]

アイキャッチ画像

さらに、こちらの記事ではDjangoが動く仕組みをより具体的に解説していますので、参考にしてみてください。

関連記事

Djangoの動く仕組みとは?ユーザーのリクエストはDjangoのファイルをどのように流れていくの? 本記事ではこのような疑問を解決します。DjangoとはPythonによるWeb開発の中で1番の人気を誇るWebフレームワークのこと[…]

アイキャッチ画像

初期設定

iMacと机周り

プロジェクトフォルダ・アプリフォルダを生成する

まずはじめにDjangoのプロジェクトフォルダ・アプリフォルダを生成します。

Djangoでは1つの開発ファイル群をプロジェクト(project)として扱います。

そしてそのプロジェクトの中に機能やデータごとにアプリ(app)を作成します。

プロジェクトフォルダを企業に例えると、アプリフォルダは企業の中の事業部署みたいなものです。

図で表すと以下のようになります。

プロジェクト・アプリ(Django)

それではターミナルにおいて以下のコマンドを実行してDjangoプロジェクトを作成しましょう。
(以下、黒い画面はすべてターミナルの画面を表します。)

~$ django-admin startproject sampleproject
※django-admin startproject プロジェクト名

次に、作成したプロジェクトのディレクトリへ移動します。

~$ cd sampleproject
※cd プロジェクト名

プロジェクトのディレクトリにおいて、アプリを作成します。

~$ python manage.py startapp sampleapp
※python manage.py startapp アプリ名

これでプロジェクトとアプリの作成は完了です。

設定ファイルの記述を変更・追加する

プロジェクト・アプリの作成が完了したら、設定ファイルのコードを編集して初期設定を行います。

#INSTALLED_APPS内にアプリを認識させる
INSTALLED_APPS = [
#(他省略)
    ‘sampleapp',
]

・・・・・

#TEMPLATES内のDIRSでhtmlファイルが入っている場所を認識させる
TEMPLATES = [
#(他省略)
		'DIRS': [os.path.join(BASE_DIR, ‘templates')],
[
#※「templates」フォルダはのちに作成

・・・・・

#言語・タイムゾーンの設定をする
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

デフォルトのUserモデルを作成する

データベースを作成する際は、アプリフォルダの中のmodels.pyファイルにデータベーステーブルを定義し、マイグレートコマンドを実行します。

models.pyファイルに何も記述せずにマイグレートコマンドを実行するとUserモデルが作成されます。

UserモデルとはDjangoにおいてデフォルトで用意されているユーザーについてのデータベーステーブルです。

なお、Userモデルを一からカスタマイズしたい場合はモデルファイルに記述が必要ですが、今回はデフォルトのUserモデルを扱います。

したがって、models.pyファイルに何も記述せずに以下のマイグレートコマンドを実行しましょう。

~$ python manage.py migrate

Django管理画面にログインするために管理ユーザーアカウントを作成する

Djangoではデフォルトで、ブラウザ上においてデータベースの確認・編集ができる管理画面が用意されています。

管理画面にログインするには管理ユーザーアカウントを作成する必要があるため、以下のコマンドで管理ユーザーアカウントを作成します。

~$ python manage.py createsuperuser

コマンドを実行すると、ユーザー名やメールアドレス、パスワードの入力が求められ、
最後に「Bypass password validation and create user anyway? [y/N]:」と聞かれるので、「y」を入力しましょう。

管理ユーザーアカウント作成後、管理画面にログインをするとデータベースの操作ができます。

仮想サーバーを立ち上げてホーム・管理画面を確認する

データベーステーブルや管理ユーザーアカウントが作成できたら実際に仮想サーバーを立ち上げて画面にアクセスしてみましょう。

仮想サーバーの立ち上げは以下のコマンドで実行できます。

~$ python manage.py runserver

表示されたURLにアクセスすると、以下のページが開けたかと思います。

サーバー立ち上げ初期画面(Django)

また、上記のURLの最後に「/admin」とつけてアクセスすることでDjango管理画面を開くことができます。

ここでは先ほど作成した管理ユーザーアカウントでログインをしてみましょう。

管理画面ログイン(Django)
管理画面初期(Django)

今の段階ではデータベーステーブルがUserモデルのみであることが確認できます。

そうしたら「control + c」を押して一旦サーバーの起動を終了しましょう。

なお、サーバーは必要な時にその都度コマンド入力をして起動していきます。

URL・処理・テンプレートの作成

コンピューターモニター(3画面)

目的に応じてデータベーステーブルを作成する

初期設定のところではデフォルトで用意されているUserモデルを作成しました。

ここでは試しに他のデータベーステーブルを作成(定義)してみたいと思います。

アプリフォルダの中のモデルファイル(models.py)に以下のコードを記述してみましょう。

今回はFruitsModelというフルーツの種類に関するデータベーステーブルを作ってみます。

from django.db import models

PLACE_CHOICES = (('北海道', '北海道'), ('東北', '東北'), ('関東', '関東'), ('中部', '中部'), ('近畿', '近畿'), ('中国', '中国'), ('四国', '四国'), ('九州', '九州'), ('沖縄', '沖縄'))

#データベーステーブルの名前をclassとして定義する
class FruitsModel(models.Model):
	name = models.CharField(max_length=10)
	aria = models.CharField(max_length=10, choices=PLACE_CHOICES)
	color = models.CharField(max_length=10)
	quantity = models.IntegerField()

データベーステーブルを定義したら、以下のコマンドでデータベーステーブルの設計図を作成します。

~$ python manage.py makemigrations

設計図はsampleproject/sampleapp/migrationsフォルダに保存されます。

そして、この設計図に基づいてデータベースに内容の変更を反映させます。

設計図の反映はマイグレートコマンドによって行います。

~$ python manage.py migrate

モデルをDjango専用管理画面に登録する

ここでは作成したデータベーステーブルを管理画面で扱えるようにadmin.pyファイルに以下の記述をしてデータベーステーブルをインポートします。

from django.contrib import admin
from .models import FruitsModel

#admin.site.register(モデル名)で管理画面で使えるように登録する
admin.site.register(FruitsModel)

記述後、管理画面を開くと以下のようにデータベーステーブルが追加されているのを確認できます。

管理画面カラム追加(Django)①

それでは「Fruits models」の「+ 追加」ボタンをクリックして、いくつかデータを追加してみましょう。

管理画面カラム追加(Django)②
管理画面カラム追加(Django)③

URLで呼び出す処理の設定をする

ここからはURLの作成から画面の表示までの一連の流れを解説していきます。

まずはアクセスするためのURLを設定します。

URLはプロジェクトフォルダ・アプリフォルダにあるurls.pyファイルを編集して設定しますが、デフォルトではアプリフォルダの中にはurls.pyファイルがないため以下のコマンドで作成します。

~$ touch sampleapp/urls.py

ここで、プロジェクト・アプリフォルダの両方にあるurls.pyファイルの関係とユーザーアクセスからの一連の流れを下の図で確認しましょう。

アクセスから画面表示までの流れ(Django)

つまり、まずプロジェクトフォルダにあるurls.pyファイルにパスが送られ、その後で各アプリ(ここではsampleapp)のurls.pyファイルにパスをつなげるということです。

それではurls.pyファイルにコードを記述してみましょう。

今回は先ほど作ったFruitsModelの一覧を表示するページと詳細を表示するページを呼び出す処理を考えます。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('sampleapp.urls')), #includeモジュールをインポートし、アプリのurls.pyファイルを呼び出す
]
from django.contrib import admin
from django.urls import path
from .views import listview, detailview

urlpatterns = [
    path('list/', listview, name='list'),
    path('detail/<int:pk>/', detailview, name='detail'),
] #path(‘リクエスト名/’, 関数名)でリクエストされたviews.pyファイルの関数を呼び出せるようにする

URLで呼び出される処理の設定をする

ここでは、アクセスされたURLに基づいてどのような画面を表示するかの処理を担うviews.pyファイルを編集していきます。

from django.shortcuts import render
from .models import FruitsModel #models.pyファイルで定義したデータベーステーブルをインポートして呼び出す

def listview(request):
    object_list = FruitsModel.objects.all()
    return render(request, 'sampleapp/list.html', {'object_list':object_list})

def detailview(request, pk):
    object = FruitsModel.objects.get(pk=pk)
    return render(request, 'sampleapp/detail.html', {'object':object})

処理に応じて表示する画面のテンプレートを作成する

最後にviews.pyファイルによって呼び出される画面のテンプレートを作成します。

まずは以下のコマンドを実行してテンプレートフォルダを作成しましょう。

~$ mkdir templates

また、テンプレートフォルダの中を各アプリごとにフォルダ分けしておくといくつかアプリを作成している場合は便利です。

今回は1つのアプリしか扱いませんが、練習のためにテンプレートフォルダの中にアプリフォルダ(sampleapp)を作って、その中にテンプレートファイルを入れていきます。

~$ mkdir templates/sampleapp

次にテンプレートファイルであるHTMLファイルを作成します。

本記事ではbase.html、list.html、detail.htmlの3つを下のコマンドで生成します。

~$ touch templates/sampleapp/base.html templates/sampleapp/list.html templates/sampleapp/detail.html

なお、Djangoでは専用のタグを使って親テンプレートから子テンプレートへ継承をすることができます。

ここではbase.htmlが親テンプレートで、list.htmlとdetail.htmlが子テンプレートになります。仕組みを図で表すと以下の通りです。

テンプレートの継承(Django)

それではテンプレートファイルにコードを記述します。

なお、ここでは外観を簡単に作ることができるBootstrapというサービスを使います。

リンクから公式サイトに飛ぶと、コピペするだけできれいなデザインやパーツを利用することができます。

親テンプレート(固定外観)

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>名産品フルーツリスト</title>
    {% block header %}
    {% endblock header %}
  </head>
  <body>
    <h1>〜名産品フルーツリスト〜</h1>
    {% block content %}
    {% endblock content %}

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  </body>
</html>

子テンプレート(一覧を表示するページ)

{% extends 'sampleapp/base.html' %}


{% block content %}

<div class='container'>
{% for item in object_list %}
<div class="card">
    <h5 class="card-header">{{ item.name }}</h5>
    <div class="card-body">
    	<h5 class="card-title">産地:{{ item.aria }}地方</h5>
        <a href="{% url 'detail' item.pk %}" class="btn btn-primary">詳しく見る</a>
    </div>
</div>
{% endfor %}
</div>

{% endblock content %}

子テンプレート(詳細を表示するページ)

{% extends 'sampleapp/base.html' %}


{% block content %}

<div class='container'>
<div class="card">
    <h5 class="card-header">{{ object.name }}</h5>
    <div class="card-body">
    	<h5 class="card-title">産地:{{ object.aria }}地方</h5>
        <h5 class="card-title">色:{{ object.color }}</h5>
        <h5 class="card-title">数量:{{ object.quantity }}個</h5>
        <a href="{% url 'list' %}" class="btn btn-primary">戻る</a>
    </div>
</div>
</div>

{% endblock content %}

ざっとタグの意味を説明すると、

{% 〇〇 %} → コメントアウトで〇〇の処理を行う
{{ object.〇〇 }} → objectの〇〇データを表示する

という意味になります。


実際の表示画面は以下の通りです。

一覧ページ(’list’)

FruitsModel一覧(Django)

詳細ページ(’detail/1’)

FruitsModel詳細(Django)

まとめ

以上が挫折しないDjangoチュートリアルを使ったDjangoファイルの基本操作になります。

結局やっていることはファイルの全体設定をして、URLと処理を紐付けて、データベースを作り、処理によって画面に表示させるテンプレートを作成するというものです。

そして、コーディング量や作成ファイルは実装したい機能やアプリケーションの規模によって変わってきます。

あとはテンプレートのデザインや配置、内容などをどれだけ凝るかによってアプリケーションの出来が左右されます。

初心者の方は、まずは自分で外観などを気にせず簡単な機能を持ったアプリケーションを作って、一連の仕組みや流れを体得していくことが大切です。


また、最速で効率的に目標(DjangoでのWebサービス開発など)を達成するにはやはりプログラミングスクールがおすすめです。

スクールを利用すればいつでもメンターや講師にわからないことを質問することができ、悩みや疑問をすぐに解決することができます。

なお、Djangoが学べるおすすめのプログラミングスクールについてはコチラの記事を参考にしてみてください。

関連記事

Djangoが学べるプログラミングスクールとは?おすすめのDjangoスクールとは? 本記事ではこのような疑問を解決します。DjangoはPythonで作られた中で1番メジャーなWebフレームワークです。みんなが普段利用するYouT[…]

アイキャッチ画像