【実践】TypeScriptを使って簡単なアプリを作ってみよう

簡単なカウンターアプリを作ってみよう。

プロジェクトのセットアップ

準備として、今回はデスクトップにnew-folderフォルダを作成しました。

npmプロジェクトの初期化

コマンドよりnpmプロジェクトを初期化します。これにより、package.jsonファイルが作成されます。

npm init -y

TypeScriptをプロジェクトに追加

プロジェクトにTypeScriptをローカルインストールします。これにより、package-lock.jsonファイルが作成されます。

npm install typescript --save-dev

4. TypeScriptコンパイラの設定

tsconfig.jsonファイルを作成して、TypeScriptコンパイラの設定を行います。

npx tsc --init

これにより、基本的な設定が含まれたtsconfig.jsonファイルが生成されます。このファイルを編集して、プロジェクトに適した設定を行います。

準備が整ったところで、まずはhtmlを作ってみます。index.html

まずはhtmlです。

続いてCSSです。

html、CSSまでの実装結果はこのような感じです。

distフォルダを作成してapp.tsのTypeScriptファイルを作成します。

解説

document: 現在のHTMLドキュメント全体を表します。

addEventListener: 特定のイベントが発生したときに呼び出される関数（イベントリスナー）を登録するためのメソッドです。"DOMContentLoaded": このイベントは、HTMLドキュメントの完全な読み込みと解析が終わったときに発生します。

() => { ... }: イベントが発生したときに実行される関数（アロー関数）です。この関数は DOMContentLoaded イベントが発生すると呼び出されます。

`let count: number = 0;`

let:で変数を宣言して、変数の名前はcount:としています。
: number: 変数の型を指定しています。ここでは、count 変数が数値型（number）であることを示しています。TypeScriptでは型を明示的に指定することで、型安全性を高めることができます。
= 0: 変数 count を0で初期化しています。この初期化により、カウントがゼロから始まることが保証されます。

HTML要素を取得

const counterElement = document.getElementById("counter")!;
const incrementButton = document.getElementById("incrementButton")!;

getElementById メソッドを使って、HTML内のカウントを表示する <p> 要素と、クリックイベントを検知する <button> 要素を取得します。 ! は、これらの要素が null でないことをTypeScriptに対して保証しています。

ボタンにクリックイベントを追加

incrementButton.addEventListener("click", () => {
    // カウントを増やす
    count++;
    // カウンターの表示を更新
    counterElement.textContent = count.toString();
});

incrementButton 要素に click イベントリスナーを追加します。ボタンがクリックされると、カウントをインクリメントし、counterElement のテキストコンテンツを更新します。

count は number 型の変数です。HTML要素の textContent プロパティには文字列（string 型）を割り当てる必要があります。number 型をそのまま textContent に代入しようとすると、型の不一致が生じます。