【Python Django】初心者プログラマーのWebアプリ

# 人工知能○　Webアプリ情報X　のPython
PythonのWebアプリケーションフレームワーク「Django」の初心者プログラマー用のwebアプリ作成チュートリアルです。

人工知能、ディープラーニング、機械学習…
興味がある人が増えていますが、せっかく画像認識機械学習、自然言語系の機械学習が完成してもアプリで使えなければ意味がないです。


機械学習では情報が豊富なPythonですが、Webアプリを作ろうとすると日本語では初心者には情報を集めるのも骨が折れるのが現状なのでこの記事を書きました。

:::note info
内容が古くなったのでDjango 3で記事更新しました。 updated: 2021/09
:::

# :pushpin: Pythonで作るDjangoアプリ記事一覧

|  | 内容|
|:----:|:----:|
|**part1**|<font color="red">簡単な文字表示アプリを作る　**← ココ**</font>|
|**part2**|[HTMLテンプレート表示](https://qiita.com/Bashi50/items/b9666030a058795c7dd8)|
|**part3**|["画像" "CSS" "Javascript"実装](https://qiita.com/Bashi50/items/3452bd1692fdd0ac6392)|
|**part4**|[フォーム送信](https://qiita.com/Bashi50/items/93da7a071b2e02dc21ed)|
|**part5**|[データベースの値取得・更新](https://qiita.com/Bashi50/items/280bc341eeec5d7f8797)|
|**番外編**|[Django AWS デプロイ](https://qiita.com/Bashi50/items/d5bc47eeb9668304aaa2)|
|**APIサーバー編**|[Django REST frameworkとReact #4](https://qiita.com/Bashi50/items/203505440049d759b694)|
|**単体テスト編**|[Django unittestで単体テスト](https://qiita.com/Bashi50/items/4205c398f475bc69f631)|

# 他のPythonフレームワーク記事
Django以外のPythonWebフレームワークでも初心者向け記事書きました:blush:
Flask記事もよろしければ！

https://qiita.com/Bashi50/items/30065e8f54f7e8038323


## 環境

- Python 3.8.11
- Django 3.2.7
- Windows10

仮想化やインストールは詳しくは説明しません。
anaondaなどインストールして仮想環境つくってやるといいと思います。

> https://www.anaconda.com/


今回はPythonのDjangoを使って簡単なWebアプリをつくります。
第一段は関数ビューで本当に基礎のWebアプリ。

## Djangoをインストール

```
pip install django
```

使用するのはとりあえずDjangoだけなのでこれでOK。Anaconda使っていたら`conda install django`でも大丈夫だと思います。

# Webアプリの基礎　～とりあえずブラウザに好きな文字表示～

## ソースコード
この章のコードは以下です。確認やコピペでどうぞ

https://github.com/kohishibashi/easy-django/tree/part1

## アプリ作成

簡単な分かるものを組み合わせとりあえず動くものを作って積み重ねていくのがプログラミングの極意だと思っているのでブラウザで自分の好きな文字を表示させます。

Djangoのファイル入れるフォルダ作る。
`C:\Users\○○○\django`

コマンドプロンプトやMacならターミナルなどで作成したディレクトリで以下を実行しましょう。
プロジェクト（Djangoのアプリ使うのに必要なコード作ってくれる）が作成されます。

``` 
django-admin startproject testproject
```
何個かファイルが生成されます。
「testproject」はプロジェクト名です。わかりやすい名前にすればプロジェクト名は適当に決めてもいいと思います。

`django-admin startproject <プロジェクト名>` となっています。

さっき作ったフォルダに移動してmanage.pyでrunserver試してみましょう。
コマンドプロンプトで

```
cd testproject
python manage.py runserver
```

デフォルトで
```http://127.0.0.1:8000```

にブラウザに入力するとアクセス可能なので、アドレスバーに入力。

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/260345/a0f32d51-0a59-1025-30d4-511b12e5536f.jpeg)

こんな画面出たら成功。

:::note warn
例えば8080番のポートに変えたかったら
python manage.py runserver 8080
でアクセスできるようになります。ほかのアプリケーションなどで使用されて動かないなどの場合にも使ってみてください。以下をアドレスバーに入れればアクセスできます。
http://127.0.0.1:8080
:::

## プロジェクト内にアプリを作成
またコマンドプロンプトに戻りアプリ作成。

```
python manage.py startapp <アプリ名>
```

今回は試しなので`webtestapp`という名前でアプリを作成してみます。


```
python manage.py startapp webtestapp
```

:::note info
独自のアプリ作るときは、アプリ名ですのですぐ分かるような名前にしたほうがいいと思います。
:::

webtestappフォルダが作られてまたファイルがいくつかできました。

webtestappフォルダ内
---

![キャプチャa.JPG](https://qiita-image-store.s3.amazonaws.com/0/260345/8eef07fb-81dd-6fc2-df65-79f622e141a9.jpeg)

testprojectフォルダ内
---

![キャプチャaa.JPG](https://qiita-image-store.s3.amazonaws.com/0/260345/3abee4c8-1107-9a6f-4946-143ad680ece4.jpeg)

```python:testproject/testproject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webtestapp.apps.WebtestappConfig'  # 追加
]
```
アプリ名`'webtestapp'`を追加。頭のWとConfigのC最初大文字にしてます。

管理画面とか使わないなら必要ないんですが続いて、下の方にある項目も変更。
日本語設定です。

```python:testproject/testproject/settings.py
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
```

では画面に単純に`Hello World!`と表示させるWEBアプリを作っていきましょう。

```python:testproject/webtestapp/views.py
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello World!")
```
htmlファイルに「Hello World!」と書いて表示させたのと同じと思えばわかりやすいですかね。


`C:\Users\○○○\django\testproject\testproject`
の中のurls.py


```python:testproject/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('webtestapp.urls'))
]
```
`include`インポート足して `<アプリケーション名>.urls`
pathの後が空文字なので

> http://127.0.0.1:8000/

にアクセスしたときにwebtestapp内のurls.pyを参照する。
ということになります。

つまり

`C:\Users\○○○\django\testproject\webtestapp\urls.py`
を作る必要あります。こらへん紛らわしいですね。


urls.pyが2つになるので直接このurls.pyに書いてもいいですが、どのアプリを使うか？という管理に使うファイルにしたほうが後々わかりやすいと思います。


```python:django\testproject\webtestapp\urls.py
from django.urls import path
from . import views

app_name='webtestapp'

urlpatterns = [
    path('', views.index, name='index'),
]
```
「''」空文字にアクセス。http://127.0.0.1:8000/
の場合には、さきほど編集したviews.pyのindex関数の内容を表示させています。

ついでに

```python:django\testproject\webtestapp\urls.py
path('test', views.index, name='index'),
```

にすればhttp://127.0.0.1:8000/test
にアクセスしたときviews.pyのindex関数の内容を表示するということになります。

そして、views.pyのindex関数は


```python:testproject/webtestapp/views.py
def index(request):
    return HttpResponse("Hello World!")
```
ただ「Hello World!」と表示させるだけ。
「request」はとりあえず書くという規則だと思ってください。

コマンドプロンプトで

```
python manage.py runserver
```
![キャプチャds.JPG](https://qiita-image-store.s3.amazonaws.com/0/260345/1b96105e-cdb9-ecc3-a0b3-dc4693640a8a.jpeg)

`path('', views.index, name='index'),` なら `http://127.0.0.1:8000/`

`path('test', views.index, name='index'),`なら`http://127.0.0.1:8000/test`
にアクセスすれば文字が表示されます。

`views.py`のHello World!変えれば当然文字も変わりますので試してみてください！

# :pushpin: 一連の記事

|  | 内容|
|:----:|:----:|
|**part1**|<font color="red">簡単な文字表示アプリを作る　**← ココ**</font>|
|**part2**|[HTMLテンプレート表示](https://qiita.com/Bashi50/items/b9666030a058795c7dd8)|
|**part3**|["画像" "CSS" "Javascript"実装](https://qiita.com/Bashi50/items/3452bd1692fdd0ac6392)|
|**part4**|[フォーム送信](https://qiita.com/Bashi50/items/93da7a071b2e02dc21ed)|
|**part5**|[データベースの値取得・更新](https://qiita.com/Bashi50/items/280bc341eeec5d7f8797)|
|**番外編**|[Django AWS デプロイ](https://qiita.com/Bashi50/items/d5bc47eeb9668304aaa2)|
|**APIサーバー編**|[Django REST frameworkとReact #4](https://qiita.com/Bashi50/items/203505440049d759b694)|

# おわりに
この章のコードは以下です。確認やコピペでどうぞ

https://github.com/kohishibashi/easy-django/tree/part1