今回は、TypeScriptを使ってリアルタイムデータビジュアライゼーションを実装する方法を解説します。
TypeScriptとは？
TypeScriptはJavaScriptに型を追加したプログラミング言語です。これによって、コードのエラーを早期に発見できたり、大規模なプロジェクトでも管理しやすくなります。JavaScriptとの互換性があるので、既存のJavaScriptコードと一緒に使うこともできます。
必要なツールを準備しよう
まずは、TypeScriptを使うための環境を整えます。以下のツールをインストールしてください。
Node.jsのインストール
Node.jsはJavaScriptのランタイム環境です。これをインストールすることで、TypeScriptを実行することができるようになります。公式サイトからお使いのOSに合ったインストーラーをダウンロードして、インストールしてください。
TypeScriptのインストール
Node.jsがインストールできたら、次にTypeScriptをインストールします。コマンドラインを開いて、以下のコマンドを入力してください。
npm install -g typescriptWebサーバーのセットアップ
リアルタイムのデータを表示するには、Webサーバーが必要です。簡単なサーバーを立てるために、`http-server`を使います。同様に、以下のコマンドでインストールします。
npm install -g http-serverTypeScriptプロジェクトの作成
次にプロジェクトフォルダを作成して、TypeScriptの設定を行います。コマンドラインで以下の手順を実行してください。
プロジェクトフォルダの作成
新しいフォルダを作成し、その中に移動します。
mkdir ts-data-visualization
cd ts-data-visualizationTypeScriptの初期化
プロジェクトの初期化を行うために、以下のコマンドを実行します。
tsc --initこれで、`tsconfig.json`ファイルが作成されます。このファイルにはTypeScriptの設定が含まれています。
リアルタイムデータの表示
リアルタイムデータを表示するには、WebSocketを使います。WebSocketは、サーバーとクライアント間の双方向通信を可能にする技術です。
簡単なWebSocketサーバーの作成
まずサーバーを用意します。以下のコードを`srv.js`ファイルに保存します。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
setInterval(() => {
const data = Math.random(); // 0から1のランダムなデータ
ws.send(JSON.stringify({ value: data }));
}, 1000);
});サーバーを立ち上げるには、以下のコマンドを実行します。
node srv.jsクライアントサイドの実装
次に、クライアント側のTypeScriptコードを書きます。以下を`index.ts`に保存します。
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
const valueDisplay = document.getElementById('value');
if (valueDisplay) {
valueDisplay.innerText = `リアルタイムデータ: ${data.value}`;
}
};HTMLの作成
最後に、表示するための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>リアルタイムデータビジュアライゼーション</title>
<script src="index.js"></script>
</head>
<body>
<h1>リアルタイムデータの表示</h1>
<div id="value"></div>
</body>
</html>これで準備は完了です。
まとめ
TypeScriptを使ってリアルタイムデータビジュアライゼーションを実装する方法を学びました。これからは、さまざまなデータを使って更に面白いビジュアライゼーションに挑戦してみてください。