Django+Reactで学ぶプログラミング基礎(16): Djangoチュートリアル(投票アプリその7-2)

##### [前回] [Django+Reactで学ぶプログラミング基礎(15): Djangoチュートリアル(投票アプリその7-1)](https://qiita.com/mingchun_zhao/items/1bf35701c395e69697ad)

## はじめに

[Django公式チュートリアル](https://docs.djangoproject.com/ja/4.0/intro/tutorial01/)、その7-2です。
前回は、管理サイトをカスタマイズしました。
今回は、その続きです。

## Djangoアプリ作成(その7-2): 投票(poll)アプリ

### 今回の内容

- 管理サイトの変更リスト(change list)ページをカスタマイズ
    - 変更リスト(change list)ページとは
        - 全ての質問をリスト表示し、変更するためのページ
    - フィールドによるソート機能
    - フィルター機能
    - 検索機能

### Tips: VS CodeでPythonのvenv環境をデフォルトでアクティベートしたい
- VS Codeを起動
    - F1キーを押し、コマンドパレットを開く
        - `Python: インタープリター`と入力/選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/0b1687f0-334a-96d5-3847-33bf6614c0e5.png)

- 投票アプリで使用したいPython仮想環境を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/4822d850-278f-999c-d654-3366c643a013.png)

- ターミナルを起動
    - すると、自動で`activate`コマンドが実行され、仮想環境に入る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/6733fa01-91c8-0965-aa80-bf98798680ed.png)

### 管理サイトの変更リストページをカスタマイズ

- VS Codeからサーバーを起動
```
(venv) C:\kanban\pollsite>python manage.py runserver
```

- ブラウザで、管理サイトの変更リストページにアクセス
    - `http://127.0.0.1:8000/admin/polls/question/`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/1ae67e4b-ba8e-9d66-c396-6de2c3443ccc.png)

#### `Question`オブジェクトの各フィールドを表示する
- `list_display`オプションを使用
    - カラム表示したいフィールドの名前をタプルにして指定
```polls/admin.py
class QuestionAdmin(admin.ModelAdmin):
    # ...
    list_display = ('question_text', 'pub_date', 'was_published_recently')
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/cf5b65fd-5e12-f2d8-b48b-8b21fcb59f70.png)

※ ソース修正後には、保存を忘れず(Ctrl+S)。

- ブラウザで、変更リストページを更新(F5)
    - `http://127.0.0.1:8000/admin/polls/question/`
    - フィールドが追加表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/586885dd-498c-2916-ede4-aaacdd17eb35.png)

#### フィールド値の並べ替え
- `DATE PUBLISHED`ヘッダーをクリックすると、エントリを並べ替えてくれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/ec02046f-9dfe-f70d-3393-2280460a7731.png)

- `was_published_recently`ヘッダーをクリック、あれー、並べ替えボタンが現れない
    - 改善: `display()`デコレータを使用
```polls/models.py
from django.contrib import admin

class Question(models.Model):
    # ...
    @admin.display(
        boolean=True,
        ordering='pub_date',
        description='Published recently?',
    )
    def was_published_recently(self):
        now = timezone.now()
        return now - datetime.timedelta(days=1) <= self.pub_date <= now
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/7fb5e786-0083-017e-340b-095e211e35dd.png)

- 並べ替えボタンが表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/7f06a32e-025a-3087-c1c7-5a5ea2513498.png)

#### フィルター(Filter)サイドバーを作成

- 質問変更リストページに`list_filter`を追加
    - フィルタの種類は、対象フィールドの種類に応じて変化
    - `QuestionAdmin`クラスに、次の行を追加
        - ※ ファイル保存を忘れず(Ctrl+S)
```polls/admin.py
list_filter = ['pub_date']
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/32014928-16c8-2bdb-5b37-21f3beca3bba.png)

- フィルターサイドバーが表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/2bab778b-2fb8-3648-4033-8f8a6de2e7c3.png)

#### 検索機能を追加

- 変更リストの上部に検索ボックスを作成
    - ユーザが検索語を入力すると、`question_text`フィールドを検索してくれる
    - 内部では、`LIKE`クエリを使って検索するため、データベースに負荷がかかる
```polls/admin.py
search_fields = ['question_text']
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/3f8af746-2ac5-f134-b17a-99562dd85081.png)

- 検索窓が表示され、検索可能になりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/a445f2af-e710-fd77-97ac-9825b4d24cfa.png)

- 更新リストのページ分割機能
    - デフォルトで、ページあたり100個の要素を表示

- 更新リストページの以下機能は協調して動作
    - ページ分割
    - 検索ボックス
    - フィルター
    - 日付による階層化
    - カラムヘッダーを使った並べ替え

## おわりに

管理サイトで、更新リストページをカスタマイズしました。
検索やフィルター機能を一瞬で実装できるなんて、Djangoすごい!
次回も続きます。お楽しみに。

##### [次回] [Django+Reactで学ぶプログラミング基礎(17): Djangoチュートリアル(投票アプリその7-3)](https://qiita.com/mingchun_zhao/items/a74e74bc37575464f6f5)