画面に馴染む ― 使う人の側から、自分のアプリを見る

1. 意味タグに整えるユニット4のテンプレートを、header (アプリ名)・main (フォームと一覧)・footer の構造にします。
2. 1件をカードにする日報1件を <article class="nippo"> で包み、CSSを当てます。

   .nippo {
     background: #ffffff;
     border: 1px solid #dddddd;
     border-radius: 10px;
     padding: 16px;
     margin-bottom: 12px;
   }
   .nippo .meta {
     font-size: 0.85rem;
     color: #666666;
   }

3. 3つのルールで仕上げる①文字サイズは「見出し24 / 本文16 / 日付など13」の3階層だけ ②余白は8の倍数 (8・16・24) だけ ③色は「黒っぽい文字 + 灰色 + アクセント1色」だけ。この縛りが、そのまま「整って見える」の正体です。
4. ビフォーアフターを残す整える前のスクリーンショットを撮っておき、見比べます。差が、このユニットの成果物の一部です。

1. 練習用HTMLを作る

   <p>押した回数: <span id="count">0</span></p>
   <button id="plus">+1</button>
   <script>
   const countEl = document.querySelector("#count"); // ① つかむ
   let count = 0;
   document.querySelector("#plus").addEventListener("click", () => { // ② 待ち受ける
     count++;
     countEl.textContent = count; // ③ 書き換える
   });
   </script>

2. Pythonとの違いを3つメモする変数は let / const、ブロックは字下げでなく { }、文字の埋め込みは f"..." でなく `${ }`。この3つさえ翻訳できれば、読み書きの感覚は流用できます。
3. 文字数カウンターに改造する日報の入力欄 (textarea) の下に「いま◯文字」をリアルタイム表示します。イベントを "input" に、値を .value.length にするだけです。これはこのまま月末制作の部品になります。

1. 置き場所を作るテンプレートに <ul id="latest"></ul> を置きます。
2. 取りに行って描く

   async function loadLatest() {
     const res = await fetch("/api/nippo");
     const data = await res.json();
     const ul = document.querySelector("#latest");
     ul.innerHTML = "";
     for (const n of data.slice(0, 5)) {
       const li = document.createElement("li");
       li.textContent = `${n.day} ${n.name}: ${n.content}`;
       ul.appendChild(li);
     }
   }
   loadLatest();

   await fetch → .json( ) は「取りに行って、JSONをオブジェクトに戻す」の2拍子です。Pythonでrequestsを使うのとそっくりの感覚です。
3. 自作APIならではの実験わざとAPI側 (Flask) を止めて画面を再読み込みし、何が起きるか観察します。次に try / catch で「読み込みに失敗しました」を表示する守りを足します。障害時に画面がどうなるかは、API設計者こそ知っているべき景色です。
4. APIを使う側の気持ちをメモする「日付の形式はこれで扱いやすい?」「件数指定 (limit) があったら楽では?」― 使う側として感じた不満を3つメモします。そのままAPI改善のToDoになります。

お題: 手順4のメモから1つ選んで、API側を改善します。おすすめは /api/nippo?limit=5 のような件数指定です。