Zenn
🐷

Django + htmxでHello World

2021/11/03に公開
django
htmx
tech

今日は、htmxを使ってみの続き、Django＋htmxでHello Worldをやります。

１．DjangoのHelloを作成します。

目標は、Djangoだけでテンプレートを使っって、Helloの文字列を表示させることです。

ProjectとAppの作成

> django-admin startproject hello_project

> cd hello_project 

> python manager.py startapp hello

appの追加とtemplatesフォルダの指定(settings.py)

  • hello_project/hello_project/setting.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 追加
    'hello',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 変更
        '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のURLを追加

  • hello_project/hello_project/urls.pyの変更
urlpatterns = [
    path('admin/', admin.site.urls),
    # 追加
    path('', include('hello.urls')),
]
  • hello_project/hello/urls.pyの新規作成
urlpatterns = [
    path('hello', views.hello),
]

helloのビューの作成

  • hello_project/hello/views.py
def hello(request):
    # ここでは、文字列をそのまま返すではなく、テンプレートを使います
    # return HttpResponse('Hello World')
    return render(request, 'hello.html')

helloのテンプレートの作成

  • hello_project/hello/templates/hello.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Hello</title>
  </head>
  <body>
      Hello
  </body>
</html>

動作確認

python manage.py runserver

お！Hello!!と表示されましたね。

２．htmxでWorldを加える

目標は、画面にHelloというボタンを追加し、となりに置換用のspanを設置し、ボタン押してから、サーバーから帰ってきたWorldの文字列で、spanを置換し、表示させることです。画面の全体の再表示はしないことです。

hello.htmlにhtmxのライブラリを追加し、Helloをコメントアウトし、Helloボタンとworldのspanを追加

  • hello_project/hello/templates/hello.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <!--追加-->
    <script src="https://unpkg.com/htmx.org@1.6.0"></script>
  </head>
  <body>
    <!--コメントアウト-->	  
    <!--Hello-->

    <!--追加-->
    <!--AJAXを呼び出す-->
    <button
      hx-get="/world"
      hx-trigger="click"
      hx-target="#world"
      hx-swap="outerHTML"
    >
      Hello
    </button>
    <!--置換用spanです-->
    <span id="world"><span/>
  </body>
</html>

worldのURLを追加

  • hello_project/hello/urls.py
urlpatterns = [
    path('hello', views.hello),
    # 追加
    path('world', views.world),
]

worldのビューを追加

  • hello_project/hello/view.py
def world(request):
    context = {'message': 'World'}
    return render(request, 'world.html', context)

worldのテンプレートを作成

  • hello_project/hello/templates/world.html

ここはHTMLページの全部ではなく、画面の一部を置換用ですので、置換用の部分のみです。
コンポーネントに近い感じです。

<span id="world">{{ message }}</span>

動作確認

python manage.py runserver

  • まず、初期表示

  • そして、Helloボタンを押して

お！！Worldが表示されましたね。

Djangoでhtmxを使うのも簡単ですね。

今日はこれで終わりです。

Discussion