無料プログラミング教室 Pスクール JavaScript スタートブック 第6章: JavaScriptプロジェクト: 小さなアプリケーションの作成

第6章: JavaScriptプロジェクト: 小さなアプリケーションの作成

2024/10/252024/10/25| p-schoolp-school| 0 Comment| 17:20
Categories:

この章では、学んだ知識を実際に活用して、シンプルなTODOアプリケーションを作成します。TODOアプリは、アイテムの追加、削除、完了済みといったタスク管理機能を持ち、JavaScriptの基本的な操作が含まれた実践的なプロジェクトです。

目次

  1. プロジェクトの構造設計
  2. HTMLとCSSの作成
  3. JavaScriptコードの記述
  4. デバッグとテスト

1. プロジェクトの構造設計

フォルダ構成

まず、プロジェクトの構成を以下のように設計します。

todo-app/
│
├── index.html         // アプリケーションのHTMLファイル
├── style.css          // デザイン用のCSSファイル
└── script.js          // JavaScriptコードを含むスクリプトファイル

index.htmlにはUIの骨格となるHTML構造を、style.cssにはデザインとレイアウト、script.jsにはアプリの動作を定義するJavaScriptコードを書き込みます。このような分離により、各ファイルが役割に応じて分けられるため、メンテナンス性が向上し、コードの整理が容易になります。

2. HTMLとCSSの作成

まず、HTMLファイルとCSSファイルを記述します。

HTMLの作成

以下はindex.htmlファイルのコードです。このコードは、タスク入力欄、追加ボタン、およびタスクリストの要素で構成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TODO App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>TODOアプリ</h1>
    <div class="input-group">
      <input type="text" id="task-input" placeholder="新しいタスクを入力してください">
      <button id="add-task-button">追加</button>
    </div>
    <ul id="task-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSSの作成

style.cssでデザインを整えます。簡潔なスタイル設定にしますが、使いやすさを意識したデザインにしています。

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  width: 300px;
  text-align: center;
}

h1 {
  color: #333;
}

.input-group {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

#task-input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}

#add-task-button {
  padding: 8px;
}

#task-list {
  list-style-type: none;
  padding: 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background-color: #f9f9f9;
  margin-bottom: 5px;
  border-radius: 4px;
}

.task-item button {
  background: none;
  border: none;
  color: red;
  cursor: pointer;
}

3. JavaScriptコードの記述

続いて、script.jsにアプリケーションのロジックを追加します。タスクの追加、削除、完了マークを行う関数を作成し、ユーザーの操作を処理します。

基本構造

まず、script.jsファイルの最初にDOM要素を取得し、イベントリスナーを設定します。

// 必要なDOM要素を取得
const taskInput = document.getElementById("task-input");
const addTaskButton = document.getElementById("add-task-button");
const taskList = document.getElementById("task-list");

// タスク追加ボタンにイベントリスナーを設定
addTaskButton.addEventListener("click", addTask);

タスクの追加機能

ユーザーがテキストを入力し「追加」ボタンをクリックすると、新しいタスクがリストに追加されます。この関数では、入力内容を検証し、タスクアイテムとしてDOMに追加します。

// タスクを追加する関数
function addTask() {
  const taskText = taskInput.value.trim();
  
  // 入力が空の場合は何もしない
  if (taskText === "") return;
  
  // 新しいタスク要素を作成
  const taskItem = document.createElement("li");
  taskItem.className = "task-item";
  
  // タスクテキスト
  const taskContent = document.createElement("span");
  taskContent.textContent = taskText;
  taskItem.appendChild(taskContent);
  
  // 完了ボタン
  const completeButton = document.createElement("button");
  completeButton.textContent = "完了";
  completeButton.addEventListener("click", function() {
    taskContent.classList.toggle("completed");
  });
  taskItem.appendChild(completeButton);
  
  // 削除ボタン
  const deleteButton = document.createElement("button");
  deleteButton.textContent = "削除";
  deleteButton.addEventListener("click", function() {
    taskList.removeChild(taskItem);
  });
  taskItem.appendChild(deleteButton);
  
  // タスクリストに追加
  taskList.appendChild(taskItem);
  
  // 入力欄をクリア
  taskInput.value = "";
}

追加機能: タスクの完了

「完了」ボタンがクリックされると、タスクが完了したと見なされ、表示が変更されます。

// 完了ボタンの機能
completeButton.addEventListener("click", function() {
  taskContent.classList.toggle("completed");
});

削除機能

削除ボタンを押すと、タスクがリストから取り除かれます。removeChildメソッドを使ってリストから該当のタスクアイテムを削除します。

// 削除ボタンの機能
deleteButton.addEventListener("click", function() {
  taskList.removeChild(taskItem);
});

4. デバッグとテスト

  1. 動作確認
    ブラウザでindex.htmlを開き、タスクの追加、完了、削除が意図した通りに動作するか確認します。
  2. エラーの検証
    例えば、空のタスクが追加される場合や、削除後に再表示する場合など、考えられるエラーケースを確認します。コンソールでエラーメッセージが表示されていないかも確認します。
  3. CSSの調整
    完了済みのタスクを線で消すなど、タスクの状態に応じたCSSのデザインを調整して、見た目にもわかりやすくします。

初心者におすすめ！プログラミングスクールのススメ

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

プログラミングを始めたいと思っているそこのあなた、独学よりもプログラミングスクールが断然おすすめです！理由は簡単、続けやすさです。

独学の挫折率、驚きの87.5％！

独学でプログラミングを続けるのは、実はかなりハードルが高いんです。データによると、なんと87.5％もの学習者が途中で挫折しているとか。一方、各プログラミングスクールが公表しているデータによると、受講生の約95％が最後までやり抜いているとのこと。数字を見れば一目瞭然、プログラミングスクールの方が圧倒的に続けやすいんです。

有料と無料、スクールの違いは？

プログラミングスクールには有料と無料のタイプがありますが、その違いは次の通りです：

  • 受講条件が異なる
  • 学べるスキルやカリキュラム内容が異なる
  • 就職や転職のサポート内容が異なる

どちらが自分に合っているか、よく考えて選ぶのが大事です。

サブスク型プログラミングスクール『FREEKS（フリークス）』に注目！

プログラミング初心者でも学びやすいと評判の『FREEKS』、その特徴は以下の通り：

  • 未経験者向けのわかりやすいカリキュラム
  • 経験豊富なエンジニアのサポート
  • オンラインで自分のペースで学習可能

なんと、月会費のみで全カリキュラムが受け放題！Java、PHP、HTML/CSS、JavaScriptなど、多彩なプログラミング言語が学べるんです。しかも、AIが質問に自動で答えてくれるシステムも導入済み。

終了後は副業もサポート！

カリキュラムを終了した後には、Freeks経由で未経験者でも取り組める副業案件の受注が可能。実務を通じてスキルを磨き、市場価値の高いエンジニアへの道が開けます。

独学で悩むくらいなら、まずはプログラミングスクールをチェックしてみるのもアリかもしれませんよ！
　↓　↓　こちらをクリック　↓　↓　

Related Post