TypeScriptを用いたアプリケーション開発(1日目)

# 目標
本内容では，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 要素の取得の一般形を乗せる．
```TypeScript
const val = document.getElementById("id") as TypeAssertion
```

次に，送信ボタンを押された際の反応を記述する．送信ボタン要素に対し， `addEventListener` メソッドを用いて `click` イベントを監視するイベントリスナーを登録した．
```TypeScript
val.addEventListener("click", () =>{})
```
ここのコードでは，`()` には引数が入り，アロー関数と呼ばれる `=>` を用いて，`{}` の中に実際に処理する内容を記述する．ボタンがクリックされた時に登録されたコールバック関数が実行される．ここでは，動作確認としてコンソールへのメッセージ出力を行った．
コンソールに出力するコードを以下に乗せる．
```TypeScript
console.log("string")
```

メッセージ入力フィールドから value プロパティを使用してユーザが入力した現在のテキスト値を取得，コンソールに出力する処理を実装した．以下のコードは，テキスト値を `input` 変数に格納したコードである．ここでの `input` は，`HTMLInputElement` 型で HTML 文書 `input` 要素を取得し，格納した変数である．
```TypeScript
const text = input.value;
```

# 結果
今回行った結果として，下のConsole画面に "ボタンがクリックされたよ" という文字が表示され，入力した文字列である "あいうえお" が出力されることが確認された．

![スクリーンショット 2025-06-05 220142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800949/eaafed37-d929-443c-9587-69d2b60ac575.png)

## 記述したコード
今回，記述したコードを以下に記す．
#### HTML
```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
```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);
})
```
# 今後やりたいこと
1. HTML画面上で入力した文字を表示させる．
2. メッセージを送信すると，入力欄を空っぽにする．