Day 54：UI改善
Day 54では、第4フェーズ「ブラウザデータ保存」のまとめに近い位置づけとして、ToDoアプリや入力フォームの UI 改善を学びます。今回の学習内容は、使いやすいフォーム、エラー表示、空データ表示、ローディング表示の4つです。ここまでの学習では、localStorage を使った保存、ページ再読み込み対応、完了状態保存、検索、フィルター、ソートまで作ってきました。つまり、機能としてはかなり充実したアプリに近づいています。しかし、機能が増えただけでは「使いやすいアプリ」にはなりません。実際に使う人にとってわかりやすく、安心して操作できる見た目や動きに整えることが大切です。そこで登場するのが UI 改善です。
初心者の方は、プログラミングというと「機能を作ること」が中心だと思いやすいです。しかし、実際のアプリ開発では「どう使われるか」も同じくらい重要です。たとえば、入力欄が使いづらいと、せっかく保存機能があっても操作しにくくなります。エラーが起きても何も表示されなければ、ユーザーは何が悪いのかわかりません。データが空なのに真っ白な画面だけが出ると、不具合なのか空なのか判断できません。ローディング中なのに何も表示されなければ、止まっていると誤解されることもあります。つまり UI 改善とは、機能そのものではなく、「使う人が迷わないようにする工夫」です。
Day 54では、こうした視点を初心者向けにわかりやすく整理していきます。今回も、単に見た目を整えるテクニックとしてではなく、「なぜそれが必要なのか」「どういう問題を防げるのか」「実装するときに何を意識すべきか」まで含めて、順を追って詳しく説明します。これまでのToDoアプリをより実用的でやさしいアプリへ近づける回だと考えると理解しやすいです。
UI改善とは何か
UIとは User Interface の略で、ユーザーが画面を見たり、入力したり、操作したりする接点のことです。簡単に言えば、「アプリの見た目や操作まわり」のことです。UI改善とは、その見た目や操作をより使いやすくすることです。
初心者の方は、UI改善を次のように考えるとわかりやすいです。
- 入力しやすくする
- 間違えたときにわかりやすくする
- 何もない状態を親切にする
- 処理中であることを伝える
つまり、UI改善は「ユーザーの不安や迷いを減らす工夫」です。ただ機能があるだけではなく、「今どういう状態なのか」「何をすればよいのか」が自然に伝わることが大切です。
Day 54で一番大事な考え方
今回の学習で一番大切なのは、「アプリの都合ではなく、使う人の視点で考える」ということです。プログラマー側から見ると、「データは保存できている」「コードは正しく動いている」と思えても、使う人からすると「何も反応がない」「どうすればよいかわからない」と感じることがあります。このズレを埋めるのがUI改善です。
たとえば、ToDo追加ボタンを押したのに空欄だった場合、何も起きないだけでは不親切です。「入力してください」と表示されたほうがわかりやすいです。ToDoが1件もないときも、空のリストだけが出ているより「ToDoはまだありません」と表示されたほうが状況が伝わります。このように、UI改善はユーザーへの説明の役割も持っています。
使いやすいフォームとは何か
まずは「使いやすいフォーム」から考えます。フォームとは、入力欄やボタンなど、ユーザーがデータを入力する部分です。ToDoアプリなら、ToDo名を入れる入力欄、日付入力欄、優先順位の選択欄、追加ボタンなどがフォームにあたります。
使いやすいフォームにするために大切なことは次の通りです。
- 入力欄の役割が見てすぐわかること
- 入力しやすい順番になっていること
- 必要な入力だけを求めること
- 入力後にどうなるかが想像しやすいこと
初心者の方は、「フォームはデータを受け取る箱」ではなく、「ユーザーを案内する入り口」だと考えると理解しやすいです。
使いやすいフォームの具体例
たとえば、ToDo追加フォームが次のように整っていると使いやすくなります。
<label for="todoInput">ToDo内容</label>
<input type="text" id="todoInput" placeholder="やることを入力してください">
<label for="dateInput">日付</label>
<input type="date" id="dateInput">
<label for="priorityInput">優先順位</label>
<select id="priorityInput">
<option value="1">高</option>
<option value="2">中</option>
<option value="3">低</option>
</select>
<button id="addButton">追加</button>このコードでは、label をつけることで、各入力欄が何のためのものかが明確になります。また、placeholder に説明を入れることで、入力のヒントも与えられます。
初心者の方は、フォームを作るときに「自分が初めて見る画面だとして、迷わず使えるか」と考える習慣をつけるとよいです。
フォーム改善で特に重要なポイント
ここで深掘りしたいのは、「入力しやすさ」は見た目だけではないということです。たとえば、入力後にフォームを空に戻すことも、使いやすさの一部です。ToDoを追加したあとに前の入力内容がそのまま残っていると、次の入力がしにくくなることがあります。そのため、追加成功後には入力欄を初期化するのが親切です。
// 入力欄を空にする
todoInput.value = "";
dateInput.value = "";
priorityInput.value = "1";また、入力欄へカーソルを戻すとさらに便利です。
// 入力欄にカーソルを戻す
todoInput.focus();初心者の方は、こうした細かい工夫もUI改善の一部だと理解すると、アプリの完成度が上がりやすいです。
エラー表示とは何か
次に学ぶのがエラー表示です。エラー表示とは、入力ミスや不足があるときに、そのことをユーザーへわかりやすく伝える仕組みです。初心者の方は、エラーという言葉を難しく感じるかもしれませんが、ここでは「ユーザーが正しく入力できていないことを知らせる表示」と考えれば十分です。
たとえば、ToDo内容が空欄なのに追加ボタンを押したとき、何も起きないだけでは「ボタンが壊れているのかな」と思われるかもしれません。しかし、「ToDo内容を入力してください」と表示されれば、次に何をすればよいかがわかります。
エラー表示は、単に問題を知らせるだけでなく、次の行動を案内する役割もあります。ここがとても大切です。
エラー表示の基本的な作り方
まずは、エラー用の表示エリアをHTMLに用意します。
<p id="errorMessage" style="color: red;"></p>そして、JavaScriptで必要に応じてメッセージを入れます。
// エラー表示用の要素を取得する
const errorMessage = document.getElementById("errorMessage");
// 入力チェック
if (todoInput.value.trim() === "") {
errorMessage.textContent = "ToDo内容を入力してください。";
return;
}
// エラーがないときはメッセージを消す
errorMessage.textContent = "";初心者の方は、エラー表示を「ただ赤文字を出すこと」ではなく、「入力の問題を知らせ、修正を助けること」だと考えると理解しやすいです。
良いエラー表示と悪いエラー表示
ここはとても重要です。良いエラー表示は、何が問題なのかを具体的に伝えます。悪いエラー表示は、ただ「エラーです」としか言わないものです。
- 良い例：「ToDo内容を入力してください。」
- 悪い例：「入力エラーです。」
良いエラー表示は、次にどうすればよいかがわかります。初心者の方は、エラー文を書くときに「ユーザーが次に何をすればよいかわかるか」を意識するとよいです。
空データ表示とは何か
次に学ぶのが空データ表示です。空データ表示とは、表示するデータが1件もないときに、そのことをわかりやすく伝える表示です。ToDoアプリなら、まだToDoが1件もない状態や、フィルターの結果何も表示されない状態がこれにあたります。
初心者の方は、データがないなら何も表示しなくてもよいのでは、と思うかもしれません。しかし、真っ白なリストだけが出ていると、「まだ何もない」のか「何か壊れている」のかがわかりません。そこで、「ToDoはまだありません」や「条件に合うToDoがありません」と表示することで、ユーザーは安心できます。
空データ表示は、アプリの親切さを大きく左右する重要なポイントです。
空データ表示の基本的な作り方
たとえば、表示関数の中で配列が空かどうかを確認して、空ならメッセージを出します。
function renderTodos(list) {
// 表示を空にする
todoList.innerHTML = "";
// データが空ならメッセージを表示する
if (list.length === 0) {
const li = document.createElement("li");
li.textContent = "ToDoはまだありません。";
todoList.appendChild(li);
return;
}
// データがある場合は通常表示する
list.forEach(function (todo) {
const li = document.createElement("li");
li.textContent = todo.text;
todoList.appendChild(li);
});
}このようにすると、何もない状態でも「今は空なのだ」とわかります。初心者の方は、「空のときにどう見えるか」も設計の一部だと理解しておくとよいです。
空データ表示で考えたい2種類の空
ここは少し深掘りしたい部分です。空データには実は2種類あります。
- 最初からデータが1件もない空
- 検索やフィルターの結果、条件に合うものがない空
この2つは、意味が違います。そのため、メッセージも変えるとより親切です。
- 最初から空なら「ToDoはまだありません。」
- 検索やフィルター結果が空なら「条件に合うToDoはありません。」
初心者の方は、空表示も状況ごとに意味が違うと理解できると、UI設計の感覚がぐっと育ちます。
ローディング表示とは何か
次に学ぶのがローディング表示です。ローディング表示とは、データを読み込んだり、少し時間のかかる処理をしている間に、「今処理中です」と伝える表示です。
今回の学習範囲では localStorage の読み込み自体はとても速く、実際にはローディングが目立たないことが多いです。しかし、学習としてローディング表示を知っておくことはとても大切です。なぜなら、今後API通信や大きなデータ読み込みを学ぶときに必ず必要になる考え方だからです。
初心者の方は、ローディング表示を「止まっているのではなく、動いていますと知らせる看板」と考えるとわかりやすいです。
ローディング表示の基本的な作り方
まず、HTMLにローディング表示用の要素を用意します。
<p id="loadingMessage" style="display: none;">読み込み中です...</p>そして、JavaScriptで表示したり非表示にしたりします。
// ローディング表示用の要素を取得する
const loadingMessage = document.getElementById("loadingMessage");
// ローディングを表示する
loadingMessage.style.display = "block";
// ローディングを隠す
loadingMessage.style.display = "none";学習用として、setTimeout() を使って擬似的に読み込み時間を作ると理解しやすいです。
// ローディングを表示する
loadingMessage.style.display = "block";
// 1秒後に表示処理を行う
setTimeout(function () {
renderTodos(todos);
// ローディングを隠す
loadingMessage.style.display = "none";
}, 1000);初心者の方は、ローディング表示を「本当に遅い処理のためだけのもの」と考えず、「ユーザーに処理中だと伝えるための仕組み」と理解するとよいです。
4つのUI改善をどうつなげるか
ここまで学んだ4つは、別々の知識ではありません。実際のアプリでは、すべてつながっています。
- 使いやすいフォームで入力しやすくする
- 入力ミスがあればエラー表示で知らせる
- データがなければ空データ表示で状況を伝える
- 処理中ならローディング表示で待つ理由を伝える
つまり、UI改善とは「ユーザーが今どこにいて、何をすればよいか、今何が起きているか」を伝える設計だと言えます。初心者の方は、この4つを別々に暗記するのではなく、「ユーザーへの案内の仕組み」としてまとめて理解するとよいです。
UI改善を取り入れたToDoアプリのテンプレート
ここでは、今回の学習内容をまとめて試せるテンプレートを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 54 UI改善</title>
<style>
/* エラーメッセージの色 */
.error {
color: red;
}
/* 空データメッセージの色 */
.empty {
color: gray;
}
/* ローディングメッセージの色 */
.loading {
color: blue;
}
</style>
</head>
<body>
<h2>ToDoアプリ UI改善版</h2>
<label for="todoInput">ToDo内容</label>
<input type="text" id="todoInput" placeholder="やることを入力してください">
<button id="addButton">追加</button>
<p id="errorMessage" class="error"></p>
<p id="loadingMessage" class="loading" style="display: none;">読み込み中です...</p>
<ul id="todoList"></ul>
<script>
// 必要な要素を取得する
const todoInput = document.getElementById("todoInput");
const addButton = document.getElementById("addButton");
const errorMessage = document.getElementById("errorMessage");
const loadingMessage = document.getElementById("loadingMessage");
const todoList = document.getElementById("todoList");
// ToDo データを入れる配列
let todos = [];
// ToDo を表示する関数
function renderTodos(list) {
// リストを空にする
todoList.innerHTML = "";
// データが空ならメッセージを表示する
if (list.length === 0) {
const li = document.createElement("li");
li.textContent = "ToDoはまだありません。";
li.classList.add("empty");
todoList.appendChild(li);
return;
}
// ToDo を順番に表示する
list.forEach(function (todo) {
const li = document.createElement("li");
li.textContent = todo.text;
todoList.appendChild(li);
});
}
// 追加ボタンの処理
addButton.addEventListener("click", function () {
// エラーメッセージを初期化する
errorMessage.textContent = "";
// 入力値を取得する
const text = todoInput.value.trim();
// 空欄ならエラー表示する
if (text === "") {
errorMessage.textContent = "ToDo内容を入力してください。";
return;
}
// ローディングを表示する
loadingMessage.style.display = "block";
// 擬似的な読み込み時間を作る
setTimeout(function () {
// ToDo を追加する
todos.push({ text: text });
// 表示を更新する
renderTodos(todos);
// ローディングを隠す
loadingMessage.style.display = "none";
// 入力欄を空にする
todoInput.value = "";
// 入力欄にカーソルを戻す
todoInput.focus();
}, 800);
});
// 初期表示
renderTodos(todos);
</script>
</body>
</html>このテンプレートには、今回の4つの要素がすべて入っています。
- ラベルとプレースホルダーつきの使いやすいフォーム
- 空欄入力時のエラー表示
- データがないときの空データ表示
- 追加処理中のローディング表示
初心者の方は、まずこれをそのまま動かして、「見た目と案内があるだけで使いやすさがかなり変わる」ことを体験すると理解しやすいです。
初心者が特に注意したいポイント
Day 54では、次の点を特に意識すると理解が深まりやすいです。
- UI改善は見た目のおしゃれさだけではありません。
- 使いやすいフォームは、ユーザーに入力方法を自然に伝えます。
- エラー表示は、何が悪いかと次に何をすればよいかを具体的に伝えることが大切です。
- 空データ表示は、何もない状態を不具合と誤解されないために重要です。
- ローディング表示は、処理中であることを知らせる安心材料になります。
特に重要なのは、「何も表示しない」ことは親切とは限らない、という点です。ユーザーは見えないことを勝手に想像してしまうため、必要な場面では明確に伝えることが大切です。
情報セキュリティの観点での注意
UI改善を進めるときでも、情報セキュリティの視点は大切です。たとえばエラーメッセージを出すときに、内部の詳しすぎる情報や不要なデータ内容まで表示しないように注意する必要があります。学習段階のToDoアプリでは大きな問題になりにくいですが、将来的に実際のサービスを作るときには「ユーザーに見せるべき情報」と「内部だけで扱う情報」を分ける意識が重要になります。
また、ローカル保存するデータの内容についても引き続き注意が必要です。使いやすさを上げても、保存内容が機密情報であってはいけません。初心者の方は、UI改善と安全性は両立して考えるものだと理解しておくとよいです。
Day 54のゴールを整理する
Day 54では、次のことができるようになっていれば十分です。
- 使いやすいフォームの条件を説明できる
- エラー表示の役割を説明できる
- 空データ表示の必要性を説明できる
- ローディング表示の役割を説明できる
- これら4つをToDoアプリに組み込める
- 機能だけでなく使いやすさも設計の一部だと理解している
ここまでできれば、Day 54としてはとても順調です。アプリの機能を作る段階から、使う人にとってわかりやすく整える段階へ進めています。
まとめ
Day 54では、第4フェーズ「ブラウザデータ保存」の発展として、UI改善を学びました。今回扱ったのは、使いやすいフォーム、エラー表示、空データ表示、ローディング表示の4つであり、どれも「ユーザーが迷わず安心して使えるようにするための工夫」でした。フォームは入力しやすく、役割がわかりやすいことが大切です。エラー表示は、何が問題かと次に何をすればよいかを具体的に伝える役割があります。空データ表示は、何もない状態を正しく伝えるために必要です。そしてローディング表示は、処理中であることを知らせてユーザーの不安を減らします。
特に重要なのは、UI改善は見た目を飾ることではなく、使う人への案内を増やすことだという点です。機能が正しく動いていても、何が起きているのかが伝わらなければ、使いやすいアプリにはなりません。逆に、丁寧な案内があるだけで、同じ機能でもずっとわかりやすく感じられます。
次に進む前に、今回のテンプレートを何も見ずにもう一度作り直してみるのがおすすめです。そのうえで、検索機能やフィルター機能にも空データ表示を追加したり、保存処理にもローディング風の表示を入れたりすると、UI改善の考え方がさらに自然に身につきやすくなります。