Django触ってみた


## はじめに

こんにちは、株式会社TechoesのKです（アプリエンジニア4年目）
今回はdjangoを使用してみたのでその導入方法についての記事となります


## Djangoの概要


Djangoは、Pythonで開発された高機能なWebアプリケーションフレームワークです。オープンソースで提供されており、Web開発を迅速かつ効率的に行うことを目的としています。Djangoの開発は2005年に開始され、「The web framework for perfectionists with deadlines（締切に追われる完璧主義者のためのWebフレームワーク）」というスローガンを掲げており、現在も活発にメンテナンスが行われています。

## フレームワークとしての特徴

Djangoは、以下のような特徴を持つフレームワークです。

### 1. **MTVアーキテクチャ**
Djangoは、Model（モデル）、Template（テンプレート）、View（ビュー）の3層構造を採用しています。
- **Model**: データベースとのやり取りを管理し、オブジェクト指向的にデータを扱う。
- **Template**: HTMLのテンプレートを作成し、動的なページを生成する。
- **View**: ユーザーリクエストを処理し、適切なデータをテンプレートに渡す。

この構造により、コードの分離が容易になり、保守性の高いアプリケーションを開発できます。

### 2. **管理サイト（Admin Panel）**
Djangoは、開発者がデータを簡単に管理できるように、標準で管理サイト（Django Admin）を提供しています。少ない設定でデータの追加・編集・削除を行う管理画面を自動生成できるため、バックエンドの管理が容易になります。

### 3. **組み込みの認証機能**
Djangoは、ユーザー認証（ログイン、ログアウト、パスワード管理）を標準機能として提供しており、安全性の高い認証システムを容易に実装できます。

### 4. **ORM（Object-Relational Mapping）**
Djangoは、データベースとのやり取りを簡素化するためにORM（オブジェクト・リレーショナル・マッピング）を提供しています。SQLを直接書かずに、Pythonのオブジェクトとしてデータを操作できるため、開発の効率が向上します。

<br>

<br>


では早速、Djangoを導入してみましょう

## Djangoを導入してみる

<br>

私の環境がMacのHomebrew上で管理されているPythonのため、仮想環境での導入手順となります

（※↓PCに直接Djangoをインストールする場合の手順はこちら）

https://qiita.com/pythonista/items/19613663ef7bb3c57d4f

<br>

### 1. **仮想環境を作成**

```
python3 -m venv myenv
```

### 2. **仮想環境を有効化**

```
source myenv/bin/activate
```

### 3. **Django をインストール**

```
pip install django
```

<br>

これで仮想環境上にDjangoをインストールできました
次に簡単なアプリケーションの作成に移っていきます


## 実際にDjangoでアプリケーションを作成してみる

<br>

### 1. **Django プロジェクトを作成**
```
django-admin startproject myproject
```

### 2. **アプリを作成**

```
cd myproject
python manage.py startapp myapp
```
<br>

ここまで終わったあとのフォルダの状態は以下の通り

<br>

![スクリーンショット 2025-02-22 19.03.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/d4a322e8-6926-4e17-ab26-d95d21748304.png)

<br>

ここから、ファイル内のコードを設定していきます

アプリ (myapp) の views.py に簡単なレスポンスを返す関数を作成します。
### 3. **ビューを定義**

![スクリーンショット 2025-02-22 19.07.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/a54047e3-57ed-431c-b158-e64b4c4036ea.png)

<br>

お約束のレスポンスを返すよう設定

### 4. **URLを設定**

Django では、URL のルーティングを設定する必要があります。

そこで、`myapp/urls.py`ファイルを新規作成し、以下の設定を追加します

<br>

`myapp/urls.py`

![スクリーンショット 2025-02-22 19.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/a473ea3a-55b3-482c-9103-8b79aa689292.png)


<br>


また、`myproject/urls.py`に新たな設定を追加します



![スクリーンショット 2025-02-22 19.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/a6c65c08-81e2-42fe-9792-5dfefc50c3a9.png)

<br>

URL のルーティングを設定しました
次はアプリをプロジェクトに登録します


### 5. **アプリをプロジェクトに登録**

アプリをプロジェクトに登録するため、`myproject/settings.py`内の`INSTALLED_APPS`セクションに`myapp`を追加します


<br>

`myproject/settings.py`

![スクリーンショット 2025-02-22 19.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/99157900-7a6f-424d-9b20-bf0277a436c9.png)


<br>

これで下準備が整いました
いよいよ実際に動かしてみましょう

### 6. **サーバーを起動**

```
python manage.py runserver
```

<br>

上記コマンドでサーバーを起動し、`http://127.0.0.1:8000/`を開くと画面が表示されました！


<br>


![スクリーンショット 2025-02-22 19.42.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/00a3002b-4117-43f9-b404-07d82d72ced7.png)


<br>

せっかくなので、ここでDjango特有のMVT (Model-View-Template) アーキテクチャ を活かした機能の実装をしてみましょう

