🚀 プログラミング学習

レッスン7：ミニアプリを作ろう

📖 導入 — 全部つなげてアプリを作ろう！

HTMLでページの骨格を作り、CSSで見た目を整え、JavaScriptで動きをつける。この3つを組み合わせれば、本物のウェブアプリが作れます。このレッスンはJavaScriptコースの最終回です。これまで学んだ変数・条件分岐・ループ・関数・DOM操作をすべて使って、ToDoリストアプリを一から作り上げましょう！

📝 新しく使うAPI

イベントリスナー：addEventListener

addEventListener("イベント名", 実行する関数) の形で書きます。

const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  console.log("ボタンが押された！");
});
イベント名タイミング
"click"クリックされたとき
"input"入力欄の値が変わったとき
"keydown"キーが押されたとき

入力値の取得：.value

const input = document.getElementById("text-input");
console.log(input.value);  // 入力欄に書かれたテキストが表示される

要素の追加：createElement / appendChild

const li = document.createElement("li");  // 新しい要素を作る
li.textContent = "新しい項目";             // テキストを設定する
document.getElementById("list").appendChild(li);  // 追加する

💻 ToDoリストアプリを作ろう！

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>
    <div id="app">
      <h1>ToDoリスト</h1>
      <div class="input-area">
        <input type="text" id="todo-input" placeholder="やることを入力...">
        <button id="add-btn">追加</button>
      </div>
      <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS（style.css）

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 40px 16px;
}

#app {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  margin: 0 auto;
}

h1 { text-align: center; color: #333; }

.input-area {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

#todo-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  background-color: #3a86ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

#todo-list { list-style: none; padding: 0; margin: 0; }

#todo-list li {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

JavaScript（script.js）

const input = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const list = document.getElementById("todo-list");

function addTodo() {
  const text = input.value.trim();
  if (text === "") return;  // 空のときは何もしない

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

  input.value = "";  // 入力欄をリセット
  input.focus();     // 入力欄にカーソルを戻す
}

addBtn.addEventListener("click", addTodo);

// Enterキーでも追加できるようにする
input.addEventListener("keydown", function(e) {
  if (e.key === "Enter") addTodo();
});

ブラウザで開いて、やることを入力して「追加」ボタンを押してみましょう。リストに項目が追加されたら完成です！ 🎉

📌 まとめ

操作書き方
イベントを設定要素.addEventListener("click", 関数)
入力値を取得input要素.value
新しい要素を作るdocument.createElement("タグ名")
要素を追加する親要素.appendChild(子要素)
要素を削除する親要素.removeChild(子要素)

🎓 全コース完了おめでとうございます！

HTML・CSS・JavaScriptの3コースをすべて終えました。

この3つを組み合わせれば、あなたのアイデアをウェブページとして形にできます。プロフィールページ、クイズアプリ、ゲーム…何でも作れます。プログラミングに終わりはありません。楽しみながら続けていきましょう！ 🚀

🔍 もっと調べてみよう：「JavaScript addEventListener イベント」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
🚀 作ったアプリを世界に公開しよう！ 環境構築ガイドへ →
🎉 全コース完了！トップページへ →

🎉 全コース修了おめでとう！次に挑戦できること

✅ HTML・CSS・JavaScript の3コースを修了しました！
ゼロから始めて、動くウェブアプリを自分で作れるようになりました。最初は「難しそう」と思っていたコードが、今では自分で書けるようになっています。これは本当にすごいことです。

ここからが本当のスタートです。次に何をするか、4つの選択肢を紹介します。

🛠️ 1. 環境を整えて本格的に開発する

VS Code の拡張機能や GitHub の使い方を学んで、より快適な開発環境を整えましょう。

→ 環境構築ガイドへ

🎨 2. オリジナル作品を作る

テーマは自由。クイズアプリ・自己紹介サイト・好きなものまとめページ——何でも OK です。

→ プロジェクトアイデア集へ

🌏 3. 作ったサイトを世界に公開する

GitHub Pages を使えば、自分のサイトを無料でインターネットに公開できます。

→ GitHub Pages で公開する方法へ

📚 4. もっと先へ進む

  • React：大きなウェブアプリを作るJSライブラリ
  • Node.js：サーバー側でJavaScriptを動かす技術
  • Python：データ分析・AI・自動化に人気の言語

まずは今の知識でオリジナル作品を作ってみよう！

💪 プログラミングの旅は、ここから始まります。
「コードを書く → エラーを読む → 調べて直す」の繰り返しは、どんな言語・どんな技術を学ぶときにも使えるスキルです。作りたいものを作り続けてください。あなたが作ったものが、誰かの役に立つかもしれません。
← JavaScriptコース一覧に戻る