Django使い始めの備忘録(Webアプリ実装)

## 概要
色々あってPython/Djangoを使ってWebアプリを作ることになりそうなので、
環境構築等の自分用備忘録。

## 開発環境
OS : Windows 11
Python : 3.10.7
Django : 4.1.1
ブラウザ : Google Chrome 105.0.5195.127

## Djangoセットアップ
### Pythonをインストールしていない場合
予めPythonをインストールしてください。
インストーラーは[こちら](https://www.python.org/)のDownloadsから
Python (バージョン)のボタンをクリックしてダウンロードしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/d6ef9efb-fcdc-7fab-a797-7262a16ad3f1.png)

インストーラーを起動すると下記のウィンドウが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/2484e434-0fce-5eb8-56be-137fb81bdb79.png)

以下のチェックを付けてInstall Nowをクリックします。
* Install launcher for all users(recommended)
* Add Python 3.10 to PATH

インストールが完了すると以下のウィンドウが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/11eca7d8-3250-7a1f-c99f-01b6e658ff58.png)

Disable path length limitをクリックすると
以下のウィンドウのようにSetup was successfulが表示され、
Pythonのセットアップが完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/2dbfc80e-8e27-0e95-49e1-77b216359b9e.png)

Pythonがインストールされているか、確認します。
PowerShellを起動して、次のコマンドを実行します。
``` py```

実行結果でインストールしたバージョンが以下のように表示されていれば
インストール完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/64c408a0-ec9d-1e4e-04be-29dd42f0a382.png)

## Djangoインストール
[Django公式ドキュメント](https://docs.djangoproject.com/ja/4.1/intro/install/)で
インストール手順を確認できますが、
こちらにも説明を書いておきます。

[オフィシャルリリースをインストールする](https://docs.djangoproject.com/ja/4.1/topics/install/#installing-official-release/)の
リンク先の説明の通りに実行します。

``` py -m pip install Django```

どのバージョンをインストールできているかは以下のコマンドで確認できます。
``` py -m django --version```

## 実装
### プロジェクト作成
コードを保管するディレクトリで以下のコマンドを実行します。
``` django-admin startproject (プロジェクト名)```

プロジェクト名をsampleとした場合、
sampleフォルダが作成されています。

実行時にエラーとなった場合、以下のコマンドを実行します。
``` py -m django startproject (プロジェクト名)```

作成されたフォルダ内の構成は以下のようになっています。
```py:フォルダ構成
sample/
    manage.py
    sample/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py
```

### 開発用サーバー起動確認
サーバー起動時にはsampleフォルダ内、
manage.pyが配置されているフォルダで
以下のコマンドを**管理者権限**で実行します。
管理者権限でない場合、サーバーが起動しない場合があります。
この後もDjangoのドキュメントに沿って実装していきますが、
コマンド実行は管理者権限で実行してください。
``` py manage.py runserver```

起動に成功した場合、
http://127.0.0.1:8000
にブラウザでアクセスすると以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/a7fbd9ca-e4c6-b179-b742-c2aa229e9343.png)

### アプリケーションのスケルトン作成
[Djangoのドキュメントその1](https://docs.djangoproject.com/ja/4.1/intro/tutorial01/#creating-the-polls-app)に沿って
以下のコマンドでアプリケーションのスケルトンを作成します。
``` py manage.py startapp polls```

上記のドキュメントに沿ってそのまま実装、
http://127.0.0.1:8000/polls
にブラウザでアクセスすると以下のように表示されます。
スケルトンができて、Hello Worldはできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/5ac277e9-cd14-71ec-8672-d20b35210137.png)

### DBテーブルのmigrate
[Djangoのドキュメントその2](https://docs.djangoproject.com/ja/4.1/intro/tutorial02/)を基に
モデルクラスを作成、migrateしてデータ追加した結果を
以下のように管理画面から確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/434321a7-1353-3841-12bc-6f76a8c25e31.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/45cfed5b-056f-f16b-b469-1ca37273cd8f.png)

### 実装してみる
[Djangoのドキュメントその3](https://docs.djangoproject.com/ja/4.1/intro/tutorial03/)と[Djangoのドキュメントその4](https://docs.djangoproject.com/ja/4.1/intro/tutorial04/)を基に
実装してみました。

以下、一覧画面と詳細画面です。
ドキュメント通りに実装すると簡素ですが、動かせてはいます。

index.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/2e41ba72-6935-2940-65b0-bd975ea7df21.png)

detail.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/e2658078-3477-74a6-3287-9acd6efd7a46.png)

results.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533981/dadd2479-cfb2-661c-5eb1-5bb5f9ecc23a.png)


## 最後に
学習コストはどれくらいだろうと少し身構えていましたが、
チュートリアルの1～4までで半日程度だったかと思います。
最後まで読んでいただき、ありがとうございました。