Djangoでフロント周りを整えてみた

Pythonで作っているwebアプリでそろそろフロント周りも動くことになりそうだったので
Djyangoを使って見える環境を整えてみました

##  作業環境
MacBookAir (M1)

Python ver:3.10.8
Django ver:4.1.7

### 前提
Pythonはもちろん入っている、Djangoも入っているのが前提。

確認方法はこちら
```
// Pythonのバージョン確認
python --version
Python 3.10.8

// Djangoのバージョン確認
python
>>> import django
>>> django.get_version()
'4.1.7'
>>> exit()
```

Djangoが入っていなかったら`pip install django`でインストール


## Djangoの制作環境を作る

開発元のディレクトリを用意します。
```
django-admin startproject ここに作りたいPJのディレクトリ名
```
今回はhogeと言う名前で作るので`django-admin startproject hoge`で実行。

ディレクトリと諸々のファイルが生成されるはず。
`cd hoge`で作成したディレクトリの中に移動します。

```
cd hoge
python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
March 22, 2023 - 08:03:56
Django version 4.1.7, using settings 'hoge.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
```

`python manage.py runserver`を実行すると
ズララッと↑のようなのが出てきて`http://127.0.0.1:8000/`にアクセスするとローカル環境が確認できます。

実行中に`"GET /favicon.ico HTTP/1.1" 404 2110`などがターミナルに出てくるけれどファビコンを格納すれば消える。


## 設定まわり
### settings.py
### 1.言語設定を日本に変更
```diff_python
- LANGUAGE_CODE = 'en-us'
+ LANGUAGE_CODE = 'ja'

- TIME_ZONE = 'UTC'
+ TIME_ZONE = 'Asia/Tokyo'
```

### 2.templateを使う場合はこっちも設定

■やること
1. templateとなるhtmlを格納するディレクトリ`hoge/template/`を追加。
1. cssやjsなどのAssetsを格納するディレクトリ`hoge/static/`を追加。
1. pythonに以下を記載 

```diff_python
from pathlib import Path
+ import os

~~ 省略 ~~

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
+           os.path.join(BASE_DIR, 'frontend/dist'),
        ],
        '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',
            ],
        },
    },
]

+ STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "frontend/static"),
+ ]
```
DIRSにベースとなるテンプレートのパスを記載。（htmlの表示設定）
STATICFILES_DIRSにはテンプレートとは別に外部で読み込むcss/js/imagesなどを格納しているディレクトリを記載。


BASE_DIRはDjangoを実行する際の`manage.py`がある場所（一番上の階層）なので変更はしない方が無難。


## 新しいページを表示する
templateを追加したので新しいページを表示させます。

### index.htmlを準備
`hoge/frontend/dist/index.html`を作成。

現段階はh1だけ表示できれば良いのでcssなどは特に設置しません。
headやbodyなど記載したものだけを準備。

### env.pyを準備
次にtemplateを表示させるための設定を書いたpythonファイルを用意します。

`hoge/hoge/env.py`を作成。
今回はとりあえずenvと言う名前にしました。

```python:env.py
from django.shortcuts import render

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

templateを呼び出すため、render関数を使います。
render関数は`django.shortcuts`を用いないと使えないので注意。

templateディレクトリに格納しているindex.htmlを設置します。


## urls.pyでパスを新規ページに向ける

```diff_python
from django.contrib import admin
from django.urls import path
+ from . import env

urlpatterns = [
    path('admin/', admin.site.urls),
+   path('top/', env.top, name='top'),
]
```
元々記載のある`admin/`がデフォルトで表示されているページです。

先ほど作ったenv.pyを読み込ませ
env.pyで呼び出したhtmlファイルの変数を追記します。

```
path('top/', env.top, name='top'),
```
左から
- 表示したいURLのディレクトリを記載。
今回は`http://127.0.0.1:8000/top/`にアクセスするとindex.htmlの内容を表示させています。

- env.pyのtop（index.htmlを呼び出すために定義した変数）
- nameは....特に気にせずわかりやすいものを

保存をしたら再度`python manage.py runserver`実行後に、指定したパスのURLにアクセスすると新規ファイルが読み込まれているかと思います。


## cssやjs、画像を読み込ませる

この調子でcssやjsを追加していきます。

```index.html
<!DOCTYPE html>
<html lang="jp">
<head>
  <title>Hondana</title>
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <h1>Top</h1>
  <div class="img">
    <img src="/static/images/test.png" alt="test">
  </div>
  <script src="/static/js/app.js"></script>
</body>
</html>
```
html側にstyleやscriptタグで追加〜〜しても読み込みはされません...
Django環境で外部ファイルを読み込むためには以下のように設定しないといけない。


```diff_html
<!DOCTYPE html>
+ {% load static %}
<html lang="jp">
<head>
  <title>Hondana</title>
- <link rel="stylesheet" href="/static/css/style.css">
+ <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
  <h1>Top</h1>
  <div class="img">
    <img src="/static/images/test.png" alt="test">
  </div>
- <script src="/static/js/app.js"></script>
+ <script src="{% static 'js/app.js' %}"></script>
</body>
</html>
```

`{% load static %}`をhtmlタグの上に追加します。
ここに追加しておけば、cssもjsも画像も外部から読み込めます。

cssやjsのディレクトリを`{% static 'ファイルパス' %}`で追加します。
ここでのstaticはsetting.pyで設定したディレクトリになります。

パスも設定したディレクトリからになるので注意。

`python manage.py runserver`を実行したままであれば
設定したcssやjs、画像などが表示されます。



## これでDjangoで作るアプリのフロント表示はOKだ!
Django初めてなので調べながらでしたが、あまり時間かからずに作れました。
ちょっとの開発ならnode.jsでモチャモチャ作るより素早く作成→ブラウザで確認できるんじゃないかなって思いました🙄