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

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

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

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

style.css

#app {
    max-width: 400px;
    margin: 50px auto;
    text-align: center;
}

input {
    padding: 10px;
    width: 80%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    margin-bottom: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    text-align: left;
}

ここまでの実装結果がこちらです。

それでは次にapp.tsファイルを作りコードを書いていきましょう。

コード全体の流れ

document.addEventListener("DOMContentLoaded", ...):
- DOMツリーの構築が完了した時点で指定された関数を実行します。これにより、スクリプトがDOM要素に確実にアクセスできるようになります。

要素の取得と型キャスト:

const taskInput = document.getElementById("taskInput") as HTMLInputElement;
const addButton = document.getElementById("addButton") as HTMLButtonElement;
const taskList = document.getElementById("taskList") as HTMLUListElement;

taskInput: タスクを入力するための入力フィールドを取得します。
addButton: タスクを追加するためのボタンを取得します。
taskList: タスクを表示するリスト (<ul> 要素) を取得します。
as キーワードを使って、取得した要素を特定のHTML要素の型にキャスト（変換）します。これにより、その要素特有のプロパティやメソッドを使用できるようになります。

addButton のクリックイベントリスナー:

addButton.addEventListener("click", () => {
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
        const listItem = document.createElement("li");
        listItem.textContent = taskText;
        taskList.appendChild(listItem);
        taskInput.value = "";
    }
});

イベントリスナーの追加:
- addButton にクリックイベントリスナーを追加します。ボタンがクリックされたときに実行される関数を定義します。
タスクテキストの取得とトリミング:
- taskInput.value.trim(): taskInput の値を取得し、前後の空白を削除します。
空白チェック:
- if (taskText !== ""): タスクテキストが空でないことを確認します。空でない場合にのみリストに追加します。
新しいリストアイテムの作成と追加:
- document.createElement("li"): 新しいリストアイテム (<li> 要素) を作成します。
- listItem.textContent = taskText: リストアイテムのテキスト内容を設定します。
- taskList.appendChild(listItem): 作成したリストアイテムをタスクリストに追加します。
入力フィールドのクリア:
- taskInput.value = "": タスクが追加された後、入力フィールドをクリアします。