今回の記事はTypeScriptを勉強している際にhtmlに実際に文字を表示させる方法は理解できたので（詳しくはこちら参照）、Djangoプロジェクトでも同じようにTypeScriptでhtml内に文字を表示できるか試してみた記事になります。
ではメイン記事に進みます。
TypeScript＋Djangoの方針
・Djangoプロジェクトの作成を行う
・各種TypeScriptに必要なファイルの作成を行う
・コンパイルを行い指定のフォルダにjsファイルを格納
最終的なtree構造は下記になります。
.
├── te
│ ├── ap
│ │ ├── __init__.py
│ │ ├── __pycache__
│ │ │ ├── __init__.cpython-37.pyc
│ │ │ ├── admin.cpython-37.pyc
│ │ │ ├── models.cpython-37.pyc
│ │ │ ├── urls.cpython-37.pyc
│ │ │ └── views.cpython-37.pyc
│ │ ├── admin.py
│ │ ├── apps.py
│ │ ├── migrations
│ │ │ ├── __init__.py
│ │ │ └── __pycache__
│ │ │ └── __init__.cpython-37.pyc
│ │ ├── models.py
│ │ ├── src
│ │ │ └── index.ts
│ │ ├── static
│ │ │ └── ap
│ │ │ └── index.js
│ │ ├── tests.py
│ │ ├── urls.py
│ │ └── views.py
│ ├── db.sqlite3
│ ├── manage.py
│ ├── te
│ │ ├── __init__.py
│ │ ├── __pycache__
│ │ │ ├── __init__.cpython-37.pyc
│ │ │ ├── settings.cpython-37.pyc
│ │ │ ├── urls.cpython-37.pyc
│ │ │ └── wsgi.cpython-37.pyc
│ │ ├── asgi.py
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ └── templates
│ └── index.html
└── tsconfig.jsonDjangoプロジェクトの作成を行う
では早速！今回は仮想環境等は作っていないですので悪しからず。
下記tree構成までフォルダ等を作ってみましょう。
django-admin startproject te
cd te
python manage.py startapp ap
mkdir -p ap/static/ap
mkdir -p ap/src
touch templates/index.htmlsrcフォルダの中にtsファイルは入れる予定です。
Djangoの必要な階層構造を作成できたらファイルの中身を編集していきましょう。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'ap',
]
#####################
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(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',
],
},
},
]from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('ap.urls')),
]from django.urls import path
from . import views
urlpatterns = [
path('', views.index,name="index"),
]from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'index.html')<html>
<head>
<meta charset="utf-8" />
<title></title>
{% load static %}
<script src="{% static "ap/index.js" %}"></script>
</head>
<body onload="TextOut();">
<h1>テスト</h1>
<div id="output"></div>
</body>
</html>上記のhtml内のidのoutputにstaticフォルダのindex.jsから文字を入れる操作を行います。
各種TypeScriptに必要なファイルの作成やインストールを行う
cd ..
tsc --init.
├── te ←Djangoプロジェクト
└── tsconfig.json ←作成したファイル
作成されたtsconfig.jsonの出力先に関係のある箇所を修正します。
tsconfig.jsonの中身の大体の説明は別記事にありますので気になるかたはこちらをご参照ください。
ーーーーーーーーーーーーーーーーーーーーーー
"outDir": "./te/ap/static/ap",
ーーーーーーーーーーーーーーーーーーーーーーこのtsconfig.jsonの箇所以外は触らなくて結構です。
このoutDirがコンパイル後の出力先を記述していますのでコンパイル時にこの指定されたフォルダに入ってます。
今回のtsファイルのコードとしては下記にし、htmlに文字を表示させてみます。
型はめんどかったのでanyにしちゃった。
function TextOut() {
var elem: any = document.getElementById("output");
elem.innerHTML = "ようこそ TypeScriptの世界へ。";
}コンパイルを行い指定のフォルダにjsファイルが表示されているかを確認
tscこれでtsファイルがコンパイルされ上記までで指定したフォルダ内に同名のjsファイルが入っているはずです。
ローカルサーバで表示確認
最後にこちらでブラウザでhtmlに反映されているか確認しましょう。
cd te ←Djangoプロジェクトに入る
python manage.py runserver下記のように表示されていればOKです。
実際にWebフレームワークにTypeScriptを導入できたのでこれをさらに大規模なものにしていけばついに業務でも使えるのではないでしょうか。
他にもReact などのjsフレームワークとして使用していくなどまだまだ課題がありますが今回は実戦への一歩になった気がします。
「DjangoでReactを使用する方法」も記事にしているので気になるかたは下記も見てください。
今回の記事は以上です。他にもDjango・TypeScriptの記事を多数記載しているので気になる方は是非参考にしてください。
コメント