💻

フロントエンド初歩実装

2025/05/24に公開

かなり簡単なToDoリストみたいなものを作った。（作ってもらって理解した。）

環境構築

けど言語やフレームワークのバージョンはDockerで管理すればいい気がしたから採用してない。

✅ html仕組み：
https://ユーザー名.github.io/リポジトリ名/にアクセスすると、リポジトリのルート直下にある index.html を自動で読み込む。

HTML

<!-- このHTML文書がHTML5で書かれていることをブラウザに知らせる宣言 -->
<!DOCTYPE html>
<!-- 言語指定 -->
<html lang="ja">
<!-- メタデータ（表示されない設定）の設定 -->
<head>
  <meta charset="UTF-8" />
  <title>ToDoアプリ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<!-- ページの内容を記述する部分 -->
<body>
    <!-- ホーム画面のブロック -->
  <div id="home">
    <h1>ようこそ！</h1>
    <button onclick="goToTodo()">ToDoリストを見る</button>
  </div>
<!-- ToDoリスト画面 -->
  <div id="todo" style="display: none;">
    <h1>ToDoリスト</h1>
    <input type="text" id="todoInput" placeholder="やることを入力" />
    <button onclick="addTodo()">追加</button>
    <ul id="todoList"></ul>
    <button onclick="goHome()">ホームへ戻る</button>
  </div>
<!-- 外部のJSファイルを読み込む -->
  <script src="main.js"></script>
</body>
</html>

CSS

body {
  font-family: sans-serif;
  text-align: center;
  padding-top: 40px;
}

input {
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  cursor: pointer;
}

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

li {
  margin: 8px 0;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

JavaScript

// 画面遷移
// 画面遷移をオンオフで管理。シングルページアプリケーション（SPA）と呼ばれる。
function goToTodo() {
  document.getElementById("home").style.display = "none";
  document.getElementById("todo").style.display = "block";
}

function goHome() {
  document.getElementById("todo").style.display = "none";
  document.getElementById("home").style.display = "block";
}

// ToDo追加
function addTodo() {
  const input = document.getElementById("todoInput");
  const text = input.value.trim();
  if (text === "") return;

  const li = document.createElement("li");
  li.textContent = text;

  // 削除機能（クリックで削除）
  li.onclick = () => li.remove();

  document.getElementById("todoList").appendChild(li);
  input.value = "";
}

結果

こうなった。

HTML

CSS

JavaScript

結果

Discussion