Djangoの開発環境からhello worldまで

Djangoで株価の推移をチェックできるアプリケーションを作ろうとしています。そのため、Djangoの基本的な開発環境を調べて、hello worldまで出力させてみました。

# 環境
windows 11 Home 
Linux version 5.15

# 手順
作成から使用するまでの大まかな手順です。
1. 仮想環境(venv)の作成
1. プロジェクトの作成
1. アプリケーションの作成
1. サーバーの起動

# 開発環境
Djangoの開発を進めていくうえでpythonのライブラリのversionを変更し、作成を進めていきます。pythonで作成した他のコードでライブラリ依存によるエラーの発生を防ぐため、仮想環境を構築し、その中でライブラリを管理して開発進めていきます。最初に仮想環境について説明した後、Djangoの開発環境からhello worldまでを説明していきます。

## 1. 仮想環境の作成
今回は、pythonの仮想環境ツールでプロジェクトごとに隔離されたpython環境を作成できる```venv```を用いて開発を進めていきます。作成した仮想環境を有効化すると、その環境内で使用するモジュールやパッケージとなります。作成した仮想環境を使い分けることで、一つのOS内で環境を分離して開発することが可能になります。
仮想環境を図にすると、下記のようになります。projectA、projectBでは、異なるライブラリを使用したり、異なるversionを分離して使用することできます。このように分離しておくことで、以前動作したプログラムの状態を保持することが可能となり、ライブラリのアップデートにより生じるエラーを回避することができます。

![Django (3)-開発環境.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176158/1e4aebd9-359a-e052-33bf-7e1032e27fae.jpeg)

### 1.1 venvの使い方
下記のコマンドを入力することで開発環境を作成したり、有効化、無効化することができます。開発環境の名前は、任意で決めることができ、今回は、djangoenvとして開発環境を作成します。

```bash
# 仮想環境の作成
# python3 -m yypyy 任意名
python3 -m venv djangoenv 
# 仮想環境の有効化
# source 任意名/bin/activate
source djangoenv/bin/activate
# 無効化
deactivate
```

## 2. Django
Djangoは、Pythonで実装されたWebアプリケーションフレームワークで、MVT(Model Veiw Template)モデルによって作られています。インストール、開発環境、hello worldまでをまとめています。

### 2.1 インストール
開発環境を有効化し、pipとsetuptoolsコマンドを最新盤にアップデートします。次に、Django、djangorestframeworkをインストールします。
```bash
pip install -U pip setuptools
pip install django djangorestframework
```

### 2.2 開発環境
#### 2.2.1 構成
Djangoの開発環境の構成です。Djangoは、１つのプロジェクトから各アプリケーションが紐づいている形で構成されています。プロジェクトとは、webのアプリケーション全体を指し、一つのwebサイトがあるとうイメージです。アプリケーションは、プロジェクト内の特定の機能を担当するコンポーネントになります。webページをクリックして、別のページに移動したとき、別のアプリケーションが実行されます。アプリケーションは、それぞれ独立して扱うことができます。

![Django (3)-ページ36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176158/bb445f9b-ff1d-fc95-be42-8e34c0acd671.jpeg)
#### 2.2.2 アプリケーションアーキテクチャ
Djangoのアプリケーションは、MVT(Model Veiw Template)モデルによって形成されています。Model,Veiw,Templeteを分離し、それぞれ独立して扱うことで、コードの再利用やメンテナンスし易くなります。下記は、アーキテクチャの概念図です。

![DjangoMVT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176158/4eaef669-fcb4-6651-8dd7-dcaca1ef47c7.png)

URLとして、サイトのページを表示されるとき、ビュー(View)では、ユーザーからのリクエストを受け取り、必要なモデル(Model)を呼び出してデータを取得し、テンプレート(Template)にデータを渡してレスポンスを受け取ります。MVTの役割は、下記のように分担されています。
| 構成 | 説明 |
|:-:|:-:|
| Model（モデル）|  モデルは、データベースの構造を定義し、データの保存、検索、変更、削除などの操作を行います。| 
| View（ビュー）|  ビューは、ユーザーからのリクエストを受け取り、必要なモデルを呼び出してデータを取得し、テンプレートにデータを渡してレスポンスを受け取り、URLへ表示する処理を担います。| 
|Template（テンプレート）| テンプレートは、画面の土台となる表示の部分を担い、ビューから渡されたデータを適切な形式で表示します。|

