ホームページ >ウェブフロントエンド >jsチュートリアル >シンプルな To-Do リスト用に TypeScript を使用して Vite をセットアップする
シンプルな To-Do リスト用に TypeScript を使用して Vite をセットアップする
- Susan Sarandonオリジナル
- 2025-01-17 04:31:08612ブラウズ
このチュートリアルでは、Vite と TypeScript を使用して基本的な To Do リスト アプリを作成する方法を説明します。 外部フレームワークやライブラリを使用せずに、Vite のコア機能に焦点を当てて、物事を簡単に説明していきます。
プロジェクトのセットアップ
Node.js と npm がインストールされていることを確認します。 次に、ターミナルを使用してプロジェクトを作成し、初期化します。
<code class="language-bash"># Create a new Vite project npm create vite@latest my-todo-app -- --template vanilla-ts # Navigate to the project directory cd my-todo-app # Install dependencies npm install # Open in your code editor code .</code>
これにより、my-todo-app テンプレートを使用した Vite プロジェクトである vanilla-ts が作成されます。これは、単純な TypeScript アプリケーションに最適です。 依存関係をインストールした後、好みのコード エディターでプロジェクトを開きます。
プロジェクトの構造
プロジェクト ディレクトリは次の構造になります:
<code>my-todo-app/ ├── node_modules/ ├── public/ │ └── vite.svg ├── src/ │ ├── main.ts │ └── style.css ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts └── package-lock.json</code>
src/main.ts にはアプリケーション ロジックが含まれ、public/ には静的アセットが含まれ、index.html はエントリ ポイントです。 package.json は依存関係を管理します。
src/main.ts
src/main.ts の内容を次のコードに置き換えます:
<code class="language-typescript">interface Todo {
id: number;
text: string;
completed: boolean;
}
let todos: Todo[] = [];
let nextTodoId = 1;
const todoInput = document.createElement('input');
todoInput.type = 'text';
todoInput.placeholder = 'Enter a new todo';
const addButton = document.createElement('button');
addButton.textContent = 'Add Todo';
const todoList = document.createElement('ul');
document.body.appendChild(todoInput);
document.body.appendChild(addButton);
document.body.appendChild(todoList);
function renderTodos() {
todoList.innerHTML = '';
todos.forEach(todo => {
const listItem = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = todo.completed;
checkbox.addEventListener('change', () => toggleTodo(todo.id));
const label = document.createElement('label');
label.textContent = todo.text;
label.style.textDecoration = todo.completed ? 'line-through' : 'none';
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => deleteTodo(todo.id));
listItem.appendChild(checkbox);
listItem.appendChild(label);
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
});
}
function addTodo() {
const text = todoInput.value.trim();
if (text) {
const newTodo: Todo = {
id: nextTodoId++,
text: text,
completed: false,
};
todos.push(newTodo);
todoInput.value = '';
renderTodos();
}
}
function toggleTodo(id: number) {
todos = todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
);
renderTodos();
}
function deleteTodo(id: number) {
todos = todos.filter(todo => todo.id !== id);
renderTodos();
}
addButton.addEventListener('click', addTodo);
renderTodos();</code>
この TypeScript コードは、タスクの追加、完了、削除という To-Do リストの中核機能を実装します。
index.html
次の内容で index.html を更新します:
<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS To-Do</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html></code>
これには単に main.ts スクリプトが含まれます。 実際のレンダリングは JavaScript 内で動的に行われます。
開発サーバーの実行とビルド
npm run dev を実行して開発サーバーを起動します (http://localhost:5173 からアクセス可能)。 実稼働ビルドの場合は、npm run build を使用します。 これにより、本番環境に対応したバージョンが dist フォルダーに作成されます。
この合理化されたガイドは、Vite と TypeScript を使用してシンプルな To Do リスト アプリケーションを構築するための明確な道筋を提供します。 必要に応じて、UI フレームワークや追加のスタイルを統合することで、この基盤を拡張できます。
以上がシンプルな To-Do リスト用に TypeScript を使用して Vite をセットアップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。