【Python】インデックスを指定しよう!テンプレート上での配列の特殊な扱い方を図解でわかりやすくご紹介します【Django】

header14

まず初めに

皆さんこんにちは!
今回はPythonに関する記事の第2弾です。
前回に引き続きDjangoというフレームワークを使用する上で役立つであろう内容を書いていけたらなと思います。

今回のテーマはずばり「テンプレート上での配列の特殊な扱い方」です!
テンプレートとはDjango上でアプリケーションの「templates」フォルダ内に格納されるレイアウト情報が記載されているHTMLファイルの事を指しています。
そのHTMLファイル上で配列を特殊な感じで操作するための記載の方法をご紹介していきたいと思います。

こんな方はぜひ読んでみてくださいね

・Djangoを使用したシステム開発を行う予定・すでに行っている方

・Django上でデータベースデータを扱おうとしている方

基本的な配列の使い方

header14-1

まずは基本の振り返り

まずは基本的な使い方のおさらいです。
まず前提として、view.py側で取得したテーブル情報を「movies」という変数に配列として取得しているとします。
ちなみにview.py側の記載を書いておくと以下のような感じです。

python
//index.htmlというテンプレートにmovies変数を渡す。
class IndexListView(generic.ListView):
    model = Movie
    template_name = 'index.html'

    def get_queryset(self):
        movies = Movie.objects.all()

        return movies

簡単に言うと映画のタイトルの一覧が入っているような配列をイメージしてもらえるとOKです。
これをテンプレートに受け取って何に使うのでしょうか。
一覧ですので、大抵の場合はループ処理をして、配列の要素を順番に表示したりするケースが多いはずです。
その際には以下のような書き方をします。

HTML
{% for movie in movie_list %}
     <p>{{ movie .title }}</p>
{% empty %}
     <p>一覧なし</p>
{% endfor %}

for文で配列から要素を一つずつ抜き出して、「要素名.項目名」の形式で表示することができますね。※ここでいう「movie.title」
以上、基本的な使い方の復習でした。

実際にやってみましょう(モデル作成編)

ここからは実際に手を動かして、上記配列でのループ処理の確認をしていきましょう。
確認には、以下の記事で作成した簡易的なテストプロジェクト「TestApp」を使用していきます。
まだ試せる環境を自身では持っていないという方は、参考にしてぜひ一緒に試してみてくださいね。

header9【初心者必見】Djangoって一体何?実行の手順・理解のコツを図解でわかりやすく解説します♪【Python】

まずはリストに表示させる情報元として、Movie情報のテーブルを作成していきましょう。
Djangoにおいて、テーブルをデータベースに追加したい場合、「models.py」というファイルを変更する必要があります。

make_models-1
①プロジェクトに追加した「testPage」アプリケーションフォルダの中に「models.py」ファイルがデフォルトで配置されています。それを開いて編集していきます。
make_models-2
②上画像赤枠のように、Movieモデルを配置していきます。詳しい記載方法に関してここでは説明を省略しますが、「タイトル・内容・登録日・更新日」という4つの項目をモデルの要素として追加しています。
下記にソースも配置しますので、ご自由に編集してみてください。
models.py
from django.db import models

# Create your models here.
# Movieモデルの追加
class Movie(models.Model):
    """Movie用のモデル"""
    title = models.CharField(verbose_name='タイトル', max_length=40)
    content = models.TextField(verbose_name='内容', blank=True, null=True)
    create_dt = models.DateTimeField(verbose_name='登録日', auto_now_add=True)
    update_dt = models.DateTimeField(verbose_name='更新日', auto_now=True)

    class Meta:
        verbose_name_plural = 'movie'

    def __str__(self):
        return self.title
