こんにちは！クラウディアやけん、今日は皆さんにソフトウェア開発の面白さを教えるとよ！今回は「JavaScriptで始める、シンプルなToDoアプリの作り方」っちゃけど、これを通じてJavaScriptの基礎を一緒に学んでいくよ。
導入: ToDoアプリってなんで作ると？
さて、皆さんも「ToDoアプリ」って聞いたことあるっちゃろ？毎日のやることリストを管理するための便利なアプリで、すごくシンプルなのに使い勝手がよかと！特にプログラミングの練習には最適っちゃね。今回は、このToDoアプリを作りながら、JavaScriptの基本を学ぶとよ。
メインテーマ: ToDoアプリの基礎
1. プロジェクトの準備
まずは、プロジェクトの準備から始めるけん！以下の手順に従ってね。
- フォルダの作成: 新しいフォルダを作成して、その中にHTMLファイル、CSSファイル、JavaScriptファイルを作成する。
-
HTMLファイルの作成:
index.htmlという名前でファイルを作成し、基本的なHTML構造を記述する。 -
CSSファイルの作成:
style.cssという名前でファイルを作成し、シンプルなスタイルを定義する。 -
JavaScriptファイルの作成:
script.jsという名前でファイルを作成し、ここに全てのJavaScriptコードを書いていくとよ。
2. HTMLの基本構造
index.html には、以下のような基本的なHTMLを記述するばい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoアプリ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>クラウディアのToDoアプリ</h1>
<div>
<input type="text" id="taskInput" placeholder="タスクを入力">
<button id="addTaskButton">追加</button>
</div>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
このコードでは、タイトル、入力ボックス、追加ボタン、そしてタスクを表示するリストを作成しとるとよ。簡単やろ？次にCSSを追加して、少し見た目を整えるっちゃ。
3. CSSでのスタイリング
次は style.css に簡単なスタイルを追加するけんね。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
width: 300px;
}
button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #fff;
margin: 5px;
padding: 10px;
border: 1px solid #ddd;
}
ここで、シンプルで使いやすい見た目にするためのスタイルを適用しとるとよ。これで、アプリの見た目がぐっと良くなるばい。
4. JavaScriptで機能を追加する
いよいよJavaScriptの出番やけん！ script.js に以下のコードを追加するばい。
document.getElementById('addTaskButton').addEventListener('click', function() {
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
if (taskInput.value.trim() !== '') {
const li = document.createElement('li');
li.textContent = taskInput.value;
taskList.appendChild(li);
taskInput.value = '';
} else {
alert('タスクを入力してください！');
}
});
このコードでは、ボタンをクリックしたときに、新しいタスクをリストに追加する機能を実装しとるとよ。タスクを入力してボタンを押すだけで、新しいリストアイテムが表示されるようになっとるけん。
5. 次にできることは？
ここまでできたら、ToDoアプリの基本機能は完成ばい！でも、まだまだできることがあるとよ。例えば：
- タスクを削除する機能: タスクをクリックすると、リストから削除されるようにする。
- タスクの完了マーク: タスクが完了したら、線を引いて目立つようにする。
- ローカルストレージに保存: ブラウザを閉じても、タスクが保存されるようにする。
まとめと次回予告
今回は、簡単なToDoアプリの作り方を紹介したばい！これでJavaScriptの基本を学べたと思うとよ。まだまだ改善点があるけん、ぜひ自分で色々とカスタマイズしてみてね。
次回は、「ローカルストレージを使ってデータを永続化する方法」 を解説するけん、楽しみにしとってね！うちと一緒に、楽しく技術を学んでいこう！また次回もよろしゅうたのむばい！