目標
本内容では，TypeScriptを用いたフロンドエンドアプリケーション開発の基礎学習習得を目標とする．そのために，ユーザがテキスト入力フィールドおよびボタンを介して入力した情報を取得し，将来的にその情報を画面下部に表示する機能の実装を目指す．
作業記録
使用した環境
今回導入した Node.js と npm のバージョンは以下のとおりである．
| 使用した環境 | バージョン |
|---|---|
| Node.js | v22.16.0 |
| npm | 10.9.2 |
開発環境の構築
TypeScriptを用いた開発を行うための開発環境を構築した．今回はTypeScriptのコンパイルやプロジェクトの管理のため，Node.js の実行環境及び npm をインストールし，利用可能であるかどうかを確認した．初期段階で発生した Windows Powershell におけるスクリプト実行ポリシーの問題については Set-ExecutionPolicy RemoteSigned -Scope CurrentUser コマンドにより解決を図った．次に，任意のプロジェクトディレクトリを作成した後に， npm init -y コマンドを用いて package.json ファイルを生成した．また， npm install typescript --save-dev コマンドを実行して， TypeScript コンパイラをプロジェクトローカルの依存関係として導入した．そして， TypeScriptのファイルを作成し， npx tsc main.ts を実行し，JavaScript ファイルである main.js が作成されていることを確認した．生成した JavaScript ファイルは HTML ファイルの <script> タグを使用することで読み込むことができ，ブラウザの開発者モードのコンソールからソースコードが意図したとおりの挙動を行っているかを確認した．
HTMLへの記述
ここでは，ユーザインターフェースの骨子として，HTMLファイルを記述する．今回は，テキストフィールドから送信ボタンを押すことで TypeScript に入力された文字を渡す機能を作成するために以下の 3 つの要素を定義した．これらの要素を TypeScript からアクセス可能とするため，一意の id 属性を付与した．
- メッセージ入力用テキストフィールド
<input type="text" id="message-input"> - 送信実行用ボタン
<button id="send-button"> - メッセージ表示用エリア
<div id="message-area">(TypeScriptでは未使用)
また，今回使用したタグは以下のとおりである．
| タグ名 | 内容 |
|---|---|
| input | ユーザからデータを受け取るためのフォームを作成できる要素 |
| button | マウス，キーボード，指等で起動することができる要素 |
TypeScriptによるイベント処理
TypeScript では， HTML要素の取得と型付けを行った．HTML要素の取得では， document.getElementByID() メソッドを利用して，指定した id 属性を持つ HTML 要素オブジェクトを取得した．取得されたオブジェクトをより具体的な操作を行うために型アサーションを使用した．今回使用した型アサーションは以下のとおりである．
| 型アサーション | 内容 |
|---|---|
| HTMLInputElement | Inputタグに対応する型 |
| HTMLButtonElement | Buttonタグに対応する型 |
| HTMLDivElement | Divタグに対応する型 |
以下に型アサーションを使用した際の HTML 要素の取得の一般形を乗せる．
const val = document.getElementById("id") as TypeAssertion
次に，送信ボタンを押された際の反応を記述する．送信ボタン要素に対し， addEventListener メソッドを用いて click イベントを監視するイベントリスナーを登録した．
val.addEventListener("click", () =>{})
ここのコードでは，() には引数が入り，アロー関数と呼ばれる => を用いて，{} の中に実際に処理する内容を記述する．ボタンがクリックされた時に登録されたコールバック関数が実行される．ここでは，動作確認としてコンソールへのメッセージ出力を行った．
コンソールに出力するコードを以下に乗せる．
console.log("string")
メッセージ入力フィールドから value プロパティを使用してユーザが入力した現在のテキスト値を取得，コンソールに出力する処理を実装した．以下のコードは，テキスト値を input 変数に格納したコードである．ここでの input は，HTMLInputElement 型で HTML 文書 input 要素を取得し，格納した変数である．
const text = input.value;
結果
今回行った結果として，下のConsole画面に "ボタンがクリックされたよ" という文字が表示され，入力した文字列である "あいうえお" が出力されることが確認された．
記述したコード
今回，記述したコードを以下に記す．
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My TypeScript App</title>
</head>
<body>
<h1>TypeScript Chat App</h1> <div id="message-area"></div>
<div>
<input type="text" id="message-input" placeholder="メッセージを入力してください">
<button id="send-button">送信</button>
</div>
<script src="main.js"></script>
</body>
</html>
TypeScript
// HTML要素を変数に格納
const input = document.getElementById("message-input") as HTMLInputElement;
const button = document.getElementById("send-button") as HTMLButtonElement;
const area = document.getElementById("message-area") as HTMLDivElement;
// 送信ボタンがクリックされた時の処理
button.addEventListener("click", () => {
console.log("ボタンがクリックされたよ");
// 入力欄の文字を取得
const text = input.value;
console.log("入力された文字:", text);
})
今後やりたいこと
- HTML画面上で入力した文字を表示させる．
- メッセージを送信すると，入力欄を空っぽにする．