Djangoでタイピング練習アプリを作成：文字入力と条件分岐を実装する方法

Djangoを使ったタイピング練習アプリは、プログラミング学習に最適なプロジェクトです。本記事では、Webページ上で文字入力を受け付け、条件分岐を用いてポイントを付与する基本的な実装方法を解説します。

Djangoプロジェクトの準備
URLルーティングの設定
ビューの実装
テンプレートの作成
まとめ

Djangoプロジェクトの準備

まずは、Djangoプロジェクトとアプリケーションを準備します。

コマンドラインで以下のコマンドを実行してプロジェクトを作成してください。

django-admin startproject typing_app

次に、アプリケーションを作成します。

python manage.py startapp practice

作成したアプリケーションをプロジェクトに追加するため、settings.pyのINSTALLED_APPSに'practice'を追加します。

URLルーティングの設定

urls.pyを編集してルートを設定します。

from django.contrib import admin
from django.urls import path
from practice import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.typing_page, name='typing_page'),
]

ビューの実装

次に、views.pyでビュー関数を実装します。

from django.shortcuts import render
from django.http import JsonResponse
import random

# 設定する文章
sentences = ["The quick brown fox jumps over the lazy dog", "Hello, world!", "Django is awesome"]

# ビュー関数
def typing_page(request):
    if request.method == 'POST':
        user_input = request.POST.get('user_input', '')
        correct_sentence = request.POST.get('correct_sentence', '')
        if user_input == correct_sentence:
            return JsonResponse({'message': 'Correct!', 'points': 1})
        else:
            return JsonResponse({'message': 'Try again!', 'points': 0})
    else:
        sentence = random.choice(sentences)
        return render(request, 'practice/typing_page.html', {'sentence': sentence})

テンプレートの作成

次に、templates/practice/typing_page.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>Typing Practice</title>
    <script>
        function submitTyping() {
            const userInput = document.getElementById('user_input').value;
            const correctSentence = document.getElementById('correct_sentence').innerText;
            fetch('', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({
                    user_input: userInput,
                    correct_sentence: correctSentence
                })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
            });
        }
    </script>
</head>
<body>
    <h1>Typing Practice</h1>
    <p>Type the following sentence:</p>
    <p id="correct_sentence">{{ sentence }}</p>
    <input type="text" id="user_input">
    <button onclick="submitTyping()">Submit</button>
</body>
</html>