検索フォームに入力したキーワードをタグ化して表示し、そのキーワードをCookieに保存する

(Sample)

今回は、「検索フォームに入力したキーワードをタグ化して表示し、そのキーワードをCookieに保存する」というちょっと便利なフロントエンド機能をご紹介します！

検索機能付きWebアプリや、入力履歴を活かしたUX向上などにも活用できる実用的なテクニックです。コードもコンパクトなので、ぜひ仕組みを理解しておきましょう。

どんなことができるの？

このコードを使うと、以下のようなことができます：

• 入力フォームにキーワードを入力して「検索」ボタンを押す
• 入力キーワードがタグとして表示される
• タグをクリックするとGoogle検索が開く
• 入力したキーワードがCookieに保存され、再訪問時に自動で復元される！

構成と使用技術

検索フォームとイベント処理

HTML構造

<form id="searchForm">
  <input type="text" id="searchInput" />
  <button type="submit">検索して追加</button>
</form>

• #searchInputにキーワードを入力
• フォーム送信イベントにより処理開始

JavaScriptの流れ

document.querySelector("#searchForm").addEventListener("submit", function (event) {
  event.preventDefault();
  ...
});

• submitイベントを使ってボタンのクリックを検知
• event.preventDefault()でデフォルトの送信動作を無効化

タグ表示のロジック

function addTag(keyword) {
  const tag = document.createElement("span");
  tag.classList.add("tag");
  tag.textContent = keyword;
  tag.addEventListener("click", function () {
    window.open(`https://www.google.com/search?q=${encodeURIComponent(keyword)}`, "_blank");
  });
  tagContainer.appendChild(tag);
}

ポイント解説

• createElement("span")でタグ要素を生成
• addEventListener("click", ...)でクリック時にGoogle検索を別タブで実行
• tagContainer.appendChild(...)で表示エリアに追加

「クリックできる検索履歴」をビジュアル化しているわけです！

Cookieへの保存と取得

Cookieへ保存する処理

function saveKeywordToCookie(keyword) {
  let keywords = getKeywordsFromCookie();
  if (!keywords.includes(keyword)) {
    keywords.push(keyword);
    document.cookie = `keywords=${JSON.stringify(keywords)}; expires=...; path=/;`;
  }
}

• Cookieは「文字列」しか保存できないため、JSON.stringify()で配列を文字列に変換して保存しています。

Cookieから復元する処理

function getKeywordsFromCookie() {
  const cookie = document.cookie.split("; ").find((row) => row.startsWith("keywords="));
  return cookie ? JSON.parse(cookie.split("=")[1]) : [];
}

• Cookieの中身を分解して、keywords=という名前のデータを探し出し、再び配列に戻しています（JSON.parse）。

画面読み込み時にタグを再生成

document.addEventListener("DOMContentLoaded", loadKeywords);

これによって、ページを再読み込みしたときに、過去に保存されたキーワードタグが表示されるようになります。

まさに「見える履歴」です！

よくある疑問を解決！

Q1. Cookieって何日間保存されるの？

→ 以下の部分で30日後の日時を設定しています。

date.setTime(date.getTime() + 30 * 24 * 60 * 60 * 1000);

Q2. Cookieに保存できるデータの上限は？

→ 1Cookieあたり約4KBが目安です。それを超えると保存できなくなります。

改善・応用ポイント

今後の学習ステップ

今回の実装をベースに、以下のような発展が可能です。

最後に

今回のような「検索 + タグ + Cookie」の組み合わせは、ユーザーの操作を見える化し、便利にするUI/UXの基本です。

シンプルな機能でも、技術の組み合わせ次第でとても実用的なものが作れます。コードを一つ一つ読み解いて、ぜひ実装に挑戦してみてください！