今回はTypeScriptを使って、シンプルなチャットアプリを作成する方法を紹介します。TypeScriptはJavaScriptのスーパーセットで、型安全性があるため、バグを減らしやすい言語です。
準備するもの
まずは、チャットアプリを作るために必要なものを揃えましょう。
1. Node.jsのインストール
Node.jsは、JavaScriptをサーバーサイドで実行するためのプラットフォームです。公式サイトからインストールできます。
2. テキストエディタ
コードを書くために、好きなテキストエディタを用意しましょう。Visual Studio CodeやAtomなどがおすすめです。
プロジェクトのセットアップ
次は、プロジェクトを作成します。
1. 新しいフォルダーを作成
任意の場所に新しいフォルダーを作り、その中に移動します。
2. Node.jsのプロジェクトを初期化
以下のコマンドを実行して、Node.jsプロジェクトを初期化します。
npm init -y3. TypeScriptと関連パッケージをインストール
TypeScriptを使うために、以下のコマンドで必要なパッケージをインストールします。
npm install typescript ts-node --save-dev4. TypeScriptの設定ファイルを作成
次に、TypeScriptの設定ファイルを作成します。以下のコマンドを実行します。
npx tsc --init簡単なチャットアプリの実装
それでは、簡単なチャットアプリを作るためのコードを書いてみましょう。
1. サーバーの作成
以下のコードを新しいファイル「server.ts」に書きます。
import express from 'express';
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, () => {
console.log(`サーバーが http://localhost:${port} で起動しました`);
});2. HTMLファイルの作成
次に、チャットのインターフェースを作るために、「index.html」というファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チャットアプリ</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script src="chat.js"></script>
</head>
<body>
<h1>チャットアプリ</h1>
<div id="chat"></div>
<input id="message" type="text">
<button id="send">送信</button>
</body>
</html>3. クライアント側のスクリプトを作成
最後に、クライアント側の動作を制御する「chat.js」というファイルを作成します。
const socket = io();
document.getElementById('send').onclick = () => {
const message = document.getElementById('message').value;
socket.emit('chat message', message);
document.getElementById('message').value = '';
};
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('chat').appendChild(item);
});アプリを実行する
すべての準備ができたら、以下のコマンドでチャットアプリを実行します。
npx ts-node server.tsブラウザを開いて、http://localhost:3000にアクセスしましょう。これでチャットアプリが動いているはずです！
まとめ
今回はTypeScriptを使って、基本的なチャットアプリを作成しました。少しのコードで動作するアプリができるのは面白いですね。これを基に、友達とチャット機能を拡張してみたり、デザインを変えてみたりしてみてください。