本内容では，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 ファイルの タグを使用することで読み込むことができ，ブラウザの開発者モードのコンソールからソースコードが意図したとおりの挙動を行っているかを確認した．
HTMLへの記述
ここでは，ユーザインターフェースの骨子として，HTMLファイルを記述する．今回は，テキストフィールドから送信ボタンを押すことで TypeScript に入力された文字を渡す機能を作成するために以下の 3 つの要素を定義した．これらの要素を TypeScript からアクセス可能とするため，一意の id 属性を付与した．
- メッセージ入力用テキストフィールド
- 送信実行用ボタン
- メッセージ表示用エリア (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", () =>{})ここのコードでは，
()には引数が入り，アロー関数と呼ばれる=>を用いて，{}の中に実際に処理する内容を記述する．ボタンがクリックされた時に登録されたコールバック関数が実行される．ここでは，動作確認としてコンソールへのメッセージ出力を行った．コンソールに出力するコードを以下に乗せる．メッセージ入力フィールドから value プロパティを使用してユーザが入力した現在のテキスト値を取得，コンソールに出力する処理を実装した．以下のコードは，テキスト値を
input変数に格納したコードである．ここでのinputは，HTMLInputElement型で HTML 文書input要素を取得し，格納した変数である．const text = input.value;今回行った結果として，下のConsole画面に "ボタンがクリックされたよ" という文字が表示され，入力した文字列である "あいうえお" が出力されることが確認された．
記述したコード
今回，記述したコードを以下に記す．
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画面上で入力した文字を表示させる．
- メッセージを送信すると，入力欄を空っぽにする．
Source link
Views: 0