## MVTアーキテクチャ を活かした機能を実装してみる

<br>

今回はMVTアーキテクチャを活用したTodoリストを実装して見ようと思います
まずはモデルを作成します


### 1. **モデルを作成**
データベースに保存する ToDo リストのモデル を作成します。

`myapp/models.py`
```
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)  # タスク名
    completed = models.BooleanField(default=False)  # 完了フラグ
    created_at = models.DateTimeField(auto_now_add=True)  # 作成日時

    def __str__(self):
        return self.title
```

### 2. **データベースに反映**
モデルをデータベースに反映するため、マイグレーション
```
python manage.py makemigrations
python manage.py migrate
```

### 3. **フォームの作成**
タスクを追加できるフォームを作成します

`myapp/forms.py`(新規作成)
```
from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title']  # ユーザーが入力できるのはタイトルのみ
```

### 4. **viewの修正**
「Hello Django!」を表示するようにしていたホームページをTodoリストに書き換えます
このとき、フォームからの入力を受け付けるようにします

`myapp/view.py`

```
from django.shortcuts import render, redirect
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()  # 全タスクを取得
    form = TaskForm()

    if request.method == 'POST':
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()  # フォームの内容を保存
            return redirect('task_list')  # タスク追加後、同じページにリダイレクト

    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})
```

### 5. **URLの修正**
`urls.py` を修正し、`http://127.0.0.1:8000/` を ToDo リストページに上書き

`myapp/urls.py`

```
from django.urls import path
from . import views

urlpatterns = [
    path('', views.task_list, name='task_list'),  # ホームページをToDoリストに
]
```

`myproject/urls.py`

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),  # ルートを myapp の task_list に
]
```

### 6. **テンプレートの追加**
最後に、HTML ファイルを作成してデータを表示する。

`myapp/templates/task_list.html`
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoリスト</title>
</head>
<body>
    <h1>ToDoリスト</h1>

    <!-- タスク追加フォーム -->
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}  <!-- フォームの自動レンダリング -->
        <button type="submit">追加</button>
    </form>

    <h2>タスク一覧</h2>
    <ul>
        {% for task in tasks %}
            <li>
                {% if task.completed %}✅{% else %}❌{% endif %}
                {{ task.title }}
            </li>
        {% empty %}
            <li>タスクがありません</li>
        {% endfor %}
    </ul>
</body>
</html>
```

<br>

これで、準備完了です

`python manage.py runserver`コマンドで動作確認をしましょう


<br>

![スクリーンショット 2025-02-24 13.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/c0fdec65-6c48-4d83-90ee-513afd436e01.png)


<br>

Todoリストが表示されました
タスクもちゃんと追加することができます

<br>

![スクリーンショット 2025-02-24 13.56.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/9727eafc-d490-4ffb-b1ec-c92b70d73d67.png)

<br>

最後に、Djangoの管理画面について紹介して終わりたいと思います

## Djangoの管理画面機能（おまけ）

<br>

Djangoでは管理画面を使いたい場合は、管理ユーザーを作成できます

<br>


マイグレーションを実行していない場合はマイグレーションを行なってください
```
python manage.py migrate
```
![スクリーンショット 2025-02-22 20.09.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/cfc7deed-e5ac-4777-aa60-6261c5aa9ef3.png)

`manage.py`を編集せずにいきなりコマンドを実行すると、デフォルト設定でマイグレーションが行われます

<br>

マイグレーションが成功したら以下のコマンドで管理ユーザーを作成します

```
python manage.py createsuperuser
```
<br>

コマンドライン上でユーザー名・メールアドレス・パスワードを設定できます

![スクリーンショット 2025-02-22 20.14.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/9be33e35-6f25-4f61-859a-050a4209f2b8.png)


<br>

上記設定完了後、`http://127.0.0.1:8000/admin`を開くと管理ページのログイン画面が開きます


![スクリーンショット 2025-02-22 20.17.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/016388cf-348c-4ad0-b256-37c442cf9ea2.png)


<br>




設定したユーザー名・パスワードでログインすると管理画面が開きます

![スクリーンショット 2025-02-22 20.20.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/a4a5f638-ae6e-466f-b2aa-0b31c5272447.png)



<br>


管理画面ではデータベースのGUI確認・編集が可能となっています

![スクリーンショット 2025-02-22 20.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714682/6fc55180-92c5-4f64-884b-e66d21d7018a.png)


## 感想・まとめ

Djangoの紹介と、Django の MVT (Model-View-Template) アーキテクチャ を活かして、サイト内でタスクを追加 & 表示できる ToDo リスト を作成しました。

モデル (models.py) でデータを定義し、ビュー (views.py) で取得・処理、テンプレート (task_list.html) で表示する流れをシンプルに紹介できたのではないかと思います。


以上、Djangoについての記事でした！
この記事が皆さんの開発の一助になれば幸いです