make_models-3
③models.pyへの更新が完了したところで、次にその内容をデータベースに反映させていきましょう。
プロジェクト内の「manage.py」ファイルがあるディレクトリにて、Command Lineを起動して、上画像のコマンドを実行してください。※データベースに情報を反映させるための「マイグレーションファイル」の作成を行います。
Command Line
python manage.py makemigrations testPage
make_models-4
④実行に成功すると、上画像のようなメッセージが表示されます。もし失敗してしまった場合、画面に表示されるエラー内容を読み解き、焦らず修正して再実行しましょう。
make_models-5
⑤次に作成したマイグレーションファイルをデータベースに実際に適用していきます。上画像のコマンドを実行してください。
Command Line
python manage.py migrate testPage
make_models-6
⑥問題なく実行できると、上画像のようなメッセージが表示されます。

モデルの追加・変更を行う際にはここまでCommand Lineで実行してきたコマンドを繰り返し実行していくことになります。
基本的にペアで実行するものと思ってもらっておいても良いかと思います。

make_models-7
⑦無事にデータベースにモデルの内容が登録できたところで、実際に反映されているかどうかを確認してみましょう。サーバを起動させるコマンドは上記の通りですね。※基礎的なところを再確認したい方は、冒頭でご紹介したDjangoに関する基礎記事をぜひ読んでみてくださいね。
Command Line
python manage.py runserver
make_models-8
⑧確認のためにDjangoが提供する管理ページにアクセスしてみます。ローカル環境で実行している場合、「http://127.0.0.1:8000/admin/」をブラウザで実行することでアクセスできますね。
 上画像は管理ページに実際にアクセスした状態のものなのですが、追加したはずのMovieモデルがどこにも見当たりません。しかしご心配なく。管理ページに反映させるためのちょっとした処理が必要なだけです。
make_models-9
⑨プロジェクトに追加した「testPage」アプリケーションフォルダの中に「admin.py」ファイルがデフォルトで配置されています。これが管理ページにおける設定を行うためのファイルですので、開いて編集していきます。
make_models-10
⑩上画像赤枠のように、管理ページにModels.pyに存在するMovieモデルを反映させるための記載を追加しましょう。
admin.py
from django.contrib import admin
# 管理画面に反映させたいModelのインポート
from .models import Movie

# Register your models here.
# 管理画面にModelの反映を登録
admin.site.register(Movie)
make_models-11
⑪admin.pyへの変更を保存できたら、管理ページをリロードしてみてください。上画像赤枠のように「Movie」という項目が表示されました!無事にデータベースへの反映を確認することができました!
make_models-12
管理ページを使えば、簡単にデータベースへの更新を実行することができます。ここではMovieモデルに対する更新を行ってみましょう。
Add movie」ボタンをクリックすると、上画像のような画面が表示されます。models.pyで定義した項目「タイトル・内容」が表示されていますね。任意の内容を入力して「SAVE」ボタンを押してみてください。※「登録日・更新日」に関しては自動更新項目のため、画面には表示されません。
make_models-13
⑬無事にMovieテーブルに対する情報を登録することができました!
make_models-14
⑭操作に慣れる意味合いもかねて、さらにいくつか追加してみてください。次以降で、その内容をリストに表示させていきます。

実際にやってみましょう(ページ追加編)

モデルの作成ができたので、次にその情報をリスト形式で表示させてみましょう。
リスト形式で表示させるために、専用のページを追加していきます。Djangoにおいて、ページを追加するためには、以下の作業が必要になります。

① テンプレートファイルの追加

② views.pyへの明細追加

③ urls.pyへの明細追加

まずは1つめの「テンプレートファイルの追加」です。ここでは実際にWebページとして表示させるためのHTMLファイルを作成します。

make_list-1
① 「testPage」アプリケーションのフォルダ内に追加した「templates」フォルダの中に「index.html」というファイルを作成します。
make_list-2
②作成した「index.html」ファイル内にWebページの内容を記載します。ここでは非常にシンプルに冒頭で挙げた通り、Movieテーブルの情報をループ処理で表示させています。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルなMovie一覧</title>
</head>
<body>
    <h1>Movieの一覧です</h1>
    {% for movie in movie_list %}
     <p>{{ movie.title }}</p>
    {% empty %}
     <p>一覧なし</p>
    {% endfor %}
</body>
</html>

