準備
まず、user-infoフォルダを作成しました。そしてコマンドよりnpmプロジェクトを初期化します。これにより、package.jsonファイルが作成されます。
npm init -y
下記、コマンドよりプロジェクトにTypeScriptをローカルインストールします。するとpackage-lock.jsonが作成されます。
npm install typescript --save-dev
下記、コマンドによりtsconfig.jsonファイルを作成して、TypeScriptコンパイラの設定を行います。
npx tsc --init
ユーザーの情報を管理する簡単なアプリ
まず、HTMLファイルを作成します。ここでは、index.htmlというファイル名を使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Info</title>
</head>
<body>
<div id="user-info"></div>
<script src="app.js"></script>
</body>
</html>
次に、TypeScriptファイルを作成します。ここでは、app.tsというファイル名を使用します。
interface User {
name: string;
age: number;
email: string;
}
const user: User = {
name: "John Doe",
age: 30,
email: "john.doe@example.com"
};
function displayUserInfo(user: User): void {
const userInfoDiv = document.getElementById('user-info');
if (userInfoDiv) {
userInfoDiv.innerHTML = `
<h1>User Information</h1>
<p><strong>Name:</strong> ${user.name}</p>
<p><strong>Age:</strong> ${user.age}</p>
<p><strong>Email:</strong> ${user.email}</p>
`;
}
}
window.onload = () => {
displayUserInfo(user);
};
解説
ここでは、Userインターフェースを定義しています。Userインターフェースは3つのプロパティを持っています。
name: ユーザーの名前（文字列型）age: ユーザーの年齢（数値型）email: ユーザーのメールアドレス（文字列型）
インターフェースを使うことで、特定のオブジェクトがどのような構造を持つべきかを明確にすることができます。
ここでは、Userインターフェースに従ってuserオブジェクトを作成しています。このオブジェクトは、name、age、およびemailプロパティを持ちます。
function displayUserInfo(user: User): void {
const userInfoDiv = document.getElementById('user-info');
if (userInfoDiv) {
userInfoDiv.innerHTML = `
<h1>User Information</h1>
<p><strong>Name:</strong> ${user.name}</p>
<p><strong>Age:</strong> ${user.age}</p>
<p><strong>Email:</strong> ${user.email}</p>
`;
}
}
この関数displayUserInfoは、ユーザー情報をHTML要素に表示するためのものです。
user: Userという引数を受け取り、この引数がUserインターフェースに準拠していることを保証します。document.getElementById('user-info')を使用して、idがuser-infoのHTML要素を取得します。- その要素が存在する場合、
innerHTMLプロパティを使ってユーザー情報を設定します。これにより、HTMLの<div id="user-info">要素の中に、ユーザーの名前、年齢、メールアドレスが表示されるようになります。
ウィンドウのロード時に関数を呼び出す
window.onload = () => {
displayUserInfo(user);
};
ここでは、window.onloadイベントハンドラーを設定しています。ページが完全に読み込まれたときに、このイベントが発生します。ページがロードされると、displayUserInfo関数が呼び出され、先に定義したuserオブジェクトの情報が表示されます。
下記命令をコマンドより行い、app.tsファイルをコンパイルしてJavaScriptファイルに変換します。
npx tsc
app.jsが作成されました。
HTMLファイルをブラウザで開く
index.htmlファイルをブラウザで開くと、ユーザー情報が表示されます。
