学習計画と実績管理アプリ

学習計画一覧

実績一覧

「石の上にも三年」と言いますが、「石の上に学習計画を立てなければ、三年後にただの石です」
以下が、学習計画と実績を管理するアプリの実装例です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>学習計画と実績管理</title>
</head>
<body>
  <h1>学習計画と実績管理アプリ</h1>
  <form>
    <h2>学習計画</h2>
    <label for="planSubject">教科名:</label>
    <input type="text" id="planSubject" name="planSubject"><br><br>

    <label for="planDate">日付:</label>
    <input type="date" id="planDate" name="planDate"><br><br>

    <label for="planContents">内容:</label><br>
    <textarea id="planContents" name="planContents" rows="5" cols="30"></textarea><br><br>

    <button type="button" onclick="addPlan()">追加</button>
  </form>

  <form>
    <h2>実績入力</h2>
    <label for="resultSubject">教科名:</label>
    <input type="text" id="resultSubject" name="resultSubject"><br><br>

    <label for="resultDate">日付:</label>
    <input type="date" id="resultDate" name="resultDate"><br><br>

    <label for="resultContents">内容:</label><br>
    <textarea id="resultContents" name="resultContents" rows="5" cols="30"></textarea><br><br>

    <button type="button" onclick="addResult()">追加</button>
  </form>

  <h2>学習計画一覧</h2>
  <ul id="planList">
  </ul>

  <h2>実績一覧</h2>
  <ul id="resultList">
  </ul>

  <script>
    let planList = [];
    let resultList = [];

    function addPlan() {
      // 入力されたデータを取得
      let planSubject = document.getElementById('planSubject').value;
      let planDate = document.getElementById('planDate').value;
      let planContents = document.getElementById('planContents').value;

      // 入力されたデータを配列に格納
      let planData = {
        subject: planSubject,
        date: planDate,
        contents: planContents
      };
      planList.push(planData);

      // 一覧に追加
      let planListElement = document.getElementById('planList');
      let listElement = document.createElement('li');
      listElement.textContent = planSubject + '：' + planDate + ' ' + planContents;
      planListElement.appendChild(listElement);
    }

    function addResult() {
      // 入力されたデータを取得
      let resultSubject = document.getElementById('resultSubject').value;
      let resultDate = document.getElementById('resultDate').value;
      let resultContents = document.getElementById('resultContents').value;

      // 入力されたデータを配列に格納
      let resultData = {
        subject: resultSubject,
        date: resultDate,
        contents: resultContents
      };
      resultList.push(resultData);

      // 一覧に追加
      let resultListElement = document.getElementById('resultList');
      let listElement = document.createElement('li');
      listElement.textContent = resultSubject + '：' + resultDate + ' ' + resultContents;
      resultListElement.appendChild(listElement);
    }
  </script>

  <p>「石の上にも三年」と言いますが、「石の上に学習計画を立てなければ、三年後にただの石です」</p>
</body>
</html>
```

上記のアプリでは、JavaScriptで配列に学習計画と実績のデータを格納し、それを一覧表示する機能を実装しています。また、表現豊かなジョークとして、「石の上にも三年」という言葉を引用し、学習計画が重要であることをアピールしています。