では、indexOf() と lastIndexOf() を「実際のアプリでどう使えるのか？」を、シンプルな TODO リスト例 でやさしく解説していきましょう。
目標
「同じタスクが二重登録されないようにする」や「特定のタスクを削除する」など、
実際のアプリ開発でよくあるケースで indexOf() がどう役立つかを体験します。
例：シンプルな TODO リスト（配列で管理）
let todos = ['買い物に行く', '宿題をする', '部屋を片付ける'];
これを操作して、
- ✅ 新しいタスクを追加
- 🗑️ 特定のタスクを削除
- ⚠️ 重複登録を防ぐ
の3つを作っていきます。
1. 新しいタスクを追加する（重複チェック付き）
function addTask(task) {
// すでに存在するかチェック（-1 なら存在しない）
if (todos.indexOf(task) !== -1) {
console.log('⚠️ そのタスクはすでに登録されています');
return;
}
todos.push(task);
console.log('✅ タスクを追加しました:', task);
}
addTask('ゴミを出す');
addTask('買い物に行く'); // ← 既にあるので追加されない
console.log(todos);
実行結果：
✅ タスクを追加しました: ゴミを出す
⚠️ そのタスクはすでに登録されています
['買い物に行く', '宿題をする', '部屋を片付ける', 'ゴミを出す']
🔍 ここでのポイント
indexOf(task)は配列の中にtaskがあるかを調べる。-1なら「存在しない」。!== -1なら「存在する」。
これで同じタスクを二重登録するのを防げます。
2. 特定のタスクを削除する
function deleteTask(task) {
const index = todos.indexOf(task);
if (index === -1) {
console.log('⚠️ そのタスクは見つかりません');
return;
}
// index の位置から 1 件削除
todos.splice(index, 1);
console.log('🗑️ タスクを削除しました:', task);
}
deleteTask('宿題をする');
deleteTask('ランニング'); // 存在しない
console.log(todos);
実行結果：
🗑️ タスクを削除しました: 宿題をする
⚠️ そのタスクは見つかりません
['買い物に行く', '部屋を片付ける', 'ゴミを出す']
🔍 ここでのポイント
indexOf()で「削除したい要素の位置」を探す。splice(位置, 個数)で削除する。- 存在しない場合（
-1）には削除しないように条件分岐。
3. 同じ内容のタスクが複数ある場合（lastIndexOf）
もし配列に同じ名前のタスクが複数ある場合、
最後に登録したタスクを削除したいときは lastIndexOf() が便利です。
todos = ['掃除', '買い物', '掃除', '洗濯'];
function deleteLast(task) {
const index = todos.lastIndexOf(task); // 最後に出た位置を取得
if (index === -1) {
console.log('⚠️ 見つかりません');
return;
}
todos.splice(index, 1);
console.log('🗑️ 最後の', task, 'を削除しました');
}
deleteLast('掃除');
console.log(todos);
実行結果：
🗑️ 最後の 掃除 を削除しました
['掃除', '買い物', '洗濯']
4. 実際のアプリUIとつなげるとこうなる（イメージ）
<input id="taskInput" placeholder="やることを入力">
<button onclick="addTaskFromInput()">追加</button>
<ul id="list"></ul>
<script>
let todos = [];
function addTaskFromInput() {
const input = document.getElementById('taskInput');
const task = input.value.trim();
if (!task) return;
if (todos.indexOf(task) !== -1) {
alert('そのタスクはすでにあります！');
return;
}
todos.push(task);
render();
input.value = '';
}
function render() {
const list = document.getElementById('list');
list.innerHTML = todos.map(t => `<li>${t}</li>`).join('');
}
</script>
✨ これをブラウザで開くと、
タスクを追加するたびに <ul> に表示され、
同じ内容を入れたときにはアラートが出ます。
まさに indexOf() がデータ重複チェックの中心で活躍しています。
まとめ
| 目的 | メソッド | 使い方のポイント |
|---|---|---|
| 重複登録を防ぐ | indexOf() | !== -1 で存在チェック |
| 特定タスクを削除 | indexOf() + splice() | 見つからなければ何もしない |
| 最後の重複を削除 | lastIndexOf() | 末尾から検索する |