【Django】変数の受け渡し方法。〜別ページへの値遷移〜

Django

2023.07.19

今回の記事はDjangoプロジェクトで別ページに遷移したタイミングで変数を受け渡す方法をご紹介します。ページ遷移して値を次のページに表示するのはWebアプリではよくあります。Django初学者で変数の受け渡し方法がわからない方は是非参考にしてください。

Djangoプロジェクト作成
Djangoプロジェクトで変数を遷移先ページに表示する流れ
Djangoプロジェクト内にHTMLで入力欄を作成
Djangoプロジェクト内にHTMLで遷移先ページを作成
Djangoプロジェクトで変数の受け渡しを行う
Djangoプロジェクト起動で変数の受け渡し実行

Djangoプロジェクト作成

まずは、Djangoモジュールを自身のPython環境にインストールします。すでにDjangoモジュールをインストール済みの方は飛ばしてください。（また、下記では仮想環境にインストールしていますが、ローカルPythonにインストールする方は仮想環境作成部分は飛ばしてください。）

python venv -m env
cd env/Scripts
activate
cd ../..

// djangoインストール
pip install django

次にDjangoプロジェクトを展開するフォルダで下記のコマンドを実行します。

django-admin startproject sample
↓
cd sample
↓
python manage.py startapp app

Djangoプロジェクトで変数を遷移先ページに表示する流れ

入力欄に値入力
ボタンによりページ遷移
遷移先ページに受け渡した値を表示

上記が今回のサンプルアプリの流れです。

Djangoプロジェクト内にHTMLで入力欄を作成

HTMLで入力欄を作ります。入力欄のイメージは下記のようなイメージです。

「index.html」を下記のように変更しましょう。

<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>サンプルアプリ</title>
</head>

<body>
    <form action="{% url 'move_to_gamepage' %}" method="GET">
        {% csrf_token %}
        <a>Player1:</a><input type="text" id="player1" name="player1">
        <br>
        <a>Player2:</a><input type="text" id="player2" name="player2">
        <br>
        <a>Player3:</a><input type="text" id="player3" name="player3">
        <br>
        <input type="image" src="{% static "ap/button/start_button.png" %}" name="start_button"> 
    </form>
</body>
</html>

下記のform部分が入力欄のメインになる箇所です。

<form action="{% url 'move_to_gamepage' %}" method="GET">
    {% csrf_token %}
    <a>Player1:</a><input type="text" id="player1" name="player1">
    <br>
    <a>Player2:</a><input type="text" id="player2" name="player2">
    <br>
    <a>Player3:</a><input type="text" id="player3" name="player3">
    <br>
    <input type="image" src="{% static "ap/button/start_button.png" %}" name="start_button"> 
</form>

inputタグのtypeがtextの部分が入力欄です。

inputタグのtypeがimageの部分がボタンで、ここをクリックするとformのactionに設定されている「move_to_gamepage」メソッドが動きます。

本当はGET通信ではなくPOST通信を使うべきなのですが、今回は変数をやりとりするのみなので上記でお許しを。今の状態では下記のような画面になっています。

Djangoプロジェクト内にHTMLで遷移先ページを作成

次に遷移先のページをHTMLで作成します。先ほど作成した入力欄で入力した値を表示します。

「gamepage.html」というページを作成しましょう。

<html>
<head>
    <meta charset="utf-8" />
    <title>遷移先</title>
</head>
<body>
    <table>
        <a>{{ player1 }}</a>
        <br>
        <br>
        <a>{{ player2 }}</a>
        <br>
        <br>
        <a>{{ player3 }}</a>       
    </table>
</body>
</html>

tableタグ内の「{{ player1 }}」の部分が受け渡される変数です。

Djangoでの変数の書き方は{{ 変数 }}といった具合です。

Djangoプロジェクトで変数の受け渡しを行う

「views.py」を下記のように変更します。

from django.shortcuts import render

def index_show(request):
    return render(request,'index.html') 

def move_to_gamepage(request):
    players = {
        'player1': request.GET.get('player1'),
        'player2': request.GET.get('player2'),
        'player3': request.GET.get('player3'),
    }
    return render(request, 'gamepage.html', players)

GETで変数を取得し、受け渡されたリストを「gamepage.html」渡します。

Djangoプロジェクト起動で変数の受け渡し実行

「urls.py」は下記です。

from django.contrib import admin
from django.urls import path,include ##includeの記述追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('app.urls')),##ココ追加
]

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index_show, name='index_show'),
    path('templates/', views.move_to_gamepage, name='move_to_gamepage'),
]##ここは適宜追加する都度uploadします。

これで、プロジェクトを起動させて、ローカルサーバにアクセスします。

見辛いですが、下記のように取得した名前を下記のように表示できております。