【Django】JavaScriptをテンプレートから読み込む方法|PythonによるWebアプリ開発#4-2

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です!

こんな方におすすめ!

Django Frameworkで作成したフロント画面からJavaScriptを読み込む方法が知りたい

目次

【Django】javaScriptの動的オブジェクト表示・テンプレート作成手順

本記事ではDjangoのテンプレートからJavaScriptを読み込む方法について解説します。

前提として上記のフォルダ構成で解説を進めます。

  • static > js > script.jsにJavaScriptを書き込みます。
  • Template > App_Folder_HTML > index.htmlから上記JavaScriptファイルを読み込みます。

【事前準備】Djangoテンプレートを作成する

DjangoのテンプレートからJavaScriptを読み込むに際して、事前にテンプレートを作成する必要があります。

以下の記事を参考にし、上記①〜⑥について事前に対応しておきましょう。

【実践】JavaScriptファイルを作成

staticフォルダ内にjsフォルダを作成し、JavaScriptを記述するためのscript.jsファイルを作成しましょう。

そしてscript.jsにJavaScriptコードを記述しましょう。以下サンプルコードを提示します。

// JavaScriptのサンプルコード

function hello(){
  var input = prompt("Hello World");
}

hello()

【実践】テンプレートファイルからJavaScriptを読込

Templateフォルダ内にApp_Folder_HTMLフォルダを作成し、HTMLを記述するためのindex.htmlファイルを作成しましょう。そして、次のようなコードを記述します。

<!DOCTYPE html>
{% load static %}

<html lang="ja" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>Django Page</title>

     <!-- ここにJavaScriptを読み込むコード -->
     <script src="{% static 'js/script.js' %}"></script>
   </head>
   
   <body>
     <h1> Hello World</h1>
   </body>
</html>

JavaScriptファイル(script.js)は、テンプレートタグを使用することで読み込むできるようになります。

<!-- ここにJavaScriptを読み込むコード -->
<script src="{% static 'js/script.js' %}"></script>

最後に動作確認を行い、JavaScriptが実行可能か確認してみましょう。

【参考】Djangoの解説記事一覧

最後までご覧いただきありがとうございました。当サイトではDjangoフレームワークを用いた解説記事を多数取り扱っております。次のように体系的に整理しておりますため学習にお役立て下さい。

Djangoおすすめ学習教材

Djangoを学習したい方向けに厳選したおすすめ教材も紹介しています。是非ご覧下さい。

Django Framework活用のWebアプリ開発記事

#記事タイトルレベル
1【Django】開発環境構築|プロジェクト・アプリ開発のチュートリアル★☆☆
2【Django】MVC・MVTアーキテクチャ・モデル設計思考★☆☆
3【Django】URLマッピングの設定方法(urls.py)★☆☆
4-1【Django】テンプレート(Template)の作成・HTML/CSSファイルの取り扱い★☆☆
4-2【Django】JavaScriptをテンプレートから読み込む★☆☆
5【Django】テンプレートタグ概要|フロント画面設計★☆☆
6【Django】モデルの作成・操作(models.py)・データベース操作★☆☆
7【Django】スーパーユーザの作成・管理画面からデータベース操作(admin.py)★☆☆
8【Django】お問い合わせフォーム(forms.py)作成方法★☆☆
9【Django】モデル連携のお問い合わせフォーム作成方法(ModelForm)★☆☆
10【Django】認証画面(1) アカウント新規登録画面の作成方法★★☆
11【Django】認証画面(2) ログイン画面の作成方法★★☆
12【Django】クラスベースビュー(Class-based View)の操作方法★☆☆
13【Django】テンプレートビュー(TemplateView)の操作方法★☆☆
14【Django】リストビュー(ListView)の操作方法★★☆
15【Django】詳細ビュー(DetailView)の操作方法★★☆
16【Django】ViewクラスでデータベースのCRUD操作(作成・読込・更新・削除)★★☆
応用【Django】Stripe APIを活用したオンライン決済機能・商品購入画面の実装★★★

Django REST framework活用のWeb API開発記事

#記事タイトルレベル
1Django REST frameworkを用いてWeb APIを実装★★☆

最後に

この記事が気に入ったら
フォローしてね!

本記事をシェア!
目次