Zenn
⌨️

HonoやNext.jsのドキュメントでよく見る `Cmd + K` を調べてみた

2024/12/13に公開
Next.js
React
検索機能
cmdk
tech

最近、HonoやNext.jsのドキュメントで見かける Cmd + K ショートカットありますよね。
これらのドキュメントでは、Cmd + K を押すことで検索バーが表示され、スムーズに目的のページにアクセスできるようになっています。この機能を自分のプロジェクトでも実装したいと思い調べてみたところ、便利なライブラリを2つ見つけたので紹介します。

この記事ではこれらのライブラリを紹介し、Next.jsを使って Cmd + K の検索バーを実装する方法を解説します。

cmdk とは？

https://github.com/pacocoursey/cmdk

cmdk は、キーボードショートカットを使った検索バーを簡単に実装できるReactコンポーネントライブラリです。以下の特徴があります：

  • 軽量で高速
  • シンプルなAPI
  • カスタマイズ可能

例えば、以下のようなコードで検索バーを実装できます：

import { Command } from "cmdk";

export default function SearchBar() {
  return (
    <Command>
      <Command.Input placeholder="検索..." />
      <Command.List>
        <Command.Item>オプション1</Command.Item>
        <Command.Item>オプション2</Command.Item>
        <Command.Item>オプション3</Command.Item>
      </Command.List>
    </Command>
  );
}

実際の挙動

cmdkを利用すると、検索バーにキーワードを入力しながら素早く選択肢を絞り込むことが可能です。また、キーボード操作に最適化されており、エンドユーザーにとって非常に使いやすいUIを提供できます。

react-cmdk とは？

https://github.com/albingroen/react-cmdk

react-cmdk は、cmdkの設計にインスパイアされたライブラリで、React環境で使いやすいAPIを提供します。cmdkと似ていますが、以下の特徴があります：

  • シンプルなPropsベースの構成
  • 追加のスタイリングオプション
  • 状態管理がしやすい

以下は基本的な使用例です：

import { Cmdk } from "react-cmdk";
import { useState } from "react";

export default function SearchBar() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>検索バーを開く</button>
      <Cmdk open={open} onChangeOpen={setOpen}>
        <Cmdk.Search placeholder="検索..." />
        <Cmdk.Results>
          <Cmdk.Result>オプション1</Cmdk.Result>
          <Cmdk.Result>オプション2</Cmdk.Result>
        </Cmdk.Results>
      </Cmdk>
    </>
  );
}

Next.jsで Cmd + K 機能を実装してみる

1. プロジェクトのセットアップ

以下のコマンドでNext.jsのプロジェクトを作成します：

npx create-next-app@latest cmdk-example
cd cmdk-example
npm install cmdk

2. 検索バーコンポーネントの作成

components/SearchBar.js ファイルを作成し、以下のコードを追加します：

import { Command } from "cmdk";
import { useState } from "react";

export default function SearchBar() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)} className="fixed bottom-5 right-5 bg-blue-500 text-white py-2 px-4 rounded shadow">⌘K</button>
      {open && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" onClick={() => setOpen(false)}>
          <Command className="bg-white rounded-lg shadow-lg w-96 p-4">
            <Command.Input placeholder="検索..." className="w-full border border-gray-300 rounded p-2 mb-4" />
            <Command.List>
              <Command.Item className="cursor-pointer p-2 hover:bg-gray-100">Next.jsの使い方</Command.Item>
              <Command.Item className="cursor-pointer p-2 hover:bg-gray-100">Reactの基本</Command.Item>
              <Command.Item className="cursor-pointer p-2 hover:bg-gray-100">Node.js入門</Command.Item>
            </Command.List>
          </Command>
        </div>
      )}
    </>
  );
}

3. ページへの組み込み

次に、pages/index.js に検索バーを組み込みます：

import SearchBar from "../components/SearchBar";

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-50">
      <h1 className="text-center text-2xl font-bold py-8">Cmd + K 検索</h1>
      <SearchBar />
    </div>
  );
}

おわりに

cmdk や react-cmdk を使うと、ユーザー体験を大幅に向上させる検索バーを簡単に実装できます。HonoやNext.jsのドキュメントのような洗練されたUIを目指している方は、ぜひこれらのライブラリを試してみてください。

ほかにも Cmd+K によるサジェストフォームならこれ！というライブラリや実装があれば、ぜひコメントで教えてください！

Discussion