### 3.1 Hello World
開発環境の概要を踏まえ、実際にプロジェクト、アプリケーションを作成し、Hello worldを出力するプログラムを作成してみます。

#### 3.1.1 開発環境の有効化
最初に、1.1で作成した開発環境を有効化させます。
```bash
# source 任意名/bin/activate
source djangoenv/bin/activate
```

#### 3.1.2 プロジェクトの作成

プロジェクトの作成をします。今回は、hello_world_projectにしました。
```bash
# プロジェクトの作成
#django-admin startproject 任意名
django-admin startproject hello_world_project
```
<details><summary>作成したプロジェクトのファイルとディレクトリ構成です。</summary>

```bash
├── hello_world_project
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
```
##### ファイルの説明
+ __init__.py 空のファイルで、 Python にこのディレクトリを Python パッケージとみなすように指示します。
+ asgi.py  は新しい非同期標準 ASGI のエントリポイントです。
+ settings.py はプロジェクトのデフォルト設定を含んでいます。
+ urls.py はプロジェクトの URL 宣言を含みます。
+ wsgi.py は WSGI Web サーバのエントリポイントで、古い同期標準です。Django は ASGI と WSGI の両方をサポートしています。
+ manage.py は Dango プロジェクトとやりとりするためのコマンドラインユーティリティです。
</details>

#### 3.1.3 アプリケーションの作成
アプリケーションを作成します。helloworldappとしました。
```bash
#python manage.py startapp 任意名
python manage.py startapp helloworldapp
```

<details><summary>アプリケーション作成するとディレクトリとファイルが追加されます。</summary>

```bash
.
├── hello_world_project
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-310.pyc
│   │   └── settings.cpython-310.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── helloworldapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py
```
</details>

#### 3.1.4 プロジェクトファイルの編集
アプリケーションの作成後、いくつかのファイルを編集していきます。最初にプロジェクトファイル側の編集を行います。

```hello_world_project/settings.py```にhelloworldappを追加します。hello_world_projectから作成したアプリの存在を知ることができるようにします。

```diff_python
ISTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
-
+   'helloworldapp',
]
```

```hello_world_project/settings.py```にindex.htmlを読みだし、Hello Worldを表示させるための設定をします。
```diff_python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
-       'DIRS': [],
+       'DIRS': [BASE_DIR, 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```
```hello_world_project/urls.py```からアプリケーションを実行させるための設定をします。
```diff_python
from django.contrib import admin
- from django.urls import path
+ from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
+   path('', include('helloworldapp.urls')),
]
```

#### 3.1.5 アプリケーションの編集
アプリケーションが実行されたときの表示側の動作を設定します。```helloworldapp/views.py```でView側の関数を定義します。今回は、index.htmlを読みだす設定を定義しています。

```diff_python
from django.shortcuts import render

+ def helloworldfunction(request):
+    return render(request, 'index.html')
```

次に、```helloworldapp/urls.py```ファイルを新規作成し、view側の動作を読みだす設定をします。
ここでは、URLを```https://localhost:8000/hello```と入力すれば、helloworldappが実行するようにしています。
```helloworldapp/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('hello/', views.helloworldfunction),
]
```
#### 3.1.6 テンプレートの作成
```templates/index.html```としてディレクトリとファイルを作成します。

```templates/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
```

<details><summary>最終的なファイル構成です。</summary>

```bash
.
├── hello_world_project
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-310.pyc
│   │   └── settings.cpython-310.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── helloworldapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
└── templates
    └── index.html
```
</details>

### 3.1.7 サーバーの起動
ローカルサーバーを起動します。ブラウザを起動し、```http://localhost:8000/hello```にアクセスします。hello worldと表示されていれば、完成です。
```bash
python manage.py runserver
```

#### 4.参考link
参考にしたlinkです。
[DjangoでHello Worldアプリの作成手順](https://qiita.com/frosty/items/e545c6258672d88b7707)
[How To Create A 'Hello, World!' Application With Django](https://djangocentral.com/create-a-hello-world-django-application/)