(Sample)
Webアプリケーションの入力フォームなどで、「選択肢が多すぎて選ぶのが大変」と感じたことはありませんか？ ユーザーが頻繁に選択する項目をリストの上位に表示させることで、UX（ユーザーエクスペリエンス）を大幅に向上させることができます。
今回は、JavaScriptのlocalStorageを活用して、選択回数に応じて項目を動的に並び替えるドロップダウンリストの作成方法を解説します。
1. 実現したい機能
- 項目の動的表示: 選択肢をJavaScriptで生成し、リストを表示する。
- 頻度によるソート: 選択された回数をカウントし、回数が多い順に並び替える。
- データの永続化: ブラウザを閉じてもカウントが消えないよう、
localStorageに保存する。
2. サンプルコード
まずは、全体のコードを確認しましょう。HTML、CSS、JavaScriptを1つのファイルにまとめた構成です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頻度順ドロップダウンリスト</title>
<style>
/* カスタムドロップダウンの基本スタイル */
.custom-dropdown {
position: relative;
display: inline-block;
width: 250px;
}
.dropdown-button {
width: 100%;
padding: 10px 15px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
text-align: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
width: 100%;
max-height: 200px;
overflow-y: auto;
z-index: 1;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.dropdown-content div {
padding: 10px 15px;
cursor: pointer;
}
.dropdown-content div:hover { background-color: #e9e9e9; }
.show { display: block; }
</style>
</head>
<body>
<h2>よく使う項目が上にくるドロップダウン</h2>
<div class="custom-dropdown">
<button class="dropdown-button" id="dropdownButton">選択してください...</button>
<div class="dropdown-content" id="dropdownContent"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dropdownButton = document.getElementById('dropdownButton');
const dropdownContent = document.getElementById('dropdownContent');
const localStorageKey = 'selectionFrequencies';
const initialOptions = ['りんご', 'バナナ', 'みかん', 'いちご', 'ぶどう', 'もも'];
// データの読み込み
const loadFrequencies = () => {
const storedData = localStorage.getItem(localStorageKey);
return storedData ? JSON.parse(storedData) : initialOptions.map(option => ({ name: option, count: 0 }));
};
// データの保存
const saveFrequencies = (data) => {
localStorage.setItem(localStorageKey, JSON.stringify(data));
};
// ドロップダウンの描画
const renderDropdown = () => {
let frequencies = loadFrequencies();
frequencies.sort((a, b) => b.count - a.count); // 降順ソート
dropdownContent.innerHTML = '';
frequencies.forEach(item => {
const div = document.createElement('div');
div.textContent = item.name;
div.addEventListener('click', () => handleItemClick(item.name));
dropdownContent.appendChild(div);
});
};
// 選択時の処理
const handleItemClick = (selectedValue) => {
dropdownButton.textContent = selectedValue;
let frequencies = loadFrequencies();
const selectedItem = frequencies.find(item => item.name === selectedValue);
if (selectedItem) selectedItem.count++;
saveFrequencies(frequencies);
dropdownContent.classList.remove('show');
};
dropdownButton.addEventListener('click', (e) => {
e.stopPropagation();
renderDropdown();
dropdownContent.classList.toggle('show');
});
window.addEventListener('click', () => dropdownContent.classList.remove('show'));
});
</script>
</body>
</html>3. 実装のポイント
① データの管理構造
選択肢をただの配列ではなく、「名前」と「カウント数」を持つオブジェクトの配列として管理するのがポイントです。
// 管理データのイメージ
[
{ "name": "りんご", "count": 5 },
{ "name": "バナナ", "count": 2 },
...
]
② JavaScriptによる動的ソート
Array.prototype.sort()メソッドを使用して、クリックされた回数（count）が多い順にデータを並び替えています。
frequencies.sort((a, b) => b.count - a.count);
これにより、renderDropdown関数が呼ばれるたびに、常に最新の頻度順でリストが再生成されます。
③ localStorageによるデータの保持
ブラウザ標準の保存機能であるlocalStorageを使用しています。
- 保存時:
JSON.stringify()で文字列に変換して保存します。 - 読み込み時:
JSON.parse()でオブジェクトに戻して利用します。
④ UIの制御
通常の<select>タグではスタイリングに限界があるため、<div>と<button>を組み合わせた「カスタムドロップダウン」形式を採用しています。 dropdownButtonがクリックされるたびに.showクラスを付け外しすることで、表示・非表示を切り替えています。
4. まとめ
今回の実装では、以下の技術要素を組み合わせました。
- DOM操作: 要素の動的生成とクラスの切り替え
- イベントハンドリング: クリックイベントの検知と伝播の停止
- Web Storage API: ブラウザへのデータ保存
- 配列操作:
sortやfindによるデータの加工
この仕組みを応用すれば、検索履歴の表示や、よく使うメニューのパーソナライズなど、様々なシーンでユーザーの利便性を高めることができます。ぜひ自身のプロジェクトでも活用してみてください。