実際のシステム開発においてはCSSやJavaScriptで修飾が施されたもっと複雑な構成のHTMLファイルであることが大半です。
しかし、どのような構成のHTMLファイルであっても今回試しているようにループ処理でのリスト表示を組み込むことは可能なので、基本が大事ですね。

次に行うのは「views.pyへの明細追加」です。振り返りになりますが、views.pyはurls.pyにおけるルーティングとテンプレートファイルの橋渡しをするための設定ファイルです。どのルーティング設定に対し、どのテンプレートファイルを呼び出すのかを設定していきましょう。

make_list-3
③views.pyを開き上画像のように先ほど追加したindex.htmlを呼び出すための記載を追加します。
views.py
# index.htmlというテンプレートにmovies変数を渡す。
class IndexListView(generic.ListView):
    model = Movie
    template_name = 'index.html'

    def get_queryset(self):
        movies = Movie.objects.all()

        return movies

コードを見ると「generic.ListView」というものを引用していることがわかりますね。djangoにはそれ以外にもWebページのレイアウト構成に役立つ基礎的なViewが用意されています。ページの目的に合わせたViewを引用することで、効率よく開発ができることでしょう。

最後に「urls.pyへの明細追加」を行っていきましょう。

make_list-4
④ここで行うのはルーティングの設定です。どのURLが呼び出された際に、どのviews.pyの設定を呼び出すかを設定しています。上画像の設定によりローカル環境では「http://127.0.0.1:8000/index/」というURLの呼び出しが有効になります。
urls.py
from django.urls import path
from . import views

urlpatterns = [
   # 追加ページ用設定
   path('', views.TestPageView.as_view(), name="testpage"),
   # 一覧ページへのルーティング追加
   path('index/', views.IndexListView.as_view(), name="listpage"),
]

すべての設定が完了しましたので、保存できましたら実際にページを見てみましょう!
ページには先ほどお伝えしたとおり「http://127.0.0.1:8000/index/」のアドレスでブラウザからアクセスできます。
※サーバの起動ができているか確認してくださいね。

make_list-5
⑤上画像が実際に呼び出したページです。非常に簡素なレイアウトではありますが、しっかりとmovieテーブルに登録した内容がすべて表示できていますね。

特定のインデックスを指定して要素を抜き出し

header14-2

知らないと意外とハマるけれど、わかるとシンプル

では次に順番に抜き出すのではなく、特定のインデックス番号の特定の項目だけ表示させたい場合にはどのようにしたら良いでしょうか。
ここでは例として「3番目の要素のtitle項目」を抜き出してみましょう。
答えから書きますと以下のような書き方で実現できます。

HTML
<p>{{ movie_list.2.title }}</p>

「配列.要素のインデックス番号.項目名」といった書き方をします。
3番目なので、インデックス番号表記をすると2となるのでご注意ください。

また、pythonファイル上で配列を扱う場合と違い、インデックス番号を「(2)」のように囲う必要もありません。
カンマ区切りでインデックス番号と項目名を指定するだけでOKです。
機械的に一覧表示するだけでなく、任意の項目の表示方法を知っておけば実装の幅が広がりますよね

実際にやってみましょう

確認のために再び実際に手を動かしていきます。
さきほど作成したindex.pyに上記のように特定の要素を固定表示させるための記載を追加します。

make_kotei-1
①赤枠のように、3番目の明細について、titleとcontentを固定で表示されてみます。
index.py
<p>{{ movie_list.2.title }}</p>
<p>{{ movie_list.2.content }}</p>
make_kotei-2
②変更を保存できたら、再び「http://127.0.0.1:8000/index/」にアクセスしてみましょう。赤枠のようにしっかりと固定で表示させることができました!

まとめ

いかがだったでしょうか?

本日お伝えしたかった内容を簡単にまとめると以下のようになります。

ぜひ何らかの形でお役に立てれば幸いです。

それでは次の記事でまたお会いしましょう♪

本日のまとめ

・配列.要素のインデックス番号.項目名の形式でHTML上で配列の任意の項目を表示できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です