タイトル: チュートリアル：電卓の作成
SEOタイトル: djangoで電卓の作成【python】
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
</thead>
<tbody>
<tr>
<td style="background-color:#fef9e7">
<ul>
<li>Django チュートリアル: <strong>シンプルな電卓（加算のみ）</strong>を作りながら MVT を学ぶ</li>
<li>目的: ビュー → モデル → コントローラ間の<strong>値の入出力フロー</strong>を体験</li>
<li>実装: <code>forms.py</code> でフォーム定義 → <code>views.py</code> で加算処理 → <code>templates</code> で結果表示</li>
<li>前提: Python / Django 導入済み</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>本稿では<strong>djangoで簡単な電卓を作成する方法</strong>を説明します。</p>
<p>※機能は非常にシンプルにします。（加算機能のみ）</p>
<p><span style="color:#e74c3c">本稿の目的はMVC(MVT)を用いた値の入出力です。</span></p>
<p> </p>
<h2>前提</h2>
<p>・Pythonの導入済み（まだの方は<a href="https://jpn.itlibra.com/article?id=10307">こちら</a>）</p>
<p>・djangoの導入済み（まだの方は<a href="https://jpn.itlibra.com/article?id=10796">こちら</a>）</p>
<p> </p>
<h2>完成図</h2>
<p><img alt="" src="/uploadImage/20181201005841_2202711.png" /></p>
<p> </p>
<h2>プロジェクトの作成</h2>
<p>適当なプロジェクトを作成します。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">python django-admin.py startproject </span><span style="color:#f1c40f">django_projects</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>アプリケーションの作成</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">python manage.py startapp </span><span style="color:#f1c40f">calculator</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>ルーティング処理</h2>
<p><span style="color:#e74c3c">calculator</span>/<strong>urls.py</strong>を作成して以下の記述をする。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">from django.urls import path</span></p>
<p><span style="color:#ffffff">from . import views</span></p>
<p><span style="color:#ffffff">urlpatterns = [</span></p>
<p><span style="color:#f1c40f"> path('', views.index, name='index'),</span></p>
<p><span style="color:#f1c40f"> path('calc', views.calc),</span></p>
<p><span style="color:#ffffff">]</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p><span style="color:null">更に</span><span style="color:#e74c3c">django_projects</span>/<strong>urls.py</strong>を修正する。</p>
<p>calculatorアプリのurls.pyにパスを通す。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">from django.contrib import admin</span></p>
<p><span style="color:#ffffff">from django.urls import include, path</span></p>
<p><span style="color:#ffffff">urlpatterns = [</span></p>
<p><span style="color:#f1c40f"> path('calculator/', include('calculator.urls')),</span></p>
<p><span style="color:#ffffff"> path('admin/', admin.site.urls),<br />
]</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>共通テンプレートの作成</h2>
<p>アプリケーションディレクトリ直下に<strong>templates</strong>ディレクトリを作成しましょう。</p>
<p>今後テンプレートは当ディレクトリに格納します。</p>
<p>以下はヘッダーなどを共通化するテンプレートです。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><!DOCTYPE html></span></p>
<p><span style="color:#ffffff"><html lang="ja"></span></p>
<p><span style="color:#ffffff"> <head></span></p>
<p><span style="color:#ffffff"> <meta charset="UTF-8"></span></p>
<p><span style="color:#ffffff"> <title></span><span style="color:#f1c40f">{% block title %}{% endblock title %}</span><span style="color:#ffffff"></title></span></p>
<p><span style="color:#ffffff"> </head></span></p>
<p><span style="color:#ffffff"> <body></span></p>
<p><span style="color:#f1c40f"> {% block content %}</span></p>
<p><span style="color:#f1c40f"> {% endblock %}</span></p>
<p><span style="color:#ffffff"> </body></span></p>
<p><span style="color:#ffffff"></html></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>テンプレートの作成</h2>
<p>実際の電卓画面の部分を作成します。</p>
<p>機能は加算のみにします。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#f1c40f">{% extends "base.html" %}</span></p>
<p><span style="color:#f1c40f">{% block title %}</span><span style="color:#ffffff">電卓</span><span style="color:#f1c40f">{% endblock title %}</span></p>
<p><span style="color:#f1c40f">{% block content %}</span></p>
<p><span style="color:#ffffff"> <h1>djangoの加算電卓</h1></span></p>
<p><span style="color:#ffffff"> <form method="post" action="calc"></span></p>
<p><span style="color:#2ecc71"> {% csrf_token %}</span></p>
<p><span style="color:#2ecc71"> <input type="number" name="val1"><br />
+<br />
<input type="number" name="val2"></span></p>
<p><span style="color:#2ecc71"> <button type="submit"> = </button></span></p>
<p><span style="color:#2ecc71"> {{ answer }}</span></p>
<p><span style="color:#ffffff"> </form></span></p>
<p><span style="color:#f1c40f">{% endblock %}</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>ビューの作成</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">from django.shortcuts import render</span></p>
<p><br />
<span style="color:#ffffff">def index(request):</span></p>
<p><span style="color:#ffffff"> return </span><span style="color:#f1c40f">render(request, 'index.html')</span></p>
<p><br />
<span style="color:#ffffff">def calc(request):</span></p>
<p><span style="color:#2ecc71"> val1 = int(request.POST['val1'])</span></p>
<p><span style="color:#2ecc71"> val2 = int(request.POST['val2'])</span></p>
<p><span style="color:#2ecc71"> answer = val1 + val2</span></p>
<p><span style="color:#2ecc71"> context = {</span></p>
<p><span style="color:#2ecc71"> 'answer': answer,</span></p>
<p><span style="color:#2ecc71"> }</span></p>
<p><span style="color:#ffffff"> return </span><span style="color:#f1c40f">render(request, 'index.html', context)</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>http://127.0.0.1:8000/calculator/</p>
<p>で計算画面が開きます。